|
|
@@ -1,7 +1,7 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
<div class="addVideo">
|
|
|
- <MainTop :crumb="[{ name: '视频管理 > 新增视频' }]" />
|
|
|
+ <MainTop :crumb="[{ name: '视频管理 > 编辑视频' }]" />
|
|
|
<div class="table-interface" style="flex: 1">
|
|
|
<div class="top-body">
|
|
|
<div class="conten">
|
|
|
@@ -19,12 +19,31 @@
|
|
|
style="width: 220px; margin-right: 10px"
|
|
|
></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="视频链接" prop="urlScene">
|
|
|
- <el-input
|
|
|
- v-model="ruleForm.urlScene"
|
|
|
- placeholder="请输入视频链接"
|
|
|
- style="width: 220px; margin-right: 10px"
|
|
|
- ></el-input>
|
|
|
+ <el-form-item label="视频动画：" style="margin-left: 15px">
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ drag
|
|
|
+ :headers="{
|
|
|
+ token,
|
|
|
+ }"
|
|
|
+ :file-list="contentUrlList"
|
|
|
+ :show-file-list="true"
|
|
|
+ :action="uploadUrl"
|
|
|
+ :before-remove="beforeRemove"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ :on-success="upload_success"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <div class="el-upload__text">
|
|
|
+ 将文件拖到此处，或
|
|
|
+ <em>点击上传</em>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="el-upload__tip" slot="tip">
|
|
|
+ 支持视频动画格式：.wmv, .wav, .mp4
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="展示封面：" style="margin-left: 15px">
|
|
|
@@ -44,7 +63,9 @@
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
- <el-button type="primary" @click="add" style="margin-left: 50px">新增</el-button>
|
|
|
+ <el-button type="primary" @click="add" style="margin-left: 50px"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
<el-button @click="reset">重置</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -64,15 +85,17 @@ export default {
|
|
|
data () {
|
|
|
// 这里存放数据
|
|
|
return {
|
|
|
+ token: window.localStorage.getItem('token'),
|
|
|
+ contentUrlList: [],
|
|
|
+ uploadUrl: `${this.$serverName}/video/upload`,
|
|
|
ruleForm: {
|
|
|
fileName: 'CSBWG',
|
|
|
name: '',
|
|
|
thumb: '',
|
|
|
- urlScene: ''
|
|
|
+ urlVideo: ''
|
|
|
},
|
|
|
rules: {
|
|
|
- name: [{ required: true, message: '请输入视频名称', trigger: 'blur' }],
|
|
|
- urlScene: [{ required: true, message: '请输入视频链接', trigger: 'blur' }]
|
|
|
+ name: [{ required: true, message: '请输入视频名称', trigger: 'blur' }]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -82,35 +105,70 @@ export default {
|
|
|
watch: {},
|
|
|
// 方法集合
|
|
|
methods: {
|
|
|
+ // 上传视频的方法
|
|
|
+ beforeRemove (file) {
|
|
|
+ console.log(1111111)
|
|
|
+ this.contentUrlList = []
|
|
|
+ },
|
|
|
+ beforeUpload (file) {
|
|
|
+ console.log(222222222)
|
|
|
+ this.loading = true
|
|
|
+ let typeArr = ['wmv', 'wav', 'mp4']
|
|
|
+ let type = this.isTypeBySend(file.name, typeArr)
|
|
|
+ if (!type) {
|
|
|
+ this.loading = false
|
|
|
+ this.$message.error('支持视频动画格式：.wmv, .wav, .mp4')
|
|
|
+ return type
|
|
|
+ }
|
|
|
+ },
|
|
|
+ upload_success (data) {
|
|
|
+ console.log(33333333, data)
|
|
|
+ this.loading = false
|
|
|
+ this.ruleForm.urlVideo = data.data.filePath
|
|
|
+ // this.contentUrlList = [
|
|
|
+ // {
|
|
|
+ // name: data.data.split('/')[data.data.split('/').length - 1],
|
|
|
+ // url: data.data
|
|
|
+ // }
|
|
|
+ // ]
|
|
|
+ },
|
|
|
+
|
|
|
getShopImages (img) {
|
|
|
console.log(999999, img)
|
|
|
- this.ruleForm.thumb = img
|
|
|
+ this.ruleForm.thumb = img.filePath
|
|
|
},
|
|
|
async add () {
|
|
|
await this.$refs.ruleForm.validate()
|
|
|
+ if (!this.ruleForm.urlVideo) return this.$message.warning('视频动画不能为空')
|
|
|
if (!this.ruleForm.thumb) return this.$message.warning('封面不能为空')
|
|
|
-
|
|
|
this.getList()
|
|
|
},
|
|
|
- // 新增接口
|
|
|
+ // 编辑接口
|
|
|
async getList () {
|
|
|
- let result = await this.$http({
|
|
|
+ await this.$http({
|
|
|
method: 'post',
|
|
|
- url: '/scene/save',
|
|
|
+ url: '/video/save',
|
|
|
data: this.ruleForm
|
|
|
})
|
|
|
- console.log('新增成功', result)
|
|
|
- this.$message.success('新增成功')
|
|
|
- this.reset()
|
|
|
+ this.$message.success('编辑成功')
|
|
|
},
|
|
|
// 点击重置
|
|
|
reset () {
|
|
|
this.$refs.ruleForm.resetFields()
|
|
|
+ this.ruleForm.urlVideo = ''
|
|
|
this.ruleForm.thumb = ''
|
|
|
}
|
|
|
},
|
|
|
// 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
- created () {},
|
|
|
+ async created () {
|
|
|
+ // 根据ID获取视频详情
|
|
|
+ let result = await this.$http({
|
|
|
+ method: 'get',
|
|
|
+ url: `video/detail/${this.$route.params.id}`,
|
|
|
+ data: this.ruleForm
|
|
|
+ })
|
|
|
+ this.ruleForm = result.data
|
|
|
+ },
|
|
|
// 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted () {},
|
|
|
beforeCreate () {}, // 生命周期 - 创建之前
|
|
|
@@ -128,7 +186,6 @@ export default {
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
.table-interfac {
|
|
|
- overflow-y: auto;
|
|
|
overflow-x: hidden;
|
|
|
height: calc(100% - 3rem);
|
|
|
}
|
|
|
@@ -140,7 +197,7 @@ export default {
|
|
|
.conten {
|
|
|
padding-top: 10px;
|
|
|
width: 100%;
|
|
|
- height: 380px;
|
|
|
+ height: 600px;
|
|
|
border: 1px solid #ccc;
|
|
|
margin-bottom: 30px;
|
|
|
}
|
