long
2021-06-07 23bfd7ceb7a3d15a0228789542845cd132cacc64
提交 | 用户 | 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>