@@ -54,6 +54,7 @@ | |||||
"browser-image-compression": "^2.0.2", | "browser-image-compression": "^2.0.2", | ||||
"clipboard": "^2.0.11", | "clipboard": "^2.0.11", | ||||
"dayjs": "^1.11.9", | "dayjs": "^1.11.9", | ||||
"js-audio-recorder": "^1.0.7", | |||||
"pinia": "2.0.33", | "pinia": "2.0.33", | ||||
"pinia-plugin-persistedstate": "^3.2.0", | "pinia-plugin-persistedstate": "^3.2.0", | ||||
"uview-plus": "^3.1.34", | "uview-plus": "^3.1.34", | ||||
@@ -48,6 +48,18 @@ | |||||
"style": { | "style": { | ||||
"navigationBarTitleText": "购买金币" | "navigationBarTitleText": "购买金币" | ||||
} | } | ||||
}, | |||||
{ | |||||
"path": "pages/recorded/index", | |||||
"style": { | |||||
"navigationBarTitleText": "录音" | |||||
} | |||||
}, | |||||
{ | |||||
"path": "pages/generateVideo/index", | |||||
"style": { | |||||
"navigationBarTitleText": "创建视频" | |||||
} | |||||
} | } | ||||
], | ], | ||||
@@ -61,7 +73,7 @@ | |||||
}, | }, | ||||
"globalStyle": { | "globalStyle": { | ||||
"navigationBarTextStyle": "black", | "navigationBarTextStyle": "black", | ||||
"navigationBarTitleText": "uni-app", | |||||
"navigationBarTitleText": "智像", | |||||
"navigationBarBackgroundColor": "#FFF", | "navigationBarBackgroundColor": "#FFF", | ||||
"backgroundColor": "#FFF" | "backgroundColor": "#FFF" | ||||
} | } |
@@ -0,0 +1,179 @@ | |||||
<template> | |||||
<view class="page"> | |||||
<!-- 视频 --> | |||||
<view class="videoBox"> | |||||
<video | |||||
src="https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4" | |||||
:controls="true" | |||||
/> | |||||
</view> | |||||
<!-- 底部 --> | |||||
<view class="bottomBox"> | |||||
<text class="balance">金币余额: 30</text> | |||||
<view class="buttonBox"> | |||||
<up-button | |||||
type="primary" | |||||
text="下载照片" | |||||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||||
@click="downloadImg" | |||||
></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="share" | |||||
></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="inviteFriend" | |||||
></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="bueCoin" | |||||
></up-button> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script setup> | |||||
// import myloading from '../../components/myLoading.vue' | |||||
//#region 导入 | |||||
import { ref, reactive } from "vue"; | |||||
import { userInfoModules } from "@/store/modules/userInfo"; | |||||
//#endregion | |||||
const userInfoModulesPinia = userInfoModules(); | |||||
//#region 下载 | |||||
function downloadImg() { | |||||
if (userInfoModulesPinia.platForm != 1) { | |||||
uni.saveImageToPhotosAlbum({ | |||||
filePath: "https://uiadmin.net/uview-plus/common/logo.png", | |||||
success: function () { | |||||
console.log("save success"); | |||||
}, | |||||
}); | |||||
} else { | |||||
const link = document.createElement("a"); | |||||
link.href = "https://uiadmin.net/uview-plus/common/logo.png"; | |||||
link.download = "image.jpg"; | |||||
// document.body.appendChild(link); | |||||
link.click(); | |||||
// document.body.removeChild(link); | |||||
} | |||||
} | |||||
//#endregion --------------------- | |||||
//#region 分享 | |||||
function share() { | |||||
uni.share({ | |||||
provider: "weixin", //分享服务提供商(即weixin|qq|sinaweibo) | |||||
scene: "WXSenceTimeline", //WXSceneSession(分享到聊天界面)、WXSenceTimeline(分享到朋友圈)、WXSceneFavorite(分享到微信收藏) | |||||
type: 5, | |||||
title: "分享到朋友圈", | |||||
summary: "分享描述", | |||||
href: "www.baidu.com", //分享跳转地址 | |||||
imageUrl: "../static/lovehot.png", //分享图片路径(必须是线上可访问图片) | |||||
miniProgram: { | |||||
id: "wx75cf14e3a0d45821", | |||||
path: "pages/index/index", | |||||
type: 0, | |||||
webUrl: "", | |||||
}, | |||||
success: function (res) { | |||||
// console.log("success:" + JSON.stringify(res)); | |||||
}, | |||||
fail: function (err) { | |||||
// console.log("fail:" + JSON.stringify(err)); | |||||
}, | |||||
}); | |||||
} | |||||
function inviteFriend() { | |||||
uni.share({ | |||||
provider: "weixin", //分享服务提供商(即weixin|qq|sinaweibo) | |||||
scene: "WXSceneSession", //WXSceneSession(分享到聊天界面)、WXSenceTimeline(分享到朋友圈)、WXSceneFavorite(分享到微信收藏) | |||||
type: 5, | |||||
title: "分享给好友", | |||||
summary: "分享描述", | |||||
href: "www.baidu.com", //分享跳转地址 | |||||
imageUrl: "../static/lovehot.png", //分享图片路径(必须是线上可访问图片) | |||||
miniProgram: { | |||||
id: "gwx75cf14e3a0d45821", | |||||
path: "pages/index/index", | |||||
type: 0, | |||||
webUrl: "", | |||||
}, | |||||
success: function (res) { | |||||
// console.log("success:" + JSON.stringify(res)); | |||||
}, | |||||
fail: function (err) { | |||||
// console.log("fail:" + JSON.stringify(err)); | |||||
}, | |||||
}); | |||||
} | |||||
//#endregion --------------------- | |||||
//#region 页面跳转 | |||||
function bueCoin() { | |||||
uni.navigateTo({ | |||||
url: "/pages/home/buyCoin", | |||||
}); | |||||
} | |||||
//#endregion --------------------- | |||||
//#region | |||||
//#endregion --------------------- | |||||
</script> | |||||
<style lang="scss"> | |||||
.videoBox { | |||||
width: 690rpx; | |||||
height: 690rpx; | |||||
aspect-ratio: 9/12; | |||||
video { | |||||
width: 690rpx; | |||||
height: 690rpx; | |||||
aspect-ratio: 9/12; | |||||
} | |||||
} | |||||
.bottomBox { | |||||
width: 100%; | |||||
display: flex; | |||||
flex-direction: column; | |||||
align-items: center; | |||||
justify-content: center; | |||||
.balance { | |||||
margin-top: 30rpx; | |||||
font-size: 40rpx; | |||||
margin-bottom: 50rpx; | |||||
} | |||||
.buttonBox { | |||||
width: 60%; | |||||
} | |||||
.shareBox { | |||||
margin-top: 90rpx; | |||||
width: 100%; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
.buttonBox { | |||||
width: 30%; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -8,6 +8,12 @@ | |||||
loop | loop | ||||
:controls="false" | :controls="false" | ||||
/> | /> | ||||
<!-- <video | |||||
src="https://wenlian.wenzhou.gov.cn//upload/video/2021-01-14%E3%80%8A%E7%93%AF%E8%B6%8A%E4%B9%8B%E5%8D%8E%E3%80%8B%E6%B8%A0%E5%B7%9D%EF%BC%9A%E8%B5%B0%E7%AC%94%E5%86%99%E4%BA%BA%E7%94%9F.mp4" | |||||
autoplay | |||||
loop | |||||
:controls="false" | |||||
/> --> | |||||
</view> | </view> | ||||
<view class="buttonBox"> | <view class="buttonBox"> | ||||
<up-button | <up-button | ||||
@@ -20,7 +20,7 @@ | |||||
@click="downloadImg" | @click="downloadImg" | ||||
></up-button> | ></up-button> | ||||
</view> | </view> | ||||
<view class="btnBox"> | |||||
<view class="shareBox"> | |||||
<view class="buttonBox"> | <view class="buttonBox"> | ||||
<up-button | <up-button | ||||
type="primary" | type="primary" | ||||
@@ -188,7 +188,7 @@ function bueCoin() { | |||||
width: 60%; | width: 60%; | ||||
} | } | ||||
.btnBox { | |||||
.shareBox { | |||||
margin-top: 90rpx; | margin-top: 90rpx; | ||||
width: 100%; | width: 100%; | ||||
display: flex; | display: flex; | ||||
@@ -0,0 +1,272 @@ | |||||
<template> | |||||
<view class="page" @touchmove.stop.prevent=""> | |||||
<image src="../../assets/img/img1.jpg" 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"> | |||||
<view | |||||
class="transition microphoneIcon" | |||||
@touchstart.stop="startRecord" | |||||
@touchend.stop="endRecord" | |||||
> | |||||
<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(false); | |||||
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()); | |||||
} | |||||
} | |||||
async function playVoice() { | |||||
if (userInfoModulesPinia.platForm != 1) { | |||||
await innerAudioContext.play(); | |||||
console.log("试听了xcx"); | |||||
showPopup.value = false; | |||||
} else { | |||||
const link = document.createElement("audio"); | |||||
link.src = audioUrl.value; | |||||
link.play(); | |||||
console.log("试听了h5"); | |||||
showPopup.value = false; | |||||
} | |||||
} | |||||
//#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; | |||||
image { | |||||
max-width: 15%; | |||||
max-height: 15%; | |||||
transform: rotate(45deg); | |||||
touch-action: none; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -5,6 +5,7 @@ | |||||
justify-content: center; | justify-content: center; | ||||
padding: 20rpx; | padding: 20rpx; | ||||
background-color: #fff; | background-color: #fff; | ||||
font-size: 28rpx; | |||||
// min-height: 100vh; | // min-height: 100vh; | ||||
} | } | ||||
@@ -27,6 +28,11 @@ view { | |||||
} | } | ||||
} | } | ||||
// 按钮包裹盒子,控制按钮宽度 | |||||
.myBtnbox { | |||||
width: 50%; | |||||
} | |||||
// 主要文字颜色和图片颜色 | // 主要文字颜色和图片颜色 | ||||
// .imgggg { | // .imgggg { | ||||
// color: #4452d7; | // color: #4452d7; | ||||
@@ -3150,6 +3150,11 @@ jpeg-js@^0.3.4: | |||||
resolved "https://registry.npmmirror.com/jpeg-js/-/jpeg-js-0.3.7.tgz#471a89d06011640592d314158608690172b1028d" | resolved "https://registry.npmmirror.com/jpeg-js/-/jpeg-js-0.3.7.tgz#471a89d06011640592d314158608690172b1028d" | ||||
integrity sha512-9IXdWudL61npZjvLuVe/ktHiA41iE8qFyLB+4VDTblEsWBzeg8WQTlktdUK4CdncUqtUgUg0bbOmTE2bKBKaBQ== | integrity sha512-9IXdWudL61npZjvLuVe/ktHiA41iE8qFyLB+4VDTblEsWBzeg8WQTlktdUK4CdncUqtUgUg0bbOmTE2bKBKaBQ== | ||||
js-audio-recorder@^1.0.7: | |||||
version "1.0.7" | |||||
resolved "https://registry.npmmirror.com/js-audio-recorder/-/js-audio-recorder-1.0.7.tgz#01501cb9eb143d57994b42bd5ae97974fda18908" | |||||
integrity sha512-JiDODCElVHGrFyjGYwYyNi7zCbKk9va9C77w+zCPMmi4C6ix7zsX2h3ddHugmo4dOTOTCym9++b/wVW9nC0IaA== | |||||
js-tokens@^4.0.0: | js-tokens@^4.0.0: | ||||
version "4.0.0" | version "4.0.0" | ||||
resolved "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" | resolved "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" | ||||