邃芒智像大屏项目
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.
 
 
 
 

456 regels
11 KiB

  1. <template>
  2. <view class="page">
  3. <!-- 毛玻璃 -->
  4. <view class="glass">
  5. <image src="../../assets/img/homeImg.jpg" mode="scaleToFill" />
  6. </view>
  7. <!-- 用户信息 -->
  8. <view class="userInfoBox" v-show="userInfoModulesPinia.token">
  9. <view class="phone">用户:{{ userInfoModulesPinia.phone }}</view>
  10. <view class="createTimes"
  11. >剩余次数:{{ userInfoModulesPinia.createTimes }}次</view
  12. >
  13. <view class="loginOut" @click="loginOut">退出登录</view>
  14. </view>
  15. <!-- 展示图 -->
  16. <view class="showImgBox imgContenBox"
  17. ><image :src="styleData.coverImg"
  18. /></view>
  19. <text class="name">{{ styleData.title }}</text>
  20. <view class="orangeBtn" @click="createing1" style="margin-top: -20rpx"
  21. >开始制作写真
  22. </view>
  23. <view class="grayBtn" @click="toChooseModel" style="margin-top: 30rpx"
  24. >重新选择模版
  25. </view>
  26. <!-- 登录二维码弹出层 -->
  27. <u-overlay
  28. class="overlay"
  29. :show="showQrCode"
  30. @click="showQrCode = false"
  31. opacity="0.9"
  32. >
  33. <view class="content">
  34. <view class="imageBox" :class="payMask ? 'glass' : ''">
  35. <view class="mask" v-show="payMask"></view>
  36. <image :src="qrCode" mode="scaleToFill" />
  37. </view>
  38. <text v-show="!userInfoModulesPinia.token">打开微信扫码登录小程序</text>
  39. <text
  40. v-show="
  41. userInfoModulesPinia.token && userInfoModulesPinia.createTimes == 0
  42. "
  43. >剩余生成次数不足,请扫码充值!</text
  44. >
  45. <text style="margin-top: 30rpx" v-show="payCount != 90"
  46. >{{ payCount }}秒后过期</text
  47. >
  48. <view class="orangeBtn" style="margin-top: 60rpx">取&nbsp;消</view>
  49. </view>
  50. </u-overlay>
  51. </view>
  52. </template>
  53. <script setup>
  54. //#region 导入
  55. import { ref, watch, onMounted } from "vue";
  56. import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
  57. import {
  58. findByIdApi,
  59. findImageApi,
  60. createPhotoApi,
  61. } from "../../api/closeStyle";
  62. import { getQRCodeApi, getUserApi } from "../../api/createing";
  63. import { userInfoModules } from "@/store/modules/userInfo";
  64. const userInfoModulesPinia = userInfoModules();
  65. //#endregion
  66. //#region 初始化
  67. const styleId = ref(null);
  68. const styleData = ref({});
  69. const cameraImg = ref(null);
  70. onLoad(async (options) => {
  71. styleId.value = options.id;
  72. // getInfo();
  73. cameraImg.value = options.imageUrl;
  74. if (options.imageUrl) {
  75. await getInfo();
  76. createing2();
  77. }
  78. });
  79. onShow(() => {
  80. getInfo();
  81. });
  82. async function getInfo() {
  83. try {
  84. const res = await findByIdApi(styleId.value);
  85. styleData.value = res.data;
  86. } catch (error) {
  87. uni.showToast({
  88. title: "获取数据失败,请重试",
  89. icon: "none",
  90. });
  91. }
  92. }
  93. //#endregion ---------------------
  94. //#region 生成写真照片
  95. async function createing1() {
  96. // 没有token则扫码登录
  97. if (!uni.getStorageSync("token")) {
  98. showQrCode.value = true;
  99. return;
  100. } else if (uni.getStorageSync("createTimes") == 0) {
  101. showQrCode.value = true;
  102. } else {
  103. toCamera();
  104. }
  105. }
  106. async function createing2() {
  107. try {
  108. uni.showLoading({
  109. title: "生成中...",
  110. mask: true,
  111. });
  112. // const res = await findImageApi();
  113. // let myImg =
  114. // "https://suimang.oss-accelerate.aliyuncs.com/capi/2023-09-18/bd50b0024ea4470cbd391bcb00382f72.jpg?x-oss-process=image/resize,w_10000/quality,q_60";
  115. let myImg = cameraImg.value;
  116. const data = {
  117. machineQrcodeId: uni.getStorageSync("UserId"),
  118. plat: uni.getStorageSync("plat"),
  119. digitalAvatarId: styleData.value.id,
  120. userImages: JSON.stringify([myImg]),
  121. title: styleData.value.title,
  122. };
  123. const res2 = await createPhotoApi(data);
  124. if (res2.data) {
  125. console.log(res2);
  126. // userInfoModulesPinia.createTimes = userInfoModulesPinia.createTimes - 1;
  127. uni.navigateTo({
  128. url: `/pages/created/index?id=${res2.data.id}&imgUrl=${styleData.value.coverImg}`,
  129. });
  130. } else {
  131. throw new Error();
  132. }
  133. uni.hideLoading();
  134. } catch (error) {
  135. console.log(error);
  136. uni.hideLoading();
  137. uni.showToast({
  138. title: "生成失败,请重试",
  139. icon: "none",
  140. });
  141. }
  142. }
  143. //#endregion ---------------------
  144. //#region 获取二维码
  145. const qrCode = ref(null); //二维码路径
  146. const showQrCode = ref(false);
  147. async function getQRCode() {
  148. uni.showLoading({
  149. title: "加载中",
  150. mask: true,
  151. });
  152. try {
  153. const data = {
  154. sn: "112233",
  155. // sn: window.android.getIMEI(),
  156. type: 1,
  157. };
  158. const res = await getQRCodeApi(data);
  159. uni.hideLoading();
  160. if (res.code == 1013) {
  161. uni.showToast({
  162. title: "操作频繁,请稍等....",
  163. icon: "none",
  164. mask: true,
  165. duration: 3000,
  166. });
  167. setTimeout(() => {
  168. getQRCode();
  169. }, 3000);
  170. return;
  171. }
  172. if (res.data && res.data.tmpUserId) {
  173. uni.setStorageSync("UserId", res.data.tmpUserId);
  174. qrCode.value = res.data.qrCodeUrl;
  175. getUser();
  176. payCountTimer.value = setInterval(() => {
  177. payCount.value--;
  178. }, 1000);
  179. } else if (res.code == 1013) {
  180. uni.showToast({
  181. title: "请勿重复操作",
  182. icon: "error",
  183. mask: true,
  184. });
  185. }
  186. } catch (err) {
  187. console.log(err);
  188. uni.hideLoading();
  189. uni.showToast({
  190. title: "获取登录失败,请刷新页面重试",
  191. icon: "error",
  192. mask: true,
  193. });
  194. }
  195. }
  196. // getQRCode();
  197. //#endregion ---------------------
  198. //#region 获取用户信息
  199. const payMask = ref(false); //支付状态遮罩层
  200. const payCount = ref(90); //支付倒计时数
  201. const payCountTimer = ref(null); //支付倒计时
  202. // 获取登录信息
  203. async function getUser() {
  204. // 如果二维码框隐藏,不再执行
  205. if (showQrCode.value == false) {
  206. return;
  207. }
  208. try {
  209. const res = await getUserApi(uni.getStorageSync("UserId"));
  210. // 如果接口200就说明已登录
  211. if (res.code == 200 && res.data) {
  212. // 查询支付状态 0:待支付,2:支付中,3:已支付
  213. uni.setStorageSync("token", res.data.token);
  214. uni.setStorageSync("createTimes", res.data.createTimes);
  215. uni.setStorageSync("phone", res.data.phone);
  216. userInfoModulesPinia.token = res.data.token;
  217. userInfoModulesPinia.phone = res.data.phone;
  218. userInfoModulesPinia.createTimes = res.data.createTimes;
  219. if (res.data.payStatus == 3) {
  220. clearInterval(payCountTimer.value);
  221. payCountTimer.value = null;
  222. uni.hideLoading();
  223. payMask.value = false;
  224. showQrCode.value = false;
  225. uni.showToast({
  226. title: "支付成功!",
  227. icon: "success",
  228. mask: true,
  229. });
  230. // 成功直接照相
  231. // toCamera();
  232. } else if (res.data.payStatus == 0) {
  233. payMask.value = true;
  234. uni.showLoading({
  235. title: `待支付...`,
  236. });
  237. if (showQrCode.value == false) {
  238. payMask.value = false;
  239. uni.hideLoading();
  240. return;
  241. }
  242. getUser();
  243. } else if (res.data.payStatus == 2) {
  244. payMask.value = true;
  245. uni.showLoading({
  246. title: `支付中...`,
  247. });
  248. if (showQrCode.value == false) {
  249. payMask.value = false;
  250. uni.hideLoading();
  251. return;
  252. }
  253. getUser();
  254. }
  255. } else {
  256. getUser();
  257. }
  258. } catch (err) {
  259. console.log(err);
  260. }
  261. }
  262. // 监听二维码弹窗显示隐藏
  263. watch(
  264. () => showQrCode.value,
  265. () => {
  266. if (showQrCode.value == true) {
  267. getQRCode();
  268. } else if (showQrCode.value == false) {
  269. uni.hideLoading();
  270. qrCode.value = null;
  271. payMask.value = false;
  272. clearInterval(payCountTimer.value);
  273. payCountTimer.value = null;
  274. payCount.value = 90;
  275. }
  276. }
  277. );
  278. // 监听支付倒计时
  279. watch(
  280. () => payCount.value,
  281. () => {
  282. if (payCount.value <= 0) {
  283. uni.hideLoading();
  284. showQrCode.value = false;
  285. }
  286. }
  287. );
  288. onUnload(() => {
  289. uni.hideLoading();
  290. clearInterval(payCountTimer.value);
  291. payCountTimer.value = null;
  292. // uni.setStorageSync("UserId", null);
  293. });
  294. //#endregion ---------------------
  295. //#region 路由跳转
  296. function toChooseModel() {
  297. uni.navigateTo({
  298. url: `/pages/chooseStyle/index`,
  299. });
  300. }
  301. function toCamera() {
  302. const url = styleData.value.coverImg;
  303. const id = styleData.value.id;
  304. const mouldType = styleData.value.mouldType;
  305. uni.navigateTo({
  306. url: `/pages/camera/index?modelUrl=${url}&id=${id}&mouldType=${mouldType}`,
  307. });
  308. }
  309. //#endregion ---------------------
  310. //#region 退出登录
  311. function loginOut() {
  312. uni.showModal({
  313. title: "提示",
  314. content: "是否退出登录?",
  315. confirmColor: "#ff4f00",
  316. success: function (res) {
  317. if (res.confirm) {
  318. console.log("用户点击确定");
  319. userInfoModulesPinia.clearStorage();
  320. uni.navigateTo({ url: "/pages/login/index" });
  321. } else if (res.cancel) {
  322. console.log("用户点击取消");
  323. }
  324. },
  325. });
  326. }
  327. //#endregion ---------------------
  328. //#region
  329. //#endregion ---------------------
  330. //#region 页面初始化和卸载
  331. const resetTimer = ref(null);
  332. onMounted(() => {
  333. window.document.addEventListener("touchstart", () => {
  334. // 用户点击时,清除之前的定时器
  335. clearTimeout(resetTimer.value);
  336. // 重新设定120秒后触发的定时器
  337. resetTimer.value = setTimeout(() => {
  338. userInfoModulesPinia.clearStorage();
  339. uni.redirectTo({ url: "/pages/login/index" });
  340. }, 180000);
  341. });
  342. resetTimer.value = setTimeout(() => {
  343. userInfoModulesPinia.clearStorage();
  344. uni.redirectTo({ url: "/pages/login/index" });
  345. }, 180000);
  346. });
  347. onUnload(() => {
  348. clearTimeout(resetTimer.value);
  349. });
  350. //#endregion -----------------------
  351. </script>
  352. <style lang="scss">
  353. .userInfoBox {
  354. padding: 0 20rpx;
  355. width: 100%;
  356. display: flex;
  357. height: 50rpx;
  358. line-height: 50rpx;
  359. justify-content: space-between;
  360. border-radius: 20rpx;
  361. background-color: rgba($color: #ccc, $alpha: 0.4);
  362. .loginOut {
  363. color: #ff4f00;
  364. text-decoration: underline;
  365. }
  366. }
  367. .showImgBox {
  368. margin-top: 30rpx;
  369. width: 540rpx;
  370. height: 720rpx;
  371. // background-color: #ccc;
  372. border-radius: 30rpx;
  373. image {
  374. width: 100%;
  375. height: 100%;
  376. border-radius: 30rpx;
  377. }
  378. }
  379. .name {
  380. margin-top: 80rpx;
  381. margin-bottom: 80rpx;
  382. font-size: 44rpx;
  383. font-weight: 800;
  384. }
  385. .orangeBtn {
  386. position: relative;
  387. .free {
  388. position: absolute;
  389. top: -18rpx;
  390. right: -70rpx;
  391. width: 142rpx;
  392. height: 50rpx;
  393. background-color: #000;
  394. border-radius: 25rpx 25rpx 25rpx 0;
  395. font-size: 22rpx;
  396. font-weight: 900;
  397. line-height: 50rpx;
  398. text-align: center;
  399. }
  400. }
  401. .overlay {
  402. .content {
  403. width: 100%;
  404. height: 100vh;
  405. display: flex;
  406. flex-direction: column;
  407. align-items: center;
  408. text-align: center;
  409. .imageBox {
  410. position: relative;
  411. margin-top: 200rpx;
  412. width: 500rpx;
  413. height: 500rpx;
  414. border-radius: 30rpx;
  415. background-color: #fff;
  416. .mask {
  417. position: absolute;
  418. width: 500rpx;
  419. height: 500rpx;
  420. border-radius: 30rpx;
  421. background-color: rgba($color: #000000, $alpha: 0.7);
  422. z-index: 2;
  423. }
  424. image {
  425. width: 500rpx;
  426. height: 500rpx;
  427. border-radius: 30rpx;
  428. background-color: #fff;
  429. }
  430. }
  431. text {
  432. margin-top: 20rpx;
  433. font-weight: 900;
  434. font-size: 32rpx;
  435. }
  436. // .orangeBtn {
  437. // margin-top: 100rpx;
  438. // }
  439. }
  440. }
  441. </style>