From 7d20266f41b48181fcfabd21a97242a133c43eb4 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Tue, 15 Dec 2020 15:05:03 +0800
Subject: [PATCH] docs(CouponList): use composition api

---
 src/coupon-list/README.md       |  44 +++++---
 src/coupon-list/README.zh-CN.md |  44 +++++---
 src/coupon-list/demo/index.vue  | 191 +++++++++++++++++---------------
 3 files changed, 151 insertions(+), 128 deletions(-)

diff --git a/src/coupon-list/README.md b/src/coupon-list/README.md
index c2e4c0b03..b73ecad38 100644
--- a/src/coupon-list/README.md
+++ b/src/coupon-list/README.md
@@ -18,20 +18,20 @@ app.use(CouponList);
 ```html
 <!-- Coupon Cell -->
 <van-coupon-cell
-  :coupons="coupons"
-  :chosen-coupon="chosenCoupon"
-  @click="showList = true"
+  :coupons="state.coupons"
+  :chosen-coupon="state.chosenCoupon"
+  @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"
-    :chosen-coupon="chosenCoupon"
+    :coupons="state.coupons"
+    :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() {
-    return {
-      chosenCoupon: -1,
+  setup() {
+    const state = reactive({
       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);
-    },
-  },
 };
 ```
 
diff --git a/src/coupon-list/README.zh-CN.md b/src/coupon-list/README.zh-CN.md
index ae27d25dc..57728dc55 100644
--- a/src/coupon-list/README.zh-CN.md
+++ b/src/coupon-list/README.zh-CN.md
@@ -18,20 +18,20 @@ app.use(CouponList);
 ```html
 <!-- 优惠券单元格 -->
 <van-coupon-cell
-  :coupons="coupons"
-  :chosen-coupon="chosenCoupon"
-  @click="showList = true"
+  :coupons="state.coupons"
+  :chosen-coupon="state.chosenCoupon"
+  @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"
-    :chosen-coupon="chosenCoupon"
+    :coupons="state.coupons"
+    :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() {
-    return {
-      chosenCoupon: -1,
+  setup() {
+    const state = reactive({
       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);
-    },
-  },
 };
 ```
 
diff --git a/src/coupon-list/demo/index.vue b/src/coupon-list/demo/index.vue
index b5dd09da0..b5b3f7c3d 100644
--- a/src/coupon-list/demo/index.vue
+++ b/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>
-export default {
-  i18n: {
-    'zh-CN': {
-      coupon: {
-        name: '优惠券名称',
-        reason: '优惠券不可用原因',
-        description: '描述信息',
-      },
-      exchange: '兑换成功',
-    },
-    'en-US': {
-      coupon: {
-        name: 'Coupon name',
-        reason: 'Coupon unavailable reason',
-        description: 'Description',
-      },
-      exchange: 'Success',
-    },
-  },
+<script lang="ts">
+import { computed, reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { Coupon } from '../../coupon/shared';
+import Toast from '../../toast';
 
-  data() {
-    return {
+const i18n = {
+  '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: {
-    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'),
-        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(),
+    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>