|
|
@@ -0,0 +1,211 @@ |
|
|
|
<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 src="../../assets/img/img1.png" mode="scaleToFill" /> |
|
|
|
</view> |
|
|
|
<image |
|
|
|
class="exchange" |
|
|
|
src="../../assets/icon/exchange.png" |
|
|
|
mode="scaleToFill" |
|
|
|
/> |
|
|
|
<view class="imgBoxItem"> |
|
|
|
<image 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 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"> |
|
|
|
<image src="../../assets/icon/blackBG.png" mode="aspectFit" /> |
|
|
|
<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"; |
|
|
|
//#endregion |
|
|
|
|
|
|
|
//#region 初始化 |
|
|
|
const styleId = ref(null); |
|
|
|
const styleData = ref({}); |
|
|
|
onLoad((options) => { |
|
|
|
// styleId.value = options.id; |
|
|
|
styleId.value = 4; |
|
|
|
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 生成写真照片 |
|
|
|
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 { |
|
|
|
width: 180rpx; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
image { |
|
|
|
width: 180rpx; |
|
|
|
height: 180rpx; |
|
|
|
} |
|
|
|
.reUploadBtn, |
|
|
|
.uploadBtn { |
|
|
|
margin-top: 20rpx; |
|
|
|
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; |
|
|
|
image { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
text { |
|
|
|
position: absolute; |
|
|
|
top: 0rpx; |
|
|
|
left: 0; |
|
|
|
line-height: 49rpx; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
font-size: 22rpx; |
|
|
|
font-weight: 900; |
|
|
|
z-index: 2; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.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> |