VAVABUY/pages/shop/components/couponModel.vue

<template>
  <view class="card_box" :class="isWidth ? 'card_box_max' : ''">
    <up-collapse :border="false" :value="[]">
      <up-collapse-item name="1" :border="false">
        <template #title>
          <view class="collapse_title">
            <trans _t="优惠券" />
          </view>
        </template>
        <template #value>
          <view class="collapse_value" v-if="checkDate">
            -<view class="item_num">{{ symbol.symbol }}</view
            >{{ Moneyhtml(checkDate.money) }}
          </view>
        </template>
        <view class="card_box_item" v-for="(items, index) in item" :key="index">
          <up-checkbox-group
            v-model="radioValue"
            activeColor="var(--black)"
            iconPlacement="right"
            class="card_box_item_check"
            :class="!items.can_use ? 'is-disabled' : ''"
            @change="handleRadioChange"
          >
            <up-checkbox
              :name="items.id"
              shape="circle"
              :disabled="!items.can_use"
            >
              <template #label>
                <view class="card_box_item_left">
                  <view class="amount"
                    >{{ symbol.symbol }}&nbsp;{{ Moneyhtml(items.money) }}</view
                  >
                  <view class="title">{{ items.title }}</view>
                </view>
              </template>
            </up-checkbox>
          </up-checkbox-group>
        </view>
        <trans _t="暂无优惠券" class="none" v-if="!item.length" />
      </up-collapse-item>
    </up-collapse>
  </view>
</template>
<script setup>
import { ref, computed } from "vue";
import { useSystemStore } from "@/store";
import { Toast, Moneyhtml } from "@/utils";

const useSystem = useSystemStore();
const symbol = computed(() => useSystem.getSymbol);
const props = defineProps({
  item: {
    type: Array,
    default: () => [],
  },
  isWidth: {
    type: Boolean,
    default: false,
  },
});
const radioValue = ref([]);
const checkDate = ref(null);

const emit = defineEmits(["change"]);

const handleRadioChange = (id) => {
  radioValue.value = id;
  checkDate.value = id ? props.item.find((item) => item.id === id[0]) : null;
  emit("change", radioValue.value[0], checkDate.value);
};
</script>
<style lang="less" scoped>
@import url("@/style.less");

.card_box {
  width: calc(100% - 60rpx);
  border: 1rpx solid var(--borderColor);
  border-radius: 16rpx;
  box-sizing: border-box;
  &.card_box_max {
    width: 100%;
  }
  .collapse_value {
    color: var(--red);
    font-weight: 700;
    .size();

    .item_num {
      display: inline-block;
      margin-left: 8rpx;
    }
  }

  .card_box_item {
    width: 100%;
    margin-bottom: 22rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .card_box_item_check {
      .hor(space-between);
      width: 100%;
      padding: 16rpx 26rpx;

      // background-color: var(--bg-primary);
      background: radial-gradient(
          circle at 14rpx,
          transparent 14rpx,
          var(--bg-primary) 0
        ) -14rpx;
      border-radius: 12rpx;

      &.is-disabled {
        opacity: 0.5;
      }

      ::v-deep .u-checkbox {
        width: 100%;
      }

      .card_box_item_left {
        height: 80rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .amount {
          .size(32rpx);
          color: var(--red);
          font-weight: 700;
        }

        .title {
          .size(28rpx);
        }
      }
    }
  }

  .none {
    width: 100%;
    color: var(--red);
    text-align: center;
    font-size: 26rpx;
  }
}
</style>