邃芒智像大屏项目
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 

537 行
12 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" @click="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. <image
  25. class="logo"
  26. v-if="createState != 2"
  27. :src="modelImgUrl"
  28. mode="aspectFit"
  29. />
  30. <!-- <view class="logoBox" v-if="createState != 2"> -->
  31. <!-- <image class="logo" src="../../assets/img/logo-4.png" mode="aspectFit" /> -->
  32. <!-- </view> -->
  33. <view v-if="createState == 2" class="checkMore">左右滑动查看更多</view>
  34. <view v-if="createState != 2" class="wait">
  35. <view>写真生成中</view>
  36. <view>稍后您可在“智像小相册”微信小程序中查看</view>
  37. </view>
  38. <!-- <view
  39. @click="subscribe"
  40. v-if="createState != 2"
  41. style="text-decoration: underline; color: #ff4f00"
  42. class="wait"
  43. >做好后通知我</view
  44. > -->
  45. <view class="orangeBtn" @click="goChooseStyle"> 稍后查看 再来一套 </view>
  46. <view class="grayBtn" @click="loginOut"> 结束拍摄 </view>
  47. <u-overlay class="overlay" :show="showQrCode" opacity="0.9">
  48. <view class="content">
  49. <view class="imageBox">
  50. <image src="../../assets/img/QRCode.jpg" mode="scaleToFill" />
  51. </view>
  52. <text>微信扫码查看我的写真相册</text>
  53. <view class="orangeBtn" style="margin-top: 100rpx" @click="cancelUplaod"
  54. >我知道了</view
  55. >
  56. </view>
  57. </u-overlay>
  58. </view>
  59. </template>
  60. <script setup>
  61. //#region 导入
  62. import { onLoad, onUnload } from "@dcloudio/uni-app";
  63. import { ref, watch, onMounted } from "vue";
  64. import {
  65. getPhotoListApi,
  66. photoSupperApi,
  67. getSupperPhotoStateApi,
  68. } from "../../api/lookPhoto.js";
  69. import { getUserApi } from "../../api/createing";
  70. import { userInfoModules } from "@/store/modules/userInfo";
  71. const userInfoModulesPinia = userInfoModules();
  72. //#endregion
  73. //#region 轮播图
  74. const createState = ref(1); //制作状态:1生成中,2完成,3失败
  75. const workId = ref(null); //作品id
  76. const showQrCode = ref(false);
  77. const QRCodeUrl = ref("");
  78. const modelImgUrl = ref("");
  79. onLoad(async (options) => {
  80. workId.value = options.id;
  81. modelImgUrl.value = options.imgUrl;
  82. // await getTemplateMsg();
  83. getUser();
  84. await getSwiperList();
  85. await getSupperPhotoState(swiperList.value[0].id);
  86. // uni.setStorageSync("createTimes", userInfoModulesPinia.createTimes);
  87. });
  88. onUnload(() => {
  89. clearTimeout(timer);
  90. timer.value = null;
  91. });
  92. const swiperList = ref([]); //轮播图
  93. const previewImageList = ref([]); //预览图片列表
  94. const timer = ref(null);
  95. async function getSwiperList() {
  96. const res = await getPhotoListApi(workId.value);
  97. createState.value = res.data.status;
  98. if (res.data.photoList) {
  99. swiperList.value = res.data.photoList;
  100. swiperList.value.forEach((item) => {
  101. if (item.imageSuper) {
  102. previewImageList.value.push(item.imageSuper);
  103. } else {
  104. previewImageList.value.push(item.image);
  105. }
  106. });
  107. }
  108. if (res.data.status != 2) {
  109. timer.value = setTimeout(() => {
  110. getSwiperList();
  111. }, 3000);
  112. } else {
  113. clearTimeout(timer);
  114. timer.value = null;
  115. }
  116. }
  117. //#endregion ---------------------
  118. //#region 预览
  119. const swiperIndex = ref(0);
  120. function getSwiperIndex(index) {
  121. swiperIndex.value = index.current;
  122. }
  123. function previewImage(index) {
  124. uni.previewImage({
  125. current: index, //预览图片的下标
  126. urls: previewImageList.value, //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以
  127. loop: true,
  128. });
  129. }
  130. //#endregion ---------------------
  131. //#region 获取次数
  132. async function getUser() {
  133. try {
  134. const res = await getUserApi(uni.getStorageSync("UserId"));
  135. // 如果接口200就说明已登录
  136. if (res.code == 200 && res.data) {
  137. // 查询支付状态 0:待支付,2:支付中,3:已支付
  138. if (res.data.payStatus == 3) {
  139. uni.setStorageSync("createTimes", res.data.createTimes);
  140. userInfoModulesPinia.createTimes = res.data.createTimes;
  141. }
  142. }
  143. } catch (err) {
  144. console.log(err);
  145. }
  146. }
  147. //#endregion ---------------------
  148. //#region 页面跳转
  149. function goChooseStyle() {
  150. uni.navigateTo({
  151. url: "/pages/chooseStyle/index",
  152. });
  153. }
  154. const cancelUplaod = () => {
  155. showQrCode.value = false;
  156. userInfoModulesPinia.clearStorage();
  157. uni.navigateTo({ url: "/pages/login/index" });
  158. };
  159. //#endregion ---------------------
  160. //#region 超分相关
  161. const supperPhotoState = ref(false);
  162. async function photoSupper() {
  163. if (supperPhotoState.value == 1 || supperPhotoState.value == 2) {
  164. return;
  165. }
  166. // uni.showModal({
  167. // title: "提示",
  168. // content: "确定高清处理?",
  169. // success: function (res) {
  170. // if (res.confirm) {
  171. // checkboxValue.value = ["同意智像相机用户使用协议"];
  172. // // handleLogin();
  173. // getphonenumber(e);
  174. // } else if (res.cancel) {
  175. // }
  176. // },
  177. // fail: (err) => {},
  178. // });
  179. try {
  180. uni.showLoading({
  181. title: "高清处理中...",
  182. mask: true,
  183. });
  184. const res = await photoSupperApi({
  185. id: swiperList.value[swiperIndex.value].id,
  186. });
  187. console.log(res);
  188. uni.hideLoading();
  189. uni.showToast({
  190. title: "高清处理请求成功,请稍后",
  191. title: "高清处理请求成功,请稍等",
  192. icon: "none",
  193. });
  194. getSupperPhotoState(swiperList.value[swiperIndex.value].id);
  195. } catch (error) {
  196. console.log(error, "超分失败");
  197. uni.hideLoading();
  198. uni.showToast({
  199. title: "高清处理失败,请重试",
  200. icon: "none",
  201. });
  202. }
  203. }
  204. async function getSupperPhotoState(id) {
  205. try {
  206. const res = await getSupperPhotoStateApi(id);
  207. supperPhotoState.value = res.data.status;
  208. console.log(supperPhotoState.value, "状态");
  209. } catch (error) {
  210. console.log(error, "超分失败");
  211. }
  212. }
  213. function supperTips(params) {
  214. if (supperPhotoState.value == 0 || supperPhotoState.value == 3) {
  215. return "一键高清";
  216. } else if (supperPhotoState.value == 1) {
  217. return "高清处理中,请稍后";
  218. } else if (supperPhotoState.value == 2) {
  219. return "已高清处理";
  220. }
  221. }
  222. watch(
  223. () => swiperIndex.value,
  224. (index) => {
  225. getSupperPhotoState(swiperList.value[index].id);
  226. }
  227. );
  228. //#endregion ---------------------
  229. //#region 退出登录
  230. function loginOut() {
  231. if (userInfoModulesPinia.createTimes) {
  232. uni.showModal({
  233. title: "是否结束拍摄?",
  234. content: `您还有${userInfoModulesPinia.createTimes}次拍摄机会`,
  235. confirmColor: "#ff4f00",
  236. confirmText: "再来一套",
  237. cancelText: "结束拍摄",
  238. success: function (res) {
  239. if (res.confirm) {
  240. console.log("用户点击确定");
  241. uni.navigateTo({ url: "/pages/chooseStyle/index" });
  242. } else if (res.cancel) {
  243. console.log("用户点击取消");
  244. userInfoModulesPinia.clearStorage();
  245. uni.navigateTo({ url: "/pages/login/index" });
  246. }
  247. },
  248. });
  249. } else {
  250. showQrCode.value = true;
  251. }
  252. }
  253. //#endregion ---------------------
  254. //#region 页面初始化和卸载
  255. const resetTimer = ref(null);
  256. onMounted(() => {
  257. window.document.addEventListener("touchstart", () => {
  258. // 用户点击时,清除之前的定时器
  259. clearTimeout(resetTimer.value);
  260. // 重新设定120秒后触发的定时器
  261. resetTimer.value = setTimeout(() => {
  262. userInfoModulesPinia.clearStorage();
  263. uni.redirectTo({ url: "/pages/login/index" });
  264. }, 180000);
  265. });
  266. resetTimer.value = setTimeout(() => {
  267. userInfoModulesPinia.clearStorage();
  268. uni.redirectTo({ url: "/pages/login/index" });
  269. }, 180000);
  270. });
  271. onUnload(() => {
  272. clearTimeout(resetTimer.value);
  273. });
  274. //#endregion -----------------------
  275. </script>
  276. <style lang="scss">
  277. .page {
  278. padding: 30rpx 30rpx;
  279. background-color: rgba(24, 25, 26, 1);
  280. }
  281. .userInfoBox {
  282. position: relative;
  283. padding: 0 50rpx;
  284. width: 100%;
  285. display: flex;
  286. height: 50rpx;
  287. line-height: 50rpx;
  288. align-items: center;
  289. border-radius: 20rpx;
  290. background-color: rgba($color: #ccc, $alpha: 0.4);
  291. .createTimes {
  292. position: absolute;
  293. left: 50%;
  294. transform: translateX(-50%);
  295. }
  296. .loginOut {
  297. position: absolute;
  298. right: 20rpx;
  299. height: 80%;
  300. line-height: 160%;
  301. background-color: #ff4f00;
  302. color: #ffffff;
  303. padding: 0 15rpx;
  304. border-radius: 20rpx;
  305. }
  306. }
  307. // 轮播图
  308. .u-swiper {
  309. margin-top: 70rpx;
  310. width: 540rpx;
  311. height: 720rpx !important;
  312. border-radius: 50rpx;
  313. swiper {
  314. width: 100%;
  315. height: 720rpx !important;
  316. image {
  317. width: 100%;
  318. height: 720rpx !important;
  319. }
  320. }
  321. // h5
  322. :deep(.u-swiper__wrapper) {
  323. width: 100%;
  324. height: 720rpx !important;
  325. image {
  326. width: 100%;
  327. height: 720rpx !important;
  328. }
  329. }
  330. }
  331. .logo {
  332. margin-top: 70rpx;
  333. border-radius: 30rpx;
  334. width: 540rpx;
  335. height: 720rpx !important;
  336. }
  337. .logoBox {
  338. // display: flex;
  339. // flex-direction: column;
  340. // align-items: center;
  341. // justify-content: center;
  342. // margin-top: 70rpx;
  343. width: 540rpx;
  344. height: 720rpx !important;
  345. .logo {
  346. border-radius: 30rpx;
  347. width: 100%;
  348. // margin: 90rpx;
  349. // animation: rotateAnimation 3s 0s infinite;
  350. // opacity: 0.7;
  351. }
  352. }
  353. @keyframes rotateAnimation {
  354. 0% {
  355. transform: rotate(0deg);
  356. }
  357. 66.66% {
  358. transform: rotate(360deg);
  359. }
  360. 100% {
  361. transform: rotate(360deg);
  362. }
  363. }
  364. .checkMore,
  365. .wait {
  366. color: #ffffff;
  367. margin-top: 30rpx;
  368. }
  369. // 俩按钮
  370. .uploadBtn {
  371. position: relative;
  372. margin-top: 100rpx;
  373. width: 520rpx;
  374. height: 100rpx;
  375. line-height: 100rpx;
  376. text-align: center;
  377. background: #ff4f00;
  378. border-radius: 50rpx;
  379. font-size: 30rpx;
  380. color: #fff;
  381. font-weight: 900;
  382. .free {
  383. position: absolute;
  384. top: -18rpx;
  385. right: -70rpx;
  386. width: 142rpx;
  387. height: 50rpx;
  388. background-color: #000;
  389. border-radius: 25rpx 25rpx 25rpx 0;
  390. font-size: 22rpx;
  391. font-weight: 900;
  392. line-height: 50rpx;
  393. text-align: center;
  394. }
  395. }
  396. .orangeBtn {
  397. margin-top: 60rpx;
  398. }
  399. .grayBtn {
  400. margin-bottom: 220rpx;
  401. .free {
  402. position: absolute;
  403. color: #fff;
  404. top: -18rpx;
  405. right: -70rpx;
  406. width: 142rpx;
  407. height: 50rpx;
  408. background-color: #ff4f00;
  409. border-radius: 25rpx 25rpx 25rpx 0;
  410. font-size: 22rpx;
  411. font-weight: 900;
  412. line-height: 50rpx;
  413. text-align: center;
  414. }
  415. }
  416. .bottomBox {
  417. // flex: 1;
  418. position: absolute;
  419. bottom: 60rpx;
  420. width: 100%;
  421. display: flex;
  422. justify-content: space-evenly;
  423. padding: 65rpx 40rpx 0;
  424. .tips {
  425. position: absolute;
  426. top: 0rpx;
  427. right: 60rpx;
  428. width: 313rpx;
  429. height: 50rpx;
  430. background-color: #000;
  431. border-radius: 25rpx 25rpx 25rpx 0;
  432. font-size: 22rpx;
  433. font-weight: 900;
  434. line-height: 50rpx;
  435. text-align: center;
  436. }
  437. .shareBtn {
  438. margin: 0;
  439. color: #fff;
  440. width: 200rpx;
  441. height: 70rpx;
  442. line-height: 70rpx;
  443. text-align: center;
  444. border-radius: 70rpx;
  445. font-size: 26rpx;
  446. background-color: rgba(255, 255, 255, 0.1);
  447. }
  448. }
  449. .pictorialBox {
  450. position: absolute;
  451. width: 100%;
  452. height: 100%;
  453. display: flex;
  454. flex-direction: column;
  455. align-items: center;
  456. background-color: rgba($color: #000000, $alpha: 0.9);
  457. image {
  458. margin-top: 80rpx;
  459. width: 630rpx;
  460. height: 940rpx;
  461. border-radius: 24rpx;
  462. margin-bottom: 50rpx;
  463. }
  464. text {
  465. margin-bottom: 30rpx;
  466. }
  467. z-index: 9;
  468. }
  469. .overlay {
  470. .content {
  471. width: 100%;
  472. height: 100vh;
  473. display: flex;
  474. flex-direction: column;
  475. align-items: center;
  476. text-align: center;
  477. .imageBox {
  478. position: relative;
  479. margin-top: 200rpx;
  480. width: 300rpx;
  481. height: 300rpx;
  482. border-radius: 30rpx;
  483. background-color: #fff;
  484. .mask {
  485. position: absolute;
  486. width: 100%;
  487. height: 100%;
  488. border-radius: 30rpx;
  489. background-color: rgba($color: #000000, $alpha: 0.7);
  490. z-index: 2;
  491. }
  492. image {
  493. width: 100%;
  494. height: 100%;
  495. border-radius: 30rpx;
  496. background-color: #fff;
  497. }
  498. }
  499. text {
  500. margin-top: 20rpx;
  501. font-weight: 900;
  502. font-size: 32rpx;
  503. }
  504. // .orangeBtn {
  505. // margin-top: 100rpx;
  506. // }
  507. }
  508. }
  509. </style>