diff --git a/src/pages/closeStyle/multiplayer copy 2.vue b/src/pages/closeStyle/multiplayer copy 2.vue new file mode 100644 index 0000000..6ad56b8 --- /dev/null +++ b/src/pages/closeStyle/multiplayer copy 2.vue @@ -0,0 +1,253 @@ + + + + + diff --git a/src/pages/closeStyle/multiplayer copy.vue b/src/pages/closeStyle/multiplayer copy.vue new file mode 100644 index 0000000..bcd0e10 --- /dev/null +++ b/src/pages/closeStyle/multiplayer copy.vue @@ -0,0 +1,235 @@ + + + + + diff --git a/src/pages/closeStyle/multiplayer.vue b/src/pages/closeStyle/multiplayer.vue index cd67564..ddbc581 100644 --- a/src/pages/closeStyle/multiplayer.vue +++ b/src/pages/closeStyle/multiplayer.vue @@ -5,37 +5,97 @@ /> {{ styleData.title }} + - + + + + + {{ + avatarList[0].isMyAvatar ? "授权用户头像" : "已上传第1个头像" + }} + 更换头像 + 上传头像 + - - 更换头像 + + + + + {{ + avatarList[1].isMyAvatar ? "授权用户头像" : "已上传第2个头像" + }} + 更换头像 + 上传头像 + - - 上传头像 + + + + + {{ + avatarList[2].isMyAvatar ? "授权用户头像" : "已上传第3个头像" + }} + 更换头像 + 上传头像 - 人物头像对应模板任务位置,点击按钮可以调整顺序 + 人物头像对应模板人物位置,点击按钮可以调整顺序 开始制作写真 - 耗金币2枚 + 耗金币{{ styleData.salePrice }}枚 金币余额:  30 + >金币余额:  {{ userInfoModulesPinia.myGlod }} @@ -50,16 +110,22 @@ import { findImageApi, createPhotoApi, } from "../../api/closeStyle"; +import { findGlodApi } from "../../api/home"; +import { userInfoModules } from "@/store/modules/userInfo"; //#endregion +const userInfoModulesPinia = userInfoModules(); //#region 初始化 const styleId = ref(null); const styleData = ref({}); onLoad((options) => { // styleId.value = options.id; - styleId.value = 4; + // styleId.value = "857147862095679488"; + styleId.value = "245"; getInfo(); + // getMyCoin(); }); + async function getInfo() { try { const res = await findByIdApi(styleId.value); @@ -72,8 +138,137 @@ async function getInfo() { }); } } +// 查询我的金币 +async function getMyCoin() { + const res4 = await findGlodApi(); + if (!res4.data) { + userInfoModulesPinia.myGlod = 0; + } else { + userInfoModulesPinia.myGlod = res4.data.digitalAvatarResidueGlod + ? res4.data.digitalAvatarResidueGlod + : 0; + } +} +//#endregion --------------------- +//#region 上传图片 +const avatarList = ref([ + { + url: userInfoModulesPinia.myAvatar, + // url: "https://suimang.oss-accelerate.aliyuncs.com/builtin/digital_avatar/girl/%E9%A3%8E%E9%87%87%E5%87%BA%E4%BC%97.jpg", + isMyAvatar: true, + }, + { + url: "", + // url: "https://suimang.oss-accelerate.aliyuncs.com/builtin/digital_avatar/girl/%E9%AA%8F%E9%A9%AC%E4%BD%B3%E4%BA%BA.jpg", + isMyAvatar: false, + }, + { + url: "", + // url: "https://suimang.oss-accelerate.aliyuncs.com/builtin/digital_avatar/girl/%E7%B4%AB%E8%96%87%E7%90%B4%E9%9F%B5.png", + isMyAvatar: false, + }, +]); +// 切换位置 +function swapItems() { + const temp = avatarList.value[0]; + avatarList.value[0] = avatarList.value[1]; + avatarList.value[1] = temp; +} +function swapItems2() { + const temp = avatarList.value[1]; + avatarList.value[1] = avatarList.value[2]; + avatarList.value[2] = temp; +} +// 打开图片选择 +function chooseImg(index) { + uni.chooseImage({ + count: 1, + success: async (res) => { + console.log(res, "887"); + uni.showLoading({ + title: "上传中...", + mask: true, + }); + // 百度敏感信息检测 + uni.uploadFile({ + url: "https://test.metavatar.cc/C/api/baidu/checkPhoto", //上传图片api + filePath: res.tempFilePaths[0], + name: "file", + formData: { + user: "test", + }, + header: { + // Authorization: userInfoModulesPinia.token, + token: userInfoModulesPinia.token, + }, + success: async (res2) => { + if (JSON.parse(res2.data).code != 200) { + uni.hideLoading(); + uni.showToast({ + title: "图片不符合规范, 请重试", + icon: "none", + }); + return; + } + // 人脸识别接口 + uni.uploadFile({ + url: "https://test.metavatar.cc/C/api/userDigital/checkPhoto", //上传图片api + filePath: res.tempFilePaths[0], + name: "file", + formData: { + user: "test", + }, + header: { + // Authorization: userInfoModulesPinia.token, + token: userInfoModulesPinia.token, + }, + success: (res3) => { + if (JSON.parse(res3.data).code != 200) { + uni.hideLoading(); + uni.showToast({ + title: "图片不符合规范, 请重试", + icon: "none", + }); + return; + } + // 赋值 + avatarList.value[index].url = res.tempFilePaths[0]; + uni.hideLoading(); + }, + fail: () => { + uni.hideLoading(); + uni.showToast({ + title: "网络被数字人偷走了, 请稍后重试", + icon: "none", + }); + }, + }); + }, + fail: (err) => { + console.error("选择图片失败", err); + uni.hideLoading(); + uni.showToast({ + title: "选择图片失败, 请稍后重试", + icon: "none", + }); + }, + }); + }, + fail: (err) => { + console.error("选择图片失败", err); + uni.showToast({ + title: "选择图片失败, 请稍后重试", + icon: "none", + }); + }, + }); +} + +// 上传图片 +function uploadImg(index) {} //#endregion --------------------- + //#region 生成写真照片 async function createing(id) { try { @@ -140,17 +335,45 @@ async function createing(id) { margin-top: 67rpx; } .imgBoxItem { + position: relative; width: 180rpx; + height: 250rpx; display: flex; flex-direction: column; align-items: center; - image { + .avatar { + position: absolute; width: 180rpx; height: 180rpx; + border-radius: 24rpx; + } + .noUrlBox { + position: absolute; + width: 180rpx; + height: 180rpx; + line-height: 180rpx; + color: #ff4f00; + font-size: 50rpx; + font-weight: 900; + text-align: center; + border-radius: 24rpx; + background-color: #393a3d; + } + .maskTips { + position: absolute; + width: 180rpx; + height: 180rpx; + line-height: 180rpx; + color: #fff; + font-size: 20rpx; + font-weight: 900; + text-align: center; + border-radius: 24rpx; + background-color: rgba(0, 0, 0, 0.3); } .reUploadBtn, .uploadBtn { - margin-top: 20rpx; + margin-top: 200rpx; width: 150rpx; height: 50rpx; text-align: center;