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

1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547
  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>