add.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306
  1. <template>
  2. <div class="app-container coupon-add">
  3. <br>
  4. <el-row :gutter="10">
  5. <el-col :xs="{span: 22, offset: 0}" :sm=" {span: 18, offset: 0}" :lg="{span: 10, offset: 0}">
  6. <el-form ref="addItem" :model="addData" :rules="rules" label-width="160px">
  7. <el-form-item label="券名称:" prop="title">
  8. <el-input v-model="addData.title" :readonly="readonly" placeholder="请输入券名称" :maxlength="32" show-word-limit />
  9. </el-form-item>
  10. <el-form-item label="使用场景:" prop="type">
  11. <el-radio-group v-model="addData.type" :disabled="readonly || addData.status === 'on' || addData.status === 'off'">
  12. <el-radio :label="2">门店消费</el-radio>
  13. <el-radio :label="1">盲票购买</el-radio>
  14. </el-radio-group>
  15. </el-form-item>
  16. <el-form-item label="券金额:" prop="discount">
  17. <el-input v-model.number="addData.discount" :readonly="readonly" type="number" :min="0" placeholder="请输入券券金额">
  18. <template slot="append">元</template>
  19. </el-input>
  20. </el-form-item>
  21. <!-- <el-form-item label="数量:" prop="quantity">
  22. <el-input v-model.number="addData.quantity" type="number" :min="0" placeholder="请输入券数量">
  23. <template slot="append">元</template>
  24. </el-input>
  25. </el-form-item> -->
  26. <!-- <el-form-item label="图片:" prop="picUrl">
  27. <Upload :value="addData.picUrl ? [{ fileName: addData.picUrl }] : []" @input="addData.picUrl = $event[0] ? $event[0].fileName : ''" :limit="1" />
  28. </el-form-item> -->
  29. <el-form-item v-if="addData.type === 2" label="门店默认承担比例:" prop="channelSharedRate">
  30. <el-input v-model="addData.channelSharedRate" :readonly="readonly" type="number" placeholder="请输入门店默认承担比例">
  31. <template slot="append">%</template>
  32. </el-input>
  33. <div class="tip">若门店承担100%,则核销后公司不需要打款给门店,依此类推。</div>
  34. </el-form-item>
  35. <el-form-item label="最低消费金额:" prop="minOrderAmt">
  36. <el-input v-model="addData.minOrderAmt" :readonly="readonly" type="number" placeholder="请输入可使用的最低消费金额">
  37. <template slot="append">元</template>
  38. </el-input>
  39. <div class="tip">最低消费金额为0则为无门槛优惠券</div>
  40. </el-form-item>
  41. <el-form-item label="有效期限:" prop="dueDays">
  42. <el-select v-model="addData.dueDays" clearable placeholder="请选择有效期限" :disabled="readonly">
  43. <el-option label="1天" :value="1"></el-option>
  44. <el-option label="7天" :value="7"></el-option>
  45. <el-option label="30天" :value="30"></el-option>
  46. <el-option label="60天" :value="60"></el-option>
  47. <el-option label="90天" :value="90"></el-option>
  48. <el-option label="180天" :value="180"></el-option>
  49. </el-select>
  50. <!-- <el-input v-model.number="addData.dueDays" :readonly="readonly" placeholder="请输入有效期限">
  51. <template slot="prepend">领取之日起</template>
  52. <template slot="append">天有效</template>
  53. </el-input> -->
  54. </el-form-item>
  55. <el-form-item label="使用说明:" prop="description">
  56. <el-input type="textarea" rows="4" :readonly="readonly" v-model="addData.description" placeholder="请输入使用说明 对用户可见"/>
  57. </el-form-item>
  58. <el-form-item v-if="addData.type === 2" label="使用范围:" prop="useArea">
  59. <el-radio-group v-model="addData.useArea" :disabled="readonly || addData.status === 'on' || addData.status === 'off'">
  60. <el-radio :label="2">进票门店</el-radio>
  61. <el-radio :label="1">指定门店</el-radio>
  62. <el-radio :label="0">所有门店</el-radio>
  63. </el-radio-group>
  64. </el-form-item>
  65. <el-form-item v-else label="使用范围:" prop="useArea">
  66. <el-radio-group v-model="addData.useArea" :disabled="readonly || addData.status === 'on' || addData.status === 'off'">
  67. <el-radio :label="0">所有盲票</el-radio>
  68. <el-radio :label="3">线上盲票</el-radio>
  69. <el-radio :label="4">线下盲票</el-radio>
  70. <el-radio :label="1">指定盲票</el-radio>
  71. </el-radio-group>
  72. </el-form-item>
  73. </el-form>
  74. </el-col>
  75. </el-row>
  76. <el-row :gutter="18">
  77. <el-col :span="18" :offset="2">
  78. <div v-if="addData.useArea === 1 && addData.type === 1" style="padding: 0 20px">
  79. <el-table :data="addData.ticketBoxList" height="300px">
  80. <el-table-column label="盲票ID" prop="boxId" min-width="90" />
  81. <el-table-column label="盲票图片" prop="picUrl" align="center">
  82. <template slot-scope="{row}">
  83. <a target="_black" v-if="row.picUrl && row.picUrl.split(',').length > 0" :href="`${IMG_URL + row.picUrl}`"><img :src="`${IMG_URL + row.picUrl.split(',')[0]}`" style="max-height: 37px;max-width: 54px"></a>
  84. <span v-else>-</span>
  85. </template>
  86. </el-table-column>
  87. <el-table-column label="盲票名称" prop="title" />
  88. <el-table-column label="盲票面值" prop="facePrice" >
  89. <template slot-scope="{row}">
  90. ¥{{$numberFormat(row.facePrice)}}
  91. </template>
  92. </el-table-column>
  93. <el-table-column label="盲票类型" prop="type">
  94. <template slot-scope="{row}">
  95. {{ row.type && JSON.parse(row.type).desc }}
  96. </template>
  97. </el-table-column>
  98. <el-table-column label="盲票状态" prop="status">
  99. <template slot-scope="{row}">
  100. <el-tag :type="row.status && JSON.parse(row.status).value === 'on' ? 'success' : 'info'">{{ row.status && JSON.parse(row.status).desc }}</el-tag>
  101. </template>
  102. </el-table-column>
  103. <el-table-column v-if="!readonly" prop="date" label="操作">
  104. <template slot-scope="{ $index }">
  105. <el-button type="text" class="del" @click="addData.ticketBoxList.splice($index, 1)">删除</el-button>
  106. </template>
  107. </el-table-column>
  108. </el-table>
  109. <br>
  110. <el-button v-if="!readonly" type="primary" size="small" plain @click="funSelectShow">选择盲票</el-button> <span style="margin-left: 10px">已选盲票({{ addData.ticketBoxList.length }})</span>
  111. </div>
  112. <div v-if="addData.useArea === 1 && addData.type === 2" style="padding: 0 20px">
  113. <el-table :data="channelList" height="300px">
  114. <el-table-column label="门店编号" prop="channelId" min-width="90" />
  115. <el-table-column label="门店名称" prop="name" />
  116. <el-table-column label="手机号码" prop="mobile" />
  117. <el-table-column label="上级渠道" prop="parentsName"/>
  118. <el-table-column label="认证状态" prop="status">
  119. <template slot-scope="{row}">
  120. <el-tag :type="row.certifyStatus && JSON.parse(row.certifyStatus).value === 'y' ? 'success' : 'info'">{{ row.certifyStatus && JSON.parse(row.certifyStatus).desc }}</el-tag>
  121. </template>
  122. </el-table-column>
  123. <el-table-column v-if="!readonly" prop="date" label="操作">
  124. <template slot-scope="{ $index }">
  125. <el-button type="text" class="del" @click="channelList.splice($index, 1)">删除</el-button>
  126. </template>
  127. </el-table-column>
  128. </el-table>
  129. <br>
  130. <el-button v-if="!readonly" type="primary" size="small" plain @click="funChannelShow">选择门店</el-button> <span style="margin-left: 10px">已选门店({{ channelList.length }})</span>
  131. </div>
  132. </el-col>
  133. </el-row>
  134. <el-row v-if="!readonly">
  135. <el-col :span="23" style="text-align: center">
  136. <el-button type="info" @click="$router.go(-1)">取消</el-button>
  137. <el-button :loading="addIng" type="primary" @click="update()">保存</el-button>
  138. </el-col>
  139. </el-row>
  140. <!-- 弹出层 -->
  141. <SelectTicket :select-show="selectShow" :value="addData.ticketBoxList" :excludeBoxIds="excludeBoxIds" @close="selectShow = false" @selectTicket="selectTicket" v-if="selectShow"/>
  142. <!-- 弹出层 -->
  143. <ChannelTicket :channel-show="channelShow" :value="channelList" :excludeChannelIds="excludeChannelIds" @close="channelShow = false" @channelTicket="channelTicket" v-if="channelShow"/>
  144. </div>
  145. </template>
  146. <script>
  147. import Upload from '@/components/ImageUpload'
  148. import SelectTicket from './components/selectTicket'
  149. import ChannelTicket from './components/channelTicket'
  150. import { publicFileGetUrl } from '@/api/common'
  151. import { getCouponDetail, addCoupon } from '@/api/business/coupon'
  152. import { accDiv, accMul } from '@/utils/util'
  153. import {addData} from "../../../api/system/dict/data";
  154. export default {
  155. name: 'CouponAdd',
  156. components: {
  157. Upload,
  158. SelectTicket,
  159. ChannelTicket
  160. },
  161. data() {
  162. return {
  163. IMG_URL: publicFileGetUrl,
  164. id: this.$route.query.id,
  165. readonly: this.$route.name === 'CouponQuery',
  166. channelList: [],
  167. addData: {
  168. ticketBoxList:[],
  169. useArea: 5,
  170. dueDays: 90,
  171. type: 2,
  172. channelSharedRate:0,
  173. minOrderAmt:0,
  174. status: '',
  175. },
  176. addIng: false,
  177. excludeBoxIds: [],
  178. excludeChannelIds: [],
  179. selectShow: false,
  180. channelShow: false,
  181. rules: {
  182. title: [{ required: true, message: '请输入券名称', trigger: 'blur' }],
  183. type: [{ required: true, message: '请输入券类型', trigger: 'blur' }],
  184. quantity: [
  185. { required: true, message: '请输入券发放数量', trigger: 'blur' },
  186. { pattern: /^([1-9]\d*)$/, message: "请输入正确的数量", trigger: ["blur", "change"] }
  187. ],
  188. discount: [
  189. { required: true, message: '请输入券面值', trigger: 'blur' },
  190. { pattern: /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/, message: "请输入正确的面值,最多两位小数", trigger: ["blur", "change"] }
  191. ],
  192. channelSharedRate: [
  193. { required: true, message: '请输入门店默认承担比例', trigger: 'blur' },
  194. { pattern: /^([0-9]\d*)$/, message: "请输入正确的百分比数字", trigger: ["blur", "change"] }
  195. ],
  196. minOrderAmt: [
  197. { required: true, message: '请输入最低消费金额', trigger: 'blur' },
  198. { pattern: /^(([1-9]\d*)|0)(\.\d{1,2})?$/, message: "请输入正确的金额,最多两位小数", trigger: ["blur", "change"] }
  199. ],
  200. dueDays: [
  201. { required: true, message: '请选择有效期', trigger: 'blur' },
  202. // { pattern: /^([1-9]\d*)$/, message: "请输入正确的数字", trigger: ["blur", "change"] }
  203. ],
  204. description: [{ required: false, message: '请输入使用说明', trigger: 'blur' }],
  205. useArea: [{ required: true, message: '请选择使用范围', trigger: 'blur' }]
  206. }
  207. }
  208. },
  209. created() {
  210. if (this.id) {
  211. getCouponDetail(this.id).then(res => {
  212. const { couponId, title, quantity, discount, channelSharedRate, minOrderAmt, dueDays, description, ticketBoxList, channelList, status } = res.data
  213. this.addData = {
  214. type: JSON.parse(res.data.type).value,
  215. useArea: JSON.parse(res.data.useArea).value,
  216. status: JSON.parse(res.data.status).value,
  217. discount: accDiv(discount, 100),
  218. minOrderAmt: accDiv(minOrderAmt, 100),
  219. couponId, title, quantity, channelSharedRate, dueDays, description, ticketBoxList
  220. }
  221. this.channelList = channelList
  222. })
  223. }
  224. },
  225. methods: {
  226. funSelectShow(){
  227. this.excludeBoxIds = this.addData.ticketBoxList.map(item => { return item.boxId })
  228. this.selectShow = true
  229. },
  230. funChannelShow(){
  231. this.excludeChannelIds = this.channelList.map(item => { return item.channelId })
  232. this.channelShow = true
  233. },
  234. selectTicket(select) {
  235. this.addData.ticketBoxList = this.addData.ticketBoxList.concat(select)
  236. },
  237. channelTicket(select) {
  238. this.channelList = this.channelList.concat(select)
  239. },
  240. update() {
  241. if (this.addData.type == 1) {
  242. if(this.addData.useArea !== 0 && this.addData.useArea !== 1 && this.addData.useArea !== 3 && this.addData.useArea !== 4) {
  243. this.$message({
  244. message: '请选择使用范围!',
  245. type: 'warning'
  246. })
  247. return
  248. }
  249. } else if (this.addData.type == 2) {
  250. if(this.addData.useArea !== 2 && this.addData.useArea !== 0 && this.addData.useArea !== 1 ) {
  251. this.$message({
  252. message: '请选择使用范围!',
  253. type: 'warning'
  254. })
  255. return
  256. }
  257. }
  258. this.$refs.addItem.validate((valid, items) => {
  259. if (valid) {
  260. this.addIng = true
  261. if(this.addData.useArea === 1 && this.addData.type === 1) {
  262. this.addData.boxIds = this.addData.ticketBoxList.map(item => { return item.boxId }).toString()
  263. }
  264. if(this.addData.useArea === 1 && this.addData.type === 2) {
  265. let arr = []
  266. for (let i = 0; i < this.channelList.length; i++) {
  267. arr.push(this.channelList[i].channelId)
  268. }
  269. this.addData.channelIdList = arr
  270. }
  271. const { discount, minOrderAmt, ...rest } = this.addData
  272. addCoupon({...rest, ...{ discount: accMul(discount, 100), minOrderAmt: accMul(minOrderAmt, 100),}}).then(res => {
  273. this.addIng = false
  274. if (res.code === 0) {
  275. this.$message({
  276. message: this.addData.couponId ? '修改成功!' : '添加成功!',
  277. type: 'success'
  278. })
  279. this.$store.dispatch('tagsView/delView', this.$route)
  280. this.$router.go(-1)
  281. }
  282. }).catch(() => {
  283. this.addIng = false
  284. })
  285. } else {
  286. if (items && Object.keys(items).length > 0) {
  287. this.$message({
  288. message: items[Object.keys(items)[0]][0].message,
  289. type: 'warning'
  290. })
  291. }
  292. }
  293. })
  294. }
  295. }
  296. }
  297. </script>
  298. <style lang="scss" scoped>
  299. .tip {
  300. font-size: 12px;
  301. color: #888;
  302. }
  303. </style>