|
|
@@ -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> |