|
|
@@ -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 { |
|
|
|