|
- <template>
- <view class="page">
- <view class="title">
- <!-- 提示文字 -->
- <text v-show="uploadState == 1" class="tips">请添加一张正面照片</text>
- <text v-show="uploadState == 2" class="tips">请点击上传</text>
- <text v-show="uploadState == 3" class="tips">数字形象生成中</text>
- <text v-show="uploadState == 4" class="tips"
- >照片不符合规范,请重新上传</text
- >
- <text v-show="uploadState == 5" class="tips">上传失败,请重新上传</text>
- </view>
- <!-- 上传图片和展示 -->
- <view class="uploadBox imgContenBox scan" @click.stop="chooseImage">
- <!-- 扫描线 -->
- <view v-show="uploadState == 3" class="scan-line"></view>
- <image
- class="scan-border"
- src="../../assets/img/scanBorder.png"
- mode="aspectFit"
- />
- <!-- 上传按钮 -->
- <image
- class="addImg"
- v-show="!showImgUrl"
- src="../../assets/icon/add.png"
- alt=""
- />
- <!-- @click.prevent="chooseImage" -->
- <image
- class="showImg"
- v-show="showImgUrl"
- :src="showImgUrl"
- alt=""
- mode="aspectFit"
- />
- </view>
- <view class="uploadBtn">
- <view @click="toCloseStyle" class="orangeBtn">上传新头像</view>
- <view
- class="grayBtn"
- v-if="userInfoModulesPinia.myAvatar"
- @click="goOtherPage('/pages/closeStyle/closeStyle')"
- >已有形象,直接创作</view
- >
- <view class="free">
- <image src="../../assets/icon/blackBG.png" mode="aspectFit" />
- <text>新用户免费制作</text>
- </view>
- </view>
- <!-- 底部盒子 -->
- <view class="bottomBox">
- <view class="tips2">请按照样片上传您五官清晰的正面照片</view>
- <view class="demoImgBox">
- <view class="imgBox">
- <image src="../../assets/img/img1.png" mode="aspectFit" />
- <view class="icon">
- <image src="../../assets/icon/error.png" mode="aspectFit" />
- </view>
- </view>
- <view class="imgBox">
- <image
- class="rightImg"
- src="../../assets/img/img2.png"
- mode="aspectFit"
- />
- <view class="icon">
- <image src="../../assets/icon/correct.png" mode="aspectFit" />
- </view>
- </view>
- <view class="imgBox">
- <image src="../../assets/img/img3.png" mode="aspectFit" />
- <view class="icon">
- <image src="../../assets/icon/error.png" mode="aspectFit" />
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
-
- <script setup>
- //#region 导入
- import { ref, reactive } from "vue";
- import { onLoad } from "@dcloudio/uni-app";
- import { loginApi } from "../../api/login";
- import { addImageApi } from "../../api/uploadphoto.js";
- import { userInfoModules } from "@/store/modules/userInfo";
- import imageCompression from "browser-image-compression"; //压缩图片插件
- import { findImageApi, findGlodApi } from "../../api/home";
- //#endregion
- const userInfoModulesPinia = userInfoModules();
-
- //#region 选择图片
- const uploadState = ref(1); //上传状态
- const showImgUrl = ref(""); //回显路径 压缩
- const showImgUrl2 = ref(null); //回显路径 未压缩
- const showImgData = ref(null); //上传数据
-
- // 点击上传图片
- function chooseImage() {
- // 检查token
- if (!userInfoModulesPinia.token) {
- uni.showModal({
- title: "提示",
- content: "登录以体验完整功能",
- success: function (res) {
- if (res.confirm) {
- uni.navigateTo({
- url: "/pages/login/index",
- });
- return;
- } else if (res.cancel) {
- console.log("用户点击取消");
- return;
- }
- },
- });
- } else {
- // 调用uni.chooseImage方法选择图片
- uni.chooseImage({
- count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片
- success: async (res) => {
- uploadState.value = 2;
- // 图片压缩
- console.log(res.tempFiles[0].size);
- showImgUrl2.value = res.tempFiles[0];
- if (userInfoModulesPinia.platForm != 1) {
- uni.compressImage({
- src: res.tempFilePaths[0],
- quality: 40,
- success: (res2) => {
- showImgUrl.value = res2.tempFilePath;
- },
- });
- } else {
- const options = {
- maxSizeMB: 2, // 最大压缩大小为 4MB
- useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能
- };
- const compressedFile = await imageCompression(
- res.tempFiles[0],
- options
- );
- //compressedFile是一个blob对象
- showImgUrl.value = URL.createObjectURL(compressedFile);
- showImgData.value = compressedFile;
- }
- },
- fail: (err) => {
- console.error("选择图片失败", err);
- },
- });
- }
- }
-
- //#endregion ---------------------
-
- //#region 上传图片
-
- // console.log(userInfoModulesPinia.token, "token");
- async function toCloseStyle() {
- // 检查token
- if (!userInfoModulesPinia.token) {
- uni.showModal({
- title: "提示",
- content: "登录以体验完整功能",
- success: function (res) {
- if (res.confirm) {
- uni.navigateTo({
- url: "/pages/login/index",
- });
- return;
- } else if (res.cancel) {
- console.log("用户点击取消");
- return;
- }
- },
- });
- } else {
- if (!showImgUrl.value) {
- uni.showToast({
- title: "请先上传图片",
- icon: "none",
- });
- chooseImage();
- return;
- }
- uploadState.value = 3;
- console.log(showImgUrl.value);
- console.log(showImgUrl2.value.path);
- // 人脸识别接口
- uni.uploadFile({
- url: "https://test.metavatar.cc/C/api/userDigital/checkPhoto", //上传图片api
- filePath: showImgUrl2.value.path,
- name: "file",
- formData: {
- user: "test",
- },
- header: {
- // Authorization: userInfoModulesPinia.token,
- token: userInfoModulesPinia.token,
- },
- success: (res) => {
- if (JSON.parse(res.data).code != 200) {
- uploadState.value = 4;
- return;
- }
- // 上传接口
- uni.uploadFile({
- url: "https://test.metavatar.cc/C/api/upload/awsImgUpload", //上传图片api
- filePath: showImgUrl2.value.path,
- name: "file",
- formData: {
- user: "test",
- },
- header: {
- "Content-Type": "multipart/form-data",
- token: userInfoModulesPinia.token,
- },
- success: async (res2) => {
- let moment = res2;
- if (JSON.parse(res2.data).code != 200) {
- uploadState.value = 5;
- uni.showToast({
- title: "网络被数字人偷走了, 请稍后重试",
- icon: "none",
- });
- return;
- }
- // 保存接口
-
- const res3 = await addImageApi({
- image: JSON.parse(res2.data).data.url,
- });
-
- if (res3.code == 200) {
- // 改变全局的头像
- userInfoModulesPinia.myAvatar = JSON.parse(moment.data).data.url;
- uni.redirectTo({
- url: "/pages/uploadPhoto/success",
- });
- } else {
- uni.showToast({
- title: "网络被数字人偷走了, 请稍后重试",
- icon: "none",
- });
- }
- },
- fail: () => {
- uploadState.value = 5;
- },
- });
- },
- fail: () => {
- uploadState.value = 1;
- uni.showToast({
- title: "网络被数字人偷走了, 请稍后重试",
- icon: "none",
- });
- },
- });
- }
- }
- //#endregion ---------------------
-
- //#region 页面初始化
- onLoad((options) => {
- // showImgUrl.value = userInfoModulesPinia.myAvatar;
- // 微信登录授权
- if (userInfoModulesPinia.platForm != 1) {
- uni.login({
- provider: "weixin", // 使用微信登录授权
- success: async (res) => {
- console.log(res);
- if (res.code) {
- console.log(res.code);
- try {
- uni.showLoading({
- title: "加载中...",
- mask: true,
- });
- const data = {
- appId: "wx75cf14e3a0d45821",
- code: res.code,
- };
- const res2 = await loginApi(data);
- userInfoModulesPinia.openId = res2.data.openId;
- if (res2.data.token) {
- userInfoModulesPinia.token = res2.data.token;
- console.log(userInfoModulesPinia.openId, "获取openid");
- // 获取头像和金币
- const res3 = await findImageApi();
- userInfoModulesPinia.myAvatar =
- res3.data && res3.data.image ? res3.data.image : "";
- const res4 = await findGlodApi();
- if (!res4.data) {
- userInfoModulesPinia.myGlod = 0;
- } else {
- userInfoModulesPinia.myGlod = res4.data.digitalAvatarResidueGlod
- ? res4.data.digitalAvatarResidueGlod
- : 0;
- }
- uni.hideLoading();
- if (res2.data.token) {
- // uni.redirectTo({
- // url: "/pages/index/index",
- // });
- } else {
- uni.redirectTo({
- url: "/pages/login/index",
- });
- console.log("error1");
- uni.showToast({
- title: "登录失败,请重试",
- icon: "none",
- });
- }
- }
- uni.hideLoading();
- } catch (error) {
- // uni.redirectTo({
- // url: "pages/index/index",
- // });
- console.log(error, "error2");
- uni.showToast({
- title: "登录失败,请重试",
- icon: "none",
- });
- }
- } else {
- // uni.redirectTo({
- // url: "pages/index/index",
- // });
- console.log("error3");
- uni.showToast({
- title: "登录失败,请重试",
- icon: "none",
- });
- }
- },
- fail: (err) => {
- // uni.redirectTo({
- // url: "pages/index/index",
- // });
- console.log("error4");
- uni.showToast({
- title: "登录失败,请重试",
- icon: "none",
- });
- },
- });
- }
- });
- //#endregion ---------------------
-
- //#region
- function goOtherPage(url) {
- uni.navigateTo({
- url: url,
- });
- }
- //#endregion ---------------------
-
- //#region
-
- //#endregion ---------------------
- </script>
-
- <style lang="scss">
- .page {
- position: relative;
- min-height: 100vh;
- background-color: #222527;
- // background-color: rgba(0, 0, 0, 0.8);
- .bgc {
- position: absolute;
- width: 750rpx;
- height: 750rpx;
- transform: scale(1.5);
- top: 187rpx;
- left: 0;
- object-fit: cover;
- z-index: -2;
- backdrop-filter: blur(3px);
- }
- }
- .title {
- margin-bottom: 40rpx;
- .tips {
- margin-top: 20rpx;
- color: #fff;
- font-size: 44rpx;
- font-weight: 900;
- }
- }
- .uploadBox {
- position: relative;
- width: 420rpx;
- height: 560rpx;
- background-color: rgba(255, 255, 255, 0.1);
- border-radius: 50rpx;
- .scan-border {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 360rpx;
- height: 480rpx;
- }
- .addImg {
- width: 80rpx;
- height: 80rpx;
- }
- .showImg {
- max-width: 90%;
- max-height: 90%;
- }
- .u-upload {
- position: absolute;
- top: 0;
- left: 0;
- width: 600rpx;
- height: 600rpx;
- opacity: 0;
- }
- }
- // 扫描
- .scan {
- overflow: hidden;
- .scan-line {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 40%;
- background: linear-gradient(180deg, rgba(0, 255, 51, 0) 50%, #00ff33 300%);
- border-bottom: 2px solid #00ff33;
- animation: scanAnimation 2s linear infinite;
- z-index: 9;
- }
-
- @keyframes scanAnimation {
- 0% {
- transform: translateY(-150%);
- }
- 100% {
- transform: translateY(150%);
- }
- }
- }
- // 上传
- .uploadBtn {
- position: relative;
- margin-top: 75rpx;
- width: 520rpx;
- // height: 100rpx;
- line-height: 100rpx;
- text-align: center;
- // background: #ff4f00;
- border-radius: 50rpx;
- font-size: 30rpx;
- color: #fff;
- font-weight: 900;
- .free {
- position: absolute;
- top: -25rpx;
- right: -80rpx;
- width: 185rpx;
- height: 50rpx;
- image {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 1;
- }
- text {
- position: absolute;
- top: -25rpx;
- left: 50%;
- transform: translate(-50%, 0);
- width: 100%;
- height: 100%;
- font-size: 22rpx;
- font-weight: 900;
- z-index: 2;
- }
- }
- }
- // 底部盒子
- .bottomBox {
- flex: 1;
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: flex-end;
- padding: 0 0 90rpx 0;
- .tips2 {
- margin-top: 20rpx;
- margin-bottom: 15rpx;
- font-size: 22rpx;
- }
- .demoImgBox {
- display: flex;
- justify-content: space-between;
- align-items: flex-end;
- padding: 0 20rpx;
- width: 100%;
- .imgBox {
- position: relative;
- image {
- width: 180rpx;
- height: 180rpx;
- }
- .rightImg {
- width: 200rpx;
- height: 200rpx;
- }
- .icon {
- position: absolute;
- top: -8rpx;
- right: -8rpx;
- width: 36rpx;
- height: 36rpx;
- image {
- width: 100%;
- height: 100%;
- }
- }
- }
- }
- }
- </style>
|