| @@ -51,6 +51,7 @@ | |||
| "@dcloudio/uni-mp-toutiao": "3.0.0-3080720230703001", | |||
| "@dcloudio/uni-mp-weixin": "3.0.0-3080720230703001", | |||
| "@dcloudio/uni-quickapp-webview": "3.0.0-3080720230703001", | |||
| "browser-image-compression": "^2.0.2", | |||
| "clipboard": "^2.0.11", | |||
| "dayjs": "^1.11.9", | |||
| "pinia": "2.0.33", | |||
| @@ -69,4 +70,4 @@ | |||
| "sass-loader": "13.2.2", | |||
| "vite": "4.1.4" | |||
| } | |||
| } | |||
| } | |||
| @@ -76,19 +76,46 @@ | |||
| import { ref, reactive } from "vue"; | |||
| import { voiceTotalApi } from "../../api/login.js"; | |||
| import { userInfoModules } from "@/store/modules/userInfo"; | |||
| import imageCompression from "browser-image-compression"; //压缩图片插件 | |||
| //#endregion | |||
| const userInfoModulesPinia = userInfoModules(); | |||
| //#region 头像 | |||
| const avatarUrl = ref(null); | |||
| function chooseAvatar(params) { | |||
| uni.chooseImage({ | |||
| count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片 | |||
| success: (res) => { | |||
| const tempFilePaths = res.tempFilePaths; | |||
| avatarUrl.value = tempFilePaths[0]; | |||
| success: async (res) => { | |||
| // avatarUrl.value = res.tempFilePaths[0]; | |||
| // TODO: 在这里处理图片上传逻辑,你可以调用上传接口将图片上传到服务器 | |||
| // 示例代码: | |||
| // 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) => { | |||
| console.error("选择图片失败", err); | |||
| @@ -2,7 +2,9 @@ | |||
| <view class="page"> | |||
| <!-- 轮播图 --> | |||
| <u-swiper | |||
| indicatorMode="line" | |||
| indicator | |||
| indicatorMode="dot" | |||
| :autoplay="false" | |||
| :list="swiperList" | |||
| @change="" | |||
| @click="click" | |||
| @@ -15,7 +17,7 @@ | |||
| type="primary" | |||
| text="下载照片" | |||
| color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||
| @click="" | |||
| @click="downloadImg" | |||
| ></up-button> | |||
| </view> | |||
| <view class="btnBox"> | |||
| @@ -53,18 +55,38 @@ | |||
| <script setup> | |||
| //#region 导入 | |||
| import { ref, reactive } from "vue"; | |||
| import { userInfoModules } from "@/store/modules/userInfo"; | |||
| //#endregion | |||
| const userInfoModulesPinia = userInfoModules(); | |||
| //#region 轮播图 | |||
| const swiperList = ref([ | |||
| "https://uiadmin.net/uview-plus/common/logo.png", | |||
| "../../assets/img/img1.jpg", | |||
| "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 --------------------- | |||
| //#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 分享 | |||
| function share() { | |||
| uni.share({ | |||
| @@ -139,6 +161,16 @@ function bueCoin() { | |||
| height: 700rpx !important; | |||
| } | |||
| } | |||
| // h5 | |||
| :deep(.u-swiper__wrapper) { | |||
| width: 100%; | |||
| height: 700rpx !important; | |||
| image { | |||
| width: 100%; | |||
| height: 700rpx !important; | |||
| } | |||
| } | |||
| } | |||
| .bottomBox { | |||
| width: 100%; | |||
| @@ -54,6 +54,7 @@ | |||
| import { ref, reactive } from "vue"; | |||
| import { voiceTotalApi } from "../../api/login.js"; | |||
| import { userInfoModules } from "@/store/modules/userInfo"; | |||
| import imageCompression from "browser-image-compression"; //压缩图片插件 | |||
| //#endregion | |||
| const userInfoModulesPinia = userInfoModules(); | |||
| @@ -64,14 +65,30 @@ function chooseImage() { | |||
| // 调用uni.chooseImage方法选择图片 | |||
| uni.chooseImage({ | |||
| 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) => { | |||
| console.error("选择图片失败", err); | |||
| @@ -91,7 +108,7 @@ function toCloseStyle() { | |||
| }); | |||
| } | |||
| } | |||
| console.log(userInfoModulesPinia.hostSystem, "System"); | |||
| //#endregion --------------------- | |||
| //#region | |||
| @@ -2439,6 +2439,13 @@ braces@^3.0.2, braces@~3.0.2: | |||
| dependencies: | |||
| 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: | |||
| version "4.21.10" | |||
| 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" | |||
| 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: | |||
| version "1.1.2" | |||
| resolved "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" | |||