<template>
  <BasePage>
    <div class="checkout">
      <div class="shopinfo">
        <img class="icon" :src="$file()" alt="">

        <div class="inf">
          <b>完美日记旗舰店</b>
          <div class="hl">
            <img src="/img/buybill.png" alt="">
            <span>20%</span>
          </div>
        </div>
      </div>

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

        <div class="input_box">
          ¥<input type="number" placeholder="请输入买单金额">
        </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" clickable @click="checked = '1'">
              <template #right-icon>
                <span class="canuse">25000.00可用</span>
                <span class="cantuse">暂无可用</span>
                <span v-if="checked === '1'" class="use">-500.00</span>
                <van-radio name="1" />
              </template>
            </van-cell>
            <van-cell title="会员卡抵扣" icon="/img/vip_icon.png" clickable @click="checked = '2'">
              <template #right-icon>
                <span class="canuse">25000.00可用</span>
                <span class="cantuse">暂无可用</span>
                <span v-if="checked === '2'" class="use">-500.00</span>
                <van-radio name="2" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>


        <div class="price">
          <p>
            实付
          </p>
          <span>￥<b>500.00</b></span>
        </div>
      </div>

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

<script>
export default {
  data() {
    return {
      checked: '1',
    }
  }
}
</script>