邃芒智像大屏项目
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
 
 
 
 

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