~chenshaoxiong/sms_center_backstage.git

long

2021-02-22 4dde145ee066a30b441a9687ab8a7b673c0a3ff1

提交 \| 用户 \| age
ad3cc5	1	<template>
L	2	<div class="app-container">
a12059	3	<el-page-header class="mb20" @back="jumpBack" />
36b711	4	<el-form ref="couponForm" :model="mData" label-width="150px" :rules="rules" size="small">
ad3cc5	5	<el-form-item label="标题：" prop="title">
36b711	6	<el-input v-model="mData.title" placeholder="请输入标题" class="com-edit-input" maxlength="50" />
ad3cc5	7	</el-form-item>
L	8	<el-form-item label="面值：" prop="valueMoney">
36b711	9	<el-input v-model.number="mData.valueMoney" placeholder="请输入面值" class="com-edit-input" maxlength="50" />
L	10	</el-form-item>
	11	<el-form-item label="面值：" prop="valueMoney">
	12	<el-input v-model.number="mData.valueMoney" placeholder="请输入面值" class="com-edit-input" maxlength="50" />
ad3cc5	13	</el-form-item>
L	14	<el-form-item label="省市区" prop="provinces">
	15	<el-cascader
	16	v-model="mData.provinces"
9f32bd	17	class="com-edit-input"
ad3cc5	18	:options="areaOpts"
L	19	placeholder="请选择省市区"
	20	style="width: 100%"
	21	/>
	22	</el-form-item>
	23	<el-form-item label="有效日期" prop="dateValue">
	24	<el-date-picker
	25	v-model="mData.dateValue"
	26	value-format="yyyy-MM-dd"
	27	class="com-edit-input"
	28	type="daterange"
	29	range-separator="至"
	30	start-placeholder="开始日期"
	31	end-placeholder="结束日期"
	32	/>
	33	</el-form-item>
	34	<el-form-item prop="uploadImgs">
	35	<span slot="label">
36b711	36	图片：<br><span>(xxx*xxx像素)</span>
ad3cc5	37	</span>
L	38	<!-- 上传图片组件(单图) -->
3fccf2	39	<UploadSingleImg
ad3cc5	40	ref="refUploadImg"
3fccf2	41	v-model="mData.uploadImgs"
L	42	@change.capture="$refs.refDialog.clearValidate()"
	43	/>
ad3cc5	44	</el-form-item>
L	45	<el-form-item label="是否上架：">
	46	<el-switch v-model="mData.isUp" :active-value="1" :inactive-value="0" />
	47	</el-form-item>
4dde14	48	<el-form-item label="富文本1：" prop="content">
ad3cc5	49	<!-- 富文本 -->
L	50	<WangEnduit :catchdata="catchData" :content="mData.content" :rangenum="rangenum" />
4dde14	51	</el-form-item>
L	52	<el-form-item label="富文本2：" prop="content2">
	53	<tinymce v-model="mData.content2" :height="300" />
ad3cc5	54	</el-form-item>
L	55	</el-form>
	56
	57	<div class="com-edit-bottom-btns flex flex-align-center">
	58	<el-button size="mini" @click="jumpBack">取消</el-button>
	59	<el-button type="primary" size="mini" @click="submit">提交</el-button>
	60	</div>
	61
	62	<!-- upload放大图片 -->
	63	<el-dialog :visible.sync="uploadPreviewVisible" style="text-align:center">
	64	<img style="max-width:100%" :src="uploadPreviewUrl" alt="">
	65	</el-dialog>
	66
36b711	67	<back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
L	68
ad3cc5	69	</div>
L	70	</template>
	71
	72	<script>
4dde14	73	import Tinymce from '@/components/Tinymce'
ad3cc5	74	import WangEnduit from '@/components/WangEnduit' // 富文本
L	75	import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览
3fccf2	76	import UploadSingleImg from '@/components_simple/UploadSingleImg'
ad3cc5	77	import Area from '@/utils/area' // 地区选择
36b711	78	import BackToTop from '@/components/BackToTop'
ad3cc5	79	export default {
L	80	name: 'DemoForm',
4dde14	81	components: { WangEnduit, UploadSingleImg, BackToTop, Tinymce },
ad3cc5	82	mixins: [
L	83	mixin_upload
	84	],
	85	data() {
	86	return {
	87	// 富文本
	88	rangenum: null,
	89	// 表单字段
	90	mData: {
	91	title: '', // 标题
	92	valueMoney: '', // 面值
	93	dateValue: [], // 有效日期（开始日期至结束日期）
	94	content: '', // 详情
	95	isUp: 1, // 是否上架
	96	uploadImgs: [], // 图片
	97	provinces: [],
	98	imgUrl: ''
	99	},
	100
	101	// 初始化地区
	102	areaOpts: Area.getAreaOpts(Area.data), // 省市区数据
36b711	103
L	104	// 回到顶部
	105	myBackToTopStyle: {
	106	right: '50px',
	107	bottom: '50px',
	108	width: '40px',
	109	height: '40px',
	110	'border-radius': '4px',
	111	'line-height': '45px', // 请保持与高度一致以垂直居中
	112	background: '#e7eaf1'// 按钮的背景颜色
	113	},
ad3cc5	114
L	115	// 表单校验
	116	rules: {
	117	title: [{
	118	required: true, message: '请填写优惠券标题', trigger: 'change'
	119	}],
	120	valueMoney: [{
	121	required: true, message: '请填写优惠券面值', trigger: 'change'
	122	}, {
	123	type: 'number', message: '面值必须为数字', trigger: 'change'
	124	}],
	125	dateValue: [{
	126	required: true, message: '请选择有效日期', trigger: 'change'
	127	}],
	128	provinces: [{
	129	required: true, message: '请选择地址', trigger: 'change'
	130	}],
	131	content: [{
4dde14	132	required: true, message: '请填写富文本1详情'
L	133	}],
	134	content2: [{
	135	required: true, message: '请填写富文本2详情'
ad3cc5	136	}],
L	137	uploadImgs: [{
	138	required: true, message: '请选择图片'
	139	}]
	140	}
	141	}
	142	},
	143	mounted() {
	144	this.init()
	145	},
	146	methods: {
	147	init() {
	148
	149	},
	150
	151	jumpBack() {
	152	this.$router.go(-1)
	153	},
	154
	155	// 富文本相关
	156	// 富文本编辑器的内容赋值
	157	catchData(content) {
	158	if (content === '<p><br></p>') content = ''
	159	try {
	160	const currentRange = window.getSelection().getRangeAt(0)
	161	this.rangenum = currentRange
	162	} catch (e) {
	163	//
	164	}
	165	this.mData.content = content
	166	this.$refs.couponForm.validateField('content')
	167	},
	168	// 富文本相关
	169
	170	submit() {
	171	this.$refs['couponForm'].validate(valid => {
	172	if (valid) {
3fccf2	173	// 上传图片
L	174	this.$refs.refUploadImg.runUploadImg((imgUrl) => {
	175	imgUrl && this.$set(this.mData, 'imgUrl', imgUrl)
ad3cc5	176	this.submitReq()
3fccf2	177	})
ad3cc5	178	}
L	179	})
	180	},
	181
	182	submitReq() {
	183	var { mData } = this
	184	console.log(mData)
	185	// 字段未写
	186	var params = {
	187	title: mData.title,
	188	priceStr: mData.valueMoney, // 元为单位
	189	startTime: mData.dateValue[0],
	190	endTime: mData.dateValue[1],
	191	imgUrl: mData.imgUrl,
	192	content: mData.content,
	193	isUp: mData.isUp
	194	}
	195
	196	// 提交表单
	197	this.postFN({
	198	url: 'admin/coupon/add',
	199	params: params,
	200	mockData: {
	201	code: 100,
	202	msg: '',
	203	data: {}
	204	}
	205	}, () => {
	206	this.$messageSuc('保存成功')
	207	this.jumpBack()
	208	})
	209	}
	210	}
	211	}
	212	</script>
	213
	214	<style lang="scss" scoped>
	215
	216	</style>