buyBundle.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <template>
  2. <view class="buyBundle-wrap">
  3. <u-form :model="form" ref="uForms" :label-width="165">
  4. <u-form-item required label="手机号:" prop="custMobile">
  5. <u-input v-model="form.custMobile" @input="mobileInput" maxlength="11" placeholder="请输入手机号" />
  6. </u-form-item>
  7. <u-form-item label="客户姓名:" prop="custName">
  8. <u-input v-model="form.custName" maxlength="30" placeholder="请输入客户姓名(最多30个字符)" />
  9. </u-form-item>
  10. <u-form-item label="应收金额:" prop="totalAmount">
  11. <text class="price">{{ totalAmount }}</text>
  12. </u-form-item>
  13. <u-form-item label="收款方式:" prop="payType">现金</u-form-item>
  14. </u-form>
  15. <view class="footer-con">
  16. <text class="des">重要提示:请确认在线下实际收到款后再点击【确认收款】!</text>
  17. <u-button class="submit-btn" type="primary" @click="onSubmit">确认收款</u-button>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. import { isvalidPhone } from '@/libs/validate';
  23. import { bundleFindByMobile, bundleBuy } from '@/api/customerBundle';
  24. export default {
  25. data() {
  26. // 校验手机号
  27. const isMobileValid = (rule, value, callback) => {
  28. if (!value) {
  29. callback(new Error('请输入手机号'));
  30. } else {
  31. if (!isvalidPhone(value)) {
  32. callback(new Error('请输入正确的手机号'));
  33. } else {
  34. callback();
  35. }
  36. }
  37. };
  38. return {
  39. form: {
  40. custMobile: '', // 手机号
  41. custName: '' // 客户姓名
  42. },
  43. rules: {
  44. custMobile: [
  45. { required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
  46. { validator: isMobileValid, trigger: ['blur', 'change'] }
  47. ]
  48. },
  49. bundleId: '', // 套餐id
  50. totalAmount: '', // 应收金额
  51. custId: '' // 客户id
  52. };
  53. },
  54. onLoad(option) {
  55. this.bundleId = option.bundleId
  56. this.totalAmount = option.totalAmount
  57. },
  58. methods: {
  59. // 手机号输入监听
  60. mobileInput() {
  61. if (this.form.custMobile.length == 11) {
  62. if (isvalidPhone(this.form.custMobile)) {
  63. // 校验手机号
  64. // 根据手机号去查询是否已绑定车牌
  65. bundleFindByMobile({ mobile: this.form.custMobile }).then(res => {
  66. if (res.status == 200) {
  67. if (res.data) {
  68. // 查到客户信息
  69. this.custId = res.data.id;
  70. } else {
  71. // 未查到客户信息
  72. this.custId = null;
  73. }
  74. } else {
  75. this.custId = null;
  76. }
  77. });
  78. }
  79. }
  80. },
  81. // 确认收款
  82. onSubmit() {
  83. this.$refs.uForms.validate(valid => {
  84. if (valid) {
  85. const params = {
  86. bundleId: this.bundleId,
  87. custId: this.custId,
  88. custName: this.form.custName,
  89. custMobile: this.form.custMobile,
  90. totalAmount: this.totalAmount,
  91. paymentDetail: { payType: 10001 }
  92. }
  93. bundleBuy(params).then(res => {
  94. if (res.status == 200) {
  95. // 已购套餐
  96. if (this.$hasPermissions('M_bundel_buyRecord')) {
  97. // this.$router.push({ path: '/SetmealSales/PurchasedSetmeal' })
  98. } else {
  99. this.cancel()
  100. }
  101. }
  102. });
  103. } else {
  104. return false
  105. }
  106. })
  107. }
  108. },
  109. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  110. onReady() {
  111. this.$refs.uForms.setRules(this.rules)
  112. }
  113. };
  114. </script>
  115. <style lang="less">
  116. .buyBundle-wrap {
  117. width: 100%;
  118. padding: 0 30rpx;
  119. box-sizing: border-box;
  120. background-color: #fff;
  121. .price {
  122. font-size: 40rpx;
  123. margin-right: 10rpx;
  124. color: red;
  125. }
  126. .footer-con{
  127. margin-top: 30rpx;
  128. .des{
  129. color: #909399;
  130. font-size: 24rpx;
  131. }
  132. .submit-btn{
  133. display: block;
  134. width: 80%;
  135. margin: 140rpx auto 0;
  136. }
  137. }
  138. }
  139. </style>