123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151 |
- <template>
- <view class="buyBundle-wrap">
- <u-form :model="form" ref="uForms" :label-width="165" label-align="right">
- <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-item required label="客户手机:" prop="custMobile">
- <u-input v-model="form.custMobile" @input="mobileInput" focus type="number" 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>
- <view class="footer-con">
- <u-button class="submit-btn" type="primary" hover-class="none" :custom-style="customBtnStyle" @click="onSubmit">确认收款</u-button>
- <text class="des">提示:请确认在线下实际收到款后再点击【确认收款】。</text>
- </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 {
- customBtnStyle: { // 自定义按钮样式
- borderColor: '#e84131',
- backgroundColor: '#e84131',
- color: '#fff'
- },
- form: {
- custMobile: '', // 手机号
- custName: '' // 客户姓名
- },
- rules: {
- custMobile: [
- { required: true, message: '请输入客户手机', trigger: ['blur'] },
- { validator: isMobileValid, trigger: ['blur'] }
- ]
- },
- 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) {
- uni.showToast({ icon:'none', title: '收款成功' })
- setTimeout(()=>{
- // 套餐销售记录
- uni.switchTab({
- url: '/pages/index/index'
- })
- }, 1000)
- }
- });
- } 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{
- display: block;
- color: #909399;
- font-size: 24rpx;
- text-align: center;
- padding-top: 40rpx;
- }
- .submit-btn{
- display: block;
- width: 80%;
- margin: 140rpx auto 0;
- }
- }
- }
- </style>
|