邃芒智像(Uniapp : WX、TT、H5)
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 
 

277 linhas
6.4 KiB

  1. <template>
  2. <view class="page">
  3. <view class="topBox">
  4. <view class="imgContenBox">
  5. <image :src="styleData.coverImg" mode="aspectFit" />
  6. </view>
  7. <view class="changeStyle" @click="changeStyle">更换风格</view>
  8. </view>
  9. <!-- 轮播图 -->
  10. <!-- <u-swiper
  11. v-if="createState == 2"
  12. indicator
  13. indicatorMode="dot"
  14. :radius="30"
  15. :autoplay="false"
  16. :list="swiperList"
  17. keyName="image"
  18. @change=""
  19. @click=""
  20. ></u-swiper> -->
  21. <!-- <u-swiper
  22. v-if="createState == 2"
  23. height="320"
  24. :list="swiperList"
  25. keyName="image"
  26. previousMargin="60"
  27. nextMargin="60"
  28. circular
  29. indicator
  30. indicatorMode="line"
  31. :autoplay="false"
  32. radius="5"
  33. bgColor="#1f2123"
  34. ></u-swiper> -->
  35. <u-swiper
  36. v-if="createState == 2"
  37. indicator
  38. indicatorMode="dot"
  39. circular
  40. :radius="30"
  41. :autoplay="false"
  42. :list="swiperList"
  43. keyName="image"
  44. @change="getSwiperIndex"
  45. @click="previewImage"
  46. ></u-swiper>
  47. <view class="checkMore">左右滑动查看更多</view>
  48. <!-- @click="goLookPhoto" -->
  49. <image
  50. v-if="createState != 2"
  51. class="logo"
  52. src="../../assets/img/logo-4.png"
  53. mode="scaleToFill"
  54. />
  55. <!-- 生成中或者生成失败的底部栏 -->
  56. <view v-show="createState != 2" class="createIng">
  57. <text class="time">写真生成中,预计用时X分X秒</text>
  58. <text class="inform">做好后通知我</text>
  59. <view class="orangeBtn" @click="changeStyle">继续制作写真</view>
  60. </view>
  61. <!-- 生成成功的底部栏 -->
  62. <view v-show="createState == 2" class="createEd">
  63. <view class="orangeBtn anew" @click="changeStyle">重新生成</view>
  64. <view class="orangeBtn grayBtn" @click="goHome">回到首页</view>
  65. </view>
  66. </view>
  67. </template>
  68. <script setup>
  69. //#region 导入
  70. import { ref, reactive } from "vue";
  71. import { onLoad } from "@dcloudio/uni-app";
  72. import { findWorkByIdApi } from "../../api/createing.js";
  73. import { findByIdApi } from "../../api/closeStyle.js";
  74. //#endregion
  75. //#region 生成写真照片
  76. const swiperList = ref([]);
  77. //#endregion ---------------------
  78. //#region 查询页面状态
  79. const workId = ref(null); //作品id
  80. const createState = ref(null); //制作状态:1生成中,2完成,3失败
  81. const styleId = ref(null); //风格id
  82. const styleData = ref(""); //风格信息
  83. onLoad((options) => {
  84. // workId.value = options.id;
  85. workId.value = "857147862095679488";
  86. getWorkInfo();
  87. // let getWindowInfo = uni.getWindowInfo().screenWidth;
  88. // console.log(getWindowInfo, "页面宽度");
  89. });
  90. async function getWorkInfo() {
  91. try {
  92. uni.showLoading({
  93. title: "加载中...",
  94. mask: true,
  95. });
  96. // const res = await findWorkByIdApi("854592119583068160");
  97. const res = await findWorkByIdApi(workId.value);
  98. if (res.data.photoList) {
  99. swiperList.value = res.data.photoList;
  100. swiperList.value.forEach((item) => {
  101. previewImageList.value.push(item.image);
  102. });
  103. }
  104. createState.value = res.data.status;
  105. styleId.value = res.data.digitalAvatarId;
  106. const res2 = await findByIdApi(styleId.value);
  107. styleData.value = res2.data;
  108. uni.hideLoading();
  109. } catch (error) {
  110. uni.hideLoading();
  111. uni.showToast({
  112. title: "加载失败,请重试",
  113. icon: "none",
  114. });
  115. console.log(error);
  116. }
  117. }
  118. //#endregion ---------------------
  119. //#region 页面跳转
  120. function changeStyle() {
  121. uni.navigateTo({
  122. url: "/pages/closeStyle/closeStyle",
  123. });
  124. }
  125. function goHome() {
  126. uni.switchTab({
  127. url: "/pages/index/index",
  128. });
  129. }
  130. function goLookPhoto() {
  131. uni.redirectTo({
  132. url: "/pages/lookPhoto/index",
  133. });
  134. }
  135. //#endregion ---------------------
  136. //#region 轮播图
  137. const swiperIndex = ref(0);
  138. const previewImageList = ref([]); //预览图片列表
  139. function getSwiperIndex(index) {
  140. swiperIndex.value = index.current;
  141. }
  142. function previewImage(index) {
  143. uni.previewImage({
  144. current: index, //预览图片的下标
  145. urls: previewImageList.value, //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以
  146. loop: true,
  147. });
  148. }
  149. //#endregion ---------------------
  150. //#region
  151. //#endregion ---------------------
  152. </script>
  153. <style lang="scss">
  154. .page {
  155. background-color: #1f2123;
  156. }
  157. .topBox {
  158. margin-top: 20rpx;
  159. display: flex;
  160. align-items: center;
  161. justify-content: space-between;
  162. width: 100%;
  163. height: 200rpx;
  164. .imgContenBox {
  165. width: 150rpx;
  166. height: 100%;
  167. border-radius: 30rpx;
  168. image {
  169. width: 150rpx;
  170. max-height: 200rpx;
  171. border-radius: 30rpx;
  172. }
  173. }
  174. .changeStyle {
  175. margin-right: 70rpx;
  176. width: 220rpx;
  177. height: 72rpx;
  178. border: 1px solid #ff4f00;
  179. border-radius: 36rpx;
  180. text-align: center;
  181. line-height: 72rpx;
  182. color: #ff4f00;
  183. }
  184. }
  185. .imgListBox {
  186. width: 100%;
  187. height: 900rpx;
  188. padding: 30rpx 60rpx;
  189. display: flex;
  190. justify-content: space-between;
  191. align-items: center;
  192. flex-wrap: wrap;
  193. view {
  194. width: 48%;
  195. height: 48%;
  196. background-color: #ccc;
  197. border-radius: 30rpx;
  198. image {
  199. max-width: 100%;
  200. max-height: 100%;
  201. }
  202. }
  203. }
  204. // .u-swiper {
  205. // width: 100%;
  206. // height: 695rpx !important;
  207. // }
  208. .u-swiper {
  209. margin-top: 40rpx;
  210. margin-bottom: 30rpx;
  211. width: 540rpx;
  212. height: 720rpx !important;
  213. border-radius: 50rpx;
  214. swiper {
  215. width: 100%;
  216. height: 720rpx !important;
  217. image {
  218. width: 100%;
  219. height: 720rpx !important;
  220. }
  221. }
  222. // h5
  223. :deep(.u-swiper__wrapper) {
  224. width: 100%;
  225. height: 720rpx !important;
  226. image {
  227. width: 100%;
  228. height: 720rpx !important;
  229. }
  230. }
  231. }
  232. .logo {
  233. width: 520rpx;
  234. margin: 90rpx;
  235. }
  236. .createIng,
  237. .createEd {
  238. width: 100%;
  239. display: flex;
  240. flex-direction: column;
  241. align-items: center;
  242. justify-content: center;
  243. .time {
  244. font-size: 26rpx;
  245. font-weight: 900;
  246. margin-top: 20rpx;
  247. margin-bottom: 20rpx;
  248. }
  249. .inform {
  250. font-size: 22rpx;
  251. color: #ffffff;
  252. opacity: 0.5;
  253. margin-bottom: 30rpx;
  254. }
  255. .look {
  256. font-size: 40rpx;
  257. font-weight: 900;
  258. margin-top: 20rpx;
  259. margin-bottom: 30rpx;
  260. }
  261. .anew {
  262. margin-top: 80rpx;
  263. }
  264. }
  265. </style>