|
|
@@ -19,25 +19,13 @@
|
|
|
<text class="form-area-item-text">视频名称</text>
|
|
|
<input type="text" v-model="videoName" placeholder="请输入视频名称">
|
|
|
</view>
|
|
|
- <!-- <view class="form-area-item" :key="timeStamp">
|
|
|
- <text class="form-area-item-text">选择您的形象</text>
|
|
|
- <button @click="chooseFile" class="cu-btn bg-red">选择文件</button>
|
|
|
- <text class="file-name" v-if="fileInfo.name">{{fileInfo.name}}</text>
|
|
|
- <text class="none-file" v-if="!showPerson">未选择文件</text>
|
|
|
- </view> -->
|
|
|
<view class="form-area-item">
|
|
|
<text class="form-area-item-text">选择您的形象</text>
|
|
|
<button @click="chooseImage" class="cu-btn bg-red">选择图片</button>
|
|
|
<text class="none-file" v-if="!imagePath">未选择图片</text>
|
|
|
<image :src="imagePath" v-else mode="aspectFit" style="width: 30px; height: 30px;margin-left:10px" />
|
|
|
</view>
|
|
|
- <!-- <view class="form-area-item">
|
|
|
- <text class="form-area-item-text">选择模板</text>
|
|
|
- <uni-data-select v-model="modelIndex" :localdata="array" @change="bindPickerChange"></uni-data-select>
|
|
|
- <CustomModal :visible="isModalVisible" :message="modalMessage" :imageSrc="modalImageSrc" @confirm="onConfirm"
|
|
|
- @cancel="onCancel" />
|
|
|
- </view> -->
|
|
|
- <view class="form-area-item">
|
|
|
+ <view class="form-area-item" style="align-items: baseline;">
|
|
|
<text class="form-area-item-text">视频内容</text>
|
|
|
<uni-data-checkbox selectedColor="#BD3124" selectedTextColor="#BD3124" v-model="current"
|
|
|
:localdata="videoContent" />
|
|
|
@@ -52,9 +40,12 @@
|
|
|
</view>
|
|
|
<view class="form-area-item" v-if="current=='record'">
|
|
|
<button @click="toggleRecording">{{ isRecording ? '停止录音' : '开始录音' }}</button>
|
|
|
- <!-- <view v-if="audioPath" class="audio-bar" @click="playAudio">
|
|
|
- 🎵 录音文件（点击播放）
|
|
|
- </view> -->
|
|
|
+ </view>
|
|
|
+ <view class="form-area-item" v-if="current=='audio'" :key="timeStamp">
|
|
|
+ <text class="form-area-item-text">选择音频文件</text>
|
|
|
+ <button @click="chooseFile" class="cu-btn bg-red">选择文件</button>
|
|
|
+ <text class="file-name" v-if="fileInfo.name">{{fileInfo.name}}</text>
|
|
|
+ <text class="none-file" v-if="!showPerson">未选择文件</text>
|
|
|
</view>
|
|
|
<audio v-if="audioPath" class="audio-bar" :src="audioPath" name="语音试听" poster="../static/images/xijiao/avator.png"
|
|
|
:action="audioAction" controls></audio>
|
|
|
@@ -69,18 +60,16 @@
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
- // import CustomModal from '../components/CustomModal.vue';
|
|
|
import {
|
|
|
- uploadPerson
|
|
|
+ uploadPerson,
|
|
|
+ audioCreateVideo,
|
|
|
+ textCreateVideo
|
|
|
} from "@/api/system/user"
|
|
|
import store from '@/store'
|
|
|
const recorderManager = uni.getRecorderManager();
|
|
|
const innerAudioContext = uni.createInnerAudioContext();
|
|
|
innerAudioContext.autoplay = true;
|
|
|
export default {
|
|
|
- // components: {
|
|
|
- // CustomModal
|
|
|
- // },
|
|
|
data() {
|
|
|
return {
|
|
|
videoName: '',
|
|
|
@@ -92,7 +81,11 @@
|
|
|
{
|
|
|
value: 'record',
|
|
|
text: '语音录入'
|
|
|
- }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'audio',
|
|
|
+ text: '音频选择'
|
|
|
+ },
|
|
|
],
|
|
|
current: 'text',
|
|
|
imagePath: '',
|
|
|
@@ -117,7 +110,8 @@
|
|
|
text: 'timbre2'
|
|
|
}
|
|
|
],
|
|
|
- personPath: ''
|
|
|
+ personPath: '',
|
|
|
+ createVideoPath: '',
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
@@ -143,14 +137,17 @@
|
|
|
this.timeStamp = new Date().getTime()
|
|
|
this.fileInfo.path = uni.getStorageSync('filePath');
|
|
|
this.fileInfo.name = uni.getStorageSync('fileName');
|
|
|
- if (this.fileInfo.name) this.showPerson = true
|
|
|
+ if (this.fileInfo.name) {
|
|
|
+ this.showPerson = true
|
|
|
+ this.uploadAudioPath(this.fileInfo.path)
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
- /* chooseFile() {
|
|
|
+ chooseFile() {
|
|
|
uni.navigateTo({
|
|
|
url: "/pages/root-filelist/root-filelist",
|
|
|
});
|
|
|
- }, */
|
|
|
+ },
|
|
|
async chooseImage() {
|
|
|
const that = this;
|
|
|
uni.chooseImage({
|
|
|
@@ -169,19 +166,6 @@
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- /* bindPickerChange(e) {
|
|
|
- const tempOption = this.array.find(item => item.value == e).text;
|
|
|
- this.modalMessage = `您选择的是: ${tempOption}`;
|
|
|
- this.modalImageSrc = '../static/images/xijiao/avator.png';
|
|
|
- this.isModalVisible = true;
|
|
|
- this.modelIndex = e
|
|
|
- },
|
|
|
- onConfirm() {
|
|
|
- this.isModalVisible = false;
|
|
|
- },
|
|
|
- onCancel() {
|
|
|
- this.isModalVisible = false;
|
|
|
- }, */
|
|
|
radioChange(evt) {
|
|
|
for (let i = 0; i < this.videoContent.length; i++) {
|
|
|
if (this.videoContent[i].value === evt.detail.value) {
|
|
|
@@ -194,6 +178,7 @@
|
|
|
toggleRecording() {
|
|
|
if (this.isRecording) {
|
|
|
this.recorderManager.stop();
|
|
|
+ this.uploadAudioPath(this.audioPath)
|
|
|
} else {
|
|
|
// 开始录音前，如果已有录音则清空
|
|
|
if (this.audioPath) {
|
|
|
@@ -210,17 +195,6 @@
|
|
|
this.isRecording = true;
|
|
|
}
|
|
|
},
|
|
|
- // playAudio() {
|
|
|
- // if (!this.audioPath) {
|
|
|
- // uni.showToast({
|
|
|
- // title: '没有可播放的录音',
|
|
|
- // icon: 'none'
|
|
|
- // });
|
|
|
- // return;
|
|
|
- // }
|
|
|
- // this.innerAudioContext.src = this.audioPath;
|
|
|
- // this.innerAudioContext.play();
|
|
|
- // },
|
|
|
uploadImagePath() {
|
|
|
let data = {
|
|
|
file: this.imagePath
|
|
|
@@ -229,20 +203,22 @@
|
|
|
this.personPath = response.data.url
|
|
|
})
|
|
|
},
|
|
|
+ uploadAudioPath(url) {
|
|
|
+ let data = {
|
|
|
+ file: url
|
|
|
+ }
|
|
|
+ uploadPerson(data).then(response => {
|
|
|
+ this.personAudio = response.data.url
|
|
|
+ })
|
|
|
+ },
|
|
|
jumpToList() {
|
|
|
let missingFields = [];
|
|
|
if (!this.videoName.trim()) {
|
|
|
missingFields.push('视频名称');
|
|
|
}
|
|
|
- // if (!this.fileInfo.path) {
|
|
|
- // missingFields.push('人物形象');
|
|
|
- // }
|
|
|
if (!this.imagePath) {
|
|
|
missingFields.push('人物形象');
|
|
|
}
|
|
|
- // if (!this.modelIndex) {
|
|
|
- // missingFields.push('视频模板');
|
|
|
- // }
|
|
|
const hasContent = this.videoText.trim() !== '' && this.timbre;
|
|
|
const hasVoice = this.audioPath;
|
|
|
if (!hasContent && !hasVoice) {
|
|
|
@@ -256,6 +232,32 @@
|
|
|
uni.navigateTo({
|
|
|
url: 'list/creatingVideo/creatingVideo',
|
|
|
});
|
|
|
+ if (this.current == 'record' || this.current == 'audio') {
|
|
|
+ let data = {
|
|
|
+ 'persona_template': this.personPath,
|
|
|
+ 'persona_audio': this.personAudio,
|
|
|
+ }
|
|
|
+ audioCreateVideo(data).then(response => {
|
|
|
+ if (response.status == 200) {
|
|
|
+ this.createVideoPath = response.data
|
|
|
+ }
|
|
|
+ }).catch(e => {
|
|
|
+ uni.showToast({
|
|
|
+ title: '视频返回成功'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ } else if (this.current == 'text') {
|
|
|
+ let data = {
|
|
|
+ 'persona_template': this.personPath,
|
|
|
+ 'voice_type': this.timbre,
|
|
|
+ 'audio_text': this.videoText,
|
|
|
+ }
|
|
|
+ textCreateVideo(data).then(response => {
|
|
|
+ if (response.status == 200) {
|
|
|
+ this.createVideoPath = response.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
dialogClose() {
|
|
|
console.log('点击关闭')
|
|
|
@@ -267,8 +269,6 @@
|
|
|
.content {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- /* align-items: center;
|
|
|
- justify-content: center; */
|
|
|
}
|
|
|
|
|
|
.uni-margin-wrap {
|
