邃芒智像(Uniapp : WX、TT、H5)
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.
 
 
 
 

421 line
11 KiB

  1. <template>
  2. <view class="page">
  3. <view class="showImgBox imgContenBox"
  4. ><image :src="styleData.coverImg"
  5. /></view>
  6. <text class="name">{{ styleData.title }}</text>
  7. <view class="imgBox">
  8. <!-- 图一 -->
  9. <view class="imgBoxItem">
  10. <image class="avatar" :src="avatarList[0].url" mode="aspectFill" />
  11. <view v-if="!avatarList[0].url" class="noUrlBox" @click="chooseImg(0)"
  12. >+</view
  13. >
  14. <!-- 遮罩层 -->
  15. <view v-if="avatarList[0].url" class="maskTips">{{
  16. avatarList[0].isMyAvatar ? "授权用户头像" : "已上传第1个头像"
  17. }}</view>
  18. <view
  19. v-if="avatarList[0].url && !avatarList[0].isMyAvatar"
  20. class="reUploadBtn"
  21. @click="chooseImg(0)"
  22. >更换头像</view
  23. >
  24. <view
  25. v-if="!avatarList[0].url && !avatarList[0].isMyAvatar"
  26. class="uploadBtn"
  27. @click="chooseImg(0)"
  28. >上传头像</view
  29. >
  30. </view>
  31. <image
  32. @click="swapItems"
  33. class="exchange"
  34. src="../../assets/icon/exchange.png"
  35. mode="scaleToFill"
  36. />
  37. <!-- 图二 -->
  38. <view class="imgBoxItem">
  39. <image class="avatar" :src="avatarList[1].url" mode="aspectFill" />
  40. <view v-if="!avatarList[1].url" class="noUrlBox" @click="chooseImg(1)"
  41. >+</view
  42. >
  43. <!-- 遮罩层 -->
  44. <view v-if="avatarList[1].url" class="maskTips">{{
  45. avatarList[1].isMyAvatar ? "授权用户头像" : "已上传第2个头像"
  46. }}</view>
  47. <view
  48. v-if="avatarList[1].url && !avatarList[1].isMyAvatar"
  49. class="reUploadBtn"
  50. @click="chooseImg(1)"
  51. >更换头像</view
  52. >
  53. <view
  54. v-if="!avatarList[1].url && !avatarList[1].isMyAvatar"
  55. class="uploadBtn"
  56. @click="chooseImg(1)"
  57. >上传头像</view
  58. >
  59. </view>
  60. <image
  61. @click="swapItems2"
  62. class="exchange"
  63. src="../../assets/icon/exchange.png"
  64. mode="scaleToFill"
  65. />
  66. <!-- 图三 -->
  67. <view class="imgBoxItem">
  68. <image class="avatar" :src="avatarList[2].url" mode="aspectFill" />
  69. <view v-if="!avatarList[2].url" class="noUrlBox" @click="chooseImg(2)"
  70. >+</view
  71. >
  72. <!-- 遮罩层 -->
  73. <view v-if="avatarList[2].url" class="maskTips">{{
  74. avatarList[2].isMyAvatar ? "授权用户头像" : "已上传第3个头像"
  75. }}</view>
  76. <view
  77. v-if="avatarList[2].url && !avatarList[2].isMyAvatar"
  78. class="reUploadBtn"
  79. @click="chooseImg(2)"
  80. >更换头像</view
  81. >
  82. <view
  83. v-if="!avatarList[2].url && !avatarList[2].isMyAvatar"
  84. class="uploadBtn"
  85. @click="chooseImg(2)"
  86. >上传头像</view
  87. >
  88. </view>
  89. </view>
  90. <text class="tips">人物头像对应模板人物位置,点击按钮可以调整顺序</text>
  91. <view class="orangeBtn" @click="createing(styleData.id)"
  92. >开始制作写真
  93. <view class="free">
  94. <text>耗金币{{ styleData.salePrice }}枚</text>
  95. </view>
  96. </view>
  97. <view class="balance"
  98. >金币余额:&nbsp;&nbsp;{{ userInfoModulesPinia.myGlod }}
  99. <image src="../../assets/icon/coin.png" mode="aspectFit" />
  100. </view>
  101. </view>
  102. </template>
  103. <script setup>
  104. //#region 导入
  105. import { ref, reactive } from "vue";
  106. import { onLoad } from "@dcloudio/uni-app";
  107. import {
  108. findByIdApi,
  109. findImageApi,
  110. createPhotoApi,
  111. } from "../../api/closeStyle";
  112. import { findGlodApi } from "../../api/home";
  113. import { userInfoModules } from "@/store/modules/userInfo";
  114. //#endregion
  115. const userInfoModulesPinia = userInfoModules();
  116. //#region 初始化
  117. const styleId = ref(null);
  118. const styleData = ref({});
  119. onLoad((options) => {
  120. // styleId.value = options.id;
  121. // styleId.value = "857147862095679488";
  122. styleId.value = "245";
  123. getInfo();
  124. // getMyCoin();
  125. });
  126. async function getInfo() {
  127. try {
  128. const res = await findByIdApi(styleId.value);
  129. console.log(res);
  130. styleData.value = res.data;
  131. } catch (error) {
  132. uni.showToast({
  133. title: "获取数据失败,请重试",
  134. icon: "none",
  135. });
  136. }
  137. }
  138. // 查询我的金币
  139. async function getMyCoin() {
  140. const res4 = await findGlodApi();
  141. if (!res4.data) {
  142. userInfoModulesPinia.myGlod = 0;
  143. } else {
  144. userInfoModulesPinia.myGlod = res4.data.digitalAvatarResidueGlod
  145. ? res4.data.digitalAvatarResidueGlod
  146. : 0;
  147. }
  148. }
  149. //#endregion ---------------------
  150. //#region 上传图片
  151. const avatarList = ref([
  152. {
  153. url: userInfoModulesPinia.myAvatar,
  154. // url: "https://suimang.oss-accelerate.aliyuncs.com/builtin/digital_avatar/girl/%E9%A3%8E%E9%87%87%E5%87%BA%E4%BC%97.jpg",
  155. isMyAvatar: true,
  156. },
  157. {
  158. url: "",
  159. // url: "https://suimang.oss-accelerate.aliyuncs.com/builtin/digital_avatar/girl/%E9%AA%8F%E9%A9%AC%E4%BD%B3%E4%BA%BA.jpg",
  160. isMyAvatar: false,
  161. },
  162. {
  163. url: "",
  164. // url: "https://suimang.oss-accelerate.aliyuncs.com/builtin/digital_avatar/girl/%E7%B4%AB%E8%96%87%E7%90%B4%E9%9F%B5.png",
  165. isMyAvatar: false,
  166. },
  167. ]);
  168. // 切换位置
  169. function swapItems() {
  170. const temp = avatarList.value[0];
  171. avatarList.value[0] = avatarList.value[1];
  172. avatarList.value[1] = temp;
  173. }
  174. function swapItems2() {
  175. const temp = avatarList.value[1];
  176. avatarList.value[1] = avatarList.value[2];
  177. avatarList.value[2] = temp;
  178. }
  179. // 打开图片选择
  180. function chooseImg(index) {
  181. uni.chooseImage({
  182. count: 1,
  183. success: async (res) => {
  184. console.log(res, "887");
  185. uni.showLoading({
  186. title: "上传中...",
  187. mask: true,
  188. });
  189. // 百度敏感信息检测
  190. uni.uploadFile({
  191. url: "https://test.metavatar.cc/C/api/baidu/checkPhoto", //上传图片api
  192. filePath: res.tempFilePaths[0],
  193. name: "file",
  194. formData: {
  195. user: "test",
  196. },
  197. header: {
  198. // Authorization: userInfoModulesPinia.token,
  199. token: userInfoModulesPinia.token,
  200. },
  201. success: async (res2) => {
  202. if (JSON.parse(res2.data).code != 200) {
  203. uni.hideLoading();
  204. uni.showToast({
  205. title: "图片不符合规范, 请重试",
  206. icon: "none",
  207. });
  208. return;
  209. }
  210. // 人脸识别接口
  211. uni.uploadFile({
  212. url: "https://test.metavatar.cc/C/api/userDigital/checkPhoto", //上传图片api
  213. filePath: res.tempFilePaths[0],
  214. name: "file",
  215. formData: {
  216. user: "test",
  217. },
  218. header: {
  219. // Authorization: userInfoModulesPinia.token,
  220. token: userInfoModulesPinia.token,
  221. },
  222. success: (res3) => {
  223. if (JSON.parse(res3.data).code != 200) {
  224. uni.hideLoading();
  225. uni.showToast({
  226. title: "图片不符合规范, 请重试",
  227. icon: "none",
  228. });
  229. return;
  230. }
  231. // 赋值
  232. avatarList.value[index].url = res.tempFilePaths[0];
  233. uni.hideLoading();
  234. },
  235. fail: () => {
  236. uni.hideLoading();
  237. uni.showToast({
  238. title: "网络被数字人偷走了, 请稍后重试",
  239. icon: "none",
  240. });
  241. },
  242. });
  243. },
  244. fail: (err) => {
  245. console.error("选择图片失败", err);
  246. uni.hideLoading();
  247. uni.showToast({
  248. title: "选择图片失败, 请稍后重试",
  249. icon: "none",
  250. });
  251. },
  252. });
  253. },
  254. fail: (err) => {
  255. console.error("选择图片失败", err);
  256. uni.showToast({
  257. title: "选择图片失败, 请稍后重试",
  258. icon: "none",
  259. });
  260. },
  261. });
  262. }
  263. // 上传图片
  264. function uploadImg(index) {}
  265. //#endregion ---------------------
  266. //#region 生成写真照片
  267. async function createing(id) {
  268. try {
  269. const res = await findImageApi();
  270. console.log(res);
  271. let myImg = res.data.image;
  272. const data = {
  273. digitalAvatarId: id,
  274. userImages: JSON.stringify([myImg]),
  275. };
  276. const res2 = await createPhotoApi(data);
  277. console.log(res2);
  278. uni.navigateTo({
  279. url: `/pages/createing/index?id=${res2.data.id}`,
  280. });
  281. } catch (error) {
  282. console.log(error);
  283. uni.showToast({
  284. title: "生成失败,请重试",
  285. icon: "none",
  286. });
  287. }
  288. }
  289. //#endregion ---------------------
  290. //#region
  291. //#endregion ---------------------
  292. </script>
  293. <style lang="scss">
  294. .page {
  295. background-color: rgba(24, 25, 26, 1);
  296. }
  297. .showImgBox {
  298. margin-top: 30rpx;
  299. width: 360rpx;
  300. height: 480rpx;
  301. // background-color: #ccc;
  302. border-radius: 30rpx;
  303. image {
  304. width: 100%;
  305. height: 100%;
  306. border-radius: 30rpx;
  307. }
  308. }
  309. .name {
  310. margin-top: 70rpx;
  311. margin-bottom: 47rpx;
  312. font-size: 44rpx;
  313. font-weight: 800;
  314. }
  315. .imgBox {
  316. margin-bottom: 40rpx;
  317. width: 100%;
  318. // height: 180rpx;
  319. display: flex;
  320. justify-content: space-between;
  321. align-items: flex-start;
  322. .exchange {
  323. width: 60rpx;
  324. height: 60rpx;
  325. margin-top: 67rpx;
  326. }
  327. .imgBoxItem {
  328. position: relative;
  329. width: 180rpx;
  330. height: 250rpx;
  331. display: flex;
  332. flex-direction: column;
  333. align-items: center;
  334. .avatar {
  335. position: absolute;
  336. width: 180rpx;
  337. height: 180rpx;
  338. border-radius: 24rpx;
  339. }
  340. .noUrlBox {
  341. position: absolute;
  342. width: 180rpx;
  343. height: 180rpx;
  344. line-height: 180rpx;
  345. color: #ff4f00;
  346. font-size: 50rpx;
  347. font-weight: 900;
  348. text-align: center;
  349. border-radius: 24rpx;
  350. background-color: #393a3d;
  351. }
  352. .maskTips {
  353. position: absolute;
  354. width: 180rpx;
  355. height: 180rpx;
  356. line-height: 180rpx;
  357. color: #fff;
  358. font-size: 20rpx;
  359. font-weight: 900;
  360. text-align: center;
  361. border-radius: 24rpx;
  362. background-color: rgba(0, 0, 0, 0.3);
  363. }
  364. .reUploadBtn,
  365. .uploadBtn {
  366. margin-top: 200rpx;
  367. width: 150rpx;
  368. height: 50rpx;
  369. text-align: center;
  370. line-height: 50rpx;
  371. border-radius: 50rpx;
  372. background-color: #383a3c;
  373. }
  374. }
  375. }
  376. .tips {
  377. font-size: 22rpx;
  378. }
  379. .orangeBtn {
  380. position: relative;
  381. margin-top: 60rpx;
  382. .free {
  383. position: absolute;
  384. top: -18rpx;
  385. right: -70rpx;
  386. width: 142rpx;
  387. height: 50rpx;
  388. background-color: #000;
  389. border-radius: 25rpx 25rpx 25rpx 0;
  390. font-size: 22rpx;
  391. font-weight: 900;
  392. line-height: 50rpx;
  393. text-align: center;
  394. }
  395. }
  396. .balance {
  397. display: inline-block;
  398. margin-top: 70rpx;
  399. font-size: 30rpx;
  400. font-weight: bold;
  401. line-height: 33rpx;
  402. image {
  403. display: inline-block;
  404. width: 33rpx;
  405. height: 33rpx;
  406. vertical-align: middle;
  407. }
  408. }
  409. </style>