ch-tgr/src/views/User/Checkout/Checkout.vue

<template>
  <BasePage>
    <div class="checkout" v-if="data.shop && data.shop.shopname">
      <div class="shopinfo">
        <img class="icon" :src="$file(data.shop.shopimg)" alt="">

        <div class="inf">
          <b>{{ data.shop.shopname }}</b>
          <div class="hl">
            <img src="/img/buybill.png" alt="">
            <span>{{ data.shop.feeratio }}%</span>
          </div>
        </div>
      </div>

      <div class="paynums_box">
        <b class="tit">
          买单金额
        </b>

        <div class="input_box">
          ¥<input type="number" v-model="req.ordermoney" placeholder="请输入买单金额" @input="calcDeduction">
        </div>
      </div>

      <div class="deduction_box">
        <van-radio-group v-model="checked">
          <van-cell-group inset center>
            <van-cell center title="积分抵扣" icon="/img/point_icon.png">
              <template #right-icon>
                <span class="cantuse" v-if="!data.user.xiaofeijifen || data.user.xiaofeijifen <= 0">暂无可用</span>
                <span class="canuse" v-else-if="checked !== '1'">{{ data.user.xiaofeijifen?.toFixed(2) }}可用</span>
                <span class="use" v-else>-{{ jifenDeduction.toFixed(2) }}</span>
                <van-radio name="1" @click="toggleDeduction('jifen')"
                  :disabled="!data.user.xiaofeijifen || data.user.xiaofeijifen <= 0" />
              </template>
            </van-cell>
            <van-cell title="会员卡抵扣" icon="/img/vip_icon.png">
              <template #right-icon>
                <span class="cantuse" v-if="!data.user.xiaofeiquan || data.user.xiaofeiquan <= 0">暂无可用</span>
                <span class="canuse" v-else-if="checked !== '2'">{{ data.user.xiaofeiquan?.toFixed(2) }}可用</span>
                <span class="use" v-else>-{{ quanDeduction.toFixed(2) }}</span>
                <van-radio name="2" @click="toggleDeduction('quan')"
                  :disabled="!data.user.xiaofeiquan || data.user.xiaofeiquan <= 0" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>


        <div class="price">
          <p>
            实付
          </p>
          <span>￥<b>{{ actualPay.toFixed(2) }}</b></span>
        </div>
      </div>

      <button class="payfor" @click="toPay">
        去支付
      </button>
    </div>
  </BasePage>
</template>

<script>
export default {
  data() {
    return {
      checked: '',
      id: this.$route.query.id,
      data: {
        user: {},
        shop: {}
      },
      req: {
        ordermoney: '',
        "isjifen": false,
        "ishuiyuanka": false,
        "shopuserid": ''
      },
      jifenDeduction: 0,
      quanDeduction: 0
    }
  },
  computed: {
    actualPay() {
      let pay = this.req.ordermoney || 0;
      if (this.checked === '1') {
        pay -= this.jifenDeduction;
      } else if (this.checked === '2') {
        pay -= this.quanDeduction;
      }
      return Math.max(0, pay);
    }
  },
  mounted() {
    this.getShopInfo();
  },
  methods: {
    getShopInfo() {
      this.$get('/v1/client/DUsersClient').then(res => {
        this.data.user = res.data;
      })
      if (this.id)
        this.$get(`/v1/client/DShopsClient/${this.id}`).then(res => {
          console.log(res);
          this.data.shop = res.data;
          this.req.shopuserid = res.data.userid;
        })
    },
    toggleDeduction(type) {
      if (type === 'jifen') {
        if (!this.data.user.xiaofeijifen || this.data.user.xiaofeijifen <= 0) return;
        this.checked = '1'
        this.req.isjifen = this.checked === '1';
        this.req.ishuiyuanka = false;
      } else if (type === 'quan') {
        if (!this.data.user.xiaofeiquan || this.data.user.xiaofeiquan <= 0) return;
        this.checked = '2';
        this.req.ishuiyuanka = this.checked === '2';
        this.req.isjifen = false;
      }
    },
    calcDeduction() {
      const money = this.req.ordermoney || 0;
      // 积分可抵扣值最大为买单金额的20%的50% = 买单金额 * 10%
      this.jifenDeduction = Math.min(money * 0.1, this.data.user.xiaofeijifen || 0);
      // 会员卡余额最高是买单金额的20%的40% = 买单金额 * 8%
      this.quanDeduction = Math.min(money * 0.08, this.data.user.xiaofeiquan || 0);
    },
    toPay() {
      this.req.isjifen = this.checked === '1';
      this.req.ishuiyuanka = this.checked === '2';
      this.$post('/v1/client/FOrdersshopClient', this.req).then(res => {
        this.$navigate(`Pay?ordernum=${res.data}`)
      })
    }
  }
}
</script>