<template>
|
<div class="app-container">
|
<el-form ref="couponForm" label-position="left" :model="mData" label-width="150px" :rules="rules">
|
<el-form-item label="标题：" prop="title">
|
<el-input v-model="mData.title" placeholder="请输入标题" class="com-edit-input" />
|
</el-form-item>
|
<el-form-item label="面值：" prop="valueMoney">
|
<el-input v-model.number="mData.valueMoney" placeholder="请输入面值" class="com-edit-input" />
|
</el-form-item>
|
<el-form-item label="省市区" prop="provinces">
|
<el-cascader
|
v-model="mData.provinces"
|
class="com-edit-input"
|
:options="areaOpts"
|
placeholder="请选择省市区"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
<el-form-item label="有效日期" prop="dateValue">
|
<el-date-picker
|
v-model="mData.dateValue"
|
value-format="yyyy-MM-dd"
|
class="com-edit-input"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
/>
|
</el-form-item>
|
<el-form-item prop="uploadImgs">
|
<span slot="label">
|
图片：<br><span>(668*164像素)</span>
|
</span>
|
<!-- 上传图片组件(单图) -->
|
<el-upload
|
ref="refUploadImg"
|
accept="image/jpeg,image/jpg,image/gif,image/png"
|
:auto-upload="false"
|
list-type="picture-card"
|
:class="{disabled:uploadDisabled}"
|
action="#"
|
:limit="1"
|
:file-list="mData.uploadImgs"
|
:on-change="addUploadImg"
|
:on-remove="delUploadImg"
|
:http-request="uploadImg"
|
:on-preview="uploadPreview"
|
:before-upload="beforeUploadImg"
|
>
|
<i class="el-icon-plus" />
|
</el-upload>
|
</el-form-item>
|
<el-form-item label="是否上架：">
|
<el-switch v-model="mData.isUp" :active-value="1" :inactive-value="0" />
|
</el-form-item>
|
<el-form-item label="详情：" prop="content">
|
<!-- 富文本 -->
|
<WangEnduit :catchdata="catchData" :content="mData.content" :rangenum="rangenum" />
|
</el-form-item>
|
</el-form>
|
|
<div class="com-edit-bottom-btns flex flex-align-center">
|
<el-button size="mini" @click="jumpBack">取消</el-button>
|
<el-button type="primary" size="mini" @click="submit">提交</el-button>
|
</div>
|
|
<!-- upload放大图片 -->
|
<el-dialog :visible.sync="uploadPreviewVisible" style="text-align:center">
|
<img style="max-width:100%" :src="uploadPreviewUrl" alt="">
|
</el-dialog>
|
|
</div>
|
</template>
|
|
<script>
|
import WangEnduit from '@/components/WangEnduit' // 富文本
|
import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览
|
import Area from '@/utils/area' // 地区选择
|
export default {
|
name: 'DemoForm',
|
components: { WangEnduit },
|
mixins: [
|
mixin_upload
|
],
|
data() {
|
return {
|
// 富文本
|
rangenum: null,
|
// 表单字段
|
mData: {
|
title: '', // 标题
|
valueMoney: '', // 面值
|
dateValue: [], // 有效日期（开始日期至结束日期）
|
content: '', // 详情
|
isUp: 1, // 是否上架
|
uploadImgs: [], // 图片
|
provinces: [],
|
imgUrl: ''
|
},
|
|
// 初始化地区
|
areaOpts: Area.getAreaOpts(Area.data), // 省市区数据
|
|
// 表单校验
|
rules: {
|
title: [{
|
required: true, message: '请填写优惠券标题', trigger: 'change'
|
}],
|
valueMoney: [{
|
required: true, message: '请填写优惠券面值', trigger: 'change'
|
}, {
|
type: 'number', message: '面值必须为数字', trigger: 'change'
|
}],
|
dateValue: [{
|
required: true, message: '请选择有效日期', trigger: 'change'
|
}],
|
provinces: [{
|
required: true, message: '请选择地址', trigger: 'change'
|
}],
|
content: [{
|
required: true, message: '请填写优惠券详情'
|
}],
|
uploadImgs: [{
|
required: true, message: '请选择图片'
|
}]
|
}
|
}
|
},
|
computed: {
|
// 禁用上传图片功能
|
uploadDisabled() {
|
return this.mData.uploadImgs.length > 0
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
methods: {
|
init() {
|
|
},
|
|
jumpBack() {
|
this.$router.go(-1)
|
},
|
|
// 富文本相关
|
// 富文本编辑器的内容赋值
|
catchData(content) {
|
if (content === '<p><br></p>') content = ''
|
try {
|
const currentRange = window.getSelection().getRangeAt(0)
|
this.rangenum = currentRange
|
} catch (e) {
|
//
|
}
|
this.mData.content = content
|
this.$refs.couponForm.validateField('content')
|
},
|
// 富文本相关
|
|
// 上传图片 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
|
// 上传前确认格式
|
beforeUploadImg(file) {
|
const isImg = file.type.indexOf('image/') > -1
|
if (!isImg) {
|
this.$message.error('必须是选择图片文件')
|
}
|
return isImg
|
},
|
// 增加图片
|
addUploadImg(file, fileList) {
|
this.mData.uploadImgs = fileList
|
this.$refs.couponForm.validateField('uploadImgs')
|
},
|
// 删除图片
|
delUploadImg(file, fileList) {
|
this.mData.uploadImgs = fileList
|
},
|
// 上传图片
|
uploadImg(res) {
|
const file = res.file
|
const formData = new FormData()
|
formData.append('file', file)
|
this.postFN({
|
url: 'admin/image/upload',
|
header: { 'Content-Type': 'multipart/form-data' },
|
params: formData,
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {
|
imgUrl: 'xxxx'
|
}
|
}
|
}, (inf) => {
|
console.log('上传图成功')
|
this.$set(this.mData, 'imgUrl', inf.imgUrl)
|
console.log('上传图结束')
|
|
// 上传完图片
|
this.submitReq()
|
})
|
},
|
// 上传图片 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
|
|
submit() {
|
this.$refs['couponForm'].validate(valid => {
|
if (valid) {
|
if (this.checkNeedUpload(this.mData.uploadImgs)) {
|
console.log('开始上传图片')
|
// 先上传图片，再提交
|
this.$refs.refUploadImg.submit()
|
} else {
|
// 提交
|
this.submitReq()
|
}
|
}
|
})
|
},
|
|
submitReq() {
|
var { mData } = this
|
console.log(mData)
|
// 字段未写
|
var params = {
|
title: mData.title,
|
priceStr: mData.valueMoney, // 元为单位
|
startTime: mData.dateValue[0],
|
endTime: mData.dateValue[1],
|
imgUrl: mData.imgUrl,
|
content: mData.content,
|
isUp: mData.isUp
|
}
|
|
// 提交表单
|
this.postFN({
|
url: 'admin/coupon/add',
|
params: params,
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {}
|
}
|
}, () => {
|
this.$messageSuc('保存成功')
|
this.jumpBack()
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
</style>
|
