123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- <template>
- <view class="buyBundle-wrap">
- <u-form :model="form" ref="uForms" :label-width="165">
- <u-form-item required label="手机号:" prop="custMobile">
- <u-input v-model="form.custMobile" @input="mobileInput" maxlength="11" placeholder="请输入手机号" />
- </u-form-item>
- <u-form-item label="客户姓名:" prop="custName">
- <u-input v-model="form.custName" maxlength="30" placeholder="请输入客户姓名(最多30个字符)" />
- </u-form-item>
- <u-form-item label="应收金额:" prop="totalAmount">
- <text class="price">{{ totalAmount }}</text>
- 元
- </u-form-item>
- <u-form-item label="收款方式:" prop="payType">现金</u-form-item>
- </u-form>
- <view class="footer-con">
- <text class="des">重要提示:请确认在线下实际收到款后再点击【确认收款】!</text>
- <u-button class="submit-btn" type="primary" @click="onSubmit">确认收款</u-button>
- </view>
- </view>
- </template>
- <script>
- import { isvalidPhone } from '@/libs/validate';
- import { bundleFindByMobile, bundleBuy } from '@/api/customerBundle';
- export default {
- data() {
- // 校验手机号
- const isMobileValid = (rule, value, callback) => {
- if (!value) {
- callback(new Error('请输入手机号'));
- } else {
- if (!isvalidPhone(value)) {
- callback(new Error('请输入正确的手机号'));
- } else {
- callback();
- }
- }
- };
- return {
- form: {
- custMobile: '', // 手机号
- custName: '' // 客户姓名
- },
- rules: {
- custMobile: [
- { required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
- { validator: isMobileValid, trigger: ['blur', 'change'] }
- ]
- },
- bundleId: '', // 套餐id
- totalAmount: '', // 应收金额
- custId: '' // 客户id
- };
- },
- onLoad(option) {
- this.bundleId = option.bundleId
- this.totalAmount = option.totalAmount
- },
- methods: {
- // 手机号输入监听
- mobileInput() {
- if (this.form.custMobile.length == 11) {
- if (isvalidPhone(this.form.custMobile)) {
- // 校验手机号
- // 根据手机号去查询是否已绑定车牌
- bundleFindByMobile({ mobile: this.form.custMobile }).then(res => {
- if (res.status == 200) {
- if (res.data) {
- // 查到客户信息
- this.custId = res.data.id;
- } else {
- // 未查到客户信息
- this.custId = null;
- }
- } else {
- this.custId = null;
- }
- });
- }
- }
- },
- // 确认收款
- onSubmit() {
- this.$refs.uForms.validate(valid => {
- if (valid) {
- const params = {
- bundleId: this.bundleId,
- custId: this.custId,
- custName: this.form.custName,
- custMobile: this.form.custMobile,
- totalAmount: this.totalAmount,
- paymentDetail: { payType: 10001 }
- }
- bundleBuy(params).then(res => {
- if (res.status == 200) {
- // 已购套餐
- if (this.$hasPermissions('M_bundel_buyRecord')) {
- // this.$router.push({ path: '/SetmealSales/PurchasedSetmeal' })
- } else {
- this.cancel()
- }
- }
- });
- } else {
- return false
- }
- })
- }
- },
- // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
- onReady() {
- this.$refs.uForms.setRules(this.rules)
- }
- };
- </script>
- <style lang="less">
- .buyBundle-wrap {
- width: 100%;
- padding: 0 30rpx;
- box-sizing: border-box;
- background-color: #fff;
- .price {
- font-size: 40rpx;
- margin-right: 10rpx;
- color: red;
- }
- .footer-con{
- margin-top: 30rpx;
- .des{
- color: #909399;
- font-size: 24rpx;
- }
- .submit-btn{
- display: block;
- width: 80%;
- margin: 140rpx auto 0;
- }
- }
- }
- </style>
|