邃芒智像大屏项目
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 
 
 

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