congzc 1 년 전
부모
커밋
a46299cac3
3개의 변경된 파일722개의 추가작업 그리고 11개의 파일을 삭제
  1. +253
    -0
      src/pages/closeStyle/multiplayer copy 2.vue
  2. +235
    -0
      src/pages/closeStyle/multiplayer copy.vue
  3. +234
    -11
      src/pages/closeStyle/multiplayer.vue

+ 253
- 0
src/pages/closeStyle/multiplayer copy 2.vue 파일 보기

@@ -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"
>金币余额:&nbsp;&nbsp;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>

+ 235
- 0
src/pages/closeStyle/multiplayer copy.vue 파일 보기

@@ -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"
>金币余额:&nbsp;&nbsp;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>

+ 234
- 11
src/pages/closeStyle/multiplayer.vue 파일 보기

@@ -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"
>金币余额:&nbsp;&nbsp;30
>金币余额:&nbsp;&nbsp;{{ 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;


불러오는 중...
취소
저장