Browse Source

1

dev_czc
congzc 1 year ago
parent
commit
628524d5ee
5 changed files with 68 additions and 5 deletions
  1. BIN
      src/assets/img/homeImg.jpg
  2. BIN
      src/assets/img/people.png
  3. +58
    -3
      src/pages/camera/index.vue
  4. +7
    -2
      src/pages/created/index.vue
  5. +3
    -0
      src/pages/login/index.vue

BIN
src/assets/img/homeImg.jpg View File

Before After
Width: 720  |  Height: 1373  |  Size: 128 KiB Width: 1125  |  Height: 2145  |  Size: 2.5 MiB

BIN
src/assets/img/people.png View File

Before After
Width: 762  |  Height: 753  |  Size: 46 KiB

+ 58
- 3
src/pages/camera/index.vue View File

@@ -1,6 +1,13 @@
<template>
<div class="page">
<div class="bottom">
<!-- 人物框 -->
<!-- <image
v-if="!isSuccess"
class="frameImg"
src="../../assets/img/people.png"
mode="scaleToFill"
/> -->
<video
v-if="!isSuccess"
id="video"
@@ -14,8 +21,11 @@
<img src="../../assets/img/selectImg.png" />
<div class="uploadText">上传照片</div>
</div>

<div id="action" @click="takePicture">
<view v-show="showTakeTips" class="takeTips1">请把脸面向摄像头</view>
<view v-show="showTakeTips" class="takeTips2"
>点击三秒后开始拍照
</view>
<div class="circleInside"></div>
</div>
</div>
@@ -110,6 +120,8 @@ const getView = () => {
});
};

const showTakeTips = ref(true);

const startCamera = () => {
function getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
@@ -142,6 +154,8 @@ const startCamera = () => {
}

const video = document.querySelector("video.uni-video-video");
// video.style.transform = "scaleX(-1)";
// video.style.transform = "rotateY(180deg)"; //镜像
let canvas = document.querySelector("canvas.uni-canvas-canvas");
const action = document.querySelector("#action");
let context = canvas.getContext("2d");
@@ -189,8 +203,9 @@ const startCamera = () => {
}

action.addEventListener("click", function () {
showTakeTips.value = false;
uni.showToast({
title: "准备好了吗?",
title: "准备开始拍照",
icon: "success",
});
setTimeout(() => {
@@ -212,13 +227,14 @@ const startCamera = () => {
canvas.height = 1500;
context.drawImage(video, 0, 0);
let dataURL = canvas.toDataURL("image/png");
console.log(dataURL);
// console.log(dataURL);
CimgSrc.value = dataURL;
UimgSrc.value = "";

setTimeout(() => {
isShowCanvas.value = false;
isSuccess.value = true;
showTakeTips.value = true;
}, 10);
}, 1000);
}
@@ -627,6 +643,18 @@ onUnload(() => {
</script>

<style lang="scss" scoped>
:deep(.uni-toast) {
width: 300rpx;
font-size: 50rpx;
font-weight: 900;
padding: 20rpx 30rpx;
color: #ff4f00;

.uni-toast__icon {
width: 50rpx !important;
height: 50rpx !important;
}
}
.page {
width: 100vw;
height: 100vh;
@@ -674,6 +702,15 @@ onUnload(() => {
width: 100%;
height: 68%;
overflow: hidden;
.frameImg {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
height: 40%;
z-index: 3;
}
video {
width: 100%;
height: 100%;
@@ -724,6 +761,24 @@ onUnload(() => {
background-color: #ffffff;
border-radius: 60rpx;
z-index: 99;
.takeTips1 {
position: absolute;
width: 300rpx;
top: -70rpx;
left: 50%;
transform: translateX(-50%);
text-align: center;
color: #ff4f00;
}
.takeTips2 {
position: absolute;
width: 300rpx;
top: -40rpx;
left: 50%;
transform: translateX(-50%);
text-align: center;
color: #ff4f00;
}
.circleInside {
position: absolute;
left: 50%;


+ 7
- 2
src/pages/created/index.vue View File

@@ -33,7 +33,7 @@
<!-- <image class="logo" src="../../assets/img/logo-4.png" mode="aspectFit" /> -->
<!-- </view> -->
<view v-if="createState == 2" class="checkMore">左右滑动查看更多</view>
<view v-if="createState != 2" class="wait">
<!-- <view v-if="createState != 2" class="wait">
<view class="creating"
>写真生成中
<u-loading-icon
@@ -43,7 +43,7 @@
></u-loading-icon>
</view>
<view class="check">稍后您可在“智像小相册”微信小程序中查看</view>
</view>
</view> -->
<!-- <view
@click="subscribe"
v-if="createState != 2"
@@ -115,10 +115,14 @@ const previewImageList = ref([]); //预览图片列表

const timer = ref(null);
async function getSwiperList() {
uni.showLoading({
title: "生成中,请稍后",
});
const res = await getPhotoListApi(workId.value);
createState.value = res.data.status;

if (res.data.photoList) {
uni.hideLoading();
uni.showToast({
title: "生成成功!",
icon: "success",
@@ -168,6 +172,7 @@ async function getUser() {
if (res.data.payStatus == 3) {
uni.setStorageSync("createTimes", res.data.createTimes);
userInfoModulesPinia.createTimes = res.data.createTimes;
console.log();
}
}
} catch (err) {


+ 3
- 0
src/pages/login/index.vue View File

@@ -16,6 +16,8 @@
//#region 导入
import { ref } from "vue";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { userInfoModules } from "@/store/modules/userInfo";
const userInfoModulesPinia = userInfoModules();
//#endregion ----------------------------------

function toChooseStyle() {
@@ -25,6 +27,7 @@ function toChooseStyle() {
//#region 初始化
onLoad(() => {
runGetAndroidId();
userInfoModulesPinia.clearStorage();
});
//#endregion ----------------------------------



Loading…
Cancel
Save