|
|
@@ -7,6 +7,7 @@ |
|
|
|
muted |
|
|
|
autoplay="autoplay" |
|
|
|
:controls="false" |
|
|
|
:enable-progress-gesture="false" |
|
|
|
></video> |
|
|
|
|
|
|
|
<div v-if="!isSuccess"> |
|
|
@@ -27,8 +28,12 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="confirm" @click="confirmPhoto"> |
|
|
|
<img src="../../assets/img/success.png" /> |
|
|
|
<div class="uploadText">就这张了</div> |
|
|
|
<!-- <img src="../../assets/img/success.png" /> --> |
|
|
|
<div class="sure">确定</div> |
|
|
|
|
|
|
|
<div class="uploadText"> |
|
|
|
就这张了 <img src="../../assets/img/success.png" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="reTry" @click="reTry"> |
|
|
@@ -51,7 +56,7 @@ |
|
|
|
|
|
|
|
<div class="top"> |
|
|
|
<div class="example"> |
|
|
|
<div>文案与模板提示区域</div> |
|
|
|
<img src="../../assets/img/c867236efb4fc5707257ef8daf26db4.png" /> |
|
|
|
</div> |
|
|
|
<div class="model" @click="goSelectModel"> |
|
|
|
<img :src="modelUrl" alt="" /> |
|
|
@@ -104,8 +109,12 @@ const startCamera = () => { |
|
|
|
audio: false, |
|
|
|
video: { |
|
|
|
facingMode: "user", |
|
|
|
width: 240, |
|
|
|
height: 350, |
|
|
|
// width: 1000, |
|
|
|
// height: 1000, |
|
|
|
width: 1080, |
|
|
|
height: 1305, |
|
|
|
// width: 2100, |
|
|
|
// height: 2100, |
|
|
|
}, |
|
|
|
}) |
|
|
|
.then(success) |
|
|
@@ -152,7 +161,15 @@ const startCamera = () => { |
|
|
|
getUserMedia( |
|
|
|
{ |
|
|
|
audio: false, |
|
|
|
video: true, |
|
|
|
video: { |
|
|
|
facingMode: "user", |
|
|
|
// width: 240, |
|
|
|
// height: 450, |
|
|
|
width: 1080, |
|
|
|
height: 1305, |
|
|
|
// width: 2100, |
|
|
|
// height: 2100, |
|
|
|
}, |
|
|
|
}, |
|
|
|
success, |
|
|
|
error |
|
|
@@ -179,10 +196,12 @@ const startCamera = () => { |
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
uni.hideLoading(); |
|
|
|
canvas.width = 1530; |
|
|
|
canvas.height = 950; |
|
|
|
// canvas.width = 1530; |
|
|
|
// canvas.height = 950; |
|
|
|
canvas.width = 2400; |
|
|
|
canvas.height = 2400; |
|
|
|
context.drawImage(video, 0, 0); |
|
|
|
const dataURL = canvas.toDataURL("image/png"); |
|
|
|
let dataURL = canvas.toDataURL("image/png"); |
|
|
|
CimgSrc.value = dataURL; |
|
|
|
UimgSrc.value = ""; |
|
|
|
setTimeout(() => { |
|
|
@@ -221,24 +240,36 @@ const goSelectModel = () => { |
|
|
|
|
|
|
|
// 确认照片 |
|
|
|
const confirmPhoto = () => { |
|
|
|
// 用户上传的照片,已通过校验,直接放行 |
|
|
|
if (UimgSrc.value) { |
|
|
|
uni.navigateTo({ |
|
|
|
url: `/pages/createing/index?imageUrl=${UimgSrc.value}&id=${modelId.value}`, |
|
|
|
}); |
|
|
|
} else if (CimgSrc.value) { |
|
|
|
// 本地存储中的拍照照片 |
|
|
|
const CimageUrl = uni.getStorageSync("CcurrentUrl"); |
|
|
|
// 用户上一次使用相机拍照的照片,从本地回显,已通过校验,直接放行 |
|
|
|
if (CimageUrl) { |
|
|
|
// alert("点击确定"); |
|
|
|
// alert(UimgSrc.value, "UimgSrc.value"); |
|
|
|
// alert(CimgSrc.value, "CimgSrc.value"); |
|
|
|
try { |
|
|
|
if (UimgSrc.value) { |
|
|
|
uni.navigateTo({ |
|
|
|
url: `/pages/createing/index?imageUrl=${CimgSrc.value}&id=${modelId.value}`, |
|
|
|
url: `/pages/createing/index?imageUrl=${UimgSrc.value}&id=${modelId.value}`, |
|
|
|
}); |
|
|
|
// 用户使用相机拍照的照片,未校验,走完校验流程放行 |
|
|
|
} else { |
|
|
|
} else if (CimgSrc.value) { |
|
|
|
// 本地存储中的拍照照片 |
|
|
|
// alert(uni.getStorageSync("CcurrentUrl"), "CcurrentUrl"); |
|
|
|
// // let CimageUrl = uni.getStorageSync("CcurrentUrl"); |
|
|
|
// // 用户上一次使用相机拍照的照片,从本地回显,已通过校验,直接放行 |
|
|
|
// if (uni.getStorageSync("CcurrentUrl")) { |
|
|
|
// uni.navigateTo({ |
|
|
|
// url: `/pages/createing/index?imageUrl=${CimgSrc.value}&id=${modelId.value}`, |
|
|
|
// }); |
|
|
|
// // 用户使用相机拍照的照片,未校验,走完校验流程放行 |
|
|
|
// } else { |
|
|
|
// } |
|
|
|
dealImage(CimgSrc.value); |
|
|
|
} |
|
|
|
} catch (e) { |
|
|
|
uni.showToast({ |
|
|
|
title: e, |
|
|
|
icon: "success", |
|
|
|
mask: true, |
|
|
|
}); |
|
|
|
} |
|
|
|
// 用户上传的照片,已通过校验,直接放行 |
|
|
|
}; |
|
|
|
|
|
|
|
const dealImage = (imageUrl) => { |
|
|
@@ -507,12 +538,16 @@ onUnload(() => { |
|
|
|
.top { |
|
|
|
display: flex; |
|
|
|
width: 100%; |
|
|
|
height: 25%; |
|
|
|
height: 32%; |
|
|
|
.example { |
|
|
|
width: 60%; |
|
|
|
height: 100%; |
|
|
|
color: #000; |
|
|
|
background-color: #fff; |
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
.model { |
|
|
|
position: relative; |
|
|
@@ -540,12 +575,21 @@ onUnload(() => { |
|
|
|
.bottom { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
height: 75%; |
|
|
|
height: 68%; |
|
|
|
overflow: hidden; |
|
|
|
video { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
// width: 1080px; |
|
|
|
// height: 1305px; |
|
|
|
:deep(.uni-video-video) { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: -50px; |
|
|
|
width: 100% !important; |
|
|
|
height: 720px !important; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.selectImg { |
|
|
|
position: absolute; |
|
|
|
left: 65rpx; |
|
|
@@ -600,27 +644,44 @@ onUnload(() => { |
|
|
|
position: absolute; |
|
|
|
left: 50%; |
|
|
|
bottom: 75rpx; |
|
|
|
width: 80rpx; |
|
|
|
width: 180rpx; |
|
|
|
height: 80rpx; |
|
|
|
// border: 5rpx solid #ffffff; |
|
|
|
transform: translateX(-50%); |
|
|
|
border-radius: 60rpx; |
|
|
|
z-index: 99; |
|
|
|
z-index: 9999999; |
|
|
|
img { |
|
|
|
position: absolute; |
|
|
|
left: 50%; |
|
|
|
bottom: 50%; |
|
|
|
transform: translate(-50%, 50%); |
|
|
|
// position: absolute; |
|
|
|
// left: 50%; |
|
|
|
// bottom: 50%; |
|
|
|
// transform: translate(-50%, 50%); |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
width: 30rpx; |
|
|
|
height: 30rpx; |
|
|
|
vertical-align: text-top; |
|
|
|
} |
|
|
|
.sure { |
|
|
|
margin-top: 30rpx; |
|
|
|
text-align: center; |
|
|
|
width: 100%; |
|
|
|
height: 50rpx; |
|
|
|
line-height: 50rpx; |
|
|
|
background-color: #2ba245; |
|
|
|
border-radius: 15rpx; |
|
|
|
} |
|
|
|
.uploadText { |
|
|
|
position: absolute; |
|
|
|
left: 50%; |
|
|
|
bottom: -40rpx; |
|
|
|
width: 150%; |
|
|
|
// position: absolute; |
|
|
|
// left: 50%; |
|
|
|
// bottom: -40rpx; |
|
|
|
// width: 150%; |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
height: 30rpx; |
|
|
|
line-height: 30rpx; |
|
|
|
font-size: 20rpx; |
|
|
|
transform: translateX(-32%); |
|
|
|
// transform: translateX(-32%); |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
@@ -657,10 +718,10 @@ onUnload(() => { |
|
|
|
height: 100%; |
|
|
|
z-index: 1; |
|
|
|
.fromCamera { |
|
|
|
position: absolute; |
|
|
|
top: 110rpx; |
|
|
|
left: 130rpx; |
|
|
|
width: 200%; |
|
|
|
// position: absolute; |
|
|
|
// top: 110rpx; |
|
|
|
// left: 130rpx; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.fromUpload { |
|
|
|
position: absolute; |
|
|
|