|
@@ -21,8 +21,8 @@
|
|
>
|
|
>
|
|
<el-option label="全部" value="" />
|
|
<el-option label="全部" value="" />
|
|
<el-option label="待审核" :value="2" />
|
|
<el-option label="待审核" :value="2" />
|
|
- <el-option label="审核通过" :value="0" />
|
|
|
|
- <el-option label="审核未通过" :value="1" />
|
|
|
|
|
|
+ <el-option label="审核通过" :value="1" />
|
|
|
|
+ <el-option label="审核未通过" :value="0" />
|
|
</el-select>
|
|
</el-select>
|
|
<span>上线状态:</span>
|
|
<span>上线状态:</span>
|
|
<el-select
|
|
<el-select
|
|
@@ -117,33 +117,35 @@
|
|
width="40%"
|
|
width="40%"
|
|
:close-on-click-modal="false"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
:close-on-press-escape="false"
|
|
|
|
+ @close="beforeDialogClose"
|
|
@closed="dialogColosed"
|
|
@closed="dialogColosed"
|
|
>
|
|
>
|
|
<el-form ref="formRef" :model="dialogData" label-width="110px" :rules="dialogFormRules">
|
|
<el-form ref="formRef" :model="dialogData" label-width="110px" :rules="dialogFormRules">
|
|
<el-form-item label="标题:" prop="videoTitle">
|
|
<el-form-item label="标题:" prop="videoTitle">
|
|
<el-input v-model="dialogData.videoTitle" maxlength="50" show-word-limit />
|
|
<el-input v-model="dialogData.videoTitle" maxlength="50" show-word-limit />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item ref="formVideoUrlRef" label="视频链接:" prop="videoUrl">
|
|
|
|
- <div class="clearfix video-upload-box" :class="{hasBottom:hasVideo}">
|
|
|
|
- <el-input v-model="dialogData.videoUrl" style="width:80%" class="fl" :disabled="hasVideo" />
|
|
|
|
|
|
+ <el-form-item ref="formVideoUrlRef" label="上传视频:" prop="videoPreviewUrl">
|
|
|
|
+
|
|
|
|
+ <div class="file-upload-box" style="height:40px;">
|
|
|
|
+ <!-- 上传文件组件 -->
|
|
<el-upload
|
|
<el-upload
|
|
ref="uploadRef"
|
|
ref="uploadRef"
|
|
- class="upload-demo fr"
|
|
|
|
accept=".mp4"
|
|
accept=".mp4"
|
|
- :limit="1"
|
|
|
|
|
|
+ :class="{hidden:hasVideo}"
|
|
:auto-upload="false"
|
|
:auto-upload="false"
|
|
- :show-file-list="true"
|
|
|
|
:headers="headers"
|
|
:headers="headers"
|
|
:action="action"
|
|
:action="action"
|
|
- :file-list="fileList"
|
|
|
|
:on-success="handleUploadSuccess"
|
|
:on-success="handleUploadSuccess"
|
|
:on-change="handleUploadChange"
|
|
:on-change="handleUploadChange"
|
|
:on-remove="handleFileRemove"
|
|
:on-remove="handleFileRemove"
|
|
|
|
+ :before-upload="beforeUpload"
|
|
|
|
+ :file-list="fileList"
|
|
>
|
|
>
|
|
- <el-button :disabled="hasVideo" type="primary" style="width:100%">选择视频</el-button>
|
|
|
|
|
|
+ <el-button size="mini" type="primary" style="width:100%">上传视频</el-button>
|
|
</el-upload>
|
|
</el-upload>
|
|
|
|
+ <el-input v-model="dialogData.videoPreviewUrl" type="hidden" class="hiddenInput" />
|
|
</div>
|
|
</div>
|
|
- <span style="color:#999;font-size:12px">如果没有链接,可以点击右侧的上传视频,视频大小不能超过<i style="color:red">*50MB*</i></span>
|
|
|
|
|
|
+ <span style="color:#999;font-size:12px">视频大小不能超过<i style="color:red">*50MB*</i></span>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<div slot="footer" class="dialog-footer">
|
|
@@ -181,7 +183,8 @@ export default {
|
|
hasVideo: false, // 是否上传了视频
|
|
hasVideo: false, // 是否上传了视频
|
|
chooseNewVideo: false, // 是否重新选择了视频
|
|
chooseNewVideo: false, // 是否重新选择了视频
|
|
fileList: [], // 上传的视频列表
|
|
fileList: [], // 上传的视频列表
|
|
- uploadVideoUrl: '', // 上传视频成功的url
|
|
|
|
|
|
+ previewUrl: '', // 上传视频成功的url
|
|
|
|
+ downloadUrl: '',
|
|
listQuery: {
|
|
listQuery: {
|
|
authUserId: '', // 供应商用户id
|
|
authUserId: '', // 供应商用户id
|
|
listType: 1, // 列表类型:1视频列表,2视频审核列表
|
|
listType: 1, // 列表类型:1视频列表,2视频审核列表
|
|
@@ -195,13 +198,16 @@ export default {
|
|
dialogData: {
|
|
dialogData: {
|
|
videoId: '',
|
|
videoId: '',
|
|
authUserId: '',
|
|
authUserId: '',
|
|
|
|
+ videoName: '',
|
|
videoTitle: '',
|
|
videoTitle: '',
|
|
- videoUrl: ''
|
|
|
|
|
|
+ // videoUrl: '',
|
|
|
|
+ videoPreviewUrl: '',
|
|
|
|
+ videoDownloadUrl: ''
|
|
},
|
|
},
|
|
// dialog中表单字段校验规则
|
|
// dialog中表单字段校验规则
|
|
dialogFormRules: {
|
|
dialogFormRules: {
|
|
videoTitle: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
|
|
videoTitle: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
|
|
- videoUrl: [{ required: true, message: '链接不能为空', trigger: ['change', 'blur'] }]
|
|
|
|
|
|
+ videoPreviewUrl: [{ required: true, message: '链接不能为空', trigger: ['change', 'blur'] }]
|
|
},
|
|
},
|
|
list: []
|
|
list: []
|
|
}
|
|
}
|
|
@@ -236,12 +242,13 @@ export default {
|
|
this.listLoading = false
|
|
this.listLoading = false
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- // 初始化预览图片列表
|
|
|
|
- initPreviewList(list) {
|
|
|
|
- list.forEach(item => this.srcList.push(item.articleCover))
|
|
|
|
- },
|
|
|
|
// 提交
|
|
// 提交
|
|
handleSubmit() {
|
|
handleSubmit() {
|
|
|
|
+ if (!this.dialogData.videoPreviewUrl) {
|
|
|
|
+ this.$refs.formRef.validateField('videoTitle')
|
|
|
|
+ this.$refs.formRef.validateField('videoPreviewUrl')
|
|
|
|
+ return
|
|
|
|
+ }
|
|
// 对标题字段进行规则校验
|
|
// 对标题字段进行规则校验
|
|
this.$refs.formRef.validateField('videoTitle', (error) => {
|
|
this.$refs.formRef.validateField('videoTitle', (error) => {
|
|
if (!error) {
|
|
if (!error) {
|
|
@@ -258,7 +265,7 @@ export default {
|
|
* 5.修改时,重新选择了视频 --上传视频后再提交
|
|
* 5.修改时,重新选择了视频 --上传视频后再提交
|
|
*/
|
|
*/
|
|
this.submitLoading = true;
|
|
this.submitLoading = true;
|
|
- (this.dialogData.videoUrl && (!this.hasVideo || (this.hasVideo && !this.chooseNewVideo))) ? this.save() : this.$refs.uploadRef.submit()
|
|
|
|
|
|
+ (this.dialogData.videoPreviewUrl && (!this.hasVideo || (this.hasVideo && !this.chooseNewVideo))) ? this.save() : this.$refs.uploadRef.submit()
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
@@ -268,8 +275,9 @@ export default {
|
|
if (!valide) return
|
|
if (!valide) return
|
|
this.dialogData.authUserId = this.authUserId
|
|
this.dialogData.authUserId = this.authUserId
|
|
// uploadVideoUrl不为空,就代表重新上传了视频,需要为表单中的videoUrl重新赋值,新增时该值也不为空
|
|
// uploadVideoUrl不为空,就代表重新上传了视频,需要为表单中的videoUrl重新赋值,新增时该值也不为空
|
|
- if (this.uploadVideoUrl) {
|
|
|
|
- this.dialogData.videoUrl = this.uploadVideoUrl
|
|
|
|
|
|
+ if (this.previewUrl && this.downloadUrl) {
|
|
|
|
+ this.dialogData.videoPreviewUrl = this.previewUrl
|
|
|
|
+ this.dialogData.videoDownloadUrl = this.downloadUrl
|
|
}
|
|
}
|
|
saveVideo(this.dialogData)
|
|
saveVideo(this.dialogData)
|
|
.then(res => {
|
|
.then(res => {
|
|
@@ -296,8 +304,8 @@ export default {
|
|
this.dialogData[key] = row[key]
|
|
this.dialogData[key] = row[key]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- if (this.dialogData.videoUrl) {
|
|
|
|
- this.fileList.push({ name: `删除当前视频后可上传新视频`, url: row.videoUrl })
|
|
|
|
|
|
+ if (this.dialogData.videoPreviewUrl) {
|
|
|
|
+ this.fileList.push({ name: row.videoName, url: row.videoPreviewUrl })
|
|
this.hasVideo = true
|
|
this.hasVideo = true
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -323,7 +331,6 @@ export default {
|
|
this.dialogTitle = type === 'add' ? '添加视频' : '修改视频'
|
|
this.dialogTitle = type === 'add' ? '添加视频' : '修改视频'
|
|
this.setDialogData(row)
|
|
this.setDialogData(row)
|
|
this.dialogVisible = true
|
|
this.dialogVisible = true
|
|
- this.$refs?.formRef?.clearValidate()
|
|
|
|
},
|
|
},
|
|
// 对话框关闭的回调
|
|
// 对话框关闭的回调
|
|
dialogColosed() {
|
|
dialogColosed() {
|
|
@@ -332,15 +339,26 @@ export default {
|
|
this.dialogData.videoId = ''
|
|
this.dialogData.videoId = ''
|
|
this.dialogData.authUserId = ''
|
|
this.dialogData.authUserId = ''
|
|
this.dialogData.videoTitle = ''
|
|
this.dialogData.videoTitle = ''
|
|
- this.dialogData.videoUrl = ''
|
|
|
|
|
|
+ this.dialogData.videoPreviewUrl = ''
|
|
|
|
+ this.dialogData.videoDownloadUrl = ''
|
|
this.chooseNewVideo = false
|
|
this.chooseNewVideo = false
|
|
- this.uploadVideoUrl = ''
|
|
|
|
|
|
+ this.downloadUrl = ''
|
|
|
|
+ this.previewUrl = ''
|
|
|
|
+ this.submitLoading = false
|
|
|
|
+ },
|
|
|
|
+ // 对话框关闭前的回调
|
|
|
|
+ beforeDialogClose() {
|
|
|
|
+ this.$refs.formRef.resetFields()
|
|
|
|
+ // 停止上传文件
|
|
|
|
+ this.$refs.uploadRef.abort()
|
|
},
|
|
},
|
|
// 视频上传成功
|
|
// 视频上传成功
|
|
handleUploadSuccess(response, file, fileList) {
|
|
handleUploadSuccess(response, file, fileList) {
|
|
console.log(response)
|
|
console.log(response)
|
|
// this.dialogData.videoUrl = response.fileUrl
|
|
// this.dialogData.videoUrl = response.fileUrl
|
|
- this.uploadVideoUrl = response.fileUrl
|
|
|
|
|
|
+ this.previewUrl = response.previewUrl
|
|
|
|
+ this.downloadUrl = response.downloadUrl
|
|
|
|
+ this.dialogData.videoName = response.fileName
|
|
this.save()
|
|
this.save()
|
|
},
|
|
},
|
|
// 选添加文件、上传成功和上传失败时都会被调用
|
|
// 选添加文件、上传成功和上传失败时都会被调用
|
|
@@ -348,20 +366,32 @@ export default {
|
|
console.log(file)
|
|
console.log(file)
|
|
this.chooseNewVideo = true
|
|
this.chooseNewVideo = true
|
|
this.hasVideo = fileList.length > 0
|
|
this.hasVideo = fileList.length > 0
|
|
- this.dialogData.videoUrl = '-'
|
|
|
|
|
|
+ this.dialogData.videoPreviewUrl = '-'
|
|
|
|
+ this.dialogData.videoDownloadUrl = '-'
|
|
},
|
|
},
|
|
// 移除视频
|
|
// 移除视频
|
|
handleFileRemove(file, fileList) {
|
|
handleFileRemove(file, fileList) {
|
|
this.hasVideo = fileList.length > 0
|
|
this.hasVideo = fileList.length > 0
|
|
- this.dialogData.videoUrl = ''
|
|
|
|
|
|
+ this.dialogData.videoPreviewUrl = ''
|
|
|
|
+ this.dialogData.videoDownloadUrl = ''
|
|
|
|
+ this.submitLoading = false
|
|
|
|
+ },
|
|
|
|
+ // 上传视频前判断文件大小
|
|
|
|
+ beforeUpload(file, fileList) {
|
|
|
|
+ const flag = file.size <= 100 * 1024 * 1204
|
|
|
|
+ if (!flag) {
|
|
|
|
+ this.$message({
|
|
|
|
+ message: '文件大小超过100MB,请重新选择!',
|
|
|
|
+ duration: 1000,
|
|
|
|
+ type: 'warning'
|
|
|
|
+ })
|
|
|
|
+ this.fileList = []
|
|
|
|
+ }
|
|
|
|
+ return flag
|
|
},
|
|
},
|
|
// 状态改变
|
|
// 状态改变
|
|
handleChangeStatus(item) {
|
|
handleChangeStatus(item) {
|
|
this.listLoading = true
|
|
this.listLoading = true
|
|
- // const params = {
|
|
|
|
- // authId: item.authId,
|
|
|
|
- // status: item.status ? 1 : 0
|
|
|
|
- // }
|
|
|
|
console.log(item)
|
|
console.log(item)
|
|
const params = {
|
|
const params = {
|
|
videoId: item.videoId,
|
|
videoId: item.videoId,
|