<template>
|
<div class="app-container">
|
<el-page-header class="mb20" @back="jumpBack" />
|
<el-form ref="couponForm" :model="mData" label-width="150px" :rules="rules" size="small">
|
<el-form-item label="标题：" prop="title">
|
<el-input v-model="mData.title" placeholder="请输入标题" class="com-edit-input" maxlength="50" />
|
</el-form-item>
|
<el-form-item label="面值：" prop="valueMoney">
|
<el-input v-model.number="mData.valueMoney" placeholder="请输入面值" class="com-edit-input" maxlength="50" />
|
</el-form-item>
|
<el-form-item label="面值：" prop="valueMoney">
|
<el-input v-model.number="mData.valueMoney" placeholder="请输入面值" class="com-edit-input" maxlength="50" />
|
</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>(xxx*xxx像素)</span>
|
</span>
|
<!-- 上传图片组件(单图) -->
|
<UploadSingleImg
|
ref="refUploadImg"
|
v-model="mData.uploadImgs"
|
@change.capture="$refs.refDialog.clearValidate()"
|
/>
|
</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>
|
|
<back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
|
|
</div>
|
</template>
|
|
<script>
|
import WangEnduit from '@/components/WangEnduit' // 富文本
|
import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览
|
import UploadSingleImg from '@/components_simple/UploadSingleImg'
|
import Area from '@/utils/area' // 地区选择
|
import BackToTop from '@/components/BackToTop'
|
export default {
|
name: 'DemoForm',
|
components: { WangEnduit, UploadSingleImg, BackToTop },
|
mixins: [
|
mixin_upload
|
],
|
data() {
|
return {
|
// 富文本
|
rangenum: null,
|
// 表单字段
|
mData: {
|
title: '', // 标题
|
valueMoney: '', // 面值
|
dateValue: [], // 有效日期（开始日期至结束日期）
|
content: '', // 详情
|
isUp: 1, // 是否上架
|
uploadImgs: [], // 图片
|
provinces: [],
|
imgUrl: ''
|
},
|
|
// 初始化地区
|
areaOpts: Area.getAreaOpts(Area.data), // 省市区数据
|
|
// 回到顶部
|
myBackToTopStyle: {
|
right: '50px',
|
bottom: '50px',
|
width: '40px',
|
height: '40px',
|
'border-radius': '4px',
|
'line-height': '45px', // 请保持与高度一致以垂直居中
|
background: '#e7eaf1'// 按钮的背景颜色
|
},
|
|
// 表单校验
|
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: '请选择图片'
|
}]
|
}
|
}
|
},
|
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')
|
},
|
// 富文本相关
|
|
submit() {
|
this.$refs['couponForm'].validate(valid => {
|
if (valid) {
|
// 上传图片
|
this.$refs.refUploadImg.runUploadImg((imgUrl) => {
|
imgUrl && this.$set(this.mData, 'imgUrl', imgUrl)
|
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>
|
