docs(CouponList): use composition api

src/coupon-list/README.md

@@ -18,20 +18,20 @@ app.use(CouponList);
 ```html
 <!-- Coupon Cell -->
 <van-coupon-cell
-  :coupons="coupons"
+  :coupons="state.coupons"
-  :chosen-coupon="chosenCoupon"
+  :chosen-coupon="state.chosenCoupon"
-  @click="showList = true"
+  @click="state.showList = true"
 />
 <!-- Coupon List -->
 <van-popup
-  v-model="showList"
+  v-model="state.showList"
   round
   position="bottom"
   style="height: 90%; padding-top: 4px;"
 >
   <van-coupon-list
-    :coupons="coupons"
+    :coupons="state.coupons"
-    :chosen-coupon="chosenCoupon"
+    :chosen-coupon="state.chosenCoupon"
     :disabled-coupons="disabledCoupons"
     @change="onChange"
     @exchange="onExchange"
@@ -40,6 +40,8 @@ app.use(CouponList);
 ```
 
 ```js
+import { reactive } from 'vue';
+
 const coupon = {
   available: 1,
   originCondition: 0,
@@ -53,22 +55,28 @@ const coupon = {
 };
 
 export default {
-  data() {
+  setup() {
-    return {
+    const state = reactive({
-      chosenCoupon: -1,
       coupons: [coupon],
+      showList: false,
+      chosenCoupon: -1,
+    });
+
+    const onChange = (index) => {
+      state.showList = false;
+      state.chosenCoupon = index;
+    };
+    const onExchange = (code) => {
+      state.coupons.push(coupon);
+    };
+
+    return {
+      state,
+      onChange,
+      onExchange,
       disabledCoupons: [coupon],
     };
   },
-  methods: {
-    onChange(index) {
-      this.showList = false;
-      this.chosenCoupon = index;
-    },
-    onExchange(code) {
-      this.coupons.push(coupon);
-    },
-  },
 };
 ```
 

src/coupon-list/README.zh-CN.md

@@ -18,20 +18,20 @@ app.use(CouponList);
 ```html
 <!-- 优惠券单元格 -->
 <van-coupon-cell
-  :coupons="coupons"
+  :coupons="state.coupons"
-  :chosen-coupon="chosenCoupon"
+  :chosen-coupon="state.chosenCoupon"
-  @click="showList = true"
+  @click="state.showList = true"
 />
 <!-- 优惠券列表 -->
 <van-popup
-  v-model="showList"
+  v-model="state.showList"
   round
   position="bottom"
   style="height: 90%; padding-top: 4px;"
 >
   <van-coupon-list
-    :coupons="coupons"
+    :coupons="state.coupons"
-    :chosen-coupon="chosenCoupon"
+    :chosen-coupon="state.chosenCoupon"
     :disabled-coupons="disabledCoupons"
     @change="onChange"
     @exchange="onExchange"
@@ -40,6 +40,8 @@ app.use(CouponList);
 ```
 
 ```js
+import { reactive } from 'vue';
+
 const coupon = {
   available: 1,
   condition: '无使用门槛\n最多优惠12元',
@@ -53,22 +55,28 @@ const coupon = {
 };
 
 export default {
-  data() {
+  setup() {
-    return {
+    const state = reactive({
-      chosenCoupon: -1,
       coupons: [coupon],
+      showList: false,
+      chosenCoupon: -1,
+    });
+
+    const onChange = (index) => {
+      state.showList = false;
+      state.chosenCoupon = index;
+    };
+    const onExchange = (code) => {
+      state.coupons.push(coupon);
+    };
+
+    return {
+      state,
+      onChange,
+      onExchange,
       disabledCoupons: [coupon],
     };
   },
-  methods: {
-    onChange(index) {
-      this.showList = false;
-      this.chosenCoupon = index;
-    },
-    onExchange(code) {
-      this.coupons.push(coupon);
-    },
-  },
 };
 ```
 

src/coupon-list/demo/index.vue

@@ -9,7 +9,7 @@
       v-model:show="showList"
       round
       position="bottom"
-      style="height: 90%; padding-top: 4px;"
+      style="height: 90%; padding-top: 4px"
     >
       <van-coupon-list
         :coupons="coupons"
@@ -23,103 +23,110 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { computed, reactive, toRefs } from 'vue';
-  i18n: {
+import { useTranslate } from '@demo/use-translate';
-    'zh-CN': {
+import { Coupon } from '../../coupon/shared';
-      coupon: {
+import Toast from '../../toast';
-        name: '优惠券名称',
-        reason: '优惠券不可用原因',
-        description: '描述信息',
-      },
-      exchange: '兑换成功',
-    },
-    'en-US': {
-      coupon: {
-        name: 'Coupon name',
-        reason: 'Coupon unavailable reason',
-        description: 'Description',
-      },
-      exchange: 'Success',
-    },
-  },
 
-  data() {
+const i18n = {
-    return {
+  'zh-CN': {
+    coupon: {
+      name: '优惠券名称',
+      reason: '优惠券不可用原因',
+      description: '描述信息',
+    },
+    exchange: '兑换成功',
+  },
+  'en-US': {
+    coupon: {
+      name: 'Coupon name',
+      reason: 'Coupon unavailable reason',
+      description: 'Description',
+    },
+    exchange: 'Success',
+  },
+};
+
+const getRandomId = (max = 999999) =>
+  String(Math.floor(Math.random() * max) + 1);
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       showList: false,
       chosenCoupon: -1,
-      exchangedCoupons: [],
+      exchangedCoupons: [] as Coupon[],
+    });
+
+    const coupon = computed(() => ({
+      id: 1,
+      condition: '无使用门槛\n最多优惠12元',
+      reason: '',
+      value: 150,
+      name: t('coupon.name'),
+      description: t('coupon.description'),
+      startAt: 1489104000,
+      endAt: 1514592000,
+      valueDesc: '1.5',
+      unitDesc: '元',
+    }));
+
+    const discountCoupon = computed(() => ({
+      ...coupon.value,
+      id: 2,
+      value: 12,
+      valueDesc: '8.8',
+      unitDesc: '折',
+    }));
+
+    const disabledCoupon = computed(() => ({
+      ...coupon.value,
+      id: 3,
+      reason: t('coupon.reason'),
+    }));
+
+    const disabledDiscountCoupon = computed(() => ({
+      ...discountCoupon.value,
+      valueDesc: '1',
+      unitDesc: '折',
+      id: 4,
+      reason: t('coupon.reason'),
+    }));
+
+    const coupons = computed(() => [
+      coupon.value,
+      discountCoupon.value,
+      ...state.exchangedCoupons,
+    ]);
+
+    const disabledCoupons = computed(() => [
+      disabledCoupon.value,
+      disabledDiscountCoupon.value,
+    ]);
+
+    const onChange = (index: number) => {
+      state.showList = false;
+      state.chosenCoupon = index;
     };
-  },
 
-  computed: {
+    const onExchange = () => {
-    coupons() {
+      Toast(t('exchange'));
-      return [this.coupon, this.discountCoupon, ...this.exchangedCoupons];
+      state.exchangedCoupons.push({
-    },
+        ...coupon.value,
-
+        id: getRandomId(),
-    disabledCoupons() {
-      return [this.disabledCoupon, this.disabledDiscountCoupon];
-    },
-
-    coupon() {
-      return {
-        id: 1,
-        condition: '无使用门槛\n最多优惠12元',
-        reason: '',
-        value: 150,
-        name: this.t('coupon.name'),
-        description: this.t('coupon.description'),
-        startAt: 1489104000,
-        endAt: 1514592000,
-        valueDesc: '1.5',
-        unitDesc: '元',
-      };
-    },
-
-    discountCoupon() {
-      return {
-        ...this.coupon,
-        id: 2,
-        value: 12,
-        valueDesc: '8.8',
-        unitDesc: '折',
-      };
-    },
-
-    disabledCoupon() {
-      return {
-        ...this.coupon,
-        id: 3,
-        reason: this.t('coupon.reason'),
-      };
-    },
-
-    disabledDiscountCoupon() {
-      return {
-        ...this.discountCoupon,
-        valueDesc: '1',
-        unitDesc: '折',
-        id: 4,
-        reason: this.t('coupon.reason'),
-      };
-    },
-  },
-
-  methods: {
-    onChange(index) {
-      this.showList = false;
-      this.chosenCoupon = index;
-    },
-    onExchange() {
-      this.$toast(this.t('exchange'));
-      this.exchangedCoupons.push({
-        ...this.coupon,
-        id: this.randomId(),
       });
-    },
+    };
-    randomId(max = 999999) {
+
-      return Math.floor(Math.random() * max) + 1;
+    return {
-    },
+      ...toRefs(state),
+      t,
+      coupons,
+      onChange,
+      onExchange,
+      disabledCoupons,
+    };
   },
 };
 </script>