增强办公

components/x-coupon/╬─╡╡.md

@@ -0,0 +1,110 @@
+# x-coupon 优惠券组件
+
+一个可复用的优惠券展示组件，支持金额券/折扣券、状态展示、按钮插槽、自定义主题色与缺口背景色。
+
+## 引入方式
+
+在页面中手动引入：
+
+```vue
+<script>
+import xCoupon from '@/components/x-coupon/x-coupon.vue'
+
+export default {
+  components: { xCoupon }
+}
+</script>
+```
+
+## 基本用法
+
+```vue
+<template>
+  <view style="padding: 24rpx; background: #f5f5f5;">
+    <x-coupon
+      value="100"
+      condition="满500可用"
+      title="全场通用券"
+      desc="仅限服饰类商品"
+      validity="2026.12.31 到期"
+      @click="onUse"
+    />
+  </view>
+</template>
+
+<script>
+import xCoupon from '@/components/x-coupon/x-coupon.vue'
+
+export default {
+  components: { xCoupon },
+  methods: {
+    onUse() {
+      uni.showToast({ title: '使用优惠券', icon: 'none' })
+    }
+  }
+}
+</script>
+```
+
+## 折扣券
+
+```vue
+<x-coupon
+  type="discount"
+  value="8.5"
+  title="会员专享折扣"
+  condition="无门槛"
+  color="#FF9800"
+/>
+```
+
+## 状态展示
+
+```vue
+<x-coupon value="50" title="新人券" status="used" disabled />
+<x-coupon value="20" title="限时券" status="expired" disabled />
+```
+
+## 自定义按钮（插槽）
+
+```vue
+<x-coupon value="30" title="外卖券">
+  <template #action>
+    <view style="padding: 8rpx 22rpx; border-radius: 999rpx; background: #111; color: #fff; font-size: 24rpx;">
+      去使用
+    </view>
+  </template>
+</x-coupon>
+```
+
+## Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| type | 券类型：`money` 金额券 / `discount` 折扣券 | String | `money` |
+| value | 面值（金额或折扣值） | Number \| String | 必填 |
+| currency | 金额币种符号（仅 `money` 时展示） | String | `¥` |
+| condition | 使用条件文案 | String | `''` |
+| title | 标题 | String | `优惠券` |
+| desc | 描述文案 | String | `''` |
+| validity | 有效期文案 | String | `''` |
+| color | 左侧主题色（也用于默认按钮色） | String | `#ff5a5f` |
+| backgroundColor | 卡券背景色 | String | `#ffffff` |
+| cutoutColor | 缺口圆背景色（通常传页面背景色；需要透明可传 `transparent`） | String | `#f5f5f5` |
+| disabled | 是否禁用点击（禁用时不会触发 click） | Boolean | `false` |
+| status | 状态：`available` / `used` / `expired` | String | `available` |
+| btnText | 默认按钮文字（未使用 action 插槽时） | String | `立即使用` |
+| showBtn | 是否显示默认按钮 | Boolean | `true` |
+
+## Events
+
+| 事件 | 说明 | 回调参数 |
+| --- | --- | --- |
+| click | 点击卡券（仅 `status=available` 且未禁用时触发） | 无 |
+
+## Slots
+
+| 名称 | 说明 |
+| --- | --- |
+| action | 右侧操作区域插槽（自定义按钮/图标等） |
+