更新记录

1.0.0（2025-04-14） 下载此版本

第一次提交

平台兼容性

  <view class="container">
    <!-- 基本用法 -->
    <coupon-list />

    <!-- 自定义数据 -->
    <coupon-list 
      :coupon-list="myCoupons" 
      title="可用优惠券"
      @coupon-click="onCouponClick"
      @btn-click="onBtnClick"
    />
  </view>
</template>

<script>
import couponList from '@/components/coupon-list/coupon-list';

export default {
  components: {
    couponList
  },
  data() {
    return {
      myCoupons: [
        {
          id: 3,
          type: 'freight',
          value: '免邮',
          unit: '',
          typeText: '运费券',
          title: '全场免邮券',
          desc: '无门槛使用，全国包邮',
          startTime: '2023-10-01',
          endTime: '2023-10-31',
          status: 'valid'
        },
        {
          id: 4,
          type: 'discount',
          value: 9,
          unit: '折',
          typeText: '折扣券',
          title: '家电9折券',
          desc: '仅限家电类商品使用',
          startTime: '2023-09-01',
          endTime: '2023-09-30',
          status: 'expired'
        }
      ]
    }
  },
  methods: {
    onCouponClick(item) {
      console.log('点击优惠券', item);
      uni.showToast({
        title: `点击了${item.title}`,
        icon: 'none'
      });
    },
    onBtnClick(item) {
      console.log('点击使用按钮', item);
      uni.showModal({
        title: '使用优惠券',
        content: `确定要使用${item.title}吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '使用成功',
              icon: 'success'
            });
          }
        }
      });
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}
</style>```