| @@ -30,7 +30,7 @@ | |||||
| </div> | </div> | ||||
| <div v-if="isSuccess"> | <div v-if="isSuccess"> | ||||
| <div class="selectImg"> | |||||
| <div class="selectImg" @click="uploadImg"> | |||||
| <img src="../../assets/img/selectImg.png" /> | <img src="../../assets/img/selectImg.png" /> | ||||
| <div class="uploadText">上传照片</div> | <div class="uploadText">上传照片</div> | ||||
| </div> | </div> | ||||
| @@ -53,22 +53,20 @@ | |||||
| ></canvas> | ></canvas> | ||||
| <div v-if="isSuccess" class="preview"> | <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> | ||||
| </div> | </div> | ||||
| <!-- Top section --> | <!-- 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="content"> | ||||
| <view class="imageBox"> | <view class="imageBox"> | ||||
| <image :src="QRCodeUrl" mode="scaleToFill" /> | <image :src="QRCodeUrl" mode="scaleToFill" /> | ||||
| </view> | </view> | ||||
| <text>打开微信扫码上传照片</text> | <text>打开微信扫码上传照片</text> | ||||
| <view class="orangeBtn" style="margin-top: 100rpx">取 消</view> | |||||
| <view class="orangeBtn" style="margin-top: 100rpx" @click="cancelUplaod" | |||||
| >取 消</view | |||||
| > | |||||
| </view> | </view> | ||||
| </u-overlay> | </u-overlay> | ||||
| </div> | </div> | ||||
| @@ -80,9 +78,12 @@ import { onLoad, onShow, onUnload } from "@dcloudio/uni-app"; | |||||
| import { getImageQrcode, findImage } from "../../api/camera.js"; | import { getImageQrcode, findImage } from "../../api/camera.js"; | ||||
| let imgSrc = ref(""); | |||||
| let CimgSrc = ref(""); // 相机拍照的图片路径,上传前需校验 | |||||
| let UimgSrc = ref(""); // 用户上传的图片路径,上传无需校验 | |||||
| let isSuccess = ref(false); | let isSuccess = ref(false); | ||||
| let isShowCanvas = ref(true); | let isShowCanvas = ref(true); | ||||
| let isUpload = ref(false); | |||||
| let modelUrl = ref(""); | let modelUrl = ref(""); | ||||
| let QRCodeUrl = ref(""); | let QRCodeUrl = ref(""); | ||||
| @@ -157,15 +158,37 @@ const startCamera = () => { | |||||
| } | } | ||||
| action.addEventListener("click", function () { | 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(() => { | 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 = () => { | const reTry = () => { | ||||
| isSuccess.value = false; | isSuccess.value = false; | ||||
| isUpload.value = false; | |||||
| isShowCanvas.value = true; | isShowCanvas.value = true; | ||||
| imgSrc.value = ""; | |||||
| CimgSrc.value = ""; | |||||
| UimgSrc.value = ""; | |||||
| setTimeout(() => { | setTimeout(() => { | ||||
| startCamera(); | startCamera(); | ||||
| }, 10); | }, 10); | ||||
| @@ -209,7 +240,7 @@ const uploadImg = async () => { | |||||
| // 成功展示二维码之后,轮询获取上传照片状态 | // 成功展示二维码之后,轮询获取上传照片状态 | ||||
| timer.value = setInterval(() => { | timer.value = setInterval(() => { | ||||
| refreshUploadStatus(UserId); | |||||
| refreshUploadStatus(res.data.id); | |||||
| }, 1000); | }, 1000); | ||||
| console.log(res, "res"); | console.log(res, "res"); | ||||
| } catch (error) { | } catch (error) { | ||||
| @@ -222,11 +253,30 @@ const refreshUploadStatus = async (id) => { | |||||
| try { | try { | ||||
| const res = await findImage(id); | const res = await findImage(id); | ||||
| console.log(res, "res"); | 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) { | } catch (error) { | ||||
| console.log(error, "error"); | console.log(error, "error"); | ||||
| } | } | ||||
| }; | }; | ||||
| // 点击取消,关闭二维码弹窗并取消轮询 | |||||
| const cancelUplaod = () => { | |||||
| showQrCode.value = false; | |||||
| clearInterval(timer.value); | |||||
| }; | |||||
| onLoad((options) => { | onLoad((options) => { | ||||
| console.log(options, "options"); | console.log(options, "options"); | ||||
| modelUrl.value = options.modelUrl; | modelUrl.value = options.modelUrl; | ||||
| @@ -389,12 +439,19 @@ onMounted(() => { | |||||
| width: 100%; | width: 100%; | ||||
| height: 100%; | height: 100%; | ||||
| z-index: 1; | z-index: 1; | ||||
| img { | |||||
| .fromCamera { | |||||
| position: absolute; | position: absolute; | ||||
| top: 110rpx; | top: 110rpx; | ||||
| width: 120%; | width: 120%; | ||||
| height: 60%; | height: 60%; | ||||
| } | } | ||||
| .fromUpload { | |||||
| position: absolute; | |||||
| top: 110rpx; | |||||
| left: 50%; | |||||
| transform: translateX(-50%); | |||||
| width: 45%; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| .overlay { | .overlay { | ||||