| @@ -0,0 +1,253 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <view class="showImgBox imgContenBox" | |||
| ><image :src="styleData.coverImg" | |||
| /></view> | |||
| <text class="name">{{ styleData.title }}</text> | |||
| <view class="imgBox"> | |||
| <!-- 图一 --> | |||
| <view class="imgBoxItem" v-for="item in avatarList" :key="item.url"> | |||
| <image class="avatar" :src="item.url" mode="scaleToFill" /> | |||
| <view v-if="!item.url" class="noUrlBox">+</view> | |||
| <view | |||
| v-if="item.url && item.url != userInfoModulesPinia.myAvatar" | |||
| class="reUploadBtn" | |||
| >更换头像</view | |||
| > | |||
| <view v-if="!item.url" class="uploadBtn">上传头像</view> | |||
| </view> | |||
| <image | |||
| class="exchange" | |||
| src="../../assets/icon/exchange.png" | |||
| mode="scaleToFill" | |||
| /> | |||
| <!-- 图二 --> | |||
| <!-- <view class="imgBoxItem"> | |||
| <image | |||
| class="avatar" | |||
| src="../../assets/img/img2.png" | |||
| mode="scaleToFill" | |||
| /> | |||
| </view> | |||
| <image | |||
| class="exchange" | |||
| src="../../assets/icon/exchange.png" | |||
| mode="scaleToFill" | |||
| /> --> | |||
| <!-- 图三 --> | |||
| <!-- <view class="imgBoxItem"> | |||
| <image | |||
| class="avatar" | |||
| src="../../assets/img/img3.png" | |||
| mode="scaleToFill" | |||
| /> | |||
| </view> --> | |||
| </view> | |||
| <text class="tips">人物头像对应模板任务位置,点击按钮可以调整顺序</text> | |||
| <view class="orangeBtn" @click="createing(styleData.id)" | |||
| >开始制作写真 | |||
| <view class="free"> | |||
| <text>耗金币2枚</text> | |||
| </view> | |||
| </view> | |||
| <view class="balance" | |||
| >金币余额: 30 | |||
| <image src="../../assets/icon/coin.png" mode="aspectFit" /> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script setup> | |||
| //#region 导入 | |||
| import { ref, reactive } from "vue"; | |||
| import { onLoad } from "@dcloudio/uni-app"; | |||
| import { | |||
| findByIdApi, | |||
| findImageApi, | |||
| createPhotoApi, | |||
| } from "../../api/closeStyle"; | |||
| 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 = "857147862095679488"; | |||
| styleId.value = "246"; | |||
| getInfo(); | |||
| }); | |||
| async function getInfo() { | |||
| try { | |||
| const res = await findByIdApi(styleId.value); | |||
| console.log(res); | |||
| styleData.value = res.data; | |||
| } catch (error) { | |||
| uni.showToast({ | |||
| title: "获取数据失败,请重试", | |||
| icon: "none", | |||
| }); | |||
| } | |||
| } | |||
| //#endregion --------------------- | |||
| //#region 上传图片 | |||
| const avatarList = ref([ | |||
| { | |||
| url: userInfoModulesPinia.myAvatar, | |||
| isMyAvatar: true, | |||
| }, | |||
| { | |||
| url: "", | |||
| isMyAvatar: false, | |||
| }, | |||
| { | |||
| url: "", | |||
| isMyAvatar: false, | |||
| }, | |||
| ]); | |||
| //#endregion --------------------- | |||
| //#region 生成写真照片 | |||
| async function createing(id) { | |||
| try { | |||
| const res = await findImageApi(); | |||
| console.log(res); | |||
| let myImg = res.data.image; | |||
| const data = { | |||
| digitalAvatarId: id, | |||
| userImages: JSON.stringify([myImg]), | |||
| }; | |||
| const res2 = await createPhotoApi(data); | |||
| console.log(res2); | |||
| uni.navigateTo({ | |||
| url: `/pages/createing/index?id=${res2.data.id}`, | |||
| }); | |||
| } catch (error) { | |||
| console.log(error); | |||
| uni.showToast({ | |||
| title: "生成失败,请重试", | |||
| icon: "none", | |||
| }); | |||
| } | |||
| } | |||
| //#endregion --------------------- | |||
| //#region | |||
| //#endregion --------------------- | |||
| </script> | |||
| <style lang="scss"> | |||
| .page { | |||
| background-color: rgba(24, 25, 26, 1); | |||
| } | |||
| .showImgBox { | |||
| margin-top: 30rpx; | |||
| width: 360rpx; | |||
| height: 480rpx; | |||
| // background-color: #ccc; | |||
| border-radius: 30rpx; | |||
| image { | |||
| width: 100%; | |||
| height: 100%; | |||
| border-radius: 30rpx; | |||
| } | |||
| } | |||
| .name { | |||
| margin-top: 70rpx; | |||
| margin-bottom: 47rpx; | |||
| font-size: 44rpx; | |||
| font-weight: 800; | |||
| } | |||
| .imgBox { | |||
| margin-bottom: 40rpx; | |||
| width: 100%; | |||
| // height: 180rpx; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: flex-start; | |||
| .exchange { | |||
| width: 60rpx; | |||
| height: 60rpx; | |||
| margin-top: 67rpx; | |||
| margin-left: 180rpx; | |||
| } | |||
| .imgBoxItem { | |||
| position: relative; | |||
| width: 180rpx; | |||
| height: 250rpx; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| .avatar { | |||
| position: absolute; | |||
| width: 180rpx; | |||
| height: 180rpx; | |||
| } | |||
| .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; | |||
| } | |||
| .reUploadBtn, | |||
| .uploadBtn { | |||
| margin-top: 200rpx; | |||
| width: 150rpx; | |||
| height: 50rpx; | |||
| text-align: center; | |||
| line-height: 50rpx; | |||
| border-radius: 50rpx; | |||
| background-color: #383a3c; | |||
| } | |||
| } | |||
| } | |||
| .tips { | |||
| margin-top: 40rpx; | |||
| font-size: 22rpx; | |||
| } | |||
| .orangeBtn { | |||
| position: relative; | |||
| margin-top: 60rpx; | |||
| .free { | |||
| position: absolute; | |||
| top: -18rpx; | |||
| right: -70rpx; | |||
| width: 142rpx; | |||
| height: 50rpx; | |||
| background-color: #000; | |||
| border-radius: 25rpx 25rpx 25rpx 0; | |||
| font-size: 22rpx; | |||
| font-weight: 900; | |||
| line-height: 50rpx; | |||
| text-align: center; | |||
| } | |||
| } | |||
| .balance { | |||
| display: inline-block; | |||
| margin-top: 70rpx; | |||
| font-size: 30rpx; | |||
| font-weight: bold; | |||
| line-height: 33rpx; | |||
| image { | |||
| display: inline-block; | |||
| width: 33rpx; | |||
| height: 33rpx; | |||
| vertical-align: middle; | |||
| } | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,235 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <view class="showImgBox imgContenBox" | |||
| ><image :src="styleData.coverImg" | |||
| /></view> | |||
| <text class="name">{{ styleData.title }}</text> | |||
| <view class="imgBox"> | |||
| <!-- 图一 --> | |||
| <view class="imgBoxItem"> | |||
| <image | |||
| class="avatar" | |||
| src="../../assets/img/img1.png" | |||
| mode="scaleToFill" | |||
| /> | |||
| </view> | |||
| <image | |||
| class="exchange" | |||
| src="../../assets/icon/exchange.png" | |||
| mode="scaleToFill" | |||
| /> | |||
| <!-- 图二 --> | |||
| <view class="imgBoxItem"> | |||
| <image | |||
| class="avatar" | |||
| src="../../assets/img/img2.png" | |||
| mode="scaleToFill" | |||
| /> | |||
| <view class="reUploadBtn">更换头像</view> | |||
| </view> | |||
| <image | |||
| class="exchange" | |||
| src="../../assets/icon/exchange.png" | |||
| mode="scaleToFill" | |||
| /> | |||
| <!-- 图三 --> | |||
| <view class="imgBoxItem"> | |||
| <image | |||
| class="avatar" | |||
| src="../../assets/img/img3.png" | |||
| mode="scaleToFill" | |||
| /> | |||
| <view class="uploadBtn">上传头像</view> | |||
| </view> | |||
| </view> | |||
| <text class="tips">人物头像对应模板任务位置,点击按钮可以调整顺序</text> | |||
| <view class="orangeBtn" @click="createing(styleData.id)" | |||
| >开始制作写真 | |||
| <view class="free"> | |||
| <text>耗金币2枚</text> | |||
| </view> | |||
| </view> | |||
| <view class="balance" | |||
| >金币余额: 30 | |||
| <image src="../../assets/icon/coin.png" mode="aspectFit" /> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script setup> | |||
| //#region 导入 | |||
| import { ref, reactive } from "vue"; | |||
| import { onLoad } from "@dcloudio/uni-app"; | |||
| import { | |||
| findByIdApi, | |||
| findImageApi, | |||
| createPhotoApi, | |||
| } from "../../api/closeStyle"; | |||
| 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 = "857147862095679488"; | |||
| styleId.value = "246"; | |||
| getInfo(); | |||
| }); | |||
| async function getInfo() { | |||
| try { | |||
| const res = await findByIdApi(styleId.value); | |||
| console.log(res); | |||
| styleData.value = res.data; | |||
| } catch (error) { | |||
| uni.showToast({ | |||
| title: "获取数据失败,请重试", | |||
| icon: "none", | |||
| }); | |||
| } | |||
| } | |||
| //#endregion --------------------- | |||
| //#region 上传图片 | |||
| const avatarList = ref([ | |||
| { | |||
| url: userInfoModulesPinia.myAvatar, | |||
| isMyAvatar: true, | |||
| }, | |||
| { | |||
| url: "", | |||
| isMyAvatar: false, | |||
| }, | |||
| { | |||
| url: "", | |||
| isMyAvatar: false, | |||
| }, | |||
| ]); | |||
| //#endregion --------------------- | |||
| //#region 生成写真照片 | |||
| async function createing(id) { | |||
| try { | |||
| const res = await findImageApi(); | |||
| console.log(res); | |||
| let myImg = res.data.image; | |||
| const data = { | |||
| digitalAvatarId: id, | |||
| userImages: JSON.stringify([myImg]), | |||
| }; | |||
| const res2 = await createPhotoApi(data); | |||
| console.log(res2); | |||
| uni.navigateTo({ | |||
| url: `/pages/createing/index?id=${res2.data.id}`, | |||
| }); | |||
| } catch (error) { | |||
| console.log(error); | |||
| uni.showToast({ | |||
| title: "生成失败,请重试", | |||
| icon: "none", | |||
| }); | |||
| } | |||
| } | |||
| //#endregion --------------------- | |||
| //#region | |||
| //#endregion --------------------- | |||
| </script> | |||
| <style lang="scss"> | |||
| .page { | |||
| background-color: rgba(24, 25, 26, 1); | |||
| } | |||
| .showImgBox { | |||
| margin-top: 30rpx; | |||
| width: 360rpx; | |||
| height: 480rpx; | |||
| // background-color: #ccc; | |||
| border-radius: 30rpx; | |||
| image { | |||
| width: 100%; | |||
| height: 100%; | |||
| border-radius: 30rpx; | |||
| } | |||
| } | |||
| .name { | |||
| margin-top: 70rpx; | |||
| margin-bottom: 47rpx; | |||
| font-size: 44rpx; | |||
| font-weight: 800; | |||
| } | |||
| .imgBox { | |||
| margin-bottom: 40rpx; | |||
| width: 100%; | |||
| // height: 180rpx; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: flex-start; | |||
| .exchange { | |||
| width: 60rpx; | |||
| height: 60rpx; | |||
| margin-top: 67rpx; | |||
| } | |||
| .imgBoxItem { | |||
| position: relative; | |||
| width: 180rpx; | |||
| height: 250rpx; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| .avatar { | |||
| position: absolute; | |||
| width: 180rpx; | |||
| height: 180rpx; | |||
| } | |||
| .reUploadBtn, | |||
| .uploadBtn { | |||
| margin-top: 200rpx; | |||
| width: 150rpx; | |||
| height: 50rpx; | |||
| text-align: center; | |||
| line-height: 50rpx; | |||
| border-radius: 50rpx; | |||
| background-color: #383a3c; | |||
| } | |||
| } | |||
| } | |||
| .tips { | |||
| font-size: 22rpx; | |||
| } | |||
| .orangeBtn { | |||
| position: relative; | |||
| margin-top: 60rpx; | |||
| .free { | |||
| position: absolute; | |||
| top: -18rpx; | |||
| right: -70rpx; | |||
| width: 142rpx; | |||
| height: 50rpx; | |||
| background-color: #000; | |||
| border-radius: 25rpx 25rpx 25rpx 0; | |||
| font-size: 22rpx; | |||
| font-weight: 900; | |||
| line-height: 50rpx; | |||
| text-align: center; | |||
| } | |||
| } | |||
| .balance { | |||
| display: inline-block; | |||
| margin-top: 70rpx; | |||
| font-size: 30rpx; | |||
| font-weight: bold; | |||
| line-height: 33rpx; | |||
| image { | |||
| display: inline-block; | |||
| width: 33rpx; | |||
| height: 33rpx; | |||
| vertical-align: middle; | |||
| } | |||
| } | |||
| </style> | |||
| @@ -5,37 +5,97 @@ | |||
| /></view> | |||
| <text class="name">{{ styleData.title }}</text> | |||
| <view class="imgBox"> | |||
| <!-- 图一 --> | |||
| <view class="imgBoxItem"> | |||
| <image src="../../assets/img/img1.png" mode="scaleToFill" /> | |||
| <image class="avatar" :src="avatarList[0].url" mode="aspectFill" /> | |||
| <view v-if="!avatarList[0].url" class="noUrlBox" @click="chooseImg(0)" | |||
| >+</view | |||
| > | |||
| <!-- 遮罩层 --> | |||
| <view v-if="avatarList[0].url" class="maskTips">{{ | |||
| avatarList[0].isMyAvatar ? "授权用户头像" : "已上传第1个头像" | |||
| }}</view> | |||
| <view | |||
| v-if="avatarList[0].url && !avatarList[0].isMyAvatar" | |||
| class="reUploadBtn" | |||
| @click="chooseImg(0)" | |||
| >更换头像</view | |||
| > | |||
| <view | |||
| v-if="!avatarList[0].url && !avatarList[0].isMyAvatar" | |||
| class="uploadBtn" | |||
| @click="chooseImg(0)" | |||
| >上传头像</view | |||
| > | |||
| </view> | |||
| <image | |||
| @click="swapItems" | |||
| class="exchange" | |||
| src="../../assets/icon/exchange.png" | |||
| mode="scaleToFill" | |||
| /> | |||
| <!-- 图二 --> | |||
| <view class="imgBoxItem"> | |||
| <image src="../../assets/img/img2.png" mode="scaleToFill" /> | |||
| <view class="reUploadBtn">更换头像</view> | |||
| <image class="avatar" :src="avatarList[1].url" mode="aspectFill" /> | |||
| <view v-if="!avatarList[1].url" class="noUrlBox" @click="chooseImg(1)" | |||
| >+</view | |||
| > | |||
| <!-- 遮罩层 --> | |||
| <view v-if="avatarList[1].url" class="maskTips">{{ | |||
| avatarList[1].isMyAvatar ? "授权用户头像" : "已上传第2个头像" | |||
| }}</view> | |||
| <view | |||
| v-if="avatarList[1].url && !avatarList[1].isMyAvatar" | |||
| class="reUploadBtn" | |||
| @click="chooseImg(1)" | |||
| >更换头像</view | |||
| > | |||
| <view | |||
| v-if="!avatarList[1].url && !avatarList[1].isMyAvatar" | |||
| class="uploadBtn" | |||
| @click="chooseImg(1)" | |||
| >上传头像</view | |||
| > | |||
| </view> | |||
| <image | |||
| @click="swapItems2" | |||
| class="exchange" | |||
| src="../../assets/icon/exchange.png" | |||
| mode="scaleToFill" | |||
| /> | |||
| <!-- 图三 --> | |||
| <view class="imgBoxItem"> | |||
| <image src="../../assets/img/img3.png" mode="scaleToFill" /> | |||
| <view class="uploadBtn">上传头像</view> | |||
| <image class="avatar" :src="avatarList[2].url" mode="aspectFill" /> | |||
| <view v-if="!avatarList[2].url" class="noUrlBox" @click="chooseImg(2)" | |||
| >+</view | |||
| > | |||
| <!-- 遮罩层 --> | |||
| <view v-if="avatarList[2].url" class="maskTips">{{ | |||
| avatarList[2].isMyAvatar ? "授权用户头像" : "已上传第3个头像" | |||
| }}</view> | |||
| <view | |||
| v-if="avatarList[2].url && !avatarList[2].isMyAvatar" | |||
| class="reUploadBtn" | |||
| @click="chooseImg(2)" | |||
| >更换头像</view | |||
| > | |||
| <view | |||
| v-if="!avatarList[2].url && !avatarList[2].isMyAvatar" | |||
| class="uploadBtn" | |||
| @click="chooseImg(2)" | |||
| >上传头像</view | |||
| > | |||
| </view> | |||
| </view> | |||
| <text class="tips">人物头像对应模板任务位置,点击按钮可以调整顺序</text> | |||
| <text class="tips">人物头像对应模板人物位置,点击按钮可以调整顺序</text> | |||
| <view class="orangeBtn" @click="createing(styleData.id)" | |||
| >开始制作写真 | |||
| <view class="free"> | |||
| <text>耗金币2枚</text> | |||
| <text>耗金币{{ styleData.salePrice }}枚</text> | |||
| </view> | |||
| </view> | |||
| <view class="balance" | |||
| >金币余额: 30 | |||
| >金币余额: {{ userInfoModulesPinia.myGlod }} | |||
| <image src="../../assets/icon/coin.png" mode="aspectFit" /> | |||
| </view> | |||
| </view> | |||
| @@ -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; | |||