congzc 1 vuosi sitten
vanhempi
commit
cab455ccf8
6 muutettua tiedostoa jossa 476 lisäystä ja 50 poistoa
  1. +1
    -0
      src/App.vue
  2. +66
    -0
      src/api/lookPhoto.js
  3. BIN
      src/assets/img/logo-4.png
  4. +356
    -10
      src/pages/created/index.vue
  5. +52
    -39
      src/pages/createing/index.vue
  6. +1
    -1
      src/utils/request.js

+ 1
- 0
src/App.vue Näytä tiedosto

@@ -2,6 +2,7 @@
export default {
onLaunch: function () {
// console.log('App Launch')
uni.setStorageSync("plat", 4);
},
onShow: function () {
// console.log('App Show')


+ 66
- 0
src/api/lookPhoto.js Näytä tiedosto

@@ -0,0 +1,66 @@
import { request } from "../utils/request"


/**
* @description:得到写真信息
* @param id
* @return: data
*/
export function getPhotoListApi(id) {
return request({
url: `/api/digitalAvatarPhoto/findById?id=${id}`,
method: 'get',
})
}


/**
* @description:超分
* @param id
* @return: data
*/
export function photoSupperApi(data) {
return request({
url: `/api/digitalAvatarPhoto/photoSupper`,
method: 'post',
data
})
}

/**
* @description:超分 查询超分状态
* @param id
* @return: data
*/
export function getSupperPhotoStateApi(id) {
return request({
url: `/api/digitalAvatarPhoto/getSupperPhoto?id=${id}`,
method: 'get',
})
}

/**
* @description:生成画报
* @param {appId,img}
* @return: data
*/
export function getUserQrcodeApi(data) {
return request({
url: `/api/miniApp/getUserQrcode`,
method: 'POST',
responseType: "arraybuffer",
data
})
}

/**
* @description:获取订阅消息模版id
* @param
* @return: data
*/
export function getTemplateMsgApi() {
return request({
url: `api/templateMsg/list?projectType=5&plat=${uni.getStorageSync("plat")}&type=1`,
method: 'get',
})
}

BIN
src/assets/img/logo-4.png Näytä tiedosto

Before After
Leveys: 800  |  Korkeus: 800  |  Koko: 19 KiB

+ 356
- 10
src/pages/created/index.vue Näytä tiedosto

@@ -1,19 +1,365 @@
<template>
<view>生成完成页</view>
<view class="page">
<!-- 轮播图 -->
<u-swiper
v-if="createState == 2"
indicator
indicatorMode="dot"
circular
:radius="30"
:autoplay="false"
:list="swiperList"
keyName="image"
@change="getSwiperIndex"
@click="previewImage"
></u-swiper>
<view class="logoBox" v-if="createState != 2">
<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>
<!-- <view
@click="subscribe"
v-if="createState != 2"
style="text-decoration: underline; color: #ff4f00"
class="wait"
>做好后通知我</view
> -->
<view class="orangeBtn" @click="goChooseStyle"> 重新选择 </view>
<view class="grayBtn" @click="loginOut"> 退出登录 </view>
</view>
</template>

<script lang="ts" setup>
//#region 引入
import { ref } from "vue";
//#endregion ----------------------
<script setup>
//#region 导入
import { onLoad, onUnload } from "@dcloudio/uni-app";

//#region 引入
import { ref, watch } from "vue";

//#endregion ----------------------
import {
getPhotoListApi,
photoSupperApi,
getSupperPhotoStateApi,
} from "../../api/lookPhoto.js";
//#endregion

//#region 引入
//#region 轮播图
const createState = ref(1); //制作状态:1生成中,2完成,3失败
const workId = ref(null); //作品id

//#endregion ----------------------
onLoad(async (options) => {
workId.value = options.id;
// await getTemplateMsg();
await getSwiperList();
await getSupperPhotoState(swiperList.value[0].id);
});
onUnload(() => {
clearTimeout(timer);
timer.value = null;
});
const swiperList = ref([]); //轮播图
const previewImageList = ref([]); //预览图片列表

const timer = ref(null);
async function getSwiperList() {
const res = await getPhotoListApi(workId.value);
createState.value = res.data.status;

if (res.data.photoList) {
swiperList.value = res.data.photoList;
swiperList.value.forEach((item) => {
if (item.imageSuper) {
previewImageList.value.push(item.imageSuper);
} else {
previewImageList.value.push(item.image);
}
});
}

if (res.data.status != 2) {
timer.value = setTimeout(() => {
getSwiperList();
}, 3000);
} else {
clearTimeout(timer);
timer.value = null;
}
}
//#endregion ---------------------

//#region 预览
const swiperIndex = ref(0);
function getSwiperIndex(index) {
swiperIndex.value = index.current;
}
function previewImage(index) {
uni.previewImage({
current: index, //预览图片的下标
urls: previewImageList.value, //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以
loop: true,
});
}
//#endregion ---------------------

//#endregion ---------------------

//#region 页面跳转

function goChooseStyle() {
uni.navigateTo({
url: "/pages/chooseStyle/index",
});
}
//#endregion ---------------------

//#region 超分相关
const supperPhotoState = ref(false);
async function photoSupper() {
if (supperPhotoState.value == 1 || supperPhotoState.value == 2) {
return;
}
// uni.showModal({
// title: "提示",
// content: "确定高清处理?",
// success: function (res) {
// if (res.confirm) {
// checkboxValue.value = ["同意智像相机用户使用协议"];
// // handleLogin();
// getphonenumber(e);
// } else if (res.cancel) {
// }
// },
// fail: (err) => {},
// });
try {
uni.showLoading({
title: "高清处理中...",
mask: true,
});
const res = await photoSupperApi({
id: swiperList.value[swiperIndex.value].id,
});
console.log(res);
uni.hideLoading();
uni.showToast({
title: "高清处理请求成功,请稍后",
title: "高清处理请求成功,请稍等",
icon: "none",
});

getSupperPhotoState(swiperList.value[swiperIndex.value].id);
} catch (error) {
console.log(error, "超分失败");
uni.hideLoading();
uni.showToast({
title: "高清处理失败,请重试",
icon: "none",
});
}
}

async function getSupperPhotoState(id) {
try {
const res = await getSupperPhotoStateApi(id);
supperPhotoState.value = res.data.status;
console.log(supperPhotoState.value, "状态");
} catch (error) {
console.log(error, "超分失败");
}
}

function supperTips(params) {
if (supperPhotoState.value == 0 || supperPhotoState.value == 3) {
return "一键高清";
} else if (supperPhotoState.value == 1) {
return "高清处理中,请稍后";
} else if (supperPhotoState.value == 2) {
return "已高清处理";
}
}

watch(
() => swiperIndex.value,
(index) => {
getSupperPhotoState(swiperList.value[index].id);
}
);
//#endregion ---------------------

//#region 退出登录
function loginOut(params) {
uni.setStorageSync("token", null);
uni.setStorageSync("UserId", null);
uni.setStorageSync("phone", null);
uni.navigateTo({
url: "/pages/login/index",
});
}
//#endregion ---------------------
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.page {
padding: 0 30rpx;
background-color: rgba(24, 25, 26, 1);
}
// 轮播图
.u-swiper {
margin-top: 70rpx;
width: 540rpx;
height: 720rpx !important;
border-radius: 50rpx;
swiper {
width: 100%;
height: 720rpx !important;
image {
width: 100%;
height: 720rpx !important;
}
}

// h5
:deep(.u-swiper__wrapper) {
width: 100%;
height: 720rpx !important;
image {
width: 100%;
height: 720rpx !important;
}
}
}
.logoBox {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 70rpx;
width: 540rpx;
height: 720rpx !important;
.logo {
width: 260rpx;
margin: 90rpx;
animation: rotateAnimation 3s 0s infinite;
opacity: 0.7;
}
}
@keyframes rotateAnimation {
0% {
transform: rotate(0deg);
}
66.66% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
.checkMore,
.wait {
color: #ffffff;
margin-top: 30rpx;
}

// 俩按钮
.uploadBtn {
position: relative;
margin-top: 100rpx;
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: -18rpx;
right: -70rpx;
width: 142rpx;
height: 50rpx;
background-color: #000;
border-radius: 25rpx 25rpx 25rpx 0;
font-size: 22rpx;
font-weight: 900;
line-height: 50rpx;
text-align: center;
}
}
.orangeBtn {
margin-top: 60rpx;
}
.grayBtn {
margin-bottom: 220rpx;
.free {
position: absolute;
color: #fff;
top: -18rpx;
right: -70rpx;
width: 142rpx;
height: 50rpx;
background-color: #ff4f00;
border-radius: 25rpx 25rpx 25rpx 0;
font-size: 22rpx;
font-weight: 900;
line-height: 50rpx;
text-align: center;
}
}

.bottomBox {
// flex: 1;
position: absolute;
bottom: 60rpx;
width: 100%;
display: flex;
justify-content: space-evenly;
padding: 65rpx 40rpx 0;
.tips {
position: absolute;
top: 0rpx;
right: 60rpx;
width: 313rpx;
height: 50rpx;
background-color: #000;
border-radius: 25rpx 25rpx 25rpx 0;
font-size: 22rpx;
font-weight: 900;
line-height: 50rpx;
text-align: center;
}
.shareBtn {
margin: 0;
color: #fff;
width: 200rpx;
height: 70rpx;
line-height: 70rpx;
text-align: center;
border-radius: 70rpx;
font-size: 26rpx;
background-color: rgba(255, 255, 255, 0.1);
}
}

.pictorialBox {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba($color: #000000, $alpha: 0.9);
image {
margin-top: 80rpx;
width: 630rpx;
height: 940rpx;
border-radius: 24rpx;
margin-bottom: 50rpx;
}
text {
margin-bottom: 30rpx;
}
z-index: 9;
}
</style>

+ 52
- 39
src/pages/createing/index.vue Näytä tiedosto

@@ -8,9 +8,7 @@
><image :src="styleData.coverImg"
/></view>
<text class="name">{{ styleData.title }}</text>
<view class="orangeBtn" @click="createing(styleData.id)"
>开始制作写真
</view>
<view class="orangeBtn" @click="createing">开始制作写真 </view>
<view class="orangeBtn" @click="toCamera" style="margin-top: 10rpx"
>摄像头调试
</view>
@@ -24,7 +22,7 @@
<view class="content">
<image :src="qrCode" mode="scaleToFill" />
<text>打开微信扫码登录小程序</text>
<view class="orangeBtn">取&nbsp;消</view>
<view class="orangeBtn" style="margin-top: 100rpx">取&nbsp;消</view>
</view>
</u-overlay>
</view>
@@ -68,39 +66,45 @@ async function getInfo() {
//#endregion ---------------------

//#region 生成写真照片
async function createing(id) {
async function createing() {
// 没有token则扫码登录
if (!uni.getStorageSync("token")) {
showQrCode.value = true;
}
const userAgent = navigator.userAgent;
console.log("User Agent:", userAgent);
return;
try {
uni.showLoading({
title: "生成中...",
mask: true,
});
const res = await findImageApi();
let myImg = res.data.image;
const data = {
plat: uni.getStorageSync("plat"),
digitalAvatarId: id,
userImages: JSON.stringify([myImg]),
title: styleData.value.title,
};
const res2 = await createPhotoApi(data);
console.log(res2);
uni.navigateTo({
url: `/pages/created/index?id=${res2.data.id}`,
});
uni.hideLoading();
} catch (error) {
console.log(error);
uni.hideLoading();
uni.showToast({
title: "生成失败,请重试",
icon: "none",
});
return;
} else {
// uni.navigateTo({
// url: `/pages/created/index?id=866172729176285184`,
// });
// return;
try {
uni.showLoading({
title: "生成中...",
mask: true,
});
const res = await findImageApi();
let myImg =
"https://suimang.oss-accelerate.aliyuncs.com/capi/2023-09-18/bd50b0024ea4470cbd391bcb00382f72.jpg?x-oss-process=image/resize,w_10000/quality,q_60";
const data = {
machineQrcodeId: uni.getStorageSync("UserId"),
plat: uni.getStorageSync("plat"),
digitalAvatarId: styleData.value.id,
userImages: JSON.stringify([myImg]),
title: styleData.value.title,
};
const res2 = await createPhotoApi(data);
console.log(res2);
uni.navigateTo({
url: `/pages/created/index?id=${res2.data.id}`,
});
uni.hideLoading();
} catch (error) {
console.log(error);
uni.hideLoading();
uni.showToast({
title: "生成失败,请重试",
icon: "none",
});
}
}
}
//#endregion ---------------------
@@ -163,6 +167,15 @@ async function getUser() {
if (res.code == 200) {
clearInterval(timer.value);
timer.value = null;
uni.setStorageSync("token", res.data.token);
uni.setStorageSync("phone", res.data.phone);
showQrCode.value = false;
uni.showToast({
title: "登录成功!",
icon: "success",
mask: true,
});
createing();
}
} catch (err) {
console.log(err);
@@ -220,7 +233,7 @@ function toCamera() {
}
.name {
margin-top: 80rpx;
margin-bottom: 110rpx;
margin-bottom: 80rpx;
font-size: 44rpx;
font-weight: 800;
}
@@ -261,9 +274,9 @@ function toCamera() {
font-weight: 900;
font-size: 32rpx;
}
.orangeBtn {
margin-top: 100rpx;
}
// .orangeBtn {
// margin-top: 100rpx;
// }
}
}
</style>

+ 1
- 1
src/utils/request.js Näytä tiedosto

@@ -19,7 +19,7 @@ const request = (requestObj) => {
header: {
// Authorization: userInfoModulesPinia.token,
// token: userInfoModulesPinia.token,
// token: uni.getStorageSync("token"),
token: uni.getStorageSync("token"),
},
success: (res) => {
if (res.data.code == 1052) {


Ladataan…
Peruuta
Tallenna