|
|
@@ -1,6 +1,7 @@ |
|
|
|
<template>
|
|
|
|
<view class="page">
|
|
|
|
<view class="title imgContenBox">
|
|
|
|
<!-- 提示文字 -->
|
|
|
|
<image
|
|
|
|
v-show="uploadState == 1"
|
|
|
|
src="../../assets/text/uploadText.png"
|
|
|
@@ -13,9 +14,23 @@ |
|
|
|
src="../../assets/text/uploadText3.png"
|
|
|
|
mode="aspectFit"
|
|
|
|
/></view>
|
|
|
|
<!-- 上传图片和展示 -->
|
|
|
|
<view class="uploadBox imgContenBox scan">
|
|
|
|
<view class="scan-line"></view>
|
|
|
|
<image src="../../assets/icon/uploadImg.png" alt="" />
|
|
|
|
<image
|
|
|
|
v-show="!showImgUrl"
|
|
|
|
src="../../assets/icon/uploadImg.png"
|
|
|
|
alt=""
|
|
|
|
@click="chooseImage"
|
|
|
|
/>
|
|
|
|
<image
|
|
|
|
class="showImg"
|
|
|
|
v-show="showImgUrl"
|
|
|
|
:src="showImgUrl"
|
|
|
|
alt=""
|
|
|
|
@click="chooseImage"
|
|
|
|
mode="aspectFit"
|
|
|
|
/>
|
|
|
|
</view>
|
|
|
|
<up-button
|
|
|
|
type="primary"
|
|
|
@@ -39,7 +54,26 @@ import { voiceTotalApi } from "../../api/login.js"; |
|
|
|
//#endregion
|
|
|
|
|
|
|
|
//#region 上传
|
|
|
|
const uploadState = ref(3);
|
|
|
|
const uploadState = ref(3); //上传状态
|
|
|
|
const showImgUrl = ref(null);
|
|
|
|
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]);
|
|
|
|
},
|
|
|
|
fail: (err) => {
|
|
|
|
console.error("选择图片失败", err);
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
//#endregion ---------------------
|
|
|
|
|
|
|
@@ -58,8 +92,9 @@ const uploadState = ref(3); |
|
|
|
}
|
|
|
|
}
|
|
|
|
.uploadBox {
|
|
|
|
width: 80%;
|
|
|
|
aspect-ratio: 1/1;
|
|
|
|
position: relative;
|
|
|
|
width: 600rpx;
|
|
|
|
height: 600rpx;
|
|
|
|
border: 5rpx solid #000;
|
|
|
|
border-radius: 50rpx;
|
|
|
|
margin-bottom: 50rpx;
|
|
|
@@ -67,9 +102,21 @@ const uploadState = ref(3); |
|
|
|
max-width: 30%;
|
|
|
|
max-height: 30%;
|
|
|
|
}
|
|
|
|
.showImg {
|
|
|
|
max-width: 90%;
|
|
|
|
max-height: 90%;
|
|
|
|
}
|
|
|
|
.u-upload {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
width: 600rpx;
|
|
|
|
height: 600rpx;
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 扫描
|
|
|
|
.scan {
|
|
|
|
position: relative;
|
|
|
|
overflow: hidden;
|
|
|
|
.scan-line {
|
|
|
|
position: absolute;
|
|
|
@@ -80,6 +127,7 @@ const uploadState = ref(3); |
|
|
|
background: linear-gradient(180deg, rgba(0, 255, 51, 0) 50%, #00ff33 300%);
|
|
|
|
border-bottom: 2px solid #00ff33;
|
|
|
|
animation: scanAnimation 2s linear infinite;
|
|
|
|
z-index: 9;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes scanAnimation {
|
|
|
@@ -91,6 +139,7 @@ const uploadState = ref(3); |
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 上传
|
|
|
|
.u-button {
|
|
|
|
width: 70% !important;
|
|
|
|
}
|
|
|
|