|
- <template>
- <view class="page">
- <!-- 用户信息 -->
- <view class="userInfoBox" v-show="userInfoModulesPinia.token">
- <view class="phone">用户:{{ userInfoModulesPinia.phone }}</view>
- <view class="createTimes"
- >剩余次数:{{ userInfoModulesPinia.createTimes }}次</view
- >
- <view class="loginOut">退出登录</view>
- </view>
- <!-- 轮播图 -->
- <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 setup>
- //#region 导入
- import { onLoad, onUnload } from "@dcloudio/uni-app";
- import { ref, watch } from "vue";
- import {
- getPhotoListApi,
- photoSupperApi,
- getSupperPhotoStateApi,
- } from "../../api/lookPhoto.js";
- import { userInfoModules } from "@/store/modules/userInfo";
- const userInfoModulesPinia = userInfoModules();
- //#endregion
-
- //#region 轮播图
- const createState = ref(1); //制作状态:1生成中,2完成,3失败
- const workId = ref(null); //作品id
-
- onLoad(async (options) => {
- workId.value = options.id;
- // await getTemplateMsg();
- await getSwiperList();
- await getSupperPhotoState(swiperList.value[0].id);
-
- uni.setStorageSync("createTimes", userInfoModulesPinia.createTimes);
- });
- 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() {
- uni.showModal({
- title: "提示",
- content: "是否退出登录?",
- success: function (res) {
- if (res.confirm) {
- console.log("用户点击确定");
- userInfoModulesPinia.clearStorage();
- uni.navigateTo({ url: "/pages/login/index" });
- } else if (res.cancel) {
- console.log("用户点击取消");
- }
- },
- });
- }
- //#endregion ---------------------
- </script>
-
- <style lang="scss">
- .page {
- padding: 30rpx 30rpx;
- background-color: rgba(24, 25, 26, 1);
- }
- .userInfoBox {
- padding: 0rpx 20rpx;
- width: 100%;
- display: flex;
- height: 50rpx;
- line-height: 50rpx;
- justify-content: space-between;
- border-radius: 20rpx;
- background-color: rgba($color: #ccc, $alpha: 0.4);
- .loginOut {
- color: #ff4f00;
- text-decoration: underline;
- }
- }
- // 轮播图
- .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>
|