buyBundle.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <template>
  2. <view class="buyBundle-wrap">
  3. <u-form :model="form" ref="uForms" :label-width="165" label-align="right">
  4. <u-form-item label="应收金额:" prop="totalAmount">
  5. <text class="price">{{ totalAmount }}</text>
  6. </u-form-item>
  7. <u-form-item label="收款方式:" prop="payType">现金</u-form-item>
  8. <u-form-item required label="客户手机:" prop="custMobile">
  9. <u-input v-model="form.custMobile" @input="mobileInput" focus type="number" maxlength="11" placeholder="请输入客户手机" />
  10. </u-form-item>
  11. <u-form-item label="客户姓名:" prop="custName">
  12. <u-input v-model="form.custName" maxlength="30" placeholder="请输入客户姓名(最多30个字符)" />
  13. </u-form-item>
  14. </u-form>
  15. <view class="footer-con">
  16. <u-button class="submit-btn" type="primary" hover-class="none" :custom-style="customBtnStyle" @click="onSubmit">确认收款</u-button>
  17. <text class="des">提示:请确认在线下实际收到款后再点击【确认收款】。</text>
  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. customBtnStyle: { // 自定义按钮样式
  40. borderColor: '#e84131',
  41. backgroundColor: '#e84131',
  42. color: '#fff'
  43. },
  44. form: {
  45. custMobile: '', // 手机号
  46. custName: '' // 客户姓名
  47. },
  48. rules: {
  49. custMobile: [
  50. { required: true, message: '请输入客户手机', trigger: ['blur'] },
  51. { validator: isMobileValid, trigger: ['blur'] }
  52. ]
  53. },
  54. bundleId: '', // 套餐id
  55. totalAmount: '', // 应收金额
  56. custId: '' // 客户id
  57. };
  58. },
  59. onLoad(option) {
  60. this.bundleId = option.bundleId
  61. this.totalAmount = option.totalAmount
  62. },
  63. methods: {
  64. // 手机号输入监听
  65. mobileInput() {
  66. if (this.form.custMobile.length == 11) {
  67. if (isvalidPhone(this.form.custMobile)) {
  68. // 校验手机号
  69. // 根据手机号去查询是否已绑定车牌
  70. bundleFindByMobile({ mobile: this.form.custMobile }).then(res => {
  71. if (res.status == 200) {
  72. if (res.data) {
  73. // 查到客户信息
  74. this.custId = res.data.id;
  75. } else {
  76. // 未查到客户信息
  77. this.custId = null;
  78. }
  79. } else {
  80. this.custId = null;
  81. }
  82. });
  83. }
  84. }
  85. },
  86. // 确认收款
  87. onSubmit() {
  88. this.$refs.uForms.validate(valid => {
  89. if (valid) {
  90. const params = {
  91. bundleId: this.bundleId,
  92. custId: this.custId,
  93. custName: this.form.custName,
  94. custMobile: this.form.custMobile,
  95. totalAmount: this.totalAmount,
  96. paymentDetail: { payType: 10001 }
  97. }
  98. bundleBuy(params).then(res => {
  99. if (res.status == 200) {
  100. uni.showToast({ icon:'none', title: '收款成功' })
  101. setTimeout(()=>{
  102. // 套餐销售记录
  103. uni.switchTab({
  104. url: '/pages/index/index'
  105. })
  106. }, 1000)
  107. }
  108. });
  109. } else {
  110. return false
  111. }
  112. })
  113. }
  114. },
  115. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  116. onReady() {
  117. this.$refs.uForms.setRules(this.rules)
  118. }
  119. };
  120. </script>
  121. <style lang="less">
  122. .buyBundle-wrap {
  123. width: 100%;
  124. padding: 0 30rpx;
  125. box-sizing: border-box;
  126. background-color: #fff;
  127. .price {
  128. font-size: 40rpx;
  129. margin-right: 10rpx;
  130. color: red;
  131. }
  132. .footer-con{
  133. margin-top: 30rpx;
  134. .des{
  135. display: block;
  136. color: #909399;
  137. font-size: 24rpx;
  138. text-align: center;
  139. padding-top: 40rpx;
  140. }
  141. .submit-btn{
  142. display: block;
  143. width: 80%;
  144. margin: 140rpx auto 0;
  145. }
  146. }
  147. }
  148. </style>