|
- <template>
- <view class="page">
- <view class="topBox">
- <view class="imgContenBox">
- <image :src="styleData.coverImg" mode="aspectFit" />
- </view>
- <view class="changeStyle" @click="changeStyle">更换风格</view>
- </view>
- <!-- 轮播图 -->
- <!-- <u-swiper
- v-if="createState == 2"
- indicator
- indicatorMode="dot"
- :radius="30"
- :autoplay="false"
- :list="swiperList"
- keyName="image"
- @change=""
- @click=""
- ></u-swiper> -->
- <!-- <u-swiper
- v-if="createState == 2"
- height="320"
- :list="swiperList"
- keyName="image"
- previousMargin="60"
- nextMargin="60"
- circular
- indicator
- indicatorMode="line"
- :autoplay="false"
- radius="5"
- bgColor="#1f2123"
- ></u-swiper> -->
- <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="checkMore">左右滑动查看更多</view>
- <!-- @click="goLookPhoto" -->
- <image
- v-if="createState != 2"
- class="logo"
- src="../../assets/img/logo-4.png"
- mode="scaleToFill"
- />
- <!-- 生成中或者生成失败的底部栏 -->
- <view v-show="createState != 2" class="createIng">
- <text class="time">写真生成中,预计用时X分X秒</text>
- <text class="inform">做好后通知我</text>
- <view class="orangeBtn" @click="changeStyle">继续制作写真</view>
- </view>
- <!-- 生成成功的底部栏 -->
- <view v-show="createState == 2" class="createEd">
- <view class="orangeBtn anew" @click="changeStyle">重新生成</view>
- <view class="orangeBtn grayBtn" @click="goHome">回到首页</view>
- </view>
- </view>
- </template>
-
- <script setup>
- //#region 导入
- import { ref, reactive } from "vue";
- import { onLoad } from "@dcloudio/uni-app";
- import { findWorkByIdApi } from "../../api/createing.js";
- import { findByIdApi } from "../../api/closeStyle.js";
-
- //#endregion
-
- //#region 生成写真照片
- const swiperList = ref([]);
- //#endregion ---------------------
-
- //#region 查询页面状态
- const workId = ref(null); //作品id
- const createState = ref(null); //制作状态:1生成中,2完成,3失败
- const styleId = ref(null); //风格id
- const styleData = ref(""); //风格信息
-
- onLoad((options) => {
- // workId.value = options.id;
- workId.value = "857147862095679488";
- getWorkInfo();
-
- // let getWindowInfo = uni.getWindowInfo().screenWidth;
- // console.log(getWindowInfo, "页面宽度");
- });
- async function getWorkInfo() {
- try {
- uni.showLoading({
- title: "加载中...",
- mask: true,
- });
- // const res = await findWorkByIdApi("854592119583068160");
- const res = await findWorkByIdApi(workId.value);
- if (res.data.photoList) {
- swiperList.value = res.data.photoList;
- swiperList.value.forEach((item) => {
- previewImageList.value.push(item.image);
- });
- }
- createState.value = res.data.status;
- styleId.value = res.data.digitalAvatarId;
- const res2 = await findByIdApi(styleId.value);
- styleData.value = res2.data;
- uni.hideLoading();
- } catch (error) {
- uni.hideLoading();
- uni.showToast({
- title: "加载失败,请重试",
- icon: "none",
- });
- console.log(error);
- }
- }
- //#endregion ---------------------
-
- //#region 页面跳转
- function changeStyle() {
- uni.navigateTo({
- url: "/pages/closeStyle/closeStyle",
- });
- }
- function goHome() {
- uni.switchTab({
- url: "/pages/index/index",
- });
- }
- function goLookPhoto() {
- uni.redirectTo({
- url: "/pages/lookPhoto/index",
- });
- }
- //#endregion ---------------------
-
- //#region 轮播图
- const swiperIndex = ref(0);
- const previewImageList = ref([]); //预览图片列表
- function getSwiperIndex(index) {
- swiperIndex.value = index.current;
- }
- function previewImage(index) {
- uni.previewImage({
- current: index, //预览图片的下标
- urls: previewImageList.value, //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以
- loop: true,
- });
- }
- //#endregion ---------------------
-
- //#region
-
- //#endregion ---------------------
- </script>
-
- <style lang="scss">
- .page {
- background-color: #1f2123;
- }
- .topBox {
- margin-top: 20rpx;
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- height: 200rpx;
- .imgContenBox {
- width: 150rpx;
- height: 100%;
- border-radius: 30rpx;
- image {
- width: 150rpx;
- max-height: 200rpx;
- border-radius: 30rpx;
- }
- }
- .changeStyle {
- margin-right: 70rpx;
- width: 220rpx;
- height: 72rpx;
- border: 1px solid #ff4f00;
- border-radius: 36rpx;
- text-align: center;
- line-height: 72rpx;
- color: #ff4f00;
- }
- }
- .imgListBox {
- width: 100%;
- height: 900rpx;
- padding: 30rpx 60rpx;
- display: flex;
- justify-content: space-between;
- align-items: center;
- flex-wrap: wrap;
- view {
- width: 48%;
- height: 48%;
- background-color: #ccc;
- border-radius: 30rpx;
- image {
- max-width: 100%;
- max-height: 100%;
- }
- }
- }
- // .u-swiper {
- // width: 100%;
- // height: 695rpx !important;
- // }
- .u-swiper {
- margin-top: 40rpx;
- margin-bottom: 30rpx;
- 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 {
- width: 520rpx;
- margin: 90rpx;
- }
- .createIng,
- .createEd {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- .time {
- font-size: 26rpx;
- font-weight: 900;
- margin-top: 20rpx;
- margin-bottom: 20rpx;
- }
- .inform {
- font-size: 22rpx;
- color: #ffffff;
- opacity: 0.5;
- margin-bottom: 30rpx;
- }
- .look {
- font-size: 40rpx;
- font-weight: 900;
- margin-top: 20rpx;
- margin-bottom: 30rpx;
- }
- .anew {
- margin-top: 80rpx;
- }
- }
- </style>
|