|
- <template>
- <view class="page" @touchmove.stop.prevent="">
- <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="orangeBtn" @click="openPopup">
- <image
- src="../../assets/icon/sound-2.png"
- mode="scaleToFill"
- />开始录音</view
- >
-
- <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="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/soundBG.png" />
- </view>
- </u-transition>
-
- <!-- 底部框 -->
- <u-transition
- :show="showPopup"
- @touchstart.stop="startRecord"
- @touchend.stop="endRecord"
- >
- <view class="transition microphoneIcon">
- <image src="../../assets/icon/sound.png" mode="aspectFit" />
- </view>
- </u-transition>
- </view>
- </view>
- </template>
-
- <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.showToast({
- title: "暂未开放",
- icon: "none",
- mask: true,
- });
- // 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 初始化
- const workId = ref(null); //作品id
- onLoad(async (options) => {
- workId.value = options.id;
- // await getSwiperList();
- // await getSupperPhotoState(swiperList.value[0].id);
- });
- //#endregion ---------------------
-
- //#region
-
- //#endregion ---------------------
- </script>
-
- <style lang="scss">
- .page {
- position: relative;
- padding-bottom: 200rpx;
- }
- .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 {
- position: absolute;
- bottom: 100rpx;
- padding: 0 60rpx;
- // margin-top: 150rpx;
- width: 100%;
- display: flex;
- justify-content: space-between;
-
- .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 {
- 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%);
- width: 530rpx;
- height: 173rpx;
- // background-color: #fff;
- z-index: 3;
- overflow: hidden;
- image {
- 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;
- }
- 50% {
- left: -500rpx;
- }
- 100% {
- left: -100rpx;
- }
- }
- }
- .microphoneIcon {
- position: absolute;
- bottom: 0;
- 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;
-
- image {
- // max-width: 0%;
- // max-height: 0%;
- width: 108rpx;
- height: 83rpx;
- touch-action: none;
- z-index: -1;
- pointer-events: none;
- }
- }
- }
- </style>
|