|
|
<template>
|
|
|
<div class="main-content">
|
|
|
<div class="form-area">
|
|
|
<el-form size="default" :model="form" label-width="120px">
|
|
|
<el-form-item label="标题" style="width: 80%">
|
|
|
<el-input maxlength="64" show-word-limit placeholder="请输入" v-model="form.title" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="副标题" style="width: 80%">
|
|
|
<el-input type="textarea" placeholder="请输入" v-model="form.subtitle" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="动态类型">
|
|
|
<el-radio-group v-model="form.type">
|
|
|
<el-radio :label="1">视频</el-radio>
|
|
|
<el-radio :label="2">图片</el-radio>
|
|
|
<el-radio :label="3">文字</el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="上传封面">
|
|
|
<uploadFile cover="封面图片尺寸比例为4:3，建议尺寸:1080*810" @change="handlerUpload" :config="{limit: 1, accept: '.jpg, .jpeg, .png, .gif'}">
|
|
|
<el-icon v-if="form.cover == ''" class="img-upload-cover"><Plus /></el-icon>
|
|
|
<img v-else class="img-upload-cover" :src="$ImgUrl(form.cover)" />
|
|
|
</uploadFile>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="文章内容" v-if="form.type == 3">
|
|
|
<div style="border: 1px solid #ccc">
|
|
|
<Toolbar
|
|
|
style="border-bottom: 1px solid #ccc;width: 700px"
|
|
|
:editor="editorRef"
|
|
|
:defaultConfig="toolbarConfig"
|
|
|
:mode="mode"
|
|
|
/>
|
|
|
<Editor
|
|
|
style="height: 301px; overflow-y: hidden;"
|
|
|
v-model="form.content"
|
|
|
:defaultConfig="editorConfig"
|
|
|
:mode="mode"
|
|
|
@onCreated="handleCreated"
|
|
|
/>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="上传图片" v-else-if="form.type == 2">
|
|
|
<uploadFile @change="handlerUploadPic" :config="{ limit: 1, accept: '.jpg, .jpeg, .png, .gif'}">
|
|
|
<el-icon v-if="form.type == ''" class="img-upload"><Plus /></el-icon>
|
|
|
<img v-else class="img-upload" :src="$ImgUrl(form.content)" />
|
|
|
</uploadFile>
|
|
|
</el-form-item>
|
|
|
<!-- <el-form-item label="图片内容">
|
|
|
<img class="img-upload" :src="$ImgUrl(form.content)" />
|
|
|
</el-form-item> -->
|
|
|
<el-form-item label="上传视频" v-if="form.type == 1">
|
|
|
<uploadFile @change="handlerUploadVideo" :config="{ limit: 1, accept: '.mp4, .ogv, .ogg, .webm'}">
|
|
|
<el-icon class="img-upload"><Plus /></el-icon>
|
|
|
</uploadFile>
|
|
|
</el-form-item>
|
|
|
<el-form-item v-if="form.type == 1" label="内容">
|
|
|
<el-link :href="$ImgUrl(form.content)" target="_blank">点击查看</el-link>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" @click="confirm">提交</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import '@wangeditor/editor/dist/css/style.css'
|
|
|
import { onBeforeUnmount, shallowRef, onMounted } from 'vue'
|
|
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
|
|
import {defineComponent, reactive, getCurrentInstance} from 'vue'
|
|
|
import { ElMessage } from 'element-plus'
|
|
|
export default defineComponent({
|
|
|
name: 'v-questRelease',
|
|
|
components: { Editor, Toolbar },
|
|
|
setup() {
|
|
|
const form = reactive({
|
|
|
title: '',
|
|
|
subtitle: '',
|
|
|
type: 1,
|
|
|
content: '',
|
|
|
cover:'',
|
|
|
duration: undefined,
|
|
|
});
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
/////////////
|
|
|
const editorRef = shallowRef()
|
|
|
// onMounted(() => { // 模拟 ajax 异步获取内容
|
|
|
// setTimeout(() => {
|
|
|
// valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
|
|
|
// }, 1500)
|
|
|
// })
|
|
|
//配置项
|
|
|
const toolbarConfig = {}
|
|
|
const editorConfig = { MENU_CONF: {} }
|
|
|
editorConfig.MENU_CONF['uploadImage'] = {
|
|
|
server: process.env.VUE_APP_URL + "util/upload2",
|
|
|
maxFileSize: 10 * 1024 * 1024, // 10M
|
|
|
fieldName: 'file',
|
|
|
onError: (file, err, res) => {
|
|
|
ElMessage({message: '超出大小限制', type: 'error', duration: 6000})
|
|
|
},
|
|
|
};
|
|
|
editorConfig.MENU_CONF['uploadVideo'] = {
|
|
|
server: process.env.VUE_APP_URL + "util/upload2",
|
|
|
maxFileSize: 128 * 1024 * 1024, // 128M
|
|
|
fieldName: 'file',
|
|
|
onError: (file, err, res) => {
|
|
|
ElMessage({message: '超出大小限制', type: 'error', duration: 6000})
|
|
|
},
|
|
|
}
|
|
|
// 组件销毁时，也及时销毁编辑器
|
|
|
onBeforeUnmount(() => {
|
|
|
const editor = editorRef.value
|
|
|
if (editor == null) return
|
|
|
editor.destroy()
|
|
|
})
|
|
|
const handleCreated = (editor) => {
|
|
|
editorRef.value = editor // 记录 editor 实例，重要！
|
|
|
}
|
|
|
/////////////
|
|
|
return {
|
|
|
form,proxy,
|
|
|
editorRef, mode: 'simple', toolbarConfig, editorConfig, handleCreated
|
|
|
}
|
|
|
},
|
|
|
activated() {
|
|
|
this.getApi();
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getApi();
|
|
|
},
|
|
|
methods: {
|
|
|
getApi() {
|
|
|
if(this.$route.query.id) {
|
|
|
this.proxy.$post("/topicActivity/detail", {id: this.$route.query.id}).then(res => {
|
|
|
this.form.title = res.data.title;
|
|
|
this.form.type = res.data.type;
|
|
|
this.form.subtitle = res.data.subtitle;
|
|
|
this.form.content = res.data.content;
|
|
|
this.form.cover = res.data.cover;
|
|
|
this.form.duration = res.data.duration;
|
|
|
}).catch(() => {});
|
|
|
}
|
|
|
},
|
|
|
confirm() {
|
|
|
if(this.$route.query.id) {
|
|
|
let obj = Object.assign(this.form, {id: this.$route.query.id})
|
|
|
this.proxy.$post("/topicActivity/upd", obj).then(res => {
|
|
|
if(res.code == 200) {
|
|
|
this.$message.success(res.data);
|
|
|
this.$router.go(-1);
|
|
|
} else {
|
|
|
this.$message.error(res.data);
|
|
|
}
|
|
|
}).catch(() => {});
|
|
|
} else {
|
|
|
this.proxy.$post("/topicActivity/add", this.form).then(res => {
|
|
|
if(res.code == 200) {
|
|
|
this.$message.success(res.data);
|
|
|
this.$router.go(-1);
|
|
|
} else {
|
|
|
this.$message.error(res.data);
|
|
|
}
|
|
|
}).catch(() => {});
|
|
|
}
|
|
|
},
|
|
|
handlerUpload(data) {
|
|
|
this.form.cover = data.fileUrl
|
|
|
},
|
|
|
handlerUploadPic(data) {
|
|
|
this.form.content = data.fileUrl
|
|
|
},
|
|
|
handlerUploadVideo(data) {
|
|
|
this.form.content = data.fileUrl;
|
|
|
this.form.duration = data.duration;
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
.form-area {
|
|
|
width: 600px
|
|
|
}
|
|
|
.img-upload {
|
|
|
font-size: 28px;
|
|
|
color: #8c939d;
|
|
|
width: 135px;
|
|
|
height: 135px;
|
|
|
text-align: center;
|
|
|
border: 1px solid;
|
|
|
}
|
|
|
.img-upload-cover {
|
|
|
font-size: 28px;
|
|
|
color: #8c939d;
|
|
|
width: 180px;
|
|
|
height: 135px;
|
|
|
text-align: center;
|
|
|
border: 1px solid;
|
|
|
}
|
|
|
</style> |
