| @@ -30,7 +30,7 @@ | |||
| </div> | |||
| <div v-if="isSuccess"> | |||
| <div class="selectImg"> | |||
| <div class="selectImg" @click="uploadImg"> | |||
| <img src="../../assets/img/selectImg.png" /> | |||
| <div class="uploadText">上传照片</div> | |||
| </div> | |||
| @@ -53,22 +53,20 @@ | |||
| ></canvas> | |||
| <div v-if="isSuccess" class="preview"> | |||
| <img :src="imgSrc" /> | |||
| <img v-if="!isUpload" class="fromCamera" :src="CimgSrc" /> | |||
| <img v-if="isUpload" class="fromUpload" :src="UimgSrc" /> | |||
| </div> | |||
| </div> | |||
| <!-- Top section --> | |||
| <u-overlay | |||
| class="overlay" | |||
| :show="showQrCode" | |||
| @click="showQrCode = false" | |||
| opacity="0.9" | |||
| > | |||
| <u-overlay class="overlay" :show="showQrCode" opacity="0.9"> | |||
| <view class="content"> | |||
| <view class="imageBox"> | |||
| <image :src="QRCodeUrl" mode="scaleToFill" /> | |||
| </view> | |||
| <text>打开微信扫码上传照片</text> | |||
| <view class="orangeBtn" style="margin-top: 100rpx">取 消</view> | |||
| <view class="orangeBtn" style="margin-top: 100rpx" @click="cancelUplaod" | |||
| >取 消</view | |||
| > | |||
| </view> | |||
| </u-overlay> | |||
| </div> | |||
| @@ -80,9 +78,12 @@ import { onLoad, onShow, onUnload } from "@dcloudio/uni-app"; | |||
| import { getImageQrcode, findImage } from "../../api/camera.js"; | |||
| let imgSrc = ref(""); | |||
| let CimgSrc = ref(""); // 相机拍照的图片路径,上传前需校验 | |||
| let UimgSrc = ref(""); // 用户上传的图片路径,上传无需校验 | |||
| let isSuccess = ref(false); | |||
| let isShowCanvas = ref(true); | |||
| let isUpload = ref(false); | |||
| let modelUrl = ref(""); | |||
| let QRCodeUrl = ref(""); | |||
| @@ -157,15 +158,37 @@ const startCamera = () => { | |||
| } | |||
| action.addEventListener("click", function () { | |||
| canvas.width = 1530; | |||
| canvas.height = 950; | |||
| context.drawImage(video, 0, 0); | |||
| const dataURL = canvas.toDataURL("image/png"); | |||
| imgSrc.value = dataURL; | |||
| uni.showToast({ | |||
| title: "准备好了吗?", | |||
| icon: "success", | |||
| }); | |||
| setTimeout(() => { | |||
| isShowCanvas.value = false; | |||
| isSuccess.value = true; | |||
| }, 10); | |||
| let i = 3; | |||
| const timer = setInterval(() => { | |||
| uni.showLoading({ | |||
| title: i, | |||
| }); | |||
| i--; | |||
| console.log(i); | |||
| if (i == 0) { | |||
| clearInterval(timer); | |||
| setTimeout(() => { | |||
| uni.hideLoading(); | |||
| canvas.width = 1530; | |||
| canvas.height = 950; | |||
| context.drawImage(video, 0, 0); | |||
| const dataURL = canvas.toDataURL("image/png"); | |||
| CimgSrc.value = dataURL; | |||
| UimgSrc.value = ""; | |||
| setTimeout(() => { | |||
| isShowCanvas.value = false; | |||
| isSuccess.value = true; | |||
| }, 10); | |||
| }, 1000); | |||
| } | |||
| }, 1100); | |||
| }, 1000); | |||
| }); | |||
| // 备用方案 | |||
| @@ -187,13 +210,21 @@ const takePicture = () => { | |||
| }; | |||
| // 确认照片 | |||
| const confirmPhoto = () => {}; | |||
| const confirmPhoto = () => { | |||
| if (UimgSrc.value) { | |||
| uni.navigateTo({ | |||
| url: `/pages/createing/index?imageUrl=${UimgSrc.value}`, | |||
| }); | |||
| } | |||
| }; | |||
| // 不满意,重新拍一张 | |||
| const reTry = () => { | |||
| isSuccess.value = false; | |||
| isUpload.value = false; | |||
| isShowCanvas.value = true; | |||
| imgSrc.value = ""; | |||
| CimgSrc.value = ""; | |||
| UimgSrc.value = ""; | |||
| setTimeout(() => { | |||
| startCamera(); | |||
| }, 10); | |||
| @@ -209,7 +240,7 @@ const uploadImg = async () => { | |||
| // 成功展示二维码之后,轮询获取上传照片状态 | |||
| timer.value = setInterval(() => { | |||
| refreshUploadStatus(UserId); | |||
| refreshUploadStatus(res.data.id); | |||
| }, 1000); | |||
| console.log(res, "res"); | |||
| } catch (error) { | |||
| @@ -222,11 +253,30 @@ const refreshUploadStatus = async (id) => { | |||
| try { | |||
| const res = await findImage(id); | |||
| console.log(res, "res"); | |||
| if (res.data.image) { | |||
| clearInterval(timer.value); | |||
| uni.showToast({ | |||
| title: "上传成功!", | |||
| icon: "success", | |||
| }); | |||
| showQrCode.value = false; | |||
| UimgSrc.value = res.data.image; | |||
| CimgSrc.value = ""; | |||
| isShowCanvas.value = false; | |||
| isSuccess.value = true; | |||
| isUpload.value = true; | |||
| } | |||
| } catch (error) { | |||
| console.log(error, "error"); | |||
| } | |||
| }; | |||
| // 点击取消,关闭二维码弹窗并取消轮询 | |||
| const cancelUplaod = () => { | |||
| showQrCode.value = false; | |||
| clearInterval(timer.value); | |||
| }; | |||
| onLoad((options) => { | |||
| console.log(options, "options"); | |||
| modelUrl.value = options.modelUrl; | |||
| @@ -389,12 +439,19 @@ onMounted(() => { | |||
| width: 100%; | |||
| height: 100%; | |||
| z-index: 1; | |||
| img { | |||
| .fromCamera { | |||
| position: absolute; | |||
| top: 110rpx; | |||
| width: 120%; | |||
| height: 60%; | |||
| } | |||
| .fromUpload { | |||
| position: absolute; | |||
| top: 110rpx; | |||
| left: 50%; | |||
| transform: translateX(-50%); | |||
| width: 45%; | |||
| } | |||
| } | |||
| } | |||
| .overlay { | |||