@@ -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> | <script setup> | ||||
//#region 导入 | //#region 导入 | ||||
import { onPullDownRefresh } from "@dcloudio/uni-app"; | |||||
import { ref, reactive } from "vue"; | import { ref, reactive } from "vue"; | ||||
import { voiceTotalApi } from "../../api/login.js"; | import { voiceTotalApi } from "../../api/login.js"; | ||||
import { getListApi } from "../../api/closeStyle"; | import { getListApi } from "../../api/closeStyle"; | ||||
//#endregion | //#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 列表加载 | //#region 列表加载 | ||||
const pageNum = ref(1); | const pageNum = ref(1); | ||||
const pageSize = ref(6); | |||||
const pageSize = ref(8); | |||||
const styleList = ref([]); | const styleList = ref([]); | ||||
// 得到列表 | // 得到列表 | ||||
async function getList() { | async function getList() { | ||||
@@ -45,8 +61,14 @@ getList(); | |||||
// 触底加载更多 | // 触底加载更多 | ||||
const scrolltolower = async () => { | const scrolltolower = async () => { | ||||
try { | try { | ||||
uni.showLoading({ | |||||
title: "加载中...", | |||||
mask: true, | |||||
}); | |||||
pageNum.value += 1; | pageNum.value += 1; | ||||
const res = await getListApi(pageNum.value, pageSize.value); | const res = await getListApi(pageNum.value, pageSize.value); | ||||
styleList.value.push(...res.data.list); | |||||
uni.hideLoading(); | |||||
if (res.data.list.length == 0) { | if (res.data.list.length == 0) { | ||||
pageNum.value -= 1; | pageNum.value -= 1; | ||||
uni.showToast({ | uni.showToast({ | ||||
@@ -54,8 +76,8 @@ const scrolltolower = async () => { | |||||
icon: "none", | icon: "none", | ||||
}); | }); | ||||
} | } | ||||
styleList.value.push(...res.data.list); | |||||
} catch (error) { | } catch (error) { | ||||
uni.hideLoading(); | |||||
uni.showToast({ | uni.showToast({ | ||||
title: "获取数据失败,请重试", | title: "获取数据失败,请重试", | ||||
icon: "none", | icon: "none", | ||||
@@ -85,31 +107,6 @@ function createPhoto(id) { | |||||
</script> | </script> | ||||
<style lang="scss"> | <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 { | .page { | ||||
background-color: #222527; | background-color: #222527; | ||||
} | } | ||||
@@ -2,7 +2,7 @@ | |||||
<view class="page"> | <view class="page"> | ||||
<!-- 毛玻璃 --> | <!-- 毛玻璃 --> | ||||
<view class="glass"> | <view class="glass"> | ||||
<image src="../../assets/img/homeImg.png" mode="scaleToFill" /> | |||||
<image src="../../assets/img/homeImg.jpg" mode="scaleToFill" /> | |||||
</view> | </view> | ||||
<view class="showImgBox imgContenBox" | <view class="showImgBox imgContenBox" | ||||
><image :src="styleData.coverImg" | ><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> | /></view> | ||||
<text class="name">{{ styleData.title }}</text> | <text class="name">{{ styleData.title }}</text> | ||||
<view class="imgBox"> | <view class="imgBox"> | ||||
<!-- 图一 --> | |||||
<view class="imgBoxItem"> | <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> | </view> | ||||
<image | <image | ||||
@click="swapItems" | |||||
class="exchange" | class="exchange" | ||||
src="../../assets/icon/exchange.png" | src="../../assets/icon/exchange.png" | ||||
mode="scaleToFill" | mode="scaleToFill" | ||||
/> | /> | ||||
<!-- 图二 --> | |||||
<view class="imgBoxItem"> | <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> | </view> | ||||
<image | <image | ||||
v-if="styleData.mouldType == 3" | |||||
@click="swapItems2" | |||||
class="exchange" | class="exchange" | ||||
src="../../assets/icon/exchange.png" | src="../../assets/icon/exchange.png" | ||||
mode="scaleToFill" | 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> | ||||
</view> | </view> | ||||
<text class="tips">人物头像对应模板任务位置,点击按钮可以调整顺序</text> | |||||
<text class="tips">人物头像对应模板人物位置,点击按钮可以调整顺序</text> | |||||
<view class="orangeBtn" @click="createing(styleData.id)" | <view class="orangeBtn" @click="createing(styleData.id)" | ||||
>开始制作写真 | >开始制作写真 | ||||
<view class="free"> | <view class="free"> | ||||
<text>耗金币2枚</text> | |||||
<text>耗金币{{ styleData.salePrice }}枚</text> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="balance" | <view class="balance" | ||||
>金币余额: 30 | |||||
>金币余额: {{ userInfoModulesPinia.myGlod }} | |||||
<image src="../../assets/icon/coin.png" mode="aspectFit" /> | <image src="../../assets/icon/coin.png" mode="aspectFit" /> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
@@ -50,16 +111,23 @@ import { | |||||
findImageApi, | findImageApi, | ||||
createPhotoApi, | createPhotoApi, | ||||
} from "../../api/closeStyle"; | } from "../../api/closeStyle"; | ||||
import { findGlodApi } from "../../api/home"; | |||||
import { userInfoModules } from "@/store/modules/userInfo"; | |||||
//#endregion | //#endregion | ||||
const userInfoModulesPinia = userInfoModules(); | |||||
//#region 初始化 | //#region 初始化 | ||||
const styleId = ref(null); | const styleId = ref(null); | ||||
const styleData = ref({}); | const styleData = ref({}); | ||||
onLoad((options) => { | onLoad((options) => { | ||||
// styleId.value = options.id; | // styleId.value = options.id; | ||||
styleId.value = 4; | |||||
// styleId.value = "857147862095679488"; | |||||
styleId.value = "2003"; | |||||
// styleId.value = "246"; | |||||
getInfo(); | getInfo(); | ||||
// getMyCoin(); | |||||
}); | }); | ||||
async function getInfo() { | async function getInfo() { | ||||
try { | try { | ||||
const res = await findByIdApi(styleId.value); | 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 --------------------- | //#endregion --------------------- | ||||
//#region 生成写真照片 | //#region 生成写真照片 | ||||
async function createing(id) { | async function createing(id) { | ||||
try { | 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 = { | const data = { | ||||
digitalAvatarId: id, | 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); | const res2 = await createPhotoApi(data); | ||||
console.log(res2); | console.log(res2); | ||||
uni.hideLoading(); | |||||
uni.navigateTo({ | uni.navigateTo({ | ||||
url: `/pages/createing/index?id=${res2.data.id}`, | url: `/pages/createing/index?id=${res2.data.id}`, | ||||
}); | }); | ||||
} catch (error) { | } catch (error) { | ||||
console.log(error); | console.log(error); | ||||
uni.hideLoading(); | |||||
uni.showToast({ | uni.showToast({ | ||||
title: "生成失败,请重试", | title: "生成失败,请重试", | ||||
icon: "none", | icon: "none", | ||||
@@ -140,17 +384,45 @@ async function createing(id) { | |||||
margin-top: 67rpx; | margin-top: 67rpx; | ||||
} | } | ||||
.imgBoxItem { | .imgBoxItem { | ||||
position: relative; | |||||
width: 180rpx; | width: 180rpx; | ||||
height: 250rpx; | |||||
display: flex; | display: flex; | ||||
flex-direction: column; | flex-direction: column; | ||||
align-items: center; | align-items: center; | ||||
image { | |||||
.avatar { | |||||
position: absolute; | |||||
width: 180rpx; | |||||
height: 180rpx; | |||||
border-radius: 24rpx; | |||||
} | |||||
.noUrlBox { | |||||
position: absolute; | |||||
width: 180rpx; | width: 180rpx; | ||||
height: 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, | .reUploadBtn, | ||||
.uploadBtn { | .uploadBtn { | ||||
margin-top: 20rpx; | |||||
margin-top: 200rpx; | |||||
width: 150rpx; | width: 150rpx; | ||||
height: 50rpx; | height: 50rpx; | ||||
text-align: center; | text-align: center; | ||||
@@ -88,6 +88,7 @@ const styleData = ref(""); //风格信息 | |||||
onLoad((options) => { | onLoad((options) => { | ||||
workId.value = options.id; | workId.value = options.id; | ||||
// workId.value = "857147862095679488"; | // workId.value = "857147862095679488"; | ||||
getWorkInfo(); | getWorkInfo(); | ||||
// let getWindowInfo = uni.getWindowInfo().screenWidth; | // let getWindowInfo = uni.getWindowInfo().screenWidth; | ||||
@@ -5,7 +5,7 @@ | |||||
<!-- 毛玻璃 --> | <!-- 毛玻璃 --> | ||||
<view class="glass"> | <view class="glass"> | ||||
<image src="../../assets/img/homeImg.png" mode="scaleToFill" /> | |||||
<image src="../../assets/img/homeImg.jpg" mode="scaleToFill" /> | |||||
</view> | </view> | ||||
<!-- 头像 --> | <!-- 头像 --> | ||||
<view class="avatarBox"> | <view class="avatarBox"> | ||||
@@ -212,7 +212,13 @@ | |||||
<script setup> | <script setup> | ||||
//#region 导入 | //#region 导入 | ||||
import dayjs from "dayjs"; | 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 { ref, reactive, computed, inject } from "vue"; | ||||
// import App from "../../App.vue"; | // import App from "../../App.vue"; | ||||
import { | import { | ||||
@@ -506,8 +512,26 @@ onShow(() => { | |||||
} | } | ||||
}); | }); | ||||
//#endregion --------------------------- | |||||
// 分享到朋友圈 | |||||
// onShareTimeline((res) => { | |||||
// return { | |||||
// title: "邃芒智像", | |||||
// }; | |||||
// }); | |||||
// 收藏 | |||||
// onAddToFavorites((res) => { | |||||
// return { | |||||
// title: "邃芒智像", | |||||
// }; | |||||
// }); | |||||
//#endregion --------------------------- | |||||
onShareAppMessage((res) => { | |||||
return { | |||||
title: "邃芒智像", | |||||
}; | |||||
}); | |||||
//#region | //#region | ||||
//#endregion --------------------------- | //#endregion --------------------------- | ||||
@@ -1,7 +1,7 @@ | |||||
<template> | <template> | ||||
<view :class="pageClass"> | <view :class="pageClass"> | ||||
<!-- mode="aspectFit" --> | <!-- mode="aspectFit" --> | ||||
<image class="bgImg" src="../../assets/img/homeImg.png" /> | |||||
<image class="bgImg" src="../../assets/img/homeImg.jpg" /> | |||||
<!-- 视频,已废弃 --> | <!-- 视频,已废弃 --> | ||||
<view v-show="false" class="videoBox"> | <view v-show="false" class="videoBox"> | ||||
<!-- <video | <!-- <video | ||||
@@ -26,7 +26,7 @@ | |||||
id="getPhoneNumber" | id="getPhoneNumber" | ||||
@click="toCreate" | @click="toCreate" | ||||
> | > | ||||
开始制作我的数字分身 | |||||
开始制作我的数字写真 | |||||
</button> | </button> | ||||
<button | <button | ||||
v-if="checkboxValue[0]" | v-if="checkboxValue[0]" | ||||
@@ -36,9 +36,9 @@ | |||||
id="getPhoneNumber" | id="getPhoneNumber" | ||||
@getphonenumber="toCreate" | @getphonenumber="toCreate" | ||||
> | > | ||||
开始制作我的数字分身 | |||||
开始制作我的数字写真 | |||||
</button> | </button> | ||||
<!-- <view class="bottomBtn" @click="toCreate"> 开始制作我的数字分身 </view> --> | |||||
<!-- <view class="bottomBtn" @click="toCreate"> 开始制作我的数字写真 </view> --> | |||||
<u-checkbox-group | <u-checkbox-group | ||||
v-model="checkboxValue" | v-model="checkboxValue" | ||||
placement="row" | placement="row" | ||||
@@ -255,7 +255,7 @@ async function photoSupper() { | |||||
console.log(res); | console.log(res); | ||||
uni.hideLoading(); | uni.hideLoading(); | ||||
uni.showToast({ | uni.showToast({ | ||||
title: "高清处理请求成功,请重稍后", | |||||
title: "高清处理请求成功,请稍等", | |||||
icon: "none", | 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> | <template> | ||||
<view class="page" @touchmove.stop.prevent=""> | <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> | ||||
<!-- <view v-show="audioUrl" class="orangeBtn" @click="openPopup">重新录音</view> --> | |||||
<view class="orangeBtn" @click="">生成视频</view> | |||||
<!-- 分享 --> | <!-- 分享 --> | ||||
<view class="shareBox"> | <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> | ||||
<view class="shareBtn" @click="">分享</view> | |||||
<view class="shareBtn" @click="">邀请好友 </view> | |||||
<view class="shareBtn" @click="">购买金币</view> | |||||
</view> | </view> | ||||
<!-- 弹出层 --> | <!-- 弹出层 --> | ||||
<view class="popup" v-show="showPopup" @click.stop="showPopup = false"> | <view class="popup" v-show="showPopup" @click.stop="showPopup = false"> | ||||
<!-- 声纹图片 --> | <!-- 声纹图片 --> | ||||
<u-transition :show="showPopup"> | <u-transition :show="showPopup"> | ||||
<view class="transition wavyIcon"> | <view class="transition wavyIcon"> | ||||
<image src="../../assets/icon/u152.png" /> | |||||
<image src="../../assets/icon/soundBG.png" /> | |||||
</view> | </view> | ||||
</u-transition> | </u-transition> | ||||
@@ -80,8 +55,7 @@ | |||||
@touchend.stop="endRecord" | @touchend.stop="endRecord" | ||||
> | > | ||||
<view class="transition microphoneIcon"> | <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> | </view> | ||||
</u-transition> | </u-transition> | ||||
</view> | </view> | ||||
@@ -91,12 +65,44 @@ | |||||
<script setup> | <script setup> | ||||
// import myloading from '../../components/myLoading.vue' | // import myloading from '../../components/myLoading.vue' | ||||
//#region 导入 | //#region 导入 | ||||
import { onLoad } from "@dcloudio/uni-app"; | |||||
import { ref, reactive } from "vue"; | import { ref, reactive } from "vue"; | ||||
import { userInfoModules } from "@/store/modules/userInfo"; | import { userInfoModules } from "@/store/modules/userInfo"; | ||||
import { getPhotoListApi } from "../../api/lookPhoto.js"; | |||||
const userInfoModulesPinia = userInfoModules(); | const userInfoModulesPinia = userInfoModules(); | ||||
//#endregion | //#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 页面跳转 | //#region 页面跳转 | ||||
function bueCoin() { | function bueCoin() { | ||||
uni.navigateTo({ | uni.navigateTo({ | ||||
@@ -147,7 +153,6 @@ if (userInfoModulesPinia.platForm == 1) { | |||||
//#endregion | //#endregion | ||||
//#region 录音 | //#region 录音 | ||||
function startRecord() { | function startRecord() { | ||||
if (userInfoModulesPinia.platForm != 1) { | if (userInfoModulesPinia.platForm != 1) { | ||||
console.log("开始录音xcx"); | console.log("开始录音xcx"); | ||||
@@ -188,6 +193,15 @@ async function playVoice() { | |||||
} | } | ||||
//#endregion --------------------- | //#endregion --------------------- | ||||
//#region 初始化 | |||||
const workId = ref(null); //作品id | |||||
onLoad(async (options) => { | |||||
workId.value = options.id; | |||||
// await getSwiperList(); | |||||
// await getSupperPhotoState(swiperList.value[0].id); | |||||
}); | |||||
//#endregion --------------------- | |||||
//#region | //#region | ||||
//#endregion --------------------- | //#endregion --------------------- | ||||
@@ -196,20 +210,75 @@ async function playVoice() { | |||||
<style lang="scss"> | <style lang="scss"> | ||||
.page { | .page { | ||||
position: relative; | position: relative; | ||||
padding-bottom: 200rpx; | |||||
} | } | ||||
image { | |||||
height: 650rpx; | |||||
.modeImage { | |||||
width: 540rpx; | |||||
height: 720rpx; | |||||
} | } | ||||
.myBtnbox { | .myBtnbox { | ||||
margin-top: 30rpx; | 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 { | .shareBox { | ||||
margin-top: 250rpx; | |||||
position: absolute; | |||||
bottom: 100rpx; | |||||
padding: 0 60rpx; | |||||
// margin-top: 150rpx; | |||||
width: 100%; | width: 100%; | ||||
display: flex; | display: flex; | ||||
justify-content: space-between; | 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 { | .popup { | ||||
@@ -223,21 +292,24 @@ image { | |||||
top: 50%; | top: 50%; | ||||
left: 50%; | left: 50%; | ||||
transform: translate(-50%, -50%); | transform: translate(-50%, -50%); | ||||
height: 160rpx; | |||||
width: 50%; | |||||
background-color: #fff; | |||||
width: 530rpx; | |||||
height: 173rpx; | |||||
// background-color: #fff; | |||||
z-index: 3; | z-index: 3; | ||||
overflow: hidden; | overflow: hidden; | ||||
image { | 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 { | @keyframes moveImage { | ||||
0% { | 0% { | ||||
left: -100rpx; | left: -100rpx; | ||||
@@ -253,36 +325,25 @@ image { | |||||
.microphoneIcon { | .microphoneIcon { | ||||
position: absolute; | position: absolute; | ||||
bottom: 0; | bottom: 0; | ||||
height: 500rpx; | |||||
height: 410rpx; | |||||
width: 100%; | width: 100%; | ||||
border-radius: 36rpx 36rpx 0 0; | |||||
background-color: #fff; | background-color: #fff; | ||||
z-index: 3; | z-index: 3; | ||||
display: flex; | display: flex; | ||||
flex-direction: column; | flex-direction: column; | ||||
align-items: center; | align-items: center; | ||||
justify-content: 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 { | image { | ||||
max-width: 0%; | |||||
max-height: 0%; | |||||
transform: rotate(45deg); | |||||
// max-width: 0%; | |||||
// max-height: 0%; | |||||
width: 108rpx; | |||||
height: 83rpx; | |||||
touch-action: none; | touch-action: none; | ||||
z-index: -1; | z-index: -1; | ||||
pointer-events: none; | pointer-events: none; | ||||
} | } | ||||
// img { | |||||
// pointer-events: none; | |||||
// } | |||||
} | } | ||||
} | } | ||||
</style> | </style> |
@@ -37,6 +37,7 @@ | |||||
</view> | </view> | ||||
<view class="uploadBtn"> | <view class="uploadBtn"> | ||||
<view @click="toCloseStyle" class="orangeBtn">上传新头像</view> | <view @click="toCloseStyle" class="orangeBtn">上传新头像</view> | ||||
<!-- '/pages/closeStyle/closeStyle' '/pages/closeStyle/multiplayer' --> | |||||
<view | <view | ||||
class="grayBtn" | class="grayBtn" | ||||
v-if="userInfoModulesPinia.myAvatar" | v-if="userInfoModulesPinia.myAvatar" | ||||
@@ -85,7 +86,13 @@ | |||||
<script setup> | <script setup> | ||||
//#region 导入 | //#region 导入 | ||||
import { ref, reactive, nextTick } from "vue"; | 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 { loginApi } from "../../api/login"; | ||||
import { addImageApi } from "../../api/uploadphoto.js"; | import { addImageApi } from "../../api/uploadphoto.js"; | ||||
import { userInfoModules } from "@/store/modules/userInfo"; | import { userInfoModules } from "@/store/modules/userInfo"; | ||||
@@ -418,6 +425,25 @@ onShow(() => { | |||||
}); | }); | ||||
//#endregion --------------------- | //#endregion --------------------- | ||||
onShareAppMessage((res) => { | |||||
return { | |||||
title: "邃芒智像", | |||||
}; | |||||
}); | |||||
// 分享到朋友圈 | |||||
onShareTimeline((res) => { | |||||
return { | |||||
title: "邃芒智像", | |||||
}; | |||||
}); | |||||
// 收藏 | |||||
onAddToFavorites((res) => { | |||||
return { | |||||
title: "邃芒智像", | |||||
}; | |||||
}); | |||||
//#region 公共方法 | //#region 公共方法 | ||||
function goOtherPage(url) { | function goOtherPage(url) { | ||||