congzc 1 vuosi sitten
vanhempi
commit
97e48d4901
12 muutettua tiedostoa jossa 484 lisäystä ja 3 poistoa
  1. +1
    -0
      package.json
  2. BIN
      src/assets/icon/db_fill.png
  3. BIN
      src/assets/icon/u149.png
  4. BIN
      src/assets/icon/u152.png
  5. BIN
      src/assets/video/1.mp4
  6. +13
    -1
      src/pages.json
  7. +179
    -0
      src/pages/generateVideo/index.vue
  8. +6
    -0
      src/pages/index/index.vue
  9. +2
    -2
      src/pages/lookPhoto/index.vue
  10. +272
    -0
      src/pages/recorded/index.vue
  11. +6
    -0
      src/style/my.scss
  12. +5
    -0
      yarn.lock

+ 1
- 0
package.json Näytä tiedosto

@@ -54,6 +54,7 @@
"browser-image-compression": "^2.0.2",
"clipboard": "^2.0.11",
"dayjs": "^1.11.9",
"js-audio-recorder": "^1.0.7",
"pinia": "2.0.33",
"pinia-plugin-persistedstate": "^3.2.0",
"uview-plus": "^3.1.34",


BIN
src/assets/icon/db_fill.png Näytä tiedosto

Before After
Leveys: 200  |  Korkeus: 200  |  Koko: 2.5 KiB

BIN
src/assets/icon/u149.png Näytä tiedosto

Before After
Leveys: 50  |  Korkeus: 51  |  Koko: 1.1 KiB

BIN
src/assets/icon/u152.png Näytä tiedosto

Before After
Leveys: 699  |  Korkeus: 303  |  Koko: 47 KiB

BIN
src/assets/video/1.mp4 Näytä tiedosto


+ 13
- 1
src/pages.json Näytä tiedosto

@@ -48,6 +48,18 @@
"style": {
"navigationBarTitleText": "购买金币"
}
},
{
"path": "pages/recorded/index",
"style": {
"navigationBarTitleText": "录音"
}
},
{
"path": "pages/generateVideo/index",
"style": {
"navigationBarTitleText": "创建视频"
}
}
],
@@ -61,7 +73,7 @@
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarTitleText": "智像",
"navigationBarBackgroundColor": "#FFF",
"backgroundColor": "#FFF"
}

+ 179
- 0
src/pages/generateVideo/index.vue Näytä tiedosto

@@ -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">金币余额:&nbsp;&nbsp;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>

+ 6
- 0
src/pages/index/index.vue Näytä tiedosto

@@ -8,6 +8,12 @@
loop
: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 class="buttonBox">
<up-button


+ 2
- 2
src/pages/lookPhoto/index.vue Näytä tiedosto

@@ -20,7 +20,7 @@
@click="downloadImg"
></up-button>
</view>
<view class="btnBox">
<view class="shareBox">
<view class="buttonBox">
<up-button
type="primary"
@@ -188,7 +188,7 @@ function bueCoin() {
width: 60%;
}
.btnBox {
.shareBox {
margin-top: 90rpx;
width: 100%;
display: flex;


+ 272
- 0
src/pages/recorded/index.vue Näytä tiedosto

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

+ 6
- 0
src/style/my.scss Näytä tiedosto

@@ -5,6 +5,7 @@
justify-content: center;
padding: 20rpx;
background-color: #fff;
font-size: 28rpx;
// min-height: 100vh;
}
@@ -27,6 +28,11 @@ view {
}
}
// 按钮包裹盒子,控制按钮宽度
.myBtnbox {
width: 50%;
}
// 主要文字颜色和图片颜色
// .imgggg {
// color: #4452d7;


+ 5
- 0
yarn.lock Näytä tiedosto

@@ -3150,6 +3150,11 @@ jpeg-js@^0.3.4:
resolved "https://registry.npmmirror.com/jpeg-js/-/jpeg-js-0.3.7.tgz#471a89d06011640592d314158608690172b1028d"
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:
version "4.0.0"
resolved "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"


Ladataan…
Peruuta
Tallenna