<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
width="500px"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<el-form ref="form" :model="form" :rules="rules">
|
<el-form-item label="标题" prop="title">
|
<el-input v-model="form.title" placeholder="请输入标题"></el-input>
|
</el-form-item>
|
<el-form-item label="图片" prop="imgurl">
|
<UploadImages
|
:fileList="imgurl ? [{ url: imgurl }] : []"
|
:uploadData="{ folder: 'banner' }"
|
:maxCount="1"
|
@getFileList="e => { form.imgurl = e.fileurl; imgurl = e.url }"
|
@deleteRow="form.imgurl = ''; imgurl = ''" />
|
</el-form-item>
|
<el-form-item label="排序码" prop="sortnum">
|
<el-input type="number" v-model="form.sortnum" placeholder="请输入排序码"></el-input>
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-switch
|
v-model="form.status"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
:active-value="0"
|
:inactive-value="1"
|
></el-switch>
|
</el-form-item>
|
<el-form-item label="展示位置" prop="position">
|
<el-select v-model="form.position" placeholder="请选择展示位置">
|
<el-option label="会员端首页轮播" :value="0"></el-option>
|
<el-option label="司机APP引导页" :value="1"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="跳转方式" prop="type">
|
<el-select v-model="form.type" placeholder="请选择跳转方式">
|
<el-option label="无" :value="0"></el-option>
|
<el-option label="富文本" :value="1"></el-option>
|
<el-option label="外链" :value="2"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="内容" prop="content" v-if="form.type === 1">
|
<RichEditor :richData="form.content" :styleEditor="styleEditor" @getWangedditor="getWangedditor" :readonly="false"/>
|
</el-form-item>
|
<el-form-item label="外链地址" prop="content" v-if="form.type === 2">
|
<el-input v-model="form.content" placeholder="请输入内容"></el-input>
|
</el-form-item>
|
<div class="tip-warn" v-if="form.type === 2"><i class="el-icon-warning"></i>配置小程序外链地址，需要联系微信小程序管理员登录微信小程序后台，配置该外链地址安全域名</div>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import UploadImages from '@/components/common/uploadImages'
|
import { getById } from '@/api/business/banner'
|
import RichEditor from '@/components/common/RichEditor'
|
export default {
|
name: 'OperaBannerEditWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow, UploadImages, RichEditor },
|
data () {
|
return {
|
// 表单数据
|
styleEditor:'border: 1px solid #ccc;display: inline-block;',
|
form: {
|
id: null,
|
title: '',
|
content: '',
|
position: '',
|
imgurl: '',
|
type: '',
|
sortnum: '',
|
status: 1
|
},
|
imgurl: '',
|
rules: {
|
position: [{ required: true, message: '请选择展示位置', trigger: 'change' }],
|
imgurl: [{ required: true, message: '请上传图片', trigger: 'change' }],
|
type: [{ required: true, message: '请选择跳转方式', trigger: 'change' }],
|
content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
|
}
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/banner',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
open (title, row) {
|
this.title = title
|
if (row && row.id) {
|
getById(row.id).then(res => {
|
this.form = {
|
id: res.id,
|
title: res.title || '',
|
position: res.position,
|
imgurl: res.imgurl || '',
|
type: res.type,
|
sortnum: res.sortnum,
|
status: res.status ?? 1,
|
content: res.content || ''
|
}
|
this.imgurl = res.imgurlFull
|
this.visible = true
|
}).catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
} else {
|
this.form = {
|
id: null,
|
title: '',
|
position: '',
|
imgurl: '',
|
type: '',
|
sortnum: '',
|
status: 1,
|
content: ''
|
}
|
this.imgurl = ''
|
this.visible = true
|
}
|
},
|
getWangedditor (data) {
|
this.form.content = data
|
}
|
}
|
}
|
</script>
|
