@@ -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" | ||||