yicangzongtai_app_240321/pages/workbench/order/entering.vue

<template>
  <view class="container-entering">
    <navbar :config="config" backColor="#666666"></navbar>
    <view class="form">
      <u-form :model="form" ref="formRef" label-width="240">
        <u-form-item label="会员手机号：" prop="user_mobile">
          <u-input v-model="form.user_mobile" disabled placeholder="请扫描会员码" />
          <view class="iconfont3 qrCode" @click="screenQR">&#xe739;</view>
        </u-form-item>
        <u-form-item label="会员名称：">
          <u-input v-model="form.user_name" disabled placeholder="请输入会员名称" />
        </u-form-item>
        <u-form-item label="消费金额(￥)：" prop="sales_money">
          <u-input v-model="form.sales_money" placeholder="请输入消费金额" @blur="blurChange" />
        </u-form-item>
        <u-form-item label="打赏比例(%)：" prop="discount_ratio">
          <u-input v-model="form.discount_ratio" placeholder="请输入优惠比例" @blur="blurChange" />
        </u-form-item>
        <u-form-item label="打赏金额：">
          <u-input v-model="form.discount_money" disabled placeholder="打赏金额自动计算带入" />
        </u-form-item>
        <u-form-item label="用户获得贡献值：">
          <u-input v-model="form.give_user_commission_able" disabled placeholder="用户获得贡献值自动计算带入" />
        </u-form-item>
        <u-form-item label="商家获得贡献值：">
          <u-input v-model="form.give_shop_commission_able" disabled placeholder="商家获得贡献值自动计算带入" />
        </u-form-item>
        <u-form-item label="支付方式：" prop="pay_label">
          <u-input v-model="form.pay_label" type="select" placeholder="请选择" @click="payPopup = true" />
        </u-form-item>
        <u-form-item label="订单备注：" label-position="top" class="content-box">
          <u-input v-model="form.remark" border maxlength="600" type="textarea" placeholder="请输入" />
        </u-form-item>
      </u-form>
    </view>
    <view class="jg"></view>
    <view class="user-box" v-if="shop_consume_integral_able != '' || current_integral_able != ''">
      <view class="box">
        <text class="label">商家打赏积分数：</text>
        <text>{{this.shop_consume_integral_able}}</text>
      </view>
      <view class="box">
        <text class="label">可用积分：</text>
        <text>{{this.current_integral_able}}</text>
      </view>
    </view>
    <u-select v-model="payPopup" label-name="name" value-name="id" :list="payList" :default-value="[payIndex]"
      @confirm="payConfirm"></u-select>
    <view class="footer">
      <view class="btn" @click="submitEnter">确认上报</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          back: true,
          title: '订单上报',
          color: '#1A1A1A',
          backgroundColor: [1, "#fff"],
          statusBarFontColor: '#1A1A1A',
          leftSlot: true
        },
        form: {},
        rules: {
          user_mobile: [{
            required: true,
            message: '会员手机号不能为空',
            trigger: ['change', 'blur'],
          }],
          sales_money: [{
            required: true,
            message: '消费金额不能为空',
            trigger: ['change', 'blur'],
          }, {
            validator: (rule, value, callback) => {
              if (!this.scanUserInfo.id) {
                return callback(new Error('请先扫描会员码'));
              }
              if (this.$u.test.chinese(value)) {
                return callback(new Error('请输入数字类型'));
              }
              if (!this.$u.test.amount(value)) {
                return callback(new Error('最多两位小数'));
              }
              callback();
            },
            // message: '最多两位小数',
            trigger: ['change', 'blur'],
          }],
          discount_ratio: [{
            required: true,
            message: '优惠比例不能为空',
            trigger: ['change', 'blur'],
          }, {
            validator: (rule, value, callback) => {
              if (!this.scanUserInfo.id) {
                return callback(new Error('请先扫描会员码'));
              }
              if (!this.form.sales_money) {
                return callback(new Error('请先输入消费金额'));
              }
              if (this.$u.test.chinese(value)) {
                return callback(new Error('请输入数字类型'));
              }
              if (!this.$u.test.range(value, [1, 100])) {
                return callback(new Error('请输入1-100的值'));
              }
              if (!this.$u.test.amount(value)) {
                return callback(new Error('最多两位小数'));
              }
              callback();
            },
            // message: '请输入1-100的值',
            trigger: ['change', 'blur'],
          }],
          pay_label: [{
            required: true,
            message: '请选择支付方式',
            trigger: ['change', 'blur'],
          }],
        },
        payPopup: false,
        payIndex: 0,
        payList: [{
            code: 'WE_CHAT',
            name: '微信',
            id: 0
          },
          {
            code: 'ALIPAY',
            name: '支付宝',
            id: 1
          },
          {
            code: 'MONEY',
            name: '现金',
            id: 2
          },
          {
            code: 'WE_CHAT_MONEY',
            name: '微信+现金',
            id: 3
          },
          {
            code: 'ALIPAY_MONEY',
            name: '支付宝+现金',
            id: 4
          },
          {
            code: 'OTHER',
            name: '其他支付',
            id: 5
          }
        ],
        current_integral_able: '',
        shop_consume_integral_able: '',
        enough_shop_consume: false,
        scanUserInfo: {}
      }
    },
    onLoad() {

    },
    onReady() {
      this.$refs.formRef.setRules(this.rules);
    },
    methods: {
      getTip() {
        if (!this.scanUserInfo.id) {
          return '请先扫描会员码'
        } else {
          return '最多两位小数'
        }
      },
      screenQR() {
        uni.scanCode({
          scanType: ['qrCode'],
          autoDecodeCharset: true,
          success: (res) => {
            if (res.errMsg == 'scanCode:ok') {
              let code = res.result.split('?')[1].split('=')[1]
              this.getScanUserInfo(code)
            }
          }
        });
      },
      payConfirm(e) {
        this.payIndex = e[0].value
        this.form.pay_mode = e[0].value
        this.form.pay_label = e[0].label
      },
      blurChange(e) {
        if (this.form.sales_money && this.form.discount_ratio) {
          this.getEnterInfo()
        }
      },
      // 获取会员信息
      getScanUserInfo(code) {
        this.$http.get('/account/getByCode', {
          code: code
        }).then(res => {
          if (res.code == 200) {
            this.scanUserInfo = res.data
            this.form.user_mobile = res.data.mobile_desensitized
            this.form.user_name = res.data.real_name
            this.$forceUpdate()
          }
        })
      },
      // 获取上报构单信息
      getEnterInfo() {
        this.$http.post('/offlineorder/build', {
          user_id: this.scanUserInfo.id,
          sales_money: this.form.sales_money,
          discount_ratio: this.form.discount_ratio
        }).then(res => {
          if (res.code == 200) {
            this.form.discount_money = res.data.discount_money
            this.form.give_user_commission_able = res.data.give_user_commission_able
            this.form.give_shop_commission_able = res.data.give_shop_commission_able
            this.current_integral_able = res.data.current_integral_able
            this.shop_consume_integral_able = res.data.shop_consume_integral_able
            this.enough_shop_consume = res.data.enough_shop_consume
            this.$forceUpdate()
          }
        })
      },
      // 确认上报
      submitEnter() {
        this.$refs.formRef.validate(valid => {
          if (valid) {
            if (!this.enough_shop_consume) {
              return this.$mUtil.toast('积分不足,无法上报')
            }
            this.$http.post('/offlineorder/create', {
              user_id: this.scanUserInfo.id,
              sales_money: this.form.sales_money,
              discount_ratio: this.form.discount_ratio,
              pay_mode: this.form.pay_mode,
              remark: this.form.remark
            }).then(res => {
              if (res.code == 200) {
                this.$mUtil.toast('上报成功')
                setTimeout(() => {
                  uni.redirectTo({
                    url: '/pages/workbench/order/index'
                  })
                }, 1000)
              }
            })
          } else {
            console.log('验证失败');
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container-entering {
    padding-bottom: 200rpx;

    .form {
      /deep/ .u-form {
        padding: 0 30rpx;

        .u-input {
          text-align: right !important;
        }

        .uni-input-placeholder {
          text-align: right;
        }

        // .u-input__right-icon__item {
        //   display: flex;
        //   align-items: center;
        // }

        // .uicon-arrow-down-fill::before {
        //   width: 32rpx;
        //   height: 32rpx;
        //   content: '';
        //   background: url('@/static/personal/select-icon.png') no-repeat;
        //   background-size: 100% 100%;
        // }
      }

      .qrCode {
        font-size: 50rpx;
      }

      .content-box {
        .u-input {
          text-align: left !important;
        }

        .uni-input-placeholder {
          text-align: left;
        }
      }
    }

    .jg {
      height: 10rpx;
      background: #f5f5f5;
    }

    .user-box {
      padding: 30rpx;
    }

    .box {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #808080;
      margin-bottom: 10rpx;

      .label {
        color: #1A1A1A;
      }
    }

    .footer {
      width: 100%;
      padding: 30rpx 60rpx;
      position: fixed;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;

      .btn {
        width: 100%;
        color: #fff;
        text-align: center;
        line-height: 85rpx;
        border: 1rpx solid #3775F6;
        border-radius: 44rpx;
        background-color: #FA6138;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
      }

      .online-btn {
        color: #FA6138;
        border: 1rpx solid #3775F6;
        background-color: #e7eefc;
      }
    }
  }
</style>