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

167 行
3.8 KiB

  1. <template>
  2. <view class="page">
  3. <!-- 毛玻璃 -->
  4. <view class="glass">
  5. <image src="../../assets/img/homeImg.jpg" mode="scaleToFill" />
  6. </view>
  7. <view class="showImgBox imgContenBox"
  8. ><image :src="styleData.coverImg"
  9. /></view>
  10. <text class="name">{{ styleData.title }}</text>
  11. <view class="orangeBtn" @click="createing(styleData.id)"
  12. >开始制作写真
  13. <view class="free">
  14. <text>耗金币{{ needCoin }}枚</text>
  15. </view>
  16. </view>
  17. <view class="balance"
  18. >金币余额:&nbsp;&nbsp;{{ userInfoModulesPinia.myGlod }}
  19. <image src="../../assets/icon/coin.png" mode="aspectFit" />
  20. </view>
  21. </view>
  22. </template>
  23. <script setup>
  24. //#region 导入
  25. import { ref, reactive } from "vue";
  26. import { onLoad } from "@dcloudio/uni-app";
  27. import {
  28. findByIdApi,
  29. findImageApi,
  30. createPhotoApi,
  31. } from "../../api/closeStyle";
  32. import { findGlodApi } from "../../api/home";
  33. import { userInfoModules } from "@/store/modules/userInfo";
  34. const userInfoModulesPinia = userInfoModules();
  35. //#endregion
  36. //#region 初始化
  37. const styleId = ref(null);
  38. const styleData = ref({});
  39. onLoad((options) => {
  40. styleId.value = options.id;
  41. getInfo();
  42. getMyCoin();
  43. });
  44. // 查询我的金币
  45. async function getMyCoin() {
  46. const res4 = await findGlodApi();
  47. if (!res4.data) {
  48. userInfoModulesPinia.myGlod = 0;
  49. } else {
  50. userInfoModulesPinia.myGlod = res4.data.digitalAvatarResidueGlod
  51. ? res4.data.digitalAvatarResidueGlod
  52. : 0;
  53. }
  54. }
  55. const needCoin = ref(""); //模版消耗金币
  56. async function getInfo() {
  57. try {
  58. const res = await findByIdApi(styleId.value);
  59. needCoin.value = res.data.salePrice;
  60. console.log(res);
  61. styleData.value = res.data;
  62. } catch (error) {
  63. uni.showToast({
  64. title: "获取数据失败,请重试",
  65. icon: "none",
  66. });
  67. }
  68. }
  69. //#endregion ---------------------
  70. //#region 生成写真照片
  71. async function createing(id) {
  72. if (needCoin.value > userInfoModulesPinia.myGlod) {
  73. uni.showToast({
  74. title: "金币不足,请充值",
  75. icon: "none",
  76. });
  77. return;
  78. }
  79. try {
  80. uni.showLoading({
  81. title: "生成中...",
  82. mask: true,
  83. });
  84. const res = await findImageApi();
  85. let myImg = res.data.image;
  86. const data = {
  87. digitalAvatarId: id,
  88. userImages: JSON.stringify([myImg]),
  89. title: styleData.value.title,
  90. };
  91. const res2 = await createPhotoApi(data);
  92. console.log(res2);
  93. uni.reLaunch({
  94. url: `/pages/createing/index?id=${res2.data.id}`,
  95. });
  96. uni.hideLoading();
  97. } catch (error) {
  98. console.log(error);
  99. uni.hideLoading();
  100. uni.showToast({
  101. title: "生成失败,请重试",
  102. icon: "none",
  103. });
  104. }
  105. }
  106. //#endregion ---------------------
  107. //#region
  108. //#endregion ---------------------
  109. </script>
  110. <style lang="scss">
  111. .showImgBox {
  112. margin-top: 30rpx;
  113. width: 540rpx;
  114. height: 720rpx;
  115. // background-color: #ccc;
  116. border-radius: 30rpx;
  117. image {
  118. width: 100%;
  119. height: 100%;
  120. border-radius: 30rpx;
  121. }
  122. }
  123. .name {
  124. margin-top: 80rpx;
  125. margin-bottom: 110rpx;
  126. font-size: 44rpx;
  127. font-weight: 800;
  128. }
  129. .orangeBtn {
  130. position: relative;
  131. .free {
  132. position: absolute;
  133. top: -18rpx;
  134. right: -70rpx;
  135. width: 142rpx;
  136. height: 50rpx;
  137. background-color: #000;
  138. border-radius: 25rpx 25rpx 25rpx 0;
  139. font-size: 22rpx;
  140. font-weight: 900;
  141. line-height: 50rpx;
  142. text-align: center;
  143. }
  144. }
  145. .balance {
  146. display: inline-block;
  147. margin-top: 70rpx;
  148. font-size: 30rpx;
  149. font-weight: bold;
  150. line-height: 33rpx;
  151. image {
  152. display: inline-block;
  153. width: 33rpx;
  154. height: 33rpx;
  155. vertical-align: middle;
  156. }
  157. }
  158. </style>