|
|
@@ -0,0 +1,143 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="visible"
|
|
|
+ :append-to-body="false"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :modal="false"
|
|
|
+ title="语音预览"
|
|
|
+ top="5vh"
|
|
|
+ width="40%"
|
|
|
+ @close="closeDialog"
|
|
|
+ v-if="visible">
|
|
|
+ <el-form
|
|
|
+ :model="dataForm"
|
|
|
+ size="small">
|
|
|
+ <el-form-item label="昵称">
|
|
|
+ <el-input v-model="dataForm.cardNote.authorName" :disabled="true"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="祝福的话语">
|
|
|
+ <el-input v-model="dataForm.cardNote.personalSign" type="textarea" :disabled="true"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="二维码">
|
|
|
+ <el-image
|
|
|
+ style="width: 300px; height: 300px"
|
|
|
+ :src="resourcesUrl + dataForm.qrNoteMapping.qrCodeUrl"
|
|
|
+ v-if="dataForm.qrNoteMapping.qrCodeUrl"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="语音内容">
|
|
|
+ <br/>
|
|
|
+ <video
|
|
|
+ style="width: 200px; height: 300px"
|
|
|
+ :src="resourcesUrl + dataForm.cardNote.audioUrl"
|
|
|
+ controls="controls"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" v-if="newAudioUrl">
|
|
|
+ <el-form-item label="新语音内容">
|
|
|
+ <br/>
|
|
|
+ <video
|
|
|
+ style="width: 200px; height: 300px"
|
|
|
+ :src="resourcesUrl + newAudioUrl"
|
|
|
+ controls="controls"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item>
|
|
|
+ <div style="width: 100%; text-align: center;">
|
|
|
+ <el-button type="primary" size="large" @click="repairVideo">转换语音</el-button>
|
|
|
+ <el-button type="success" size="large" @click="confirmChangeVideo">确认修改</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: "YuyinPreview",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ dataForm:{cardNote:{}, qrNoteMapping:{}},
|
|
|
+ newAudioUrl: null,
|
|
|
+ resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openCanvas(){
|
|
|
+ this.initCanvas();
|
|
|
+ this.drawImage();
|
|
|
+ this.addMouseListeners();
|
|
|
+ },
|
|
|
+ init(cardItem){
|
|
|
+ this.getQrInfo(cardItem);
|
|
|
+ this.visible = true;
|
|
|
+ },
|
|
|
+ getQrInfo(cardItem) {
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl('/qrNoteMapping/getYuyinInfoByCardItemId/' + cardItem.cardItemId),
|
|
|
+ method: 'GET',
|
|
|
+ }).then(({ data }) =>{
|
|
|
+ if(data){
|
|
|
+ this.dataForm = data
|
|
|
+ }else{
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ repairVideo() {
|
|
|
+ this.$confirm('确定要修复语音吗?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl('/qrNoteMapping/repairVideo'),
|
|
|
+ method: 'POST',
|
|
|
+ data: this.dataForm.cardNote
|
|
|
+ }).then(({ data }) =>{
|
|
|
+ if(data){
|
|
|
+ this.newAudioUrl = data.newAudioUrl
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ confirmChangeVideo(){
|
|
|
+ this.$confirm('确定要保存新语音吗?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.dataForm.cardNote.newAudioUrl = this.newAudioUrl;
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl('/qrNoteMapping/changeVideo'),
|
|
|
+ method: 'POST',
|
|
|
+ data: this.dataForm.cardNote
|
|
|
+ }).then(({ data }) =>{
|
|
|
+ if(data){
|
|
|
+ this.$message.success("转换成功")
|
|
|
+ }else{
|
|
|
+ this.$message.error("转换失败")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ closeDialog(){
|
|
|
+ this.visible = false
|
|
|
+ this.dataForm = {cardNote:{}, qrNoteMapping:{}}
|
|
|
+ this.newAudioUrl = null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|