查看 | 历史 | 提交 | 提交对比
long
2021-02-04 dbf0688afc37f8b848951fb1e8fa57eef339db76
提交 | 用户 | 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>
48       <el-form-item label="详情：" prop="content">
49         <!-- 富文本 -->
50         <WangEnduit :catchdata="catchData" :content="mData.content" :rangenum="rangenum" />
51       </el-form-item>
52     </el-form>
53
54     <div class="com-edit-bottom-btns flex flex-align-center">
55       <el-button size="mini" @click="jumpBack">取消</el-button>
56       <el-button type="primary" size="mini" @click="submit">提交</el-button>
57     </div>
58
59     <!-- upload放大图片 -->
60     <el-dialog :visible.sync="uploadPreviewVisible" style="text-align:center">
61       <img style="max-width:100%" :src="uploadPreviewUrl" alt="">
62     </el-dialog>
63
36b711 64     <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
L 65
ad3cc5 66   </div>
L 67 </template>
68
69 <script>
70 import WangEnduit from '@/components/WangEnduit' // 富文本
71 import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览
3fccf2 72 import UploadSingleImg from '@/components_simple/UploadSingleImg'
ad3cc5 73 import Area from '@/utils/area' // 地区选择
36b711 74 import BackToTop from '@/components/BackToTop'
ad3cc5 75 export default {
L 76   name: 'DemoForm',
36b711 77   components: { WangEnduit, UploadSingleImg, BackToTop },
ad3cc5 78   mixins: [
L 79     mixin_upload
80   ],
81   data() {
82     return {
83       // 富文本
84       rangenum: null,
85       // 表单字段
86       mData: {
87         title: '', // 标题
88         valueMoney: '', // 面值
89         dateValue: [], // 有效日期（开始日期至结束日期）
90         content: '', // 详情
91         isUp: 1, // 是否上架
92         uploadImgs: [], // 图片
93         provinces: [],
94         imgUrl: ''
95       },
96
97       // 初始化地区
98       areaOpts: Area.getAreaOpts(Area.data), // 省市区数据
36b711 99
L 100       // 回到顶部
101       myBackToTopStyle: {
102         right: '50px',
103         bottom: '50px',
104         width: '40px',
105         height: '40px',
106         'border-radius': '4px',
107         'line-height': '45px', // 请保持与高度一致以垂直居中
108         background: '#e7eaf1'// 按钮的背景颜色
109       },
ad3cc5 110
L 111       // 表单校验
112       rules: {
113         title: [{
114           required: true, message: '请填写优惠券标题', trigger: 'change'
115         }],
116         valueMoney: [{
117           required: true, message: '请填写优惠券面值', trigger: 'change'
118         }, {
119           type: 'number', message: '面值必须为数字', trigger: 'change'
120         }],
121         dateValue: [{
122           required: true, message: '请选择有效日期', trigger: 'change'
123         }],
124         provinces: [{
125           required: true, message: '请选择地址', trigger: 'change'
126         }],
127         content: [{
128           required: true, message: '请填写优惠券详情'
129         }],
130         uploadImgs: [{
131           required: true, message: '请选择图片'
132         }]
133       }
134     }
135   },
136   mounted() {
137     this.init()
138   },
139   methods: {
140     init() {
141
142     },
143
144     jumpBack() {
145       this.$router.go(-1)
146     },
147
148     // 富文本相关
149     // 富文本编辑器的内容赋值
150     catchData(content) {
151       if (content === '<p><br></p>') content = ''
152       try {
153         const currentRange = window.getSelection().getRangeAt(0)
154         this.rangenum = currentRange
155       } catch (e) {
156         //
157       }
158       this.mData.content = content
159       this.$refs.couponForm.validateField('content')
160     },
161     // 富文本相关
162
163     submit() {
164       this.$refs['couponForm'].validate(valid => {
165         if (valid) {
3fccf2 166           // 上传图片
L 167           this.$refs.refUploadImg.runUploadImg((imgUrl) => {
168             imgUrl && this.$set(this.mData, 'imgUrl', imgUrl)
ad3cc5 169             this.submitReq()
3fccf2 170           })
ad3cc5 171         }
L 172       })
173     },
174
175     submitReq() {
176       var { mData } = this
177       console.log(mData)
178       // 字段未写
179       var params = {
180         title: mData.title,
181         priceStr: mData.valueMoney, // 元为单位
182         startTime: mData.dateValue[0],
183         endTime: mData.dateValue[1],
184         imgUrl: mData.imgUrl,
185         content: mData.content,
186         isUp: mData.isUp
187       }
188
189       // 提交表单
190       this.postFN({
191         url: 'admin/coupon/add',
192         params: params,
193         mockData: {
194           code: 100,
195           msg: '',
196           data: {}
197         }
198       }, () => {
199         this.$messageSuc('保存成功')
200         this.jumpBack()
201       })
202     }
203   }
204 }
205 </script>
206
207 <style lang="scss" scoped>
208
209 </style>