SetmealPayMoney.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. <template>
  2. <a-modal
  3. class="setmealPayMoneyModal"
  4. title="套餐收款"
  5. width="60%"
  6. :footer="null"
  7. :destroyOnClose="true"
  8. @cancel="isShow=false"
  9. v-model="isShow">
  10. <!-- 表单 -->
  11. <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
  12. <a-form-model-item label="手机号" prop="custMobile">
  13. <a-input v-model.trim="form.custMobile" @input="mobileInput" :maxLength="11" placeholder="支持新增和搜索" />
  14. </a-form-model-item>
  15. <a-form-model-item label="车牌号" prop="vehicleNumber">
  16. <a-input v-model.trim="form.vehicleNumber" :maxLength="8" placeholder="请输入车牌号(最多8个字符)" />
  17. </a-form-model-item>
  18. <a-form-model-item label="客户姓名" prop="custName">
  19. <a-input v-model.trim="form.custName" :maxLength="30" placeholder="请输入客户姓名(最多30个字符)" />
  20. </a-form-model-item>
  21. <a-form-model-item label="应收金额" class="item-con">
  22. <p class="item-main"><span class="item-price" v-if="setmealData">{{ setmealData.price || 0 }}</span>元</p>
  23. </a-form-model-item>
  24. <a-form-model-item label="收款方式" class="item-con">
  25. <p class="item-main">现金</p>
  26. </a-form-model-item>
  27. <a-form-model-item label="" class="btn-cont" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
  28. <a-button type="primary" id="setmealPayMoney-submit" @click="onSubmit">确认收款</a-button>
  29. <a-button id="setmealPayMoney-cancel" class="setmealPayMoney-cancel" @click="cancel">取消</a-button>
  30. </a-form-model-item>
  31. <p class="text-center">重要提示:请确认在线下实际收到款后再点击【确认收款】!</p>
  32. </a-form-model>
  33. </a-modal>
  34. </template>
  35. <script>
  36. import { isLicensePlate, isMobile } from '@/libs/tools'
  37. import { bundleFindByMobile, bundleBuy } from '@/api/customerBundle.js'
  38. export default {
  39. name: 'SetmealPayMoney',
  40. props: {
  41. openModal: {
  42. // 弹框是否展示
  43. type: Boolean,
  44. default: false
  45. },
  46. setmealInfo: {
  47. // 套餐信息
  48. type: Object,
  49. default: () => {
  50. return {}
  51. }
  52. }
  53. },
  54. data () {
  55. // 校验手机号
  56. const isMobileValid = (rule, value, callback) => {
  57. if (!value) {
  58. callback(new Error('请输入手机号'))
  59. } else {
  60. if (!isMobile(value)) {
  61. callback(new Error('请输入正确的手机号'))
  62. } else {
  63. callback()
  64. }
  65. }
  66. }
  67. // 校验车牌号
  68. const isLicensePlateValid = (rule, value, callback) => {
  69. if (!value) {
  70. callback(new Error('请输入车牌号'))
  71. } else {
  72. if (!isLicensePlate(value)) {
  73. callback(new Error('请输入正确的车牌号'))
  74. } else {
  75. callback()
  76. }
  77. }
  78. }
  79. return {
  80. isShow: this.openModal, // 弹框是否展示
  81. form: {
  82. custMobile: '',
  83. vehicleNumber: '',
  84. custName: '',
  85. custId: null
  86. },
  87. rules: {
  88. custMobile: [
  89. { required: true, message: '请输入手机号', trigger: 'blur' },
  90. { validator: isMobileValid, trigger: 'blur' }
  91. ],
  92. vehicleNumber: [
  93. { required: true, message: '请输入车牌号', trigger: 'blur' },
  94. { validator: isLicensePlateValid, trigger: 'blur' }
  95. ]
  96. },
  97. setmealData: null // 套餐数据
  98. }
  99. },
  100. methods: {
  101. // 手机号输入监听
  102. mobileInput () {
  103. if (this.form.custMobile.length == 11) {
  104. if (isMobile(this.form.custMobile)) { // 校验手机号
  105. // 根据手机号去查询是否已绑定车牌
  106. bundleFindByMobile({ mobile: this.form.custMobile }).then(res => {
  107. if (res.status == 200) {
  108. if (res.data) { // 查到客户信息
  109. this.form.vehicleNumber = ''
  110. this.form.custName = res.data.name
  111. this.form.custId = res.data.id
  112. } else { // 未查到客户信息
  113. this.form.vehicleNumber = ''
  114. this.form.custName = ''
  115. this.form.custId = null
  116. }
  117. } else {
  118. this.form.vehicleNumber = ''
  119. this.form.custName = ''
  120. this.form.custId = null
  121. }
  122. })
  123. }
  124. }
  125. },
  126. // 确认收款
  127. onSubmit () {
  128. this.$refs.ruleForm.validate(valid => {
  129. if (valid) {
  130. const params = {
  131. bundleId: this.setmealData.id,
  132. orderBundle: {
  133. bundleId: this.setmealData.id,
  134. custId: this.form.custId,
  135. custName: this.form.custName,
  136. custMobile: this.form.custMobile,
  137. vehicleNumber: this.form.vehicleNumber,
  138. totalAmount: this.setmealData.price
  139. },
  140. paymentDetailList: [
  141. { payType: 10001 }
  142. ]
  143. }
  144. bundleBuy(params).then(res => {
  145. if (res.status == 200) {
  146. this.$emit('close')
  147. }
  148. })
  149. } else {
  150. console.log('error submit!!')
  151. return false
  152. }
  153. })
  154. },
  155. // 取消收款
  156. cancel () {
  157. this.resetForm() // 重置表单数据
  158. this.isShow = false
  159. },
  160. // 重置表单
  161. resetForm () {
  162. this.form.custMobile = ''
  163. this.form.vehicleNumber = ''
  164. this.form.custName = ''
  165. this.form.custId = null
  166. }
  167. },
  168. watch: {
  169. // 父页面传过来的弹框状态
  170. openModal (newValue, oldValue) {
  171. this.isShow = newValue
  172. },
  173. // 重定义的弹框状态
  174. isShow (val) {
  175. if (!val) {
  176. this.$emit('close')
  177. } else {
  178. this.resetForm() // 重置表单数据
  179. }
  180. },
  181. setmealInfo (newValue, oldValue) {
  182. if (newValue && this.isShow) {
  183. this.setmealData = newValue
  184. } else {
  185. this.setmealData = null
  186. }
  187. }
  188. }
  189. }
  190. </script>
  191. <style lang="less">
  192. .setmealPayMoneyModal{
  193. .item-con{
  194. .item-main{
  195. margin: 0;
  196. .item-price{
  197. font-size: 24px;
  198. color: red;
  199. margin-right: 5px;
  200. }
  201. }
  202. }
  203. .btn-cont{
  204. text-align: center;
  205. .setmealPayMoney-cancel{
  206. margin-left: 30px;
  207. }
  208. }
  209. .text-center{
  210. text-align: center;
  211. }
  212. }
  213. </style>