diff --git a/src/pages/camera/index.vue b/src/pages/camera/index.vue index 40353f2..4512aea 100644 --- a/src/pages/camera/index.vue +++ b/src/pages/camera/index.vue @@ -30,7 +30,7 @@
-
+
上传照片
@@ -53,22 +53,20 @@ >
- + +
- + 打开微信扫码上传照片 - 取 消 + 取 消
@@ -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 {