邃芒智像大屏项目
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

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