| @@ -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" | ||||