新闻调整

This commit is contained in:
刘仕伟
2022-02-28 16:25:36 +08:00
parent 82b11cd362
commit da306f69ea
6 changed files with 117 additions and 113 deletions

View File

@@ -12,20 +12,21 @@
<el-input v-model="newsInfo.title" size="small" placeholder="请输入…" maxlength="30"
show-word-limit></el-input>
</el-form-item>
<el-form-item prop="policyType" label="类型">
<el-form-item prop="description" label="摘要">
<el-input type="textarea" v-model="newsInfo.description" size="small" placeholder="请输入…" maxlength="255"
show-word-limit></el-input>
</el-form-item>
<el-form-item prop="category" label="分类:">
<ai-select
v-model="newsInfo.policyType"
placeholder="选择新闻类"
:selectList="$dict.getDict('newsCenterPolicyType')">
v-model="newsInfo.category"
placeholder="选择新闻类"
:selectList="$dict.getDict('appNewsCategory')">
</ai-select>
</el-form-item>
<!-- <el-form-item label="发布地区:" prop="areaId">-->
<!-- <ai-area-get v-model="newsInfo.areaId" :instance="instance" :root="areaId"/>-->
<!-- </el-form-item>-->
<el-form-item prop="videoFile" label="视频:">
<el-form-item prop="videoUrl" label="视频:">
<el-upload :show-file-list="false" ref="upload1"
action :http-request="submitUpload" :accept="accept" :limit="1">
<div class="video" v-if="!newsInfo.videoFile.length">
<div class="video" v-if="!newsInfo.videoUrl.length">
<div class="icon">
<ai-icon type="svg" icon="iconVideo"/>
<span>上传视频</span>
@@ -34,15 +35,15 @@
</div>
</el-upload>
<video class="video-com" style="width:100%; height:100%; object-fit: fill;" muted
:src="newsInfo.videoFile[0].url" controls="controls" v-if="newsInfo.videoFile.length"></video>
:src="newsInfo.videoUrl" controls="controls" v-if="newsInfo.videoUrl"></video>
<el-upload :show-file-list="false" ref="upload2" action :http-request="submitUpload" :accept="accept"
:limit="1" v-if="newsInfo.videoFile.length">
:limit="1" v-if="newsInfo.videoUrl">
<el-button style="margin-top: 10px;">重新选择</el-button>
</el-upload>
</el-form-item>
<el-form-item prop="coverFile" label="封面:">
<ai-uploader :instance="instance" v-model="newsInfo.coverFile" :limit="1"
@change="$refs['ruleForm'].clearValidate('coverFile')" :cropOps="cropOps" is-crop>
<el-form-item prop="thumbUrl" label="封面:">
<ai-uploader :instance="instance" v-model="newsInfo.thumbUrl" :limit="1"
@change="$refs['ruleForm'].clearValidate('thumbUrl')" :cropOps="cropOps" is-crop>
<template slot="tips">图片比例1.81</template>
</ai-uploader>
</el-form-item>
@@ -52,14 +53,12 @@
</template>
<template slot="footer">
<el-button class="footer_btn" @click="$emit('goBack')">取消</el-button>
<el-button type="primary" class="footer_btn" @click="handleSubmit('1')" v-if="!isEdit">发布</el-button>
<el-button class="footer_btn" @click="handleSubmit('0')">保存</el-button>
</template>
</ai-detail>
</template>
<script>
import mp4box from 'mp4box'
export default {
name: "addVideo",
@@ -75,17 +74,18 @@ export default {
newsInfo: {
areaId: '',
title: "",
policyType: '',
videoFile: [],
coverFile: []
description: "",
category: '',
videoUrl: '',
thumbUrl: ''
},
accept: ".mp4",
rules: {
title: {required: true, message: '请输入标题', trigger: 'blur'},
areaId: {required: true, message: '请选择 发布地区', trigger: 'blur'},
policyType: {required: true, message: '请选择类', trigger: 'change'},
videoFile: {required: true, message: '请上传视频', trigger: 'blur'},
coverFile: {required: true, message: '请上传封面', trigger: 'blur'},
description: {required: true, message: '请输入摘要', trigger: 'blur'},
category: {required: true, message: '请选择类', trigger: 'change'},
videoUrl: {required: true, message: '请上传视频', trigger: 'blur'},
thumbUrl: {required: true, message: '请上传封面', trigger: 'blur'},
},
cropOps: {
width: "320px",
@@ -113,60 +113,42 @@ export default {
submitUpload(file) {
this.$refs['upload1']?.clearFiles();
this.$refs['upload2']?.clearFiles();
this.$refs['ruleForm']?.clearValidate('videoFile');
this.$refs['ruleForm']?.clearValidate('videoUrl');
const fileType = file.file.name.split(".")[1];
const size = file.file.size / 1024 / 1024 > 100;
let mp4boxfile = mp4box.createFile();
const reader = new FileReader();
reader.readAsArrayBuffer(file.file);
reader.onload = (e) => {
const arrayBuffer = e.target.result;
arrayBuffer.fileStart = 0;
mp4boxfile.appendBuffer(arrayBuffer);
};
mp4boxfile.onReady = (info) => {
let codec = info.mime.match(/codecs="(\S*),/)[1]
if (codec.indexOf('avc') === -1) {
return this.$message.error("视频编码格式不支持")
}
if (size) {
return this.$message.error("视频大小不能超过100M");
}
if (size) {
return this.$message.error("视频大小不能超过100M");
}
if (fileType && this.accept.indexOf(fileType.toLocaleLowerCase()) > -1) {
let formData = new FormData()
formData.append('file', file.file);
this.instance.post(`/admin/file/add-unlimited`, formData).then(res => {
if (res && res.data) {
let videoList = res.data[0].split(";");
this.newsInfo.videoFile.splice(0, 1, {
id: videoList[1],
url: videoList[0]
})
}
})
} else {
return this.$message.error("视频格式错误");
}
};
if (fileType && this.accept.indexOf(fileType.toLocaleLowerCase()) > -1) {
let formData = new FormData()
formData.append('file', file.file);
this.instance.post(`/admin/file/add-unlimited`, formData).then(res => {
if (res && res.data) {
let videoList = res.data[0].split(";");
this.newsInfo.videoUrl = videoList[0]
}
})
} else {
return this.$message.error("视频格式错误");
}
},
addOrUpdate(status) {
if (Array.isArray(this.newsInfo.thumbUrl)) {
this.newsInfo.thumbUrl = this.newsInfo.thumbUrl[0].url
}
const msg = +status ? '发布成功' : this.isEdit ? '编辑成功' : '保存成功';
this.instance.post(`/app/appnews/addOrUpdate`, {
...this.newsInfo,
title: this.newsInfo.title,
videoFile: {
id: this.newsInfo.videoFile[0].id
},
coverFile: {
id: this.newsInfo.coverFile[0].id
},
policyType: this.newsInfo.policyType,
areaId: this.areaId,
description: this.newsInfo.description,
videoUrl: this.newsInfo.videoUrl,
thumbUrl: this.newsInfo.thumbUrl,
category: this.newsInfo.category,
type: 1,
id: this.detail.id,
status: this.isEdit ? this.detail.status : status
id: this.newsInfo.id,
status: this.newsInfo.status
}).then(res => {
if (res.code == 0) {
this.$message.success(msg);
@@ -180,11 +162,14 @@ export default {
params: {id}
}).then(res => {
if (res?.data) {
this.newsInfo = res.data
this.newsInfo.areaId = res.data.areaId
this.newsInfo.id = res.data.id
this.newsInfo.title = res.data.title;
this.newsInfo.policyType = res.data.policyType
this.newsInfo.videoFile = [{...res.data.videoFile, url: res.data.videoFile.accessUrl}];
this.newsInfo.coverFile = [{...res.data.coverFile, url: res.data.coverFile.accessUrl}];
this.newsInfo.description = res.data.description;
this.newsInfo.category = res.data.category
this.newsInfo.videoUrl = res.data.videoUrl;
this.newsInfo.thumbUrl = [{url: res.data.thumbUrl}];
}
})
}