~chenshaoxiong/sms_center_backstage.git

long

2021-07-15 eaaa5b7839f08ddae008bd9fba3fa432b689b9af

提交 \| 用户 \| 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
d8f5a1	67	<back-to-top :visibility-height="300" :back-position="50" transition-name="fade" />
36b711	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	// 初始化地区
d8f5a1	102	areaOpts: Area.getAreaOpts(Area.data), // 省市区数据s
ad3cc5	103
L	104	// 表单校验
	105	rules: {
	106	title: [{
	107	required: true, message: '请填写优惠券标题', trigger: 'change'
	108	}],
	109	valueMoney: [{
	110	required: true, message: '请填写优惠券面值', trigger: 'change'
	111	}, {
	112	type: 'number', message: '面值必须为数字', trigger: 'change'
	113	}],
	114	dateValue: [{
	115	required: true, message: '请选择有效日期', trigger: 'change'
	116	}],
	117	provinces: [{
	118	required: true, message: '请选择地址', trigger: 'change'
	119	}],
	120	content: [{
4dde14	121	required: true, message: '请填写富文本1详情'
L	122	}],
	123	content2: [{
	124	required: true, message: '请填写富文本2详情'
ad3cc5	125	}],
L	126	uploadImgs: [{
	127	required: true, message: '请选择图片'
	128	}]
	129	}
	130	}
	131	},
	132	mounted() {
	133	this.init()
	134	},
	135	methods: {
	136	init() {
	137
	138	},
	139
	140	jumpBack() {
	141	this.$router.go(-1)
	142	},
	143
	144	// 富文本相关
	145	// 富文本编辑器的内容赋值
	146	catchData(content) {
	147	if (content === '<p><br></p>') content = ''
	148	try {
	149	const currentRange = window.getSelection().getRangeAt(0)
	150	this.rangenum = currentRange
	151	} catch (e) {
	152	//
	153	}
	154	this.mData.content = content
	155	this.$refs.couponForm.validateField('content')
	156	},
	157	// 富文本相关
	158
	159	submit() {
	160	this.$refs['couponForm'].validate(valid => {
	161	if (valid) {
3fccf2	162	// 上传图片
L	163	this.$refs.refUploadImg.runUploadImg((imgUrl) => {
	164	imgUrl && this.$set(this.mData, 'imgUrl', imgUrl)
ad3cc5	165	this.submitReq()
3fccf2	166	})
ad3cc5	167	}
L	168	})
	169	},
	170
	171	submitReq() {
	172	var { mData } = this
	173	console.log(mData)
	174	// 字段未写
	175	var params = {
	176	title: mData.title,
	177	priceStr: mData.valueMoney, // 元为单位
	178	startTime: mData.dateValue[0],
	179	endTime: mData.dateValue[1],
	180	imgUrl: mData.imgUrl,
	181	content: mData.content,
	182	isUp: mData.isUp
	183	}
	184
	185	// 提交表单
	186	this.postFN({
	187	url: 'admin/coupon/add',
	188	params: params,
	189	mockData: {
	190	code: 100,
	191	msg: '',
	192	data: {}
	193	}
	194	}, () => {
	195	this.$messageSuc('保存成功')
	196	this.jumpBack()
	197	})
	198	}
	199	}
	200	}
	201	</script>
	202
	203	<style lang="scss" scoped>
	204
	205	</style>