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,9 +23,13 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { computed, reactive, toRefs } from 'vue';
-  i18n: {
+import { useTranslate } from '@demo/use-translate';
+import { Coupon } from '../../coupon/shared';
+import Toast from '../../toast';
+
+const i18n = {
   'zh-CN': {
     coupon: {
       name: '优惠券名称',
@@ -42,84 +46,87 @@ export default {
     },
     exchange: 'Success',
   },
-  },
+};
 
-  data() {
+const getRandomId = (max = 999999) =>
-    return {
+  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[],
-    };
+    });
-  },
 
-  computed: {
+    const coupon = computed(() => ({
-    coupons() {
-      return [this.coupon, this.discountCoupon, ...this.exchangedCoupons];
-    },
-
-    disabledCoupons() {
-      return [this.disabledCoupon, this.disabledDiscountCoupon];
-    },
-
-    coupon() {
-      return {
       id: 1,
       condition: '无使用门槛\n最多优惠12元',
       reason: '',
       value: 150,
-        name: this.t('coupon.name'),
+      name: t('coupon.name'),
-        description: this.t('coupon.description'),
+      description: t('coupon.description'),
       startAt: 1489104000,
       endAt: 1514592000,
       valueDesc: '1.5',
       unitDesc: '元',
-      };
+    }));
-    },
 
-    discountCoupon() {
+    const discountCoupon = computed(() => ({
-      return {
+      ...coupon.value,
-        ...this.coupon,
       id: 2,
       value: 12,
       valueDesc: '8.8',
       unitDesc: '折',
-      };
+    }));
-    },
 
-    disabledCoupon() {
+    const disabledCoupon = computed(() => ({
-      return {
+      ...coupon.value,
-        ...this.coupon,
       id: 3,
-        reason: this.t('coupon.reason'),
+      reason: t('coupon.reason'),
-      };
+    }));
-    },
 
-    disabledDiscountCoupon() {
+    const disabledDiscountCoupon = computed(() => ({
-      return {
+      ...discountCoupon.value,
-        ...this.discountCoupon,
       valueDesc: '1',
       unitDesc: '折',
       id: 4,
-        reason: this.t('coupon.reason'),
+      reason: t('coupon.reason'),
-      };
+    }));
-    },
-  },
 
-  methods: {
+    const coupons = computed(() => [
-    onChange(index) {
+      coupon.value,
-      this.showList = false;
+      discountCoupon.value,
-      this.chosenCoupon = index;
+      ...state.exchangedCoupons,
-    },
+    ]);
-    onExchange() {
+
-      this.$toast(this.t('exchange'));
+    const disabledCoupons = computed(() => [
-      this.exchangedCoupons.push({
+      disabledCoupon.value,
-        ...this.coupon,
+      disabledDiscountCoupon.value,
-        id: this.randomId(),
+    ]);
+
+    const onChange = (index: number) => {
+      state.showList = false;
+      state.chosenCoupon = index;
+    };
+
+    const onExchange = () => {
+      Toast(t('exchange'));
+      state.exchangedCoupons.push({
+        ...coupon.value,
+        id: getRandomId(),
       });
-    },
+    };
-    randomId(max = 999999) {
+
-      return Math.floor(Math.random() * max) + 1;
+    return {
-    },
+      ...toRefs(state),
+      t,
+      coupons,
+      onChange,
+      onExchange,
+      disabledCoupons,
+    };
   },
 };
 </script>