add.vue 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. <template>
  2. <div class="app-container coupon-add">
  3. <br>
  4. <el-row>
  5. <el-col :span="23">
  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">
  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.number="addData.minOrderAmt" :readonly="readonly" type="number" placeholder="请输入可使用的最低消费金额">
  37. <template slot="append">元</template>
  38. </el-input>
  39. <div class="tip">最低消费金额小于等于面值则为无门槛券</div>
  40. </el-form-item>
  41. <el-form-item label="有效期:" prop="dueDays">
  42. <el-input v-model.number="addData.dueDays" :readonly="readonly" placeholder="请输入有效期">
  43. <template slot="prepend">领取之日起</template>
  44. <template slot="append">天有效</template>
  45. </el-input>
  46. </el-form-item>
  47. <el-form-item label="使用说明:" prop="description">
  48. <el-input type="textarea" rows="4" :readonly="readonly" v-model="addData.description" placeholder="请输入使用说明 对用户可见"/>
  49. </el-form-item>
  50. <el-form-item v-if="addData.type === 2" label="使用范围:" prop="useArea">进票门店</el-form-item>
  51. <el-form-item v-else label="使用范围:" prop="useArea">
  52. <el-radio-group v-model="addData.useArea" :disabled="readonly">
  53. <el-radio :label="0">所有盲票</el-radio>
  54. <!-- <el-radio :label="1">指定盲票</el-radio> -->
  55. </el-radio-group>
  56. </el-form-item>
  57. </el-form>
  58. <div v-if="addData.useArea === 1" style="padding: 0 20px">
  59. <el-table :data="addData.ticketBoxList" height="300px">
  60. <el-table-column label="盲票图片" prop="picUrl" align="center" width="80">
  61. <template slot-scope="{row}">
  62. <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>
  63. <span v-else>-</span>
  64. </template>
  65. </el-table-column>
  66. <el-table-column label="盲票名称" prop="title" />
  67. <el-table-column label="盲票面值" prop="facePrice" />
  68. <el-table-column label="盲票类型" prop="type">
  69. <template slot-scope="{row}">
  70. {{ JSON.parse(row.type).desc }}
  71. </template>
  72. </el-table-column>
  73. <el-table-column label="盲票状态" prop="status">
  74. <template slot-scope="{row}">
  75. <el-tag :type="JSON.parse(row.status).value === 'on' ? 'success' : 'info'">{{ JSON.parse(row.status).desc }}</el-tag>
  76. </template>
  77. </el-table-column>
  78. <el-table-column v-if="!readonly" prop="date" label="操作">
  79. <template slot-scope="{ $index }">
  80. <el-button type="text" class="del" @click="addData.ticketBoxList.splice($index, 1)">删除</el-button>
  81. </template>
  82. </el-table-column>
  83. </el-table>
  84. <br>
  85. <el-button v-if="!readonly" type="primary" size="small" plain @click="$refs.select.show()">选择盲票</el-button> <span style="margin-left: 10px">已选盲票({{ addData.ticketBoxList.length }})</span>
  86. </div>
  87. </el-col>
  88. </el-row>
  89. <el-row v-if="!readonly">
  90. <el-col :span="23" style="text-align: right">
  91. <el-button type="info" @click="$router.go(-1)">取消</el-button>
  92. <el-button :loading="addIng" type="primary" @click="update()">保存</el-button>
  93. </el-col>
  94. </el-row>
  95. <!-- 弹出层 -->
  96. <SelectTicket ref="select" v-model="addData.ticketBoxList" />
  97. </div>
  98. </template>
  99. <script>
  100. import Upload from '@/components/ImageUpload'
  101. import SelectTicket from './components/selectTicket'
  102. import { publicFileGetUrl } from "@/api/common"
  103. import { getCouponDetail, addCoupon } from '@/api/business/coupon'
  104. export default {
  105. name: 'CouponAdd',
  106. components: {
  107. Upload,
  108. SelectTicket
  109. },
  110. data() {
  111. return {
  112. IMG_URL: publicFileGetUrl,
  113. id: this.$route.query.id,
  114. readonly: this.$route.name === 'View',
  115. addData: {
  116. ticketBoxList:[],
  117. useArea: 0
  118. },
  119. addIng: false,
  120. rules: {
  121. title: [{ required: true, message: '请输入券名称', trigger: 'blur' }],
  122. type: [{ required: true, message: '请输入券类型', trigger: 'blur' }],
  123. quantity: [
  124. { required: true, message: '请输入券发放数量', trigger: 'blur' },
  125. { pattern: /^([1-9]\d*)$/, message: "请输入正确的数量", trigger: ["blur", "change"] }
  126. ],
  127. discount: [
  128. { required: true, message: '请输入券面值', trigger: 'blur' },
  129. { pattern: /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/, message: "请输入正确的面值,最多两位小数", trigger: ["blur", "change"] }
  130. ],
  131. channelSharedRate: [
  132. { required: true, message: '请输入门店默认承担比例', trigger: 'blur' },
  133. { pattern: /^100$|^(\d|[1-9]\d)(\.\d+)*$/, message: "请输入正确的百分比数字", trigger: ["blur", "change"] }
  134. ],
  135. minOrderAmt: [
  136. { required: true, message: '请输入最低消费金额', trigger: 'blur' },
  137. { pattern: /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/, message: "请输入正确的金额,最多两位小数", trigger: ["blur", "change"] }
  138. ],
  139. dueDays: [
  140. { required: true, message: '请输入有效期', trigger: 'blur' },
  141. { pattern: /^([1-9]\d*)$/, message: "请输入正确的数字", trigger: ["blur", "change"] }
  142. ],
  143. description: [{ required: false, message: '请输入使用说明', trigger: 'blur' }],
  144. useArea: [{ required: true, message: '请选择使用范围', trigger: 'blur' }]
  145. }
  146. }
  147. },
  148. created() {
  149. if (this.id) {
  150. getCouponDetail(this.id).then(res => {
  151. const { couponId, title, quantity, discount, channelSharedRate, minOrderAmt, dueDays, description, ticketBoxList } = res.data
  152. this.addData = {
  153. type: JSON.parse(res.data.type).value,
  154. useArea: JSON.parse(res.data.useArea).value,
  155. couponId, title, quantity, discount, channelSharedRate, minOrderAmt, dueDays, description, ticketBoxList
  156. }
  157. })
  158. }
  159. },
  160. methods: {
  161. update() {
  162. this.$refs.addItem.validate((valid, items) => {
  163. if (valid) {
  164. this.addIng = true
  165. if(this.addData.useArea === 1) {
  166. this.addData.boxIds = this.addData.ticketBoxList.map(item => { return item.boxId }).toString()
  167. }
  168. addCoupon(this.addData).then(res => {
  169. this.addIng = false
  170. if (res.code === 0) {
  171. this.$message({
  172. message: this.addData.couponId ? '修改成功!' : '添加成功!',
  173. type: 'success'
  174. })
  175. this.$router.go(-1)
  176. }
  177. }).catch(() => {
  178. this.addIng = false
  179. })
  180. } else {
  181. if (items && Object.keys(items).length > 0) {
  182. this.$message({
  183. message: items[Object.keys(items)[0]][0].message,
  184. type: 'warning'
  185. })
  186. }
  187. }
  188. })
  189. }
  190. }
  191. }
  192. </script>
  193. <style lang="scss" scoped>
  194. .tip {
  195. font-size: 12px;
  196. color: #888;
  197. }
  198. </style>