邃芒智像大屏项目
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
 
 
 
 

396 righe
8.8 KiB

  1. <template>
  2. <view class="page">
  3. <!-- 用户信息 -->
  4. <view class="userInfoBox" v-show="userInfoModulesPinia.token">
  5. <view class="phone">用户:{{ userInfoModulesPinia.phone }}</view>
  6. <view class="createTimes"
  7. >剩余次数:{{ userInfoModulesPinia.createTimes }}次</view
  8. >
  9. <view class="loginOut">退出登录</view>
  10. </view>
  11. <!-- 轮播图 -->
  12. <u-swiper
  13. v-if="createState == 2"
  14. indicator
  15. indicatorMode="dot"
  16. circular
  17. :radius="30"
  18. :autoplay="false"
  19. :list="swiperList"
  20. keyName="image"
  21. @change="getSwiperIndex"
  22. @click="previewImage"
  23. ></u-swiper>
  24. <view class="logoBox" v-if="createState != 2">
  25. <image class="logo" src="../../assets/img/logo-4.png" mode="aspectFit" />
  26. </view>
  27. <view v-if="createState == 2" class="checkMore">左右滑动查看更多</view>
  28. <view v-if="createState != 2" class="wait">生成中,请稍后...</view>
  29. <!-- <view
  30. @click="subscribe"
  31. v-if="createState != 2"
  32. style="text-decoration: underline; color: #ff4f00"
  33. class="wait"
  34. >做好后通知我</view
  35. > -->
  36. <view class="orangeBtn" @click="goChooseStyle"> 重新选择 </view>
  37. <view class="grayBtn" @click="loginOut"> 退出登录 </view>
  38. </view>
  39. </template>
  40. <script setup>
  41. //#region 导入
  42. import { onLoad, onUnload } from "@dcloudio/uni-app";
  43. import { ref, watch } from "vue";
  44. import {
  45. getPhotoListApi,
  46. photoSupperApi,
  47. getSupperPhotoStateApi,
  48. } from "../../api/lookPhoto.js";
  49. import { userInfoModules } from "@/store/modules/userInfo";
  50. const userInfoModulesPinia = userInfoModules();
  51. //#endregion
  52. //#region 轮播图
  53. const createState = ref(1); //制作状态:1生成中,2完成,3失败
  54. const workId = ref(null); //作品id
  55. onLoad(async (options) => {
  56. workId.value = options.id;
  57. // await getTemplateMsg();
  58. await getSwiperList();
  59. await getSupperPhotoState(swiperList.value[0].id);
  60. uni.setStorageSync("createTimes", userInfoModulesPinia.createTimes);
  61. });
  62. onUnload(() => {
  63. clearTimeout(timer);
  64. timer.value = null;
  65. });
  66. const swiperList = ref([]); //轮播图
  67. const previewImageList = ref([]); //预览图片列表
  68. const timer = ref(null);
  69. async function getSwiperList() {
  70. const res = await getPhotoListApi(workId.value);
  71. createState.value = res.data.status;
  72. if (res.data.photoList) {
  73. swiperList.value = res.data.photoList;
  74. swiperList.value.forEach((item) => {
  75. if (item.imageSuper) {
  76. previewImageList.value.push(item.imageSuper);
  77. } else {
  78. previewImageList.value.push(item.image);
  79. }
  80. });
  81. }
  82. if (res.data.status != 2) {
  83. timer.value = setTimeout(() => {
  84. getSwiperList();
  85. }, 3000);
  86. } else {
  87. clearTimeout(timer);
  88. timer.value = null;
  89. }
  90. }
  91. //#endregion ---------------------
  92. //#region 预览
  93. const swiperIndex = ref(0);
  94. function getSwiperIndex(index) {
  95. swiperIndex.value = index.current;
  96. }
  97. function previewImage(index) {
  98. uni.previewImage({
  99. current: index, //预览图片的下标
  100. urls: previewImageList.value, //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以
  101. loop: true,
  102. });
  103. }
  104. //#endregion ---------------------
  105. //#endregion ---------------------
  106. //#region 页面跳转
  107. function goChooseStyle() {
  108. uni.navigateTo({
  109. url: "/pages/chooseStyle/index",
  110. });
  111. }
  112. //#endregion ---------------------
  113. //#region 超分相关
  114. const supperPhotoState = ref(false);
  115. async function photoSupper() {
  116. if (supperPhotoState.value == 1 || supperPhotoState.value == 2) {
  117. return;
  118. }
  119. // uni.showModal({
  120. // title: "提示",
  121. // content: "确定高清处理?",
  122. // success: function (res) {
  123. // if (res.confirm) {
  124. // checkboxValue.value = ["同意智像相机用户使用协议"];
  125. // // handleLogin();
  126. // getphonenumber(e);
  127. // } else if (res.cancel) {
  128. // }
  129. // },
  130. // fail: (err) => {},
  131. // });
  132. try {
  133. uni.showLoading({
  134. title: "高清处理中...",
  135. mask: true,
  136. });
  137. const res = await photoSupperApi({
  138. id: swiperList.value[swiperIndex.value].id,
  139. });
  140. console.log(res);
  141. uni.hideLoading();
  142. uni.showToast({
  143. title: "高清处理请求成功,请稍后",
  144. title: "高清处理请求成功,请稍等",
  145. icon: "none",
  146. });
  147. getSupperPhotoState(swiperList.value[swiperIndex.value].id);
  148. } catch (error) {
  149. console.log(error, "超分失败");
  150. uni.hideLoading();
  151. uni.showToast({
  152. title: "高清处理失败,请重试",
  153. icon: "none",
  154. });
  155. }
  156. }
  157. async function getSupperPhotoState(id) {
  158. try {
  159. const res = await getSupperPhotoStateApi(id);
  160. supperPhotoState.value = res.data.status;
  161. console.log(supperPhotoState.value, "状态");
  162. } catch (error) {
  163. console.log(error, "超分失败");
  164. }
  165. }
  166. function supperTips(params) {
  167. if (supperPhotoState.value == 0 || supperPhotoState.value == 3) {
  168. return "一键高清";
  169. } else if (supperPhotoState.value == 1) {
  170. return "高清处理中,请稍后";
  171. } else if (supperPhotoState.value == 2) {
  172. return "已高清处理";
  173. }
  174. }
  175. watch(
  176. () => swiperIndex.value,
  177. (index) => {
  178. getSupperPhotoState(swiperList.value[index].id);
  179. }
  180. );
  181. //#endregion ---------------------
  182. //#region 退出登录
  183. function loginOut() {
  184. uni.showModal({
  185. title: "提示",
  186. content: "是否退出登录?",
  187. success: function (res) {
  188. if (res.confirm) {
  189. console.log("用户点击确定");
  190. userInfoModulesPinia.clearStorage();
  191. uni.navigateTo({ url: "/pages/login/index" });
  192. } else if (res.cancel) {
  193. console.log("用户点击取消");
  194. }
  195. },
  196. });
  197. }
  198. //#endregion ---------------------
  199. </script>
  200. <style lang="scss">
  201. .page {
  202. padding: 30rpx 30rpx;
  203. background-color: rgba(24, 25, 26, 1);
  204. }
  205. .userInfoBox {
  206. padding: 0rpx 20rpx;
  207. width: 100%;
  208. display: flex;
  209. height: 50rpx;
  210. line-height: 50rpx;
  211. justify-content: space-between;
  212. border-radius: 20rpx;
  213. background-color: rgba($color: #ccc, $alpha: 0.4);
  214. .loginOut {
  215. color: #ff4f00;
  216. text-decoration: underline;
  217. }
  218. }
  219. // 轮播图
  220. .u-swiper {
  221. margin-top: 70rpx;
  222. width: 540rpx;
  223. height: 720rpx !important;
  224. border-radius: 50rpx;
  225. swiper {
  226. width: 100%;
  227. height: 720rpx !important;
  228. image {
  229. width: 100%;
  230. height: 720rpx !important;
  231. }
  232. }
  233. // h5
  234. :deep(.u-swiper__wrapper) {
  235. width: 100%;
  236. height: 720rpx !important;
  237. image {
  238. width: 100%;
  239. height: 720rpx !important;
  240. }
  241. }
  242. }
  243. .logoBox {
  244. display: flex;
  245. flex-direction: column;
  246. align-items: center;
  247. justify-content: center;
  248. margin-top: 70rpx;
  249. width: 540rpx;
  250. height: 720rpx !important;
  251. .logo {
  252. width: 260rpx;
  253. margin: 90rpx;
  254. animation: rotateAnimation 3s 0s infinite;
  255. opacity: 0.7;
  256. }
  257. }
  258. @keyframes rotateAnimation {
  259. 0% {
  260. transform: rotate(0deg);
  261. }
  262. 66.66% {
  263. transform: rotate(360deg);
  264. }
  265. 100% {
  266. transform: rotate(360deg);
  267. }
  268. }
  269. .checkMore,
  270. .wait {
  271. color: #ffffff;
  272. margin-top: 30rpx;
  273. }
  274. // 俩按钮
  275. .uploadBtn {
  276. position: relative;
  277. margin-top: 100rpx;
  278. width: 520rpx;
  279. height: 100rpx;
  280. line-height: 100rpx;
  281. text-align: center;
  282. background: #ff4f00;
  283. border-radius: 50rpx;
  284. font-size: 30rpx;
  285. color: #fff;
  286. font-weight: 900;
  287. .free {
  288. position: absolute;
  289. top: -18rpx;
  290. right: -70rpx;
  291. width: 142rpx;
  292. height: 50rpx;
  293. background-color: #000;
  294. border-radius: 25rpx 25rpx 25rpx 0;
  295. font-size: 22rpx;
  296. font-weight: 900;
  297. line-height: 50rpx;
  298. text-align: center;
  299. }
  300. }
  301. .orangeBtn {
  302. margin-top: 60rpx;
  303. }
  304. .grayBtn {
  305. margin-bottom: 220rpx;
  306. .free {
  307. position: absolute;
  308. color: #fff;
  309. top: -18rpx;
  310. right: -70rpx;
  311. width: 142rpx;
  312. height: 50rpx;
  313. background-color: #ff4f00;
  314. border-radius: 25rpx 25rpx 25rpx 0;
  315. font-size: 22rpx;
  316. font-weight: 900;
  317. line-height: 50rpx;
  318. text-align: center;
  319. }
  320. }
  321. .bottomBox {
  322. // flex: 1;
  323. position: absolute;
  324. bottom: 60rpx;
  325. width: 100%;
  326. display: flex;
  327. justify-content: space-evenly;
  328. padding: 65rpx 40rpx 0;
  329. .tips {
  330. position: absolute;
  331. top: 0rpx;
  332. right: 60rpx;
  333. width: 313rpx;
  334. height: 50rpx;
  335. background-color: #000;
  336. border-radius: 25rpx 25rpx 25rpx 0;
  337. font-size: 22rpx;
  338. font-weight: 900;
  339. line-height: 50rpx;
  340. text-align: center;
  341. }
  342. .shareBtn {
  343. margin: 0;
  344. color: #fff;
  345. width: 200rpx;
  346. height: 70rpx;
  347. line-height: 70rpx;
  348. text-align: center;
  349. border-radius: 70rpx;
  350. font-size: 26rpx;
  351. background-color: rgba(255, 255, 255, 0.1);
  352. }
  353. }
  354. .pictorialBox {
  355. position: absolute;
  356. width: 100%;
  357. height: 100%;
  358. display: flex;
  359. flex-direction: column;
  360. align-items: center;
  361. background-color: rgba($color: #000000, $alpha: 0.9);
  362. image {
  363. margin-top: 80rpx;
  364. width: 630rpx;
  365. height: 940rpx;
  366. border-radius: 24rpx;
  367. margin-bottom: 50rpx;
  368. }
  369. text {
  370. margin-bottom: 30rpx;
  371. }
  372. z-index: 9;
  373. }
  374. </style>