Browse Source

多人造型

master
congzc 1 year ago
parent
commit
701b69478f
6 changed files with 229 additions and 7 deletions
  1. +1
    -1
      src/api/uploadphoto.js
  2. BIN
      src/assets/icon/exchange.png
  3. +6
    -0
      src/pages.json
  4. +211
    -0
      src/pages/closeStyle/multiplayer.vue
  5. +7
    -1
      src/pages/index/index.vue
  6. +4
    -5
      src/pages/uploadPhoto/uploadPhoto.vue

+ 1
- 1
src/api/uploadphoto.js View File

@@ -1,7 +1,7 @@
import request from "../utils/request"

// /api/baidu/checkPhoto
// /api/userDigital/checkPhoto
// /api/userDigital/checkPhoto
// /api/upload/awsImgUpload //上传,先上传后保存
// /api/userDigital/addImage //保存
// {


BIN
src/assets/icon/exchange.png View File

Before After
Width: 60  |  Height: 60  |  Size: 898 B

+ 6
- 0
src/pages.json View File

@@ -42,6 +42,12 @@
"navigationBarTitleText": "智像"
}
},
{
"path": "pages/closeStyle/multiplayer",
"style": {
"navigationBarTitleText": "智像"
}
},
{
"path": "pages/createing/index",
"style": {


+ 211
- 0
src/pages/closeStyle/multiplayer.vue View File

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

+ 7
- 1
src/pages/index/index.vue View File

@@ -17,6 +17,7 @@
<!-- 金币 -->
<view class="coinBox">
我的金币:&nbsp; &nbsp;30
<image src="../../assets/icon/icon.png" mode="scaleToFill" />
<text @click="goBuyCoin">购买金币</text></view
>
<!-- tab栏 -->
@@ -141,7 +142,7 @@ const pageClass = computed(() => {
//#region 头像
const avatarUrl = ref(null);
function chooseAvatar() {
uni.navigateTo({
uni.switchTab({
url: "/pages/uploadPhoto/uploadPhoto",
});
return;
@@ -256,6 +257,11 @@ function clickTabHandle(e) {
.coinBox {
margin-top: 38rpx;
line-height: 50rpx;
image {
width: 33rpx;
height: 33rpx;
vertical-align: middle;
}
text {
margin-left: 28rpx;
display: inline-block;


+ 4
- 5
src/pages/uploadPhoto/uploadPhoto.vue View File

@@ -11,7 +11,7 @@
<text v-show="uploadState == 5" class="tips">上传失败,请重新上传</text>
</view>
<!-- 上传图片和展示 -->
<view class="uploadBox imgContenBox scan">
<view class="uploadBox imgContenBox scan" @click.stop="chooseImage">
<!-- 扫描线 -->
<view v-show="uploadState == 3" class="scan-line"></view>
<image
@@ -25,14 +25,13 @@
v-show="!showImgUrl"
src="../../assets/icon/add.png"
alt=""
@click="chooseImage"
/>
<image
class="showImg"
v-show="showImgUrl"
:src="showImgUrl"
alt=""
@click="chooseImage"
@click.prevent="chooseImage"
mode="aspectFit"
/>
</view>
@@ -159,7 +158,6 @@ async function toCloseStyle() {
uploadState.value = 4;
return;
}
// 上传接口
uni.uploadFile({
url: "https://test.metavatar.cc/C/api/upload/awsImgUpload", //上传图片api
@@ -223,7 +221,8 @@ async function toCloseStyle() {
.page {
position: relative;
min-height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
background-color: #222527;
// background-color: rgba(0, 0, 0, 0.8);
.bgc {
position: absolute;
width: 750rpx;


Loading…
Cancel
Save