AddCouponModal.vue 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649
  1. <template>
  2. <a-modal
  3. class="CouponModal"
  4. :title="pageType == 'add' ? '新增' : pageType == 'edit' ? '编辑' : ''"
  5. :width="1030"
  6. :footer="null"
  7. :destroyOnClose="true"
  8. @cancel="isShow = false"
  9. v-model="isShow">
  10. <!-- 表单 -->
  11. <a-form-model ref="ruleForms" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  12. <a-row>
  13. <a-col :span="24">
  14. <div class="c-title">
  15. 基本信息
  16. <a-divider type="vertical" class="bold-divider" />
  17. </div>
  18. </a-col>
  19. <a-col :span="12">
  20. <a-form-model-item label="优惠券名称" prop="title"><a-input v-model="form.title" :maxLength="20" placeholder="请输入优惠券名称,20个字以内" /></a-form-model-item>
  21. </a-col>
  22. <a-col :span="12">
  23. <!-- 优惠券类型分为:FULLSUB 满减券、DISCOUNT 折扣券、VOUCHER 代金券和 SUB 实价券 -->
  24. <a-form-model-item label="优惠券类型" prop="couponType">
  25. <v-select
  26. ref="couponType"
  27. v-model="form.couponType"
  28. @change="selectChange('couponType')"
  29. showArrow
  30. placeholder="请选择优惠券类型"
  31. code="COUPON_TYPE"
  32. :disabled="takeCount > 0"></v-select>
  33. </a-form-model-item>
  34. </a-col>
  35. </a-row>
  36. <a-row>
  37. <a-col :span="12" v-if="form.couponType == 'VOUCHER'">
  38. <a-form-model-item label="优惠券面额" prop="subAmount">
  39. <a-input-number
  40. v-model="form.subAmount"
  41. :disabled="takeCount > 0"
  42. :min="1"
  43. :max="999999"
  44. placeholder="请输入优惠券面额"
  45. class="input-number-s" />
  46. <span class="unit"></span>
  47. </a-form-model-item>
  48. </a-col>
  49. <a-col :span="12" v-if="form.couponType == 'VOUCHER'">
  50. <a-form-model-item label="是否限额使用" class="default-form-item form-item-required">
  51. <a-row :gutter="20">
  52. <a-col :span="9">
  53. <a-form-model-item prop="isLimit">
  54. <v-select
  55. ref="flag"
  56. v-model="isLimit"
  57. @change="selectChange('isLimitE')"
  58. showArrow
  59. placeholder="请选择"
  60. code="FLAG"
  61. :disabled="takeCount > 0"></v-select>
  62. </a-form-model-item>
  63. </a-col>
  64. <a-col :span="15" v-if="isLimit == '1'">
  65. <a-form-model-item prop="limitAmount">
  66. <a-input-number
  67. v-model="form.limitAmount"
  68. :disabled="takeCount > 0"
  69. :min="1"
  70. :max="999999"
  71. placeholder="限额数值"
  72. class="input-number-ms" />元使用
  73. </a-form-model-item>
  74. </a-col>
  75. </a-row>
  76. </a-form-model-item>
  77. </a-col>
  78. </a-row>
  79. <a-row>
  80. <a-col :span="12" v-if="form.couponType == 'FULLSUB'">
  81. <a-form-model-item label="满" class="default-form-item form-item-required">
  82. <a-row>
  83. <a-col :span="12">
  84. <a-form-model-item prop="limitAmount">
  85. <a-input-number
  86. v-model="form.limitAmount"
  87. :disabled="takeCount > 0"
  88. :min="1"
  89. :max="999999"
  90. placeholder="限额数值"
  91. class="input-number-ls" />
  92. <span class="unit"></span>
  93. </a-form-model-item>
  94. </a-col>
  95. <a-col :span="12">
  96. <a-form-model-item prop="subAmount">
  97. <a-input-number
  98. v-model="form.subAmount"
  99. :disabled="takeCount > 0"
  100. :min="1"
  101. :max="999999"
  102. placeholder="减免金额"
  103. class="input-number-ls" />
  104. <span class="unit"></span>
  105. </a-form-model-item>
  106. </a-col>
  107. </a-row>
  108. </a-form-model-item>
  109. </a-col>
  110. </a-row>
  111. <a-row>
  112. <a-col :span="12">
  113. <a-form-model-item label="发放总量" class="default-form-item form-item-required">
  114. <a-row :gutter="20">
  115. <a-col :span="9">
  116. <a-form-model-item label="" prop="quotaLimit">
  117. <v-select
  118. ref="limitFlag"
  119. v-model="form.quotaLimit"
  120. :disabled="takeCount > 0"
  121. @change="selectChange('quotaLimit')"
  122. showArrow
  123. placeholder="请选择"
  124. code="LIMIT_FLAG"></v-select>
  125. </a-form-model-item>
  126. </a-col>
  127. <a-col :span="15" v-if="form.quotaLimit == '1'">
  128. <a-form-model-item label="" prop="quota">
  129. <a-input-number
  130. v-model="form.quota"
  131. :disabled="takeCount > 0"
  132. :min="1"
  133. :max="999999"
  134. placeholder="请输入限制发放总量"
  135. class="input-number-s" />
  136. <span class="unit"></span>
  137. </a-form-model-item>
  138. </a-col>
  139. </a-row>
  140. </a-form-model-item>
  141. </a-col>
  142. <a-col :span="12">
  143. <a-form-model-item label="优惠券说明" prop="ruleDesc">
  144. <a-textarea v-model="form.ruleDesc" :maxLength="256" :auto-size="{ minRows: 3, maxRows: 5 }" placeholder="请输入优惠券说明,256个字以内" />
  145. </a-form-model-item>
  146. </a-col>
  147. <a-col :span="24">
  148. <div class="c-title">
  149. 领用规则
  150. <a-divider type="vertical" class="bold-divider" />
  151. </div>
  152. </a-col>
  153. <a-col :span="12">
  154. <a-form-model-item label="持卡会员" class="default-form-item form-item-required">
  155. <a-row :gutter="20">
  156. <a-col :span="9">
  157. <a-form-model-item prop="cardholderCouponLimit.isLimit">
  158. <v-select
  159. ref="limitFlag"
  160. v-model="form.cardholderCouponLimit.isLimit"
  161. @change="selectChange('isLimitC')"
  162. showArrow
  163. placeholder="请选择"
  164. code="LIMIT_FLAG"></v-select>
  165. </a-form-model-item>
  166. </a-col>
  167. <a-col :span="15" v-if="form.cardholderCouponLimit.isLimit == '1'">
  168. <a-row>
  169. <a-col :span="11">
  170. <a-form-model-item prop="cardholderCouponLimit.limitCount">
  171. <a-input-number v-model="form.cardholderCouponLimit.limitCount" :min="1" :max="999999" placeholder="限领份数" class="input-number-s" />
  172. </a-form-model-item>
  173. </a-col>
  174. <a-col :span="4">份/每</a-col>
  175. <a-col :span="9">
  176. <a-form-model-item prop="cardholderCouponLimit.limitCondition">
  177. <a-select v-model="form.cardholderCouponLimit.limitCondition" placeholder="请选择">
  178. <a-select-option :value="item.code" v-for="(item, index) in isUnitList" :key="index">{{ item.dispName }}</a-select-option>
  179. </a-select>
  180. </a-form-model-item>
  181. </a-col>
  182. </a-row>
  183. </a-col>
  184. </a-row>
  185. </a-form-model-item>
  186. </a-col>
  187. <a-col :span="12">
  188. <a-form-model-item label="未持卡会员" class="default-form-item form-item-required">
  189. <a-row :gutter="20">
  190. <a-col :span="9">
  191. <a-form-model-item prop="normalCouponLimit.isLimit">
  192. <v-select
  193. ref="limitFlag"
  194. v-model="form.normalCouponLimit.isLimit"
  195. @change="selectChange('isLimitN')"
  196. showArrow
  197. placeholder="请选择"
  198. code="LIMIT_FLAG"></v-select>
  199. </a-form-model-item>
  200. </a-col>
  201. <a-col :span="15" v-if="form.normalCouponLimit.isLimit == '1'">
  202. <a-row>
  203. <a-col :span="11">
  204. <a-form-model-item prop="normalCouponLimit.limitCount">
  205. <a-input-number v-model="form.normalCouponLimit.limitCount" :min="1" :max="999999" placeholder="限领份数" class="input-number-s" />
  206. </a-form-model-item>
  207. </a-col>
  208. <a-col :span="4">份/每</a-col>
  209. <a-col :span="9">
  210. <a-form-model-item prop="normalCouponLimit.limitCondition">
  211. <a-select v-model="form.normalCouponLimit.limitCondition" placeholder="请选择">
  212. <a-select-option :value="item.code" v-for="(item, index) in isUnitList" :key="index">{{ item.dispName }}</a-select-option>
  213. </a-select>
  214. </a-form-model-item>
  215. </a-col>
  216. </a-row>
  217. </a-col>
  218. </a-row>
  219. </a-form-model-item>
  220. </a-col>
  221. <a-col :span="12">
  222. <a-form-model-item label="有效期" class="default-form-item form-item-required">
  223. <a-row :gutter="20">
  224. <a-col :span="9">
  225. <a-form-model-item prop="validType">
  226. <a-select v-model="form.validType" :disabled="takeCount > 0" @change="selectChange('validType')" placeholder="请选择">
  227. <a-select-option :value="item.code" v-for="(item, index) in couponValidityList" :key="index">{{ item.dispName }}</a-select-option>
  228. </a-select>
  229. </a-form-model-item>
  230. </a-col>
  231. <a-col :span="15" v-if="form.validType == 'ABSOLUTE'">
  232. <a-form-model-item prop="timeRange">
  233. <a-range-picker v-model="form.timeRange" :disabled="takeCount > 0" @change="validDateChange" :disabled-date="disabledDate" format="YYYY-MM-DD" />
  234. </a-form-model-item>
  235. </a-col>
  236. <a-col :span="15" v-if="form.validType == 'RELATIVE'">
  237. <a-row>
  238. <a-col :span="16">
  239. <a-form-model-item prop="validDate">
  240. <a-input-number
  241. v-model="form.validDate"
  242. :disabled="takeCount > 0"
  243. :min="1"
  244. :max="999999"
  245. placeholder="请输入"
  246. class="input-number-s" />
  247. </a-form-model-item>
  248. </a-col>
  249. <a-col :span="8">天内有效</a-col>
  250. </a-row>
  251. </a-col>
  252. </a-row>
  253. </a-form-model-item>
  254. </a-col>
  255. <a-col :span="12">
  256. <a-form-model-item label="适用洗车类型" prop="couponScopeList">
  257. <a-select v-model="form.couponScopeList" placeholder="请选择适用洗车类型" showArrow mode="multiple">
  258. <a-select-option v-for="item in itemQueryList" :key="item.id" :value="item.id">{{ item.itemName }}</a-select-option>
  259. </a-select>
  260. </a-form-model-item>
  261. </a-col>
  262. <a-col :span="12">
  263. <a-form-model-item class="default-form-item form-item-required">
  264. <div slot="label" class="form-item-label">
  265. <a-tooltip
  266. placement="right"
  267. arrow-point-at-center
  268. title="已设置的适用洗车网点再次修改(尤其是减少使用网点)后,在【优惠券统计】中会保留原适用洗车网点的统计数据。"
  269. >
  270. 适用洗车网点
  271. <a-icon :style="{ fontSize: '17px', color: '#1890ff', verticalAlign: 'sub' }" type="question-circle" />
  272. </a-tooltip>
  273. </div>
  274. <a-row :gutter="20">
  275. <a-col :span="9">
  276. <a-form-model-item prop="isStoreLimit">
  277. <a-select v-model="form.isStoreLimit" @change="selectChange('isStoreLimit')" placeholder="请选择">
  278. <a-select-option :value="item.code" v-for="(item, index) in isAllList" :key="index">{{ item.dispName }}</a-select-option>
  279. </a-select>
  280. </a-form-model-item>
  281. </a-col>
  282. <a-col :span="15" v-if="form.isStoreLimit == '1'">
  283. <a-form-model-item prop="couponStoreList">
  284. <a-row :gutter="20">
  285. <a-col :span="15">
  286. 已选
  287. <strong>{{ form.couponStoreList.length }}</strong>
  288. </a-col>
  289. <a-col :span="9"><a-button type="primary" size="small" class="small-btn" @click="openOutletsModal = true">选择</a-button></a-col>
  290. </a-row>
  291. </a-form-model-item>
  292. </a-col>
  293. </a-row>
  294. </a-form-model-item>
  295. </a-col>
  296. <a-col :span="24">
  297. <a-form-model-item :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }" class="btn-cont">
  298. <a-button type="primary" @click="onSubmit">保存</a-button>
  299. <a-button class="resetForm" @click="onCancel">取消</a-button>
  300. </a-form-model-item>
  301. </a-col>
  302. </a-row>
  303. </a-form-model>
  304. <!-- 选择网点 -->
  305. <choose-outlets :openOutletsModal="openOutletsModal" :storeList="form.couponStoreList" @close="closeChooseOutlets" />
  306. </a-modal>
  307. </template>
  308. <script>
  309. import { VSelect } from '@/components'
  310. import moment from 'moment'
  311. import ChooseOutlets from './ChooseOutlets.vue'
  312. import { itemQuery } from '@/api/car-wash'
  313. import { couponCreate, couponToUpdate, couponUpdate } from '@/api/coupons'
  314. export default {
  315. name: 'AddCouponModal',
  316. components: { VSelect, ChooseOutlets },
  317. props: {
  318. openModal: {
  319. // 弹框是否展示
  320. type: Boolean,
  321. default: false
  322. },
  323. pageType: {
  324. // 页面类型 add 新增 / edit 编辑
  325. type: String,
  326. default: ''
  327. },
  328. couponId: { // 优惠券id
  329. type: String,
  330. default: ''
  331. }
  332. },
  333. data () {
  334. return {
  335. isShow: this.openModal, // 弹框是否展示
  336. form: {
  337. title: '', // 优惠券名称
  338. quotaLimit: '0', // 是否限制发放数量(0否 1是)
  339. quota: '', // 发放数量
  340. couponType: 'VOUCHER', // 优惠券类型:FULLSUB满减/SUB立减/DISCOUNT折扣券/VOUCHER代金券/PROMOCODE优惠码
  341. limitAmount: '', // 限定金额
  342. subAmount: '', // 满减券 减免 / 代金券面额
  343. ruleDesc: '', // 规则说明
  344. normalCouponLimit: { // 非持卡会员
  345. isLimit: '0', // 是否限制0否1是
  346. limitCount: '', // 限制数量
  347. limitCondition: 'monthly', // 限制条件:none无条件;monthly每月;daily每日
  348. userType: 'normal' // 用户类型:normal普通用户;cardholder持卡用户;all所有用户
  349. },
  350. cardholderCouponLimit: { // 持卡会员
  351. isLimit: '0', // 是否限制0否1是
  352. limitCount: '', // 限制数量
  353. limitCondition: 'monthly', // 限制条件:none无条件;monthly每月;daily每日
  354. userType: 'cardholder' // 用户类型:normal普通用户;cardholder持卡用户;all所有用户
  355. },
  356. validType: 'NONE', // 有效期类型:ABSOLUTE绝对时效(时间区间)/RELATIVE相对时效(领取后多少天内有效)/NONE不限制
  357. timeRange: [], // 有效期 时间范围(为解决表单校验)
  358. startTime: '', // 开始时间
  359. endTime: '', // 结束时间
  360. validDate: '', // 有效时长
  361. isOverlay: '0', // 是否可叠加使用(0否,1是)
  362. scopeType: 'ITEM', // 适用范围类型:ITEM 部分服务/ITEM_ALL 全部服务/BUNDLE 部分套餐/BUNDLE_ALL 全部套餐
  363. couponScopeList: [], // 优惠券适用范围设置
  364. isStoreLimit: '0', // 是否有门店限制 (0否,1是)
  365. couponStoreList: [] // 优惠券使用范围设置
  366. },
  367. rules: {
  368. title: [{ required: true, message: '请输入优惠券名称', trigger: 'blur' }],
  369. quota: [{ required: true, message: '请输入限制发放总量', trigger: 'blur' }],
  370. couponType: [{ required: true, message: '请选择优惠券类型', trigger: 'blur' }],
  371. limitAmount: [{ required: true, message: '请输入限额数值', trigger: 'blur' }],
  372. subAmount: [{ required: true, message: '请输入金额', trigger: 'blur' }],
  373. 'normalCouponLimit.limitCount': [{ required: true, message: '请输入限领份数', trigger: 'blur' }],
  374. 'cardholderCouponLimit.limitCount': [{ required: true, message: '请输入限领份数', trigger: 'blur' }],
  375. timeRange: [{ required: true, message: '请选择日期范围', trigger: 'blur' }],
  376. validDate: [{ required: true, message: '请输入有效时长', trigger: 'blur' }],
  377. couponScopeList: [{ required: true, message: '请选择适用洗车类型', trigger: 'blur' }],
  378. couponStoreList: [{ required: true, message: '请选择适用洗车网点', trigger: 'blur' }]
  379. },
  380. isLimit: '0', // 代金券 是否限额使用(0否,1是)
  381. isUnitList: [
  382. // 限领份数单位 下拉数据列表
  383. { dispName: '自然月', code: 'monthly' }
  384. ],
  385. couponValidityList: [
  386. // 有效期 下拉数据列表
  387. { dispName: '不限', code: 'NONE' },
  388. { dispName: '固定日期', code: 'ABSOLUTE' },
  389. { dispName: '领取后', code: 'RELATIVE' }
  390. ],
  391. isAllList: [
  392. // 适用洗车网点 全部 部分 下拉数据列表
  393. { dispName: '全部', code: '0' },
  394. { dispName: '部分', code: '1' }
  395. ],
  396. itemQueryList: [], // 适用洗车类型
  397. openOutletsModal: false, // 选择网点 弹框展示状态
  398. takeCount: '' // 发放数量(指客户已领取但未使用的数量) usedCount(指客户已领取并已使用的数量)
  399. }
  400. },
  401. methods: {
  402. moment,
  403. range (start, end) {
  404. const result = []
  405. for (let i = start; i < end; i++) {
  406. result.push(i)
  407. }
  408. return result
  409. },
  410. // 有效期 固定日期 禁用范围
  411. disabledDate (current) {
  412. // 不能选择今天之前的日期
  413. return current && current < moment().subtract(1, 'days')
  414. },
  415. // 有效期 固定日期 change
  416. validDateChange (date, dateString) {
  417. this.form.startTime = dateString[0]
  418. this.form.endTime = dateString[1]
  419. },
  420. // 保存
  421. onSubmit () {
  422. this.$refs.ruleForms.validate(valid => {
  423. if (valid) {
  424. const formData = JSON.parse(JSON.stringify(this.form))
  425. delete formData.timeRange
  426. // 适用洗车类型
  427. const couponScopeArr = []
  428. formData.couponScopeList.map(item => { couponScopeArr.push({ scopeType: 'ITEM', scopeValue: item }) })
  429. formData.couponScopeList = couponScopeArr
  430. if (this.pageType == 'add') { // 新增
  431. formData.id = null
  432. this.couponCreate(formData)
  433. } else if (this.pageType == 'edit') { // 编辑
  434. formData.id = String(this.couponId)
  435. this.couponUpdate(formData)
  436. }
  437. } else {
  438. return false
  439. }
  440. })
  441. },
  442. // 创建优惠券
  443. couponCreate (formData) {
  444. couponCreate(formData).then(res => {
  445. if (res.status == 200) {
  446. this.$message.success(res.message)
  447. this.$emit('success')
  448. } else {
  449. this.$message.error(res.message)
  450. }
  451. })
  452. },
  453. // 编辑优惠券
  454. couponUpdate (formData) {
  455. couponUpdate(formData).then(res => {
  456. if (res.status == 200) {
  457. this.$message.success(res.message)
  458. this.$emit('success')
  459. } else {
  460. this.$message.error(res.message)
  461. }
  462. })
  463. },
  464. // 取消
  465. onCancel () {
  466. this.resetForm()
  467. this.isShow = false
  468. },
  469. // 选择网点
  470. closeChooseOutlets (val) {
  471. this.form.couponStoreList = []
  472. if (val) {
  473. val.map(item => {
  474. this.form.couponStoreList.push({ storeId: item })
  475. })
  476. }
  477. this.openOutletsModal = false
  478. },
  479. // 获取优惠券详情
  480. getCouponInfo (id) {
  481. couponToUpdate({ id: id }).then(res => {
  482. if (res.status == 200) {
  483. this.setVal(res.data)
  484. this.takeCount = res.data.takeCount // 发放数量
  485. }
  486. })
  487. },
  488. // 表单赋值
  489. setVal (data) {
  490. const arr = [ 'title', 'couponType', 'quotaLimit', 'quota', 'ruleDesc', 'validType', 'isStoreLimit' ]
  491. arr.map(k => { this.form[k] = data[k] })
  492. if (data.couponType === 'FULLSUB') { // 满减券
  493. this.form.limitAmount = data.limitAmount
  494. this.form.subAmount = data.subAmount
  495. } else if (data.couponType === 'VOUCHER') { // 代金券
  496. this.form.subAmount = data.subAmount
  497. this.isLimit = Number(data.limitAmount) > 0 ? '1' : '0'
  498. this.form.limitAmount = data.limitAmount
  499. }
  500. // 持卡与非持卡会员
  501. this.form.cardholderCouponLimit = { isLimit: data.cardholderCouponLimit.isLimit, limitCount: data.cardholderCouponLimit.limitCount, limitCondition: data.cardholderCouponLimit.limitCondition, userType: data.cardholderCouponLimit.userType }
  502. this.form.normalCouponLimit = { isLimit: data.normalCouponLimit.isLimit, limitCount: data.normalCouponLimit.limitCount, limitCondition: data.normalCouponLimit.limitCondition, userType: data.normalCouponLimit.userType }
  503. if (data.validType === 'ABSOLUTE') { // 绝对时效(时间区间)
  504. this.form.timeRange = [moment(data.startTimeGmt8Ymd, 'YYYY-MM-DD'), moment(data.endTimeGmt8Ymd, 'YYYY-MM-DD')]
  505. this.form.startTime = data.startTimeGmt8Ymd
  506. this.form.endTime = data.endTimeGmt8Ymd
  507. } else if (data.validType === 'RELATIVE') { // RELATIVE相对时效(领取后多少天内有效)
  508. this.form.validDate = data.validDate
  509. }
  510. this.form.couponScopeList = data.scopeValueList // 适用洗车类型
  511. this.form.couponStoreList = data.couponStoreList // 适用洗车网点
  512. },
  513. // 获取适用洗车类型列表
  514. getItemQuery () {
  515. itemQuery({
  516. pageNo: 1,
  517. pageSize: 1000
  518. }).then(res => {
  519. if (res.status == 200) {
  520. this.itemQueryList = res.data.list || []
  521. } else {
  522. this.itemQueryList = []
  523. }
  524. })
  525. },
  526. // select change 关联数据清空处理
  527. selectChange (type) {
  528. if (type == 'couponType') { // 优惠券类型
  529. this.form.subAmount = ''
  530. this.form.limitAmount = ''
  531. this.isLimit = '0' // 代金券 是否限额使用(0否,1是)
  532. } else if (type === 'isLimitE') { // 是否限额使用
  533. this.form.limitAmount = ''
  534. } else if (type === 'quotaLimit') { // 发放总量
  535. this.form.quota = ''
  536. } else if (type === 'isLimitC') { // 持卡会员 是否限领
  537. this.form.cardholderCouponLimit.limitCount = ''
  538. } else if (type === 'isLimitN') { // 非持卡会员 是否限领
  539. this.form.normalCouponLimit.limitCount = ''
  540. } else if (type === 'validType') { // 有效期
  541. this.form.timeRange = []
  542. this.form.startTime = ''
  543. this.form.endTime = ''
  544. this.form.validDate = ''
  545. } else if (type === 'isStoreLimit') { // 适用洗车网点
  546. this.form.couponStoreList = []
  547. }
  548. },
  549. // 重置表单数据
  550. resetForm () {
  551. const emptyArr = [ 'title', 'quota', 'limitAmount', 'subAmount', 'ruleDesc', 'startTime', 'endTime', 'validDate' ]
  552. const zeroArr = [ 'quotaLimit', 'isOverlay', 'isStoreLimit' ]
  553. const array = [ 'timeRange', 'couponScopeList', 'couponStoreList' ]
  554. emptyArr.map(item => { this.form[item] = '' })
  555. zeroArr.map(item => { this.form[item] = '0' })
  556. array.map(item => { this.form[item] = [] })
  557. this.form.couponType = 'VOUCHER'
  558. this.form.cardholderCouponLimit = { isLimit: '0', limitCount: '', limitCondition: 'monthly', userType: 'cardholder' }
  559. this.form.normalCouponLimit = { isLimit: '0', limitCount: '', limitCondition: 'monthly', userType: 'normal' }
  560. this.form.validType = 'NONE'
  561. this.form.scopeType = 'ITEM'
  562. this.isLimit = '0'
  563. this.takeCount = ''
  564. }
  565. },
  566. watch: {
  567. // 父页面传过来的弹框状态
  568. openModal (newValue, oldValue) {
  569. this.isShow = newValue
  570. },
  571. // 重定义的弹框状态
  572. isShow (val) {
  573. if (!val) {
  574. this.$emit('close')
  575. } else {
  576. this.resetForm() // 重置表单数据
  577. this.getItemQuery() // 获取适用洗车类型列表
  578. }
  579. },
  580. couponId (newValue, oldValue) {
  581. if (newValue && this.isShow) {
  582. this.getCouponInfo(newValue)
  583. }
  584. }
  585. }
  586. }
  587. </script>
  588. <style lang="less">
  589. .CouponModal {
  590. .c-title {
  591. padding: 0 0 10px;
  592. margin-bottom: 20px;
  593. border-bottom: 1px solid #e8e8e8;
  594. .bold-divider {
  595. width: 3px;
  596. background-color: #1890ff;
  597. }
  598. }
  599. .input-number-s {
  600. width: 90%;
  601. }
  602. .input-number-ms{
  603. width: 66%;
  604. margin: 0 5px;
  605. }
  606. .input-number-ls{
  607. width: 80%;
  608. margin-right: 8px;
  609. }
  610. .input-number-mj{
  611. width: 40%;
  612. }
  613. .unit {
  614. display: inline-block;
  615. width: 10%;
  616. text-align: center;
  617. }
  618. .btn-cont {
  619. text-align: center;
  620. .resetForm {
  621. margin-left: 10px;
  622. }
  623. }
  624. .default-form-item {
  625. margin-bottom: 0;
  626. }
  627. .form-item-label {
  628. display: inline-block;
  629. cursor: pointer;
  630. }
  631. .form-item-required {
  632. .ant-form-item-label {
  633. label:before {
  634. display: inline-block;
  635. margin-right: 4px;
  636. color: #f5222d;
  637. font-size: 14px;
  638. font-family: SimSun, sans-serif;
  639. line-height: 1;
  640. content: '*';
  641. }
  642. }
  643. }
  644. }
  645. </style>