@@ -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> |
@@ -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; | |||
} | |||
@@ -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" | |||
@@ -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,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" | |||
>金币余额: 30 | |||
>金币余额: {{ 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; | |||
@@ -88,6 +88,7 @@ const styleData = ref(""); //风格信息 | |||
onLoad((options) => { | |||
workId.value = options.id; | |||
// workId.value = "857147862095679488"; | |||
getWorkInfo(); | |||
// let getWindowInfo = uni.getWindowInfo().screenWidth; | |||
@@ -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 --------------------------- | |||
@@ -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" | |||
@@ -255,7 +255,7 @@ async function photoSupper() { | |||
console.log(res); | |||
uni.hideLoading(); | |||
uni.showToast({ | |||
title: "高清处理请求成功,请重稍后", | |||
title: "高清处理请求成功,请稍等", | |||
icon: "none", | |||
}); | |||
@@ -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> |
@@ -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> |
@@ -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) { | |||