|
- <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" @click="loginOut">{{
- userInfoModulesPinia.createTimes == 0 ? "查看相册" : "结束拍摄"
- }}</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>
- <image
- class="logo"
- v-if="createState != 2"
- :src="modelImgUrl"
- mode="aspectFit"
- />
-
- <view v-if="createState == 2" class="checkMore">左右滑动查看更多</view>
-
- <view class="orangeBtn" @click="goChooseStyle"
- >{{ userInfoModulesPinia.createTimes == 0 ? "再玩一次" : "再来一套" }}
- </view>
- <view class="grayBtn" @click="loginOut">
- {{
- userInfoModulesPinia.createTimes == 0 ? "查看相册" : "结束拍摄"
- }}</view
- >
-
- <u-overlay class="overlay" :show="showQrCode" opacity="0.9">
- <view class="content">
- <view class="imageBox">
- <image src="../../assets/img/QRCode.jpg" mode="scaleToFill" />
- </view>
- <text>微信扫码查看我的写真相册</text>
- <view class="orangeBtn" style="margin-top: 100rpx" @click="cancelUplaod"
- >我知道了</view
- >
- </view>
- </u-overlay>
- </view>
- </template>
-
- <script setup>
- //#region 导入
- import { onLoad, onUnload } from "@dcloudio/uni-app";
- import { ref, watch, onMounted } from "vue";
- import {
- getPhotoListApi,
- photoSupperApi,
- getSupperPhotoStateApi,
- } from "../../api/lookPhoto.js";
- import { getUserApi } from "../../api/createing";
- import { userInfoModules } from "@/store/modules/userInfo";
- const userInfoModulesPinia = userInfoModules();
- //#endregion
-
- //#region 轮播图
- const createState = ref(1); //制作状态:1生成中,2完成,3失败
- const workId = ref(null); //作品id
- const showQrCode = ref(false);
- const QRCodeUrl = ref("");
-
- const modelImgUrl = ref("");
- onLoad(async (options) => {
- workId.value = options.id;
- modelImgUrl.value = options.imgUrl;
- // await getTemplateMsg();
- getUser();
- await getSwiperList();
- await getSupperPhotoState(swiperList.value[0].id);
- // uni.setStorageSync("createTimes", userInfoModulesPinia.createTimes);
- });
- onUnload(() => {
- clearTimeout(timer.value);
- timer.value = null;
- });
- const swiperList = ref([]); //轮播图
- const previewImageList = ref([]); //预览图片列表
-
- const timer = ref(null);
- async function getSwiperList() {
- uni.showLoading({
- title: "生成中,请稍后",
- });
- const res = await getPhotoListApi(workId.value);
- createState.value = res.data.status;
-
- if (res.data.photoList) {
- uni.hideLoading();
- uni.showToast({
- title: "生成成功!",
- icon: "success",
- });
- 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.value);
- 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 ---------------------
-
- //#region 获取次数
- async function getUser() {
- try {
- const res = await getUserApi(uni.getStorageSync("UserId"));
- // 如果接口200就说明已登录
- if (res.code == 200 && res.data) {
- // 查询支付状态 0:待支付,2:支付中,3:已支付
- if (res.data.payStatus == 3) {
- uni.setStorageSync("createTimes", res.data.createTimes);
- userInfoModulesPinia.createTimes = res.data.createTimes;
- console.log();
- }
- }
- } catch (err) {
- console.log(err);
- }
- }
- //#endregion ---------------------
-
- //#region 页面跳转
- function goChooseStyle() {
- uni.navigateTo({
- url: "/pages/chooseStyle/index",
- });
- }
-
- const cancelUplaod = () => {
- showQrCode.value = false;
- userInfoModulesPinia.clearStorage();
- uni.navigateTo({ url: "/pages/login/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() {
- if (userInfoModulesPinia.createTimes) {
- uni.showModal({
- title: "是否结束拍摄?",
- content: `您还有${userInfoModulesPinia.createTimes}次拍摄机会`,
- confirmColor: "#ff4f00",
- confirmText: "再来一套",
- cancelText: "结束拍摄",
- success: function (res) {
- if (res.confirm) {
- console.log("用户点击确定");
- uni.navigateTo({ url: "/pages/chooseStyle/index" });
- } else if (res.cancel) {
- console.log("用户点击取消");
- showQrCode.value = true;
- }
- },
- });
- } else {
- showQrCode.value = true;
- }
- }
- //#endregion ---------------------
-
- //#region 页面初始化和卸载
- const resetTimer = ref(null);
- onMounted(() => {
- window.document.addEventListener("touchstart", () => {
- // 用户点击时,清除之前的定时器
- clearTimeout(resetTimer.value);
- // 重新设定120秒后触发的定时器
- resetTimer.value = setTimeout(() => {
- userInfoModulesPinia.clearStorage();
- window.webview.raiseEvent("pageRefresh", "test_params");
- uni.redirectTo({ url: "/pages/login/index" });
- }, 300000);
- });
- resetTimer.value = setTimeout(() => {
- userInfoModulesPinia.clearStorage();
- window.webview.raiseEvent("pageRefresh", "test_params");
- uni.redirectTo({ url: "/pages/login/index" });
- }, 300000);
- });
- onUnload(() => {
- uni.hideLoading();
- clearTimeout(resetTimer.value);
- clearTimeout(timer.value);
- });
- //#endregion -----------------------
- </script>
-
- <style lang="scss">
- .page {
- padding: 30rpx 30rpx;
- background-color: rgba(24, 25, 26, 1);
- }
- .userInfoBox {
- position: relative;
- padding: 0 50rpx;
- width: 100%;
- display: flex;
- height: 50rpx;
- line-height: 50rpx;
- align-items: center;
- border-radius: 20rpx;
- background-color: rgba($color: #ccc, $alpha: 0.4);
- .createTimes {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- }
- .loginOut {
- position: absolute;
- right: 20rpx;
- height: 40rpx;
- line-height: 40rpx;
- background-color: #ff4f00;
- color: #ffffff;
- padding: 0 15rpx;
- border-radius: 20rpx;
- }
- }
- // 轮播图
- .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;
- }
- }
- }
- .logo {
- margin-top: 70rpx;
- border-radius: 30rpx;
- width: 540rpx;
- height: 720rpx !important;
- }
- .logoBox {
- // display: flex;
- // flex-direction: column;
- // align-items: center;
- // justify-content: center;
- // margin-top: 70rpx;
- width: 540rpx;
- height: 720rpx !important;
- .logo {
- border-radius: 30rpx;
- width: 100%;
- // 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 {
- text-align: center;
- color: #ffffff;
- margin-top: 30rpx;
- .creating {
- font-size: 40rpx;
- margin-bottom: 10rpx;
- }
- }
-
- // 俩按钮
- .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;
- }
-
- .overlay {
- .content {
- width: 100%;
- height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- .imageBox {
- position: relative;
- margin-top: 200rpx;
- width: 300rpx;
- height: 300rpx;
- border-radius: 30rpx;
- background-color: #fff;
- .mask {
- position: absolute;
- width: 100%;
- height: 100%;
- border-radius: 30rpx;
- background-color: rgba($color: #000000, $alpha: 0.7);
- z-index: 2;
- }
- image {
- width: 100%;
- height: 100%;
- border-radius: 30rpx;
- background-color: #fff;
- }
- }
- text {
- margin-top: 20rpx;
- font-weight: 900;
- font-size: 32rpx;
- }
- // .orangeBtn {
- // margin-top: 100rpx;
- // }
- }
- }
- </style>
|