|
|
@@ -19,7 +19,7 @@ |
|
|
|
></video> |
|
|
|
|
|
|
|
<div v-if="!isSuccess"> |
|
|
|
<div class="selectImg"> |
|
|
|
<div class="selectImg" @click="uploadImg"> |
|
|
|
<img src="../../assets/img/selectImg.png" /> |
|
|
|
<div class="uploadText">上传照片</div> |
|
|
|
</div> |
|
|
@@ -57,6 +57,20 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- Top section --> |
|
|
|
<u-overlay |
|
|
|
class="overlay" |
|
|
|
:show="showQrCode" |
|
|
|
@click="showQrCode = false" |
|
|
|
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> |
|
|
|
</u-overlay> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
@@ -64,11 +78,16 @@ |
|
|
|
import { ref, onMounted } from "vue"; |
|
|
|
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app"; |
|
|
|
|
|
|
|
import { getImageQrcode } from "../../api/camera.js"; |
|
|
|
|
|
|
|
let imgSrc = ref(""); |
|
|
|
let isSuccess = ref(false); |
|
|
|
let isShowCanvas = ref(true); |
|
|
|
let modelUrl = ref(""); |
|
|
|
|
|
|
|
let QRCodeUrl = ref(""); |
|
|
|
let showQrCode = ref(false); |
|
|
|
|
|
|
|
const startCamera = () => { |
|
|
|
function getUserMedia(constraints, success, error) { |
|
|
|
if (navigator.mediaDevices.getUserMedia) { |
|
|
@@ -176,6 +195,19 @@ const reTry = () => { |
|
|
|
}, 10); |
|
|
|
}; |
|
|
|
|
|
|
|
// 点击上传照片按钮 |
|
|
|
const uploadImg = async () => { |
|
|
|
const UserId = localStorage.getItem("UserId"); |
|
|
|
try { |
|
|
|
const res = await getImageQrcode(UserId); |
|
|
|
QRCodeUrl.value = res.data.wxQrcode; |
|
|
|
showQrCode.value = true; |
|
|
|
console.log(res, "res"); |
|
|
|
} catch (error) { |
|
|
|
console.log(error, "error"); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
onLoad((options) => { |
|
|
|
console.log(options, "options"); |
|
|
|
modelUrl.value = options.modelUrl; |
|
|
@@ -346,5 +378,45 @@ onMounted(() => { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.overlay { |
|
|
|
.content { |
|
|
|
width: 100%; |
|
|
|
height: 100vh; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
text-align: center; |
|
|
|
.imageBox { |
|
|
|
position: relative; |
|
|
|
margin-top: 200rpx; |
|
|
|
width: 500rpx; |
|
|
|
height: 500rpx; |
|
|
|
border-radius: 30rpx; |
|
|
|
background-color: #fff; |
|
|
|
.mask { |
|
|
|
position: absolute; |
|
|
|
width: 500rpx; |
|
|
|
height: 500rpx; |
|
|
|
border-radius: 30rpx; |
|
|
|
background-color: rgba($color: #000000, $alpha: 0.7); |
|
|
|
z-index: 2; |
|
|
|
} |
|
|
|
image { |
|
|
|
width: 500rpx; |
|
|
|
height: 500rpx; |
|
|
|
border-radius: 30rpx; |
|
|
|
background-color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
text { |
|
|
|
margin-top: 20rpx; |
|
|
|
font-weight: 900; |
|
|
|
font-size: 32rpx; |
|
|
|
} |
|
|
|
// .orangeBtn { |
|
|
|
// margin-top: 100rpx; |
|
|
|
// } |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |