@@ -33,7 +33,8 @@ | |||
{ | |||
"path": "pages/closeStyle/closeStyle", | |||
"style": { | |||
"navigationBarTitleText": "选择风格" | |||
"navigationBarTitleText": "选择风格", | |||
"enablePullDownRefresh": true | |||
} | |||
}, | |||
{ | |||
@@ -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; | |||
} | |||
@@ -58,13 +58,14 @@ | |||
> | |||
</view> | |||
<image | |||
v-if="styleData.mouldType == 3" | |||
@click="swapItems2" | |||
class="exchange" | |||
src="../../assets/icon/exchange.png" | |||
mode="scaleToFill" | |||
/> | |||
<!-- 图三 --> | |||
<view class="imgBoxItem"> | |||
<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 | |||
@@ -121,7 +122,8 @@ const styleData = ref({}); | |||
onLoad((options) => { | |||
// styleId.value = options.id; | |||
// styleId.value = "857147862095679488"; | |||
styleId.value = "245"; | |||
styleId.value = "2003"; | |||
// styleId.value = "246"; | |||
getInfo(); | |||
// getMyCoin(); | |||
}); | |||
@@ -180,7 +182,7 @@ function swapItems2() { | |||
avatarList.value[1] = avatarList.value[2]; | |||
avatarList.value[2] = temp; | |||
} | |||
// 打开图片选择 | |||
// 打开图片选择,包含了百度检测人脸检测和上传图片 | |||
function chooseImg(index) { | |||
uni.chooseImage({ | |||
count: 1, | |||
@@ -210,40 +212,74 @@ function chooseImg(index) { | |||
icon: "none", | |||
}); | |||
return; | |||
} | |||
// 人脸识别接口 | |||
uni.uploadFile({ | |||
url: "https://test.metavatar.cc/C/api/userDigital/checkPhoto", //上传图片api | |||
filePath: res.tempFilePaths[0], | |||
name: "file", | |||
formData: { | |||
user: "test", | |||
}, | |||
header: { | |||
// Authorization: userInfoModulesPinia.token, | |||
token: userInfoModulesPinia.token, | |||
}, | |||
success: (res3) => { | |||
if (JSON.parse(res3.data).code != 200) { | |||
} 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: "图片不符合规范, 请重试", | |||
title: "网络被数字人偷走了, 请稍后重试", | |||
icon: "none", | |||
}); | |||
return; | |||
} | |||
// 赋值 | |||
avatarList.value[index].url = res.tempFilePaths[0]; | |||
uni.hideLoading(); | |||
}, | |||
fail: () => { | |||
uni.hideLoading(); | |||
uni.showToast({ | |||
title: "网络被数字人偷走了, 请稍后重试", | |||
icon: "none", | |||
}); | |||
}, | |||
}); | |||
}, | |||
}); | |||
} | |||
}, | |||
fail: (err) => { | |||
console.error("选择图片失败", err); | |||
@@ -272,20 +308,33 @@ function uploadImg(index) {} | |||
//#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", | |||
@@ -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" | |||