| @@ -51,6 +51,7 @@ | |||||
| "@dcloudio/uni-mp-toutiao": "3.0.0-3080720230703001", | "@dcloudio/uni-mp-toutiao": "3.0.0-3080720230703001", | ||||
| "@dcloudio/uni-mp-weixin": "3.0.0-3080720230703001", | "@dcloudio/uni-mp-weixin": "3.0.0-3080720230703001", | ||||
| "@dcloudio/uni-quickapp-webview": "3.0.0-3080720230703001", | "@dcloudio/uni-quickapp-webview": "3.0.0-3080720230703001", | ||||
| "browser-image-compression": "^2.0.2", | |||||
| "clipboard": "^2.0.11", | "clipboard": "^2.0.11", | ||||
| "dayjs": "^1.11.9", | "dayjs": "^1.11.9", | ||||
| "pinia": "2.0.33", | "pinia": "2.0.33", | ||||
| @@ -69,4 +70,4 @@ | |||||
| "sass-loader": "13.2.2", | "sass-loader": "13.2.2", | ||||
| "vite": "4.1.4" | "vite": "4.1.4" | ||||
| } | } | ||||
| } | |||||
| } | |||||
| @@ -76,19 +76,46 @@ | |||||
| import { ref, reactive } from "vue"; | import { ref, reactive } from "vue"; | ||||
| import { voiceTotalApi } from "../../api/login.js"; | import { voiceTotalApi } from "../../api/login.js"; | ||||
| import { userInfoModules } from "@/store/modules/userInfo"; | |||||
| import imageCompression from "browser-image-compression"; //压缩图片插件 | |||||
| //#endregion | //#endregion | ||||
| const userInfoModulesPinia = userInfoModules(); | |||||
| //#region 头像 | //#region 头像 | ||||
| const avatarUrl = ref(null); | const avatarUrl = ref(null); | ||||
| function chooseAvatar(params) { | function chooseAvatar(params) { | ||||
| uni.chooseImage({ | uni.chooseImage({ | ||||
| count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片 | count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片 | ||||
| success: (res) => { | |||||
| const tempFilePaths = res.tempFilePaths; | |||||
| avatarUrl.value = tempFilePaths[0]; | |||||
| success: async (res) => { | |||||
| // avatarUrl.value = res.tempFilePaths[0]; | |||||
| // TODO: 在这里处理图片上传逻辑,你可以调用上传接口将图片上传到服务器 | // TODO: 在这里处理图片上传逻辑,你可以调用上传接口将图片上传到服务器 | ||||
| // 示例代码: | // 示例代码: | ||||
| // uploadImageToServer(tempFilePaths[0]); | // uploadImageToServer(tempFilePaths[0]); | ||||
| // 图片压缩 | |||||
| console.log(res.tempFiles[0].size); | |||||
| if (userInfoModulesPinia.platForm != 1) { | |||||
| uni.compressImage({ | |||||
| src: res.tempFilePaths[0], | |||||
| quality: 20, | |||||
| success: (res2) => { | |||||
| avatarUrl.value = res2.tempFilePath; | |||||
| console.log(res2.tempFilePath); | |||||
| }, | |||||
| }); | |||||
| } else { | |||||
| const options = { | |||||
| maxSizeMB: 2, // 最大压缩大小为 4MB | |||||
| useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能 | |||||
| }; | |||||
| const compressedFile = await imageCompression( | |||||
| res.tempFiles[0], | |||||
| options | |||||
| ); | |||||
| //compressedFile是一个blob对象 | |||||
| avatarUrl.value = URL.createObjectURL(compressedFile); | |||||
| console.log(compressedFile); | |||||
| // avatarUrl.value = compressedFile; | |||||
| console.log("压缩图片h5"); | |||||
| } | |||||
| }, | }, | ||||
| fail: (err) => { | fail: (err) => { | ||||
| console.error("选择图片失败", err); | console.error("选择图片失败", err); | ||||
| @@ -2,7 +2,9 @@ | |||||
| <view class="page"> | <view class="page"> | ||||
| <!-- 轮播图 --> | <!-- 轮播图 --> | ||||
| <u-swiper | <u-swiper | ||||
| indicatorMode="line" | |||||
| indicator | |||||
| indicatorMode="dot" | |||||
| :autoplay="false" | |||||
| :list="swiperList" | :list="swiperList" | ||||
| @change="" | @change="" | ||||
| @click="click" | @click="click" | ||||
| @@ -15,7 +17,7 @@ | |||||
| type="primary" | type="primary" | ||||
| text="下载照片" | text="下载照片" | ||||
| color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | ||||
| @click="" | |||||
| @click="downloadImg" | |||||
| ></up-button> | ></up-button> | ||||
| </view> | </view> | ||||
| <view class="btnBox"> | <view class="btnBox"> | ||||
| @@ -53,18 +55,38 @@ | |||||
| <script setup> | <script setup> | ||||
| //#region 导入 | //#region 导入 | ||||
| import { ref, reactive } from "vue"; | import { ref, reactive } from "vue"; | ||||
| import { userInfoModules } from "@/store/modules/userInfo"; | |||||
| //#endregion | //#endregion | ||||
| const userInfoModulesPinia = userInfoModules(); | |||||
| //#region 轮播图 | //#region 轮播图 | ||||
| const swiperList = ref([ | const swiperList = ref([ | ||||
| "https://uiadmin.net/uview-plus/common/logo.png", | "https://uiadmin.net/uview-plus/common/logo.png", | ||||
| "../../assets/img/img1.jpg", | |||||
| "https://uiadmin.net/uview-plus/common/logo.png", | "https://uiadmin.net/uview-plus/common/logo.png", | ||||
| "../../assets/img/img1.jpg", | |||||
| "https://uiadmin.net/uview-plus/common/logo.png", | |||||
| "https://uiadmin.net/uview-plus/common/logo.png", | |||||
| ]); | ]); | ||||
| //#endregion --------------------- | //#endregion --------------------- | ||||
| //#region 下载 | |||||
| function downloadImg() { | |||||
| if (userInfoModulesPinia.platForm != 1) { | |||||
| uni.saveImageToPhotosAlbum({ | |||||
| filePath: "https://uiadmin.net/uview-plus/common/logo.png", | |||||
| success: function () { | |||||
| console.log("save success"); | |||||
| }, | |||||
| }); | |||||
| } else { | |||||
| const link = document.createElement("a"); | |||||
| link.href = "https://uiadmin.net/uview-plus/common/logo.png"; | |||||
| link.download = "image.jpg"; | |||||
| // document.body.appendChild(link); | |||||
| link.click(); | |||||
| // document.body.removeChild(link); | |||||
| } | |||||
| } | |||||
| //#endregion --------------------- | |||||
| //#region 分享 | //#region 分享 | ||||
| function share() { | function share() { | ||||
| uni.share({ | uni.share({ | ||||
| @@ -139,6 +161,16 @@ function bueCoin() { | |||||
| height: 700rpx !important; | height: 700rpx !important; | ||||
| } | } | ||||
| } | } | ||||
| // h5 | |||||
| :deep(.u-swiper__wrapper) { | |||||
| width: 100%; | |||||
| height: 700rpx !important; | |||||
| image { | |||||
| width: 100%; | |||||
| height: 700rpx !important; | |||||
| } | |||||
| } | |||||
| } | } | ||||
| .bottomBox { | .bottomBox { | ||||
| width: 100%; | width: 100%; | ||||
| @@ -54,6 +54,7 @@ | |||||
| import { ref, reactive } from "vue"; | import { ref, reactive } from "vue"; | ||||
| import { voiceTotalApi } from "../../api/login.js"; | import { voiceTotalApi } from "../../api/login.js"; | ||||
| import { userInfoModules } from "@/store/modules/userInfo"; | import { userInfoModules } from "@/store/modules/userInfo"; | ||||
| import imageCompression from "browser-image-compression"; //压缩图片插件 | |||||
| //#endregion | //#endregion | ||||
| const userInfoModulesPinia = userInfoModules(); | const userInfoModulesPinia = userInfoModules(); | ||||
| @@ -64,14 +65,30 @@ function chooseImage() { | |||||
| // 调用uni.chooseImage方法选择图片 | // 调用uni.chooseImage方法选择图片 | ||||
| uni.chooseImage({ | uni.chooseImage({ | ||||
| count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片 | count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片 | ||||
| success: (res) => { | |||||
| // 选择成功,返回的res.tempFilePaths是一个数组,包含选择的图片的临时文件路径 | |||||
| const tempFilePaths = res.tempFilePaths; | |||||
| console.log(tempFilePaths); | |||||
| showImgUrl.value = tempFilePaths[0]; | |||||
| // TODO: 在这里处理图片上传逻辑,你可以调用上传接口将图片上传到服务器 | |||||
| // 示例代码: | |||||
| // uploadImageToServer(tempFilePaths[0]); | |||||
| success: async (res) => { | |||||
| // 图片压缩 | |||||
| console.log(res.tempFiles[0].size); | |||||
| if (userInfoModulesPinia.platForm != 1) { | |||||
| uni.compressImage({ | |||||
| src: res.tempFilePaths[0], | |||||
| quality: 20, | |||||
| success: (res2) => { | |||||
| showImgUrl.value = res2.tempFilePath; | |||||
| console.log(res2.tempFilePath); | |||||
| }, | |||||
| }); | |||||
| } else { | |||||
| const options = { | |||||
| maxSizeMB: 2, // 最大压缩大小为 4MB | |||||
| useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能 | |||||
| }; | |||||
| const compressedFile = await imageCompression( | |||||
| res.tempFiles[0], | |||||
| options | |||||
| ); | |||||
| //compressedFile是一个blob对象 | |||||
| showImgUrl.value = URL.createObjectURL(compressedFile); | |||||
| } | |||||
| }, | }, | ||||
| fail: (err) => { | fail: (err) => { | ||||
| console.error("选择图片失败", err); | console.error("选择图片失败", err); | ||||
| @@ -91,7 +108,7 @@ function toCloseStyle() { | |||||
| }); | }); | ||||
| } | } | ||||
| } | } | ||||
| console.log(userInfoModulesPinia.hostSystem, "System"); | |||||
| //#endregion --------------------- | //#endregion --------------------- | ||||
| //#region | //#region | ||||
| @@ -2439,6 +2439,13 @@ braces@^3.0.2, braces@~3.0.2: | |||||
| dependencies: | dependencies: | ||||
| fill-range "^7.0.1" | fill-range "^7.0.1" | ||||
| browser-image-compression@^2.0.2: | |||||
| version "2.0.2" | |||||
| resolved "https://registry.npmmirror.com/browser-image-compression/-/browser-image-compression-2.0.2.tgz#4d5ef8882e9e471d6d923715ceb9034499d14eaa" | |||||
| integrity sha512-pBLlQyUf6yB8SmmngrcOw3EoS4RpQ1BcylI3T9Yqn7+4nrQTXJD4sJDe5ODnJdrvNMaio5OicFo75rDyJD2Ucw== | |||||
| dependencies: | |||||
| uzip "0.20201231.0" | |||||
| browserslist@^4.21.5, browserslist@^4.21.9: | browserslist@^4.21.5, browserslist@^4.21.9: | ||||
| version "4.21.10" | version "4.21.10" | ||||
| resolved "https://registry.npmmirror.com/browserslist/-/browserslist-4.21.10.tgz#dbbac576628c13d3b2231332cb2ec5a46e015bb0" | resolved "https://registry.npmmirror.com/browserslist/-/browserslist-4.21.10.tgz#dbbac576628c13d3b2231332cb2ec5a46e015bb0" | ||||
| @@ -4041,6 +4048,11 @@ uview-plus@^3.1.34: | |||||
| clipboard "^2.0.11" | clipboard "^2.0.11" | ||||
| dayjs "^1.11.3" | dayjs "^1.11.3" | ||||
| uzip@0.20201231.0: | |||||
| version "0.20201231.0" | |||||
| resolved "https://registry.npmmirror.com/uzip/-/uzip-0.20201231.0.tgz#9e64b065b9a8ebf26eb7583fe8e77e1d9a15ed14" | |||||
| integrity sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng== | |||||
| vary@~1.1.2: | vary@~1.1.2: | ||||
| version "1.1.2" | version "1.1.2" | ||||
| resolved "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" | resolved "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" | ||||