@@ -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> | /></view> | ||||
<text class="name">{{ styleData.title }}</text> | <text class="name">{{ styleData.title }}</text> | ||||
<view class="imgBox"> | <view class="imgBox"> | ||||
<!-- 图一 --> | |||||
<view class="imgBoxItem"> | <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> | </view> | ||||
<image | <image | ||||
@click="swapItems" | |||||
class="exchange" | class="exchange" | ||||
src="../../assets/icon/exchange.png" | src="../../assets/icon/exchange.png" | ||||
mode="scaleToFill" | mode="scaleToFill" | ||||
/> | /> | ||||
<!-- 图二 --> | |||||
<view class="imgBoxItem"> | <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> | </view> | ||||
<image | <image | ||||
@click="swapItems2" | |||||
class="exchange" | class="exchange" | ||||
src="../../assets/icon/exchange.png" | src="../../assets/icon/exchange.png" | ||||
mode="scaleToFill" | mode="scaleToFill" | ||||
/> | /> | ||||
<!-- 图三 --> | |||||
<view class="imgBoxItem"> | <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> | ||||
</view> | </view> | ||||
<text class="tips">人物头像对应模板任务位置,点击按钮可以调整顺序</text> | |||||
<text class="tips">人物头像对应模板人物位置,点击按钮可以调整顺序</text> | |||||
<view class="orangeBtn" @click="createing(styleData.id)" | <view class="orangeBtn" @click="createing(styleData.id)" | ||||
>开始制作写真 | >开始制作写真 | ||||
<view class="free"> | <view class="free"> | ||||
<text>耗金币2枚</text> | |||||
<text>耗金币{{ styleData.salePrice }}枚</text> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="balance" | <view class="balance" | ||||
>金币余额: 30 | |||||
>金币余额: {{ userInfoModulesPinia.myGlod }} | |||||
<image src="../../assets/icon/coin.png" mode="aspectFit" /> | <image src="../../assets/icon/coin.png" mode="aspectFit" /> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
@@ -50,16 +110,22 @@ import { | |||||
findImageApi, | findImageApi, | ||||
createPhotoApi, | createPhotoApi, | ||||
} from "../../api/closeStyle"; | } from "../../api/closeStyle"; | ||||
import { findGlodApi } from "../../api/home"; | |||||
import { userInfoModules } from "@/store/modules/userInfo"; | |||||
//#endregion | //#endregion | ||||
const userInfoModulesPinia = userInfoModules(); | |||||
//#region 初始化 | //#region 初始化 | ||||
const styleId = ref(null); | const styleId = ref(null); | ||||
const styleData = ref({}); | const styleData = ref({}); | ||||
onLoad((options) => { | onLoad((options) => { | ||||
// styleId.value = options.id; | // styleId.value = options.id; | ||||
styleId.value = 4; | |||||
// styleId.value = "857147862095679488"; | |||||
styleId.value = "245"; | |||||
getInfo(); | getInfo(); | ||||
// getMyCoin(); | |||||
}); | }); | ||||
async function getInfo() { | async function getInfo() { | ||||
try { | try { | ||||
const res = await findByIdApi(styleId.value); | 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 --------------------- | //#endregion --------------------- | ||||
//#region 生成写真照片 | //#region 生成写真照片 | ||||
async function createing(id) { | async function createing(id) { | ||||
try { | try { | ||||
@@ -140,17 +335,45 @@ async function createing(id) { | |||||
margin-top: 67rpx; | margin-top: 67rpx; | ||||
} | } | ||||
.imgBoxItem { | .imgBoxItem { | ||||
position: relative; | |||||
width: 180rpx; | width: 180rpx; | ||||
height: 250rpx; | |||||
display: flex; | display: flex; | ||||
flex-direction: column; | flex-direction: column; | ||||
align-items: center; | align-items: center; | ||||
image { | |||||
.avatar { | |||||
position: absolute; | |||||
width: 180rpx; | width: 180rpx; | ||||
height: 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, | .reUploadBtn, | ||||
.uploadBtn { | .uploadBtn { | ||||
margin-top: 20rpx; | |||||
margin-top: 200rpx; | |||||
width: 150rpx; | width: 150rpx; | ||||
height: 50rpx; | height: 50rpx; | ||||
text-align: center; | text-align: center; | ||||