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 {