用vue3和element-plus写一个优惠劵组件，优惠劵颜色是橙色，领取一次就不能领取

好的，以下是一个简单的优惠券组件示例：

<template>
  <div class="coupon" :class="{ 'disabled': disabled }" @click="handleClick">
    <div class="coupon-header">
      <div class="coupon-title">{{ title }}</div>
      <div class="coupon-subtitle">{{ subtitle }}</div>
    </div>
    <div class="coupon-content">
      <div class="coupon-amount">{{ amount }}</div>
      <div class="coupon-desc">{{ desc }}</div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'Coupon',
  props: {
    title: String,
    subtitle: String,
    amount: String,
    desc: String,
    disabled: Boolean,
  },
  setup(props) {
    const isDisabled = ref(props.disabled);

    const handleClick = () => {
      if (!isDisabled.value) {
        isDisabled.value = true;
        // 点击后触发领取优惠券的逻辑
        console.log('领取优惠券');
      }
    };

    return {
      isDisabled,
      handleClick,
    };
  },
};
</script>

<style scoped>
.coupon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 100px;
  background-color: orange;
  color: white;
  cursor: pointer;
}

.coupon.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.coupon-header {
  margin-bottom: 10px;
  text-align: center;
}

.coupon-title {
  font-size: 18px;
  font-weight: bold;
}

.coupon-subtitle {
  font-size: 12px;
}

.coupon-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.coupon-amount {
  font-size: 24px;
  font-weight: bold;
}

.coupon-desc {
  font-size: 12px;
}
</style>

使用示例：

<template>
  <div class="coupon-container">
    <Coupon
      v-for="coupon in coupons"
      :key="coupon.id"
      :title="coupon.title"
      :subtitle="coupon.subtitle"
      :amount="coupon.amount"
      :desc="coupon.desc"
      :disabled="coupon.disabled"
    />
  </div>
</template>

<script>
import Coupon from '@/components/Coupon.vue';

export default {
  name: 'CouponDemo',
  components: {
    Coupon,
  },
  data() {
    return {
      coupons: [
        {
          id: 1,
          title: '优惠券 1',
          subtitle: '满 100 减 10',
          amount: '¥10',
          desc: '全场通用',
          disabled: false,
        },
        {
          id: 2,
          title: '优惠券 2',
          subtitle: '满 200 减 20',
          amount: '¥20',
          desc: '限定商品可用',
          disabled: true,
        },
      ],
    };
  },
};
</script>

<style scoped>
.coupon-container {
  display: flex;
  justify-content: space-between;
}
</style>

在上面的代码中，我们定义了一个 `Coupon` 组件，它接受四个属性：`title`，`subtitle`，`amount` 和 `desc`，以及一个可选的 `disabled` 属性。如果 `disabled` 属性为 `true`，则表示这个优惠券已经被领取过了，不能再次领取。

在 `setup` 函数中，我们使用了 `ref` 来创建了一个名为 `isDisabled` 的响应式变量，它的值与父组件传递过来的 `disabled` 属性值相同。然后我们定义了一个 `handleClick` 函数，当优惠券被点击时会调用它。如果 `isDisabled` 的值为 `false`，则表示这个优惠券可以被领取，我们将 `isDisabled` 的值设为 `true`，表示这个优惠券已经被领取过了。同时还可以在 `handleClick` 函数中触发领取优惠券的逻辑，这里只是简单地打印了一条信息。

在模板中，我们使用了 `:class` 绑定来动态地设置优惠券的样式。如果 `isDisabled` 的值为 `true`，则添加一个 `disabled` 类名，使得优惠券变得半透明，并且鼠标指针变成不可用状态。

最后，在父组件中，我们使用 `v-for` 指令来遍历 `coupons` 数组，并渲染多个 `Coupon` 组件。注意要为每个优惠券设置一个唯一的 `key` 属性，以便 Vue 进行性能优化。