@@ -33,7 +33,8 @@ | |||||
{ | { | ||||
"path": "pages/closeStyle/closeStyle", | "path": "pages/closeStyle/closeStyle", | ||||
"style": { | "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> | <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; | ||||
} | } | ||||
@@ -58,13 +58,14 @@ | |||||
> | > | ||||
</view> | </view> | ||||
<image | <image | ||||
v-if="styleData.mouldType == 3" | |||||
@click="swapItems2" | @click="swapItems2" | ||||
class="exchange" | class="exchange" | ||||
src="../../assets/icon/exchange.png" | src="../../assets/icon/exchange.png" | ||||
mode="scaleToFill" | mode="scaleToFill" | ||||
/> | /> | ||||
<!-- 图三 --> | <!-- 图三 --> | ||||
<view class="imgBoxItem"> | |||||
<view v-if="styleData.mouldType == 3" class="imgBoxItem"> | |||||
<image class="avatar" :src="avatarList[2].url" mode="aspectFill" /> | <image class="avatar" :src="avatarList[2].url" mode="aspectFill" /> | ||||
<view v-if="!avatarList[2].url" class="noUrlBox" @click="chooseImg(2)" | <view v-if="!avatarList[2].url" class="noUrlBox" @click="chooseImg(2)" | ||||
>+</view | >+</view | ||||
@@ -121,7 +122,8 @@ const styleData = ref({}); | |||||
onLoad((options) => { | onLoad((options) => { | ||||
// styleId.value = options.id; | // styleId.value = options.id; | ||||
// styleId.value = "857147862095679488"; | // styleId.value = "857147862095679488"; | ||||
styleId.value = "245"; | |||||
styleId.value = "2003"; | |||||
// styleId.value = "246"; | |||||
getInfo(); | getInfo(); | ||||
// getMyCoin(); | // getMyCoin(); | ||||
}); | }); | ||||
@@ -180,7 +182,7 @@ function swapItems2() { | |||||
avatarList.value[1] = avatarList.value[2]; | avatarList.value[1] = avatarList.value[2]; | ||||
avatarList.value[2] = temp; | avatarList.value[2] = temp; | ||||
} | } | ||||
// 打开图片选择 | |||||
// 打开图片选择,包含了百度检测人脸检测和上传图片 | |||||
function chooseImg(index) { | function chooseImg(index) { | ||||
uni.chooseImage({ | uni.chooseImage({ | ||||
count: 1, | count: 1, | ||||
@@ -210,40 +212,74 @@ function chooseImg(index) { | |||||
icon: "none", | icon: "none", | ||||
}); | }); | ||||
return; | 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.hideLoading(); | ||||
uni.showToast({ | uni.showToast({ | ||||
title: "图片不符合规范, 请重试", | |||||
title: "网络被数字人偷走了, 请稍后重试", | |||||
icon: "none", | icon: "none", | ||||
}); | }); | ||||
return; | |||||
} | |||||
// 赋值 | |||||
avatarList.value[index].url = res.tempFilePaths[0]; | |||||
uni.hideLoading(); | |||||
}, | |||||
fail: () => { | |||||
uni.hideLoading(); | |||||
uni.showToast({ | |||||
title: "网络被数字人偷走了, 请稍后重试", | |||||
icon: "none", | |||||
}); | |||||
}, | |||||
}); | |||||
}, | |||||
}); | |||||
} | |||||
}, | }, | ||||
fail: (err) => { | fail: (err) => { | ||||
console.error("选择图片失败", err); | console.error("选择图片失败", err); | ||||
@@ -272,20 +308,33 @@ function uploadImg(index) {} | |||||
//#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", | ||||
@@ -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" | ||||