congzc 1 рік тому
джерело
коміт
628524d5ee
5 змінених файлів з 68 додано та 5 видалено
  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 Переглянути файл

Перед Після
Ширина: 720  |  Висота: 1373  |  Розмір: 128 KiB Ширина: 1125  |  Висота: 2145  |  Розмір: 2.5 MiB

BIN
src/assets/img/people.png Переглянути файл

Перед Після
Ширина: 762  |  Висота: 753  |  Розмір: 46 KiB

+ 58
- 3
src/pages/camera/index.vue Переглянути файл

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

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


const showTakeTips = ref(true);

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


const video = document.querySelector("video.uni-video-video"); 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"); let canvas = document.querySelector("canvas.uni-canvas-canvas");
const action = document.querySelector("#action"); const action = document.querySelector("#action");
let context = canvas.getContext("2d"); let context = canvas.getContext("2d");
@@ -189,8 +203,9 @@ const startCamera = () => {
} }


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


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


<style lang="scss" scoped> <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 { .page {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
@@ -674,6 +702,15 @@ onUnload(() => {
width: 100%; width: 100%;
height: 68%; height: 68%;
overflow: hidden; overflow: hidden;
.frameImg {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
height: 40%;
z-index: 3;
}
video { video {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -724,6 +761,24 @@ onUnload(() => {
background-color: #ffffff; background-color: #ffffff;
border-radius: 60rpx; border-radius: 60rpx;
z-index: 99; 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 { .circleInside {
position: absolute; position: absolute;
left: 50%; left: 50%;


+ 7
- 2
src/pages/created/index.vue Переглянути файл

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


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


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


+ 3
- 0
src/pages/login/index.vue Переглянути файл

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


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




Завантаження…
Відмінити
Зберегти