瀏覽代碼

Merge branch 'dev' into dev_YWQ

dev_YWQ
HolyKnightIX 1 年之前
父節點
當前提交
12f057c3c9
共有 18 個檔案被更改,包括 1466 行新增148 行删除
  1. 二進制
      src/assets/icon/sound-2.png
  2. 二進制
      src/assets/icon/sound.png
  3. 二進制
      src/assets/icon/soundBG.png
  4. 二進制
      src/assets/img/homeImg.jpg
  5. 二進制
      src/assets/img/homeImg.png
  6. +161
    -0
      src/pages/closeStyle/closeStyle copy.vue
  7. +24
    -27
      src/pages/closeStyle/closeStyle.vue
  8. +1
    -1
      src/pages/closeStyle/goCreatePhoto.vue
  9. +253
    -0
      src/pages/closeStyle/multiplayer copy 2.vue
  10. +235
    -0
      src/pages/closeStyle/multiplayer copy.vue
  11. +288
    -16
      src/pages/closeStyle/multiplayer.vue
  12. +1
    -0
      src/pages/createing/index.vue
  13. +27
    -3
      src/pages/index/index.vue
  14. +4
    -4
      src/pages/login/index.vue
  15. +1
    -1
      src/pages/lookPhoto/index.vue
  16. +288
    -0
      src/pages/recorded/index copy.vue
  17. +156
    -95
      src/pages/recorded/index.vue
  18. +27
    -1
      src/pages/uploadPhoto/uploadPhoto.vue

二進制
src/assets/icon/sound-2.png 查看文件

Before After
Width: 52  |  Height: 40  |  Size: 429 B

二進制
src/assets/icon/sound.png 查看文件

Before After
Width: 109  |  Height: 83  |  Size: 1.1 KiB

二進制
src/assets/icon/soundBG.png 查看文件

Before After
Width: 520  |  Height: 173  |  Size: 6.5 KiB

二進制
src/assets/img/homeImg.jpg 查看文件

Before After
Width: 720  |  Height: 1373  |  Size: 128 KiB

二進制
src/assets/img/homeImg.png 查看文件

Before After
Width: 750  |  Height: 1430  |  Size: 205 KiB

+ 161
- 0
src/pages/closeStyle/closeStyle copy.vue 查看文件

@@ -0,0 +1,161 @@
<template>
<div class="page">
<u-list class="styleListBox" @scrolltolower="scrolltolower">
<u-list-item class="glodYBox">
<u-list-item
v-for="item in styleList"
:key="item.id"
class="styleListBoxItme"
>
<view class="styleInfo" @click="createPhoto(item.id)">
<image :src="item.coverImg" mode="aspectFit" />
<text class="name">{{ item.title }}</text>
<text class="single">{{ peopleNum(item.mouldType) }}</text>
</view>
</u-list-item>
</u-list-item>
</u-list>
</div>
</template>

<script setup>
//#region 导入
import { onPullDownRefresh } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import { voiceTotalApi } from "../../api/login.js";
import { getListApi } from "../../api/closeStyle";
//#endregion

//#region 下拉刷新
onPullDownRefresh(async () => {
uni.showLoading({
title: "加载中...",
mask: true,
});
pageNum.value = 1;
pageSize.value = 8;
styleList.value = [];
await getList();
uni.hideLoading();
uni.stopPullDownRefresh();
});
//#endregion

//#region 列表加载
const pageNum = ref(1);
const pageSize = ref(8);
const styleList = ref([]);
// 得到列表
async function getList() {
try {
const res = await getListApi(pageNum.value, pageSize.value);
styleList.value = res.data.list;
} catch (error) {
uni.showToast({
title: "获取列表失败,请重试",
icon: "none",
});
}
}
getList();
// 触底加载更多
const scrolltolower = async () => {
try {
pageNum.value += 1;
const res = await getListApi(pageNum.value, pageSize.value);
if (res.data.list.length == 0) {
pageNum.value -= 1;
uni.showToast({
title: "已加载全部内容",
icon: "none",
});
}
styleList.value.push(...res.data.list);
} catch (error) {
uni.showToast({
title: "获取数据失败,请重试",
icon: "none",
});
}
};

// 处理单人双人多人
function peopleNum(num) {
if (num == 1) {
return "单人";
} else if (num == 2) {
return "双人";
} else if (num == 3) {
return "三人";
}
}
//#endregion ---------------------

//#region 点击图片
function createPhoto(id) {
uni.navigateTo({
url: `/pages/closeStyle/goCreatePhoto?id=${id}`,
});
}
//#endregion ---------------------
</script>

<style lang="scss">
.page {
height: 100vh;
overflow: hidden;
background-color: #222527;
}
.u-list {
width: 650rpx;

.glodYBox {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
}
.u-list-item {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
}
.styleInfo {
position: relative;
display: flex !important;
flex-wrap: wrap !important;
width: 300rpx;
height: 480rpx;
margin-bottom: 50rpx;
border-radius: 24rpx;
overflow: hidden;
image {
width: 300rpx;
height: 400rpx;
}
.name {
background-color: #393b3d;
width: 100%;
height: 80rpx;
text-align: center;
line-height: 80rpx;
font-size: 30rpx;
font-weight: bold;
}
.single {
position: absolute;
top: 11rpx;
right: 13rpx;
width: 72rpx;
height: 41rpx;
text-align: center;
line-height: 41rpx;
background: rgba(0, 0, 0, 0.4);
font-size: 22rpx;
// opacity: 0.4;
border-radius: 12rpx;
}
}
}
</style>

+ 24
- 27
src/pages/closeStyle/closeStyle.vue 查看文件

@@ -20,14 +20,30 @@

<script setup>
//#region 导入
import { onPullDownRefresh } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import { voiceTotalApi } from "../../api/login.js";
import { getListApi } from "../../api/closeStyle";
//#endregion

//#region 页面下拉刷新
// onPullDownRefresh(async () => {
// uni.showLoading({
// title: "加载中...",
// mask: true,
// });
// pageNum.value = 1;
// pageSize.value = 8;
// styleList.value = [];
// await getList();
// uni.hideLoading();
// uni.stopPullDownRefresh();
// });
//#endregion

//#region 列表加载
const pageNum = ref(1);
const pageSize = ref(6);
const pageSize = ref(8);
const styleList = ref([]);
// 得到列表
async function getList() {
@@ -45,8 +61,14 @@ getList();
// 触底加载更多
const scrolltolower = async () => {
try {
uni.showLoading({
title: "加载中...",
mask: true,
});
pageNum.value += 1;
const res = await getListApi(pageNum.value, pageSize.value);
styleList.value.push(...res.data.list);
uni.hideLoading();
if (res.data.list.length == 0) {
pageNum.value -= 1;
uni.showToast({
@@ -54,8 +76,8 @@ const scrolltolower = async () => {
icon: "none",
});
}
styleList.value.push(...res.data.list);
} catch (error) {
uni.hideLoading();
uni.showToast({
title: "获取数据失败,请重试",
icon: "none",
@@ -85,31 +107,6 @@ function createPhoto(id) {
</script>

<style lang="scss">
// scroll-view {
// width: 750rpx;
// }
// .uni-scroll-view-content {
// width: 750rpx;
// display: flex !important;
// flex-direction: row !important;
// flex-wrap: wrap !important;
// justify-content: space-between !important;
// .styleInfo {
// width: 350rpx;
// height: 400rpx;
// margin-bottom: 50rpx;
// image {
// width: 350rpx;
// height: 350rpx;
// }
// text {
// width: 100%;
// height: 50rpx;
// text-align: center;
// line-height: 50rpx;
// }
// }
// }
.page {
background-color: #222527;
}


+ 1
- 1
src/pages/closeStyle/goCreatePhoto.vue 查看文件

@@ -2,7 +2,7 @@
<view class="page">
<!-- 毛玻璃 -->
<view class="glass">
<image src="../../assets/img/homeImg.png" mode="scaleToFill" />
<image src="../../assets/img/homeImg.jpg" mode="scaleToFill" />
</view>
<view class="showImgBox imgContenBox"
><image :src="styleData.coverImg"


+ 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>

+ 288
- 16
src/pages/closeStyle/multiplayer.vue 查看文件

@@ -5,37 +5,98 @@
/></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
v-if="styleData.mouldType == 3"
@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>
<!-- 图三 -->
<view v-if="styleData.mouldType == 3" class="imgBoxItem">
<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 +111,23 @@ 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 = "2003";
// styleId.value = "246";
getInfo();
// getMyCoin();
});

async function getInfo() {
try {
const res = await findByIdApi(styleId.value);
@@ -72,25 +140,201 @@ 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;
} else {
// 人脸识别接口
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;
} else {
// 上传接口
uni.uploadFile({
url: "https://test.metavatar.cc/C/api/upload/awsImgUpload", //上传图片api
filePath: res.tempFilePaths[0],
name: "file",
formData: {
user: "test",
},
header: {
"Content-Type": "multipart/form-data",
token: userInfoModulesPinia.token,
},
success: async (res4) => {
if (JSON.parse(res4.data).code != 200) {
uni.hideLoading();
uni.showToast({
title: "网络被数字人偷走了, 请稍后重试",
icon: "none",
});
return;
}
// 赋值
avatarList.value[index].url = JSON.parse(
res4.data
).data.url;
uni.hideLoading();
},
fail: () => {
uni.hideLoading();
uni.showToast({
title: "网络被数字人偷走了, 请稍后重试",
icon: "none",
});
},
});
}
},
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 {
const res = await findImageApi();
console.log(res);
let myImg = res.data.image;
uni.showLoading({
title: "加载中...",
mask: true,
});
// const res = await findImageApi();
// console.log(res);
// let myImg = res.data.image;
let myImgList = [];
avatarList.value.forEach((item) => {
myImgList.push(item.url);
});
const data = {
digitalAvatarId: id,
userImages: JSON.stringify([myImg]),
userImages:
styleData.value.mouldType == 2
? JSON.stringify(myImgList.slice(0, 2))
: JSON.stringify(myImgList),
};
const res2 = await createPhotoApi(data);
console.log(res2);
uni.hideLoading();
uni.navigateTo({
url: `/pages/createing/index?id=${res2.data.id}`,
});
} catch (error) {
console.log(error);
uni.hideLoading();
uni.showToast({
title: "生成失败,请重试",
icon: "none",
@@ -140,17 +384,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;


+ 1
- 0
src/pages/createing/index.vue 查看文件

@@ -88,6 +88,7 @@ const styleData = ref(""); //风格信息
onLoad((options) => {
workId.value = options.id;
// workId.value = "857147862095679488";
getWorkInfo();
// let getWindowInfo = uni.getWindowInfo().screenWidth;


+ 27
- 3
src/pages/index/index.vue 查看文件

@@ -5,7 +5,7 @@
<!-- 毛玻璃 -->
<view class="glass">
<image src="../../assets/img/homeImg.png" mode="scaleToFill" />
<image src="../../assets/img/homeImg.jpg" mode="scaleToFill" />
</view>
<!-- 头像 -->
<view class="avatarBox">
@@ -212,7 +212,13 @@
<script setup>
//#region 导入
import dayjs from "dayjs";
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
onLoad,
onShareAppMessage,
onShareTimeline,
onAddToFavorites,
onShow,
} from "@dcloudio/uni-app";
import { ref, reactive, computed, inject } from "vue";
// import App from "../../App.vue";
import {
@@ -506,8 +512,26 @@ onShow(() => {
}
});
//#endregion ---------------------------
// 分享到朋友圈
// onShareTimeline((res) => {
// return {
// title: "邃芒智像",
// };
// });
// 收藏
// onAddToFavorites((res) => {
// return {
// title: "邃芒智像",
// };
// });
//#endregion ---------------------------
onShareAppMessage((res) => {
return {
title: "邃芒智像",
};
});
//#region
//#endregion ---------------------------


+ 4
- 4
src/pages/login/index.vue 查看文件

@@ -1,7 +1,7 @@
<template>
<view :class="pageClass">
<!-- mode="aspectFit" -->
<image class="bgImg" src="../../assets/img/homeImg.png" />
<image class="bgImg" src="../../assets/img/homeImg.jpg" />
<!-- 视频,已废弃 -->
<view v-show="false" class="videoBox">
<!-- <video
@@ -26,7 +26,7 @@
id="getPhoneNumber"
@click="toCreate"
>
开始制作我的数字分身
开始制作我的数字写真
</button>
<button
v-if="checkboxValue[0]"
@@ -36,9 +36,9 @@
id="getPhoneNumber"
@getphonenumber="toCreate"
>
开始制作我的数字分身
开始制作我的数字写真
</button>
<!-- <view class="bottomBtn" @click="toCreate"> 开始制作我的数字分身 </view> -->
<!-- <view class="bottomBtn" @click="toCreate"> 开始制作我的数字写真 </view> -->
<u-checkbox-group
v-model="checkboxValue"
placement="row"


+ 1
- 1
src/pages/lookPhoto/index.vue 查看文件

@@ -255,7 +255,7 @@ async function photoSupper() {
console.log(res);
uni.hideLoading();
uni.showToast({
title: "高清处理请求成功,请重稍后",
title: "高清处理请求成功,请稍等",
icon: "none",
});


+ 288
- 0
src/pages/recorded/index copy.vue 查看文件

@@ -0,0 +1,288 @@
<template>
<view class="page" @touchmove.stop.prevent="">
<image src="../../assets/img/img1.png" mode="aspectFit" />
<view v-show="!audioUrl" class="myBtnbox">
<up-button
type="primary"
text="开始录音"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="openPopup"
></up-button>
</view>

<view v-show="audioUrl" class="myBtnbox">
<up-button
type="primary"
text="试听"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="playVoice"
></up-button>
</view>

<view v-show="audioUrl" class="myBtnbox">
<up-button
type="primary"
text="重新录音"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="openPopup"
></up-button>
</view>
<view class="myBtnbox">
<up-button
type="primary"
text="生成视频"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click=""
></up-button>
</view>
<!-- 分享 -->
<view class="shareBox">
<view class="buttonBox">
<up-button
type="primary"
text="分享"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
open-type="share"
@click=""
></up-button>
</view>
<view class="buttonBox">
<up-button
type="primary"
text="邀请好友"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
open-type="share"
@click=""
></up-button>
</view>
<view class="buttonBox">
<up-button
type="primary"
text="购买金币"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click=""
></up-button>
</view>
</view>
<!-- 弹出层 -->
<view class="popup" v-show="showPopup" @click.stop="showPopup = false">
<!-- 声纹图片 -->
<u-transition :show="showPopup">
<view class="transition wavyIcon">
<!-- <image src="../../assets/icon/u152.png" /> -->
</view>
</u-transition>

<!-- 底部框 -->
<u-transition
:show="showPopup"
@touchstart.stop="startRecord"
@touchend.stop="endRecord"
>
<view class="transition microphoneIcon">
<view class="mask"></view>
<image src="../../assets/icon/u149.png" mode="aspectFit" />
</view>
</u-transition>
</view>
</view>
</template>

<script setup>
// import myloading from '../../components/myLoading.vue'
//#region 导入
import { ref, reactive } from "vue";
import { userInfoModules } from "@/store/modules/userInfo";
const userInfoModulesPinia = userInfoModules();

//#endregion

//#region 页面跳转
function bueCoin() {
uni.navigateTo({
url: "/pages/home/buyCoin",
});
}
//#endregion ---------------------

//#region 弹出层
const showPopup = ref(true);
function openPopup() {
showPopup.value = true;
}
function close() {
console.log("close");
}
function open() {
console.log("open");
}

//#endregion ---------------------

//#region 录音功能
let Recorder = null; //h5定义录音对象
let recorder = null; //h5定义录音实例
let recorderManager = null; //小程序定义录音实例
let innerAudioContext = null; //小程序定义mp3实例
const audioUrl = ref(null);
const audioRef = ref(null);

if (userInfoModulesPinia.platForm == 1) {
// 在 H5 平台导入 Recorder
import("js-audio-recorder").then((module) => {
const Recorder = module.default;
// 也可以继续使用 recorder 变量
const parameter = {
sampleBits: 16, // 采样位数,支持 8 或 16,默认是16
sampleRate: 16000, // 采样率,支持 11025、16000、22050、24000、44100、48000,根据浏览器默认值,我的chrome是48000
numChannels: 1, // 声道,支持 1 或 2, 默认是1
};
recorder = new Recorder(parameter);
});
} else {
recorderManager = uni.getRecorderManager();
innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = false;
}
//#endregion

//#region 录音

function startRecord() {
if (userInfoModulesPinia.platForm != 1) {
console.log("开始录音xcx");
recorderManager.start({
// format: "mp3", // 录音的格式
duration: 60000, // 最大录音时长,单位毫秒
});
} else {
console.log("开始录音h5");
recorder.start();
}
}
async function endRecord() {
if (userInfoModulesPinia.platForm != 1) {
recorderManager.onStop((res) => {
console.log("录音结束xcx", res);
audioUrl.value = res.tempFilePath;
innerAudioContext.src = audioUrl.value;
});
recorderManager.stop();
} else {
console.log("录音结束h5");
await recorder.stop();
audioUrl.value = URL.createObjectURL(recorder.getWAVBlob());
}
showPopup.value = false;
}
async function playVoice() {
if (userInfoModulesPinia.platForm != 1) {
await innerAudioContext.play();
console.log("试听了xcx");
} else {
const link = document.createElement("audio");
link.src = audioUrl.value;
link.play();
console.log("试听了h5");
}
}
//#endregion ---------------------

//#region

//#endregion ---------------------
</script>

<style lang="scss">
.page {
position: relative;
}
image {
height: 650rpx;
}
.myBtnbox {
margin-top: 30rpx;
}
.shareBox {
margin-top: 250rpx;
width: 100%;
display: flex;
justify-content: space-between;
.buttonBox {
width: 30%;
}
}
.popup {
position: absolute;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
.wavyIcon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 160rpx;
width: 50%;
background-color: #fff;
z-index: 3;

overflow: hidden;
image {
position: absolute;
left: -500rpx;
display: inline-block;
width: 1000rpx;
height: 160rpx;
z-index: 3;
// animation: moveImage 3s linear infinite;
}
@keyframes moveImage {
0% {
left: -100rpx;
}
50% {
left: -500rpx;
}
100% {
left: -100rpx;
}
}
}
.microphoneIcon {
position: absolute;
bottom: 0;
height: 500rpx;
width: 100%;
background-color: #fff;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.mask {
position: absolute;
top: 40%;
left: 47%;
transform: translate(-50%, -50%);
width: 95rpx;
height: 95rpx;
transform: rotate(45deg);
z-index: 4;
background: url("../../assets/icon/u149.png");
}
image {
max-width: 0%;
max-height: 0%;
transform: rotate(45deg);
touch-action: none;
z-index: -1;
pointer-events: none;
}
// img {
// pointer-events: none;
// }
}
}
</style>

+ 156
- 95
src/pages/recorded/index.vue 查看文件

@@ -1,75 +1,50 @@
<template>
<view class="page" @touchmove.stop.prevent="">
<image src="../../assets/img/img1.png" mode="aspectFit" />
<view v-show="!audioUrl" class="myBtnbox">
<up-button
type="primary"
text="开始录音"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="openPopup"
></up-button>
</view>
<image class="modeImage" src="../../assets/img/img1.png" mode="aspectFit" />
<!-- 轮播图 -->
<!-- <u-swiper
indicator
indicatorMode="dot"
circular
:radius="30"
:autoplay="false"
:list="swiperList"
keyName="image"
@change="getSwiperIndex"
@click="previewImage"
></u-swiper> -->
<view v-show="audioUrl" class="myBtnbox">
<up-button
type="primary"
text="试听"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="playVoice"
></up-button>
</view>
<!-- 按钮部分 -->
<view v-show="!audioUrl" class="orangeBtn" @click="openPopup">
<image
src="../../assets/icon/sound-2.png"
mode="scaleToFill"
/>开始录音</view
>
<view v-show="audioUrl" class="myBtnbox">
<up-button
type="primary"
text="重新录音"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="openPopup"
></up-button>
</view>
<view class="myBtnbox">
<up-button
type="primary"
text="生成视频"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click=""
></up-button>
<view v-show="audioUrl" class="orangeBtn transparentBtn" @click="playVoice"
><image src="../../assets/icon/sound-2.png" mode="scaleToFill" />试听
<view class="rerecord" @click.stop="openPopup">重新录音</view>
</view>
<!-- <view v-show="audioUrl" class="orangeBtn" @click="openPopup">重新录音</view> -->
<view class="orangeBtn" @click="">生成视频</view>
<!-- 分享 -->
<view class="shareBox">
<view class="buttonBox">
<up-button
type="primary"
text="分享"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
open-type="share"
@click=""
></up-button>
</view>
<view class="buttonBox">
<up-button
type="primary"
text="邀请好友"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
open-type="share"
@click=""
></up-button>
</view>
<view class="buttonBox">
<up-button
type="primary"
text="购买金币"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click=""
></up-button>
<view class="tips">
<text>邀请好友可获得2枚金币</text>
</view>
<view class="shareBtn" @click="">分享</view>
<view class="shareBtn" @click="">邀请好友 </view>
<view class="shareBtn" @click="">购买金币</view>
</view>
<!-- 弹出层 -->
<view class="popup" v-show="showPopup" @click.stop="showPopup = false">
<!-- 声纹图片 -->
<u-transition :show="showPopup">
<view class="transition wavyIcon">
<image src="../../assets/icon/u152.png" />
<image src="../../assets/icon/soundBG.png" />
</view>
</u-transition>
@@ -80,8 +55,7 @@
@touchend.stop="endRecord"
>
<view class="transition microphoneIcon">
<view class="mask"></view>
<image src="../../assets/icon/u149.png" mode="aspectFit" />
<image src="../../assets/icon/sound.png" mode="aspectFit" />
</view>
</u-transition>
</view>
@@ -91,12 +65,44 @@
<script setup>
// import myloading from '../../components/myLoading.vue'
//#region 导入
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import { userInfoModules } from "@/store/modules/userInfo";
import { getPhotoListApi } from "../../api/lookPhoto.js";
const userInfoModulesPinia = userInfoModules();
//#endregion
//#region 轮播图
const swiperList = ref([]); //轮播图
async function getSwiperList() {
const res = await getPhotoListApi(workId.value);
console.log(res.data.photoList);
swiperList.value = res.data.photoList;
swiperList.value.forEach((item) => {
if (item.imageSuper) {
previewImageList.value.push(item.imageSuper);
} else {
previewImageList.value.push(item.image);
}
});
}
// 轮播图滚动
const swiperIndex = ref(0);
function getSwiperIndex(index) {
swiperIndex.value = index.current;
}
// 轮播图预览
const previewImageList = ref([]); //预览图片列表
function previewImage(index) {
uni.previewImage({
current: index, //预览图片的下标
urls: previewImageList.value, //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以
loop: true,
});
}
//#endregion ---------------------
//#region 页面跳转
function bueCoin() {
uni.navigateTo({
@@ -147,7 +153,6 @@ if (userInfoModulesPinia.platForm == 1) {
//#endregion
//#region 录音
function startRecord() {
if (userInfoModulesPinia.platForm != 1) {
console.log("开始录音xcx");
@@ -188,6 +193,15 @@ async function playVoice() {
}
//#endregion ---------------------
//#region 初始化
const workId = ref(null); //作品id
onLoad(async (options) => {
workId.value = options.id;
// await getSwiperList();
// await getSupperPhotoState(swiperList.value[0].id);
});
//#endregion ---------------------
//#region
//#endregion ---------------------
@@ -196,20 +210,75 @@ async function playVoice() {
<style lang="scss">
.page {
position: relative;
padding-bottom: 200rpx;
}
image {
height: 650rpx;
.modeImage {
width: 540rpx;
height: 720rpx;
}
.myBtnbox {
margin-top: 30rpx;
}
.orangeBtn {
position: relative;
margin-top: 30rpx;
image {
vertical-align: text-top;
width: 52rpx;
height: 40rpx;
margin-right: 20rpx;
}
.rerecord {
position: absolute;
top: -14rpx;
right: -78rpx;
height: 50rpx;
width: 142rpx;
text-align: center;
line-height: 50rpx;
border-radius: 25rpx;
background-color: #000;
font-size: 22rpx;
font-weight: bold;
}
}
.transparentBtn {
background-color: transparent;
border: 2rpx solid #fff;
}
.shareBox {
margin-top: 250rpx;
position: absolute;
bottom: 100rpx;
padding: 0 60rpx;
// margin-top: 150rpx;
width: 100%;
display: flex;
justify-content: space-between;
.buttonBox {
width: 30%;
.tips {
position: absolute;
top: -70rpx;
right: 60rpx;
width: 313rpx;
height: 50rpx;
background-color: #000;
border-radius: 25rpx 25rpx 25rpx 0;
font-size: 22rpx;
font-weight: 900;
line-height: 50rpx;
text-align: center;
}
.shareBtn {
width: 200rpx;
height: 72rpx;
line-height: 72rpx;
text-align: center;
background-color: #3d3e3f;
border-radius: 36rpx;
font-size: 26rpx;
font-weight: 400;
color: #ffffff;
}
}
.popup {
@@ -223,21 +292,24 @@ image {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 160rpx;
width: 50%;
background-color: #fff;
width: 530rpx;
height: 173rpx;
// background-color: #fff;
z-index: 3;
overflow: hidden;
image {
position: absolute;
left: -500rpx;
display: inline-block;
width: 1000rpx;
height: 160rpx;
z-index: 3;
// animation: moveImage 3s linear infinite;
width: 520rpx;
height: 173rpx;
}
// image {
// position: absolute;
// left: -500rpx;
// display: inline-block;
// width: 1000rpx;
// height: 160rpx;
// z-index: 3;
// // animation: moveImage 3s linear infinite;
// }
@keyframes moveImage {
0% {
left: -100rpx;
@@ -253,36 +325,25 @@ image {
.microphoneIcon {
position: absolute;
bottom: 0;
height: 500rpx;
height: 410rpx;
width: 100%;
border-radius: 36rpx 36rpx 0 0;
background-color: #fff;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.mask {
position: absolute;
top: 40%;
left: 47%;
transform: translate(-50%, -50%);
width: 95rpx;
height: 95rpx;
transform: rotate(45deg);
z-index: 4;
background: url("../../assets/icon/u149.png");
}
image {
max-width: 0%;
max-height: 0%;
transform: rotate(45deg);
// max-width: 0%;
// max-height: 0%;
width: 108rpx;
height: 83rpx;
touch-action: none;
z-index: -1;
pointer-events: none;
}
// img {
// pointer-events: none;
// }
}
}
</style>

+ 27
- 1
src/pages/uploadPhoto/uploadPhoto.vue 查看文件

@@ -37,6 +37,7 @@
</view>
<view class="uploadBtn">
<view @click="toCloseStyle" class="orangeBtn">上传新头像</view>
<!-- '/pages/closeStyle/closeStyle' '/pages/closeStyle/multiplayer' -->
<view
class="grayBtn"
v-if="userInfoModulesPinia.myAvatar"
@@ -85,7 +86,13 @@
<script setup>
//#region 导入
import { ref, reactive, nextTick } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
onLoad,
onShareAppMessage,
onShareTimeline,
onAddToFavorites,
onShow,
} from "@dcloudio/uni-app";
import { loginApi } from "../../api/login";
import { addImageApi } from "../../api/uploadphoto.js";
import { userInfoModules } from "@/store/modules/userInfo";
@@ -418,6 +425,25 @@ onShow(() => {
});
//#endregion ---------------------
onShareAppMessage((res) => {
return {
title: "邃芒智像",
};
});
// 分享到朋友圈
onShareTimeline((res) => {
return {
title: "邃芒智像",
};
});
// 收藏
onAddToFavorites((res) => {
return {
title: "邃芒智像",
};
});
//#region 公共方法
function goOtherPage(url) {


Loading…
取消
儲存