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