refactor: demo using script setup (#9235)

src/coupon-list/demo/index.vue

@@ -1,30 +1,5 @@
-<template>
-  <demo-block :title="t('basicUsage')">
-    <van-coupon-cell
-      :coupons="coupons"
-      :chosen-coupon="chosenCoupon"
-      @click="showList = true"
-    />
-    <van-popup
-      v-model:show="showList"
-      round
-      position="bottom"
-      style="height: 90%; padding-top: 4px"
-    >
-      <van-coupon-list
-        :coupons="coupons"
-        :chosen-coupon="chosenCoupon"
-        :disabled-coupons="disabledCoupons"
-        :show-count="false"
-        @change="onChange"
-        @exchange="onExchange"
-      />
-    </van-popup>
-  </demo-block>
-</template>
-
-<script lang="ts">
-import { computed, reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { CouponInfo } from '../../coupon';
 import { Toast } from '../../toast';
@@ -51,82 +26,94 @@ const i18n = {
 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: [] as CouponInfo[],
-    });
+const t = useTranslate(i18n);
+const state = reactive({
+  showList: false,
+  chosenCoupon: -1,
+  exchangedCoupons: [] as CouponInfo[],
+});
 
-    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 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 discountCoupon = computed(() => ({
+  ...coupon.value,
+  id: 2,
+  value: 12,
+  valueDesc: '8.8',
+  unitDesc: '折',
+}));
 
-    const disabledCoupon = computed(() => ({
-      ...coupon.value,
-      id: 3,
-      reason: t('coupon.reason'),
-    }));
+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 disabledDiscountCoupon = computed(() => ({
+  ...discountCoupon.value,
+  valueDesc: '1',
+  unitDesc: '折',
+  id: 4,
+  reason: t('coupon.reason'),
+}));
 
-    const coupons = computed(() => [
-      coupon.value,
-      discountCoupon.value,
-      ...state.exchangedCoupons,
-    ]);
+const coupons = computed(() => [
+  coupon.value,
+  discountCoupon.value,
+  ...state.exchangedCoupons,
+]);
 
-    const disabledCoupons = computed(() => [
-      disabledCoupon.value,
-      disabledDiscountCoupon.value,
-    ]);
+const disabledCoupons = computed(() => [
+  disabledCoupon.value,
+  disabledDiscountCoupon.value,
+]);
 
-    const onChange = (index: number) => {
-      state.showList = false;
-      state.chosenCoupon = index;
-    };
+const onChange = (index: number) => {
+  state.showList = false;
+  state.chosenCoupon = index;
+};
 
-    const onExchange = () => {
-      Toast(t('exchange'));
-      state.exchangedCoupons.push({
-        ...coupon.value,
-        id: getRandomId(),
-      });
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      coupons,
-      onChange,
-      onExchange,
-      disabledCoupons,
-    };
-  },
+const onExchange = () => {
+  Toast(t('exchange'));
+  state.exchangedCoupons.push({
+    ...coupon.value,
+    id: getRandomId(),
+  });
 };
 </script>
+
+<template>
+  <demo-block :title="t('basicUsage')">
+    <van-coupon-cell
+      :coupons="coupons"
+      :chosen-coupon="state.chosenCoupon"
+      @click="state.showList = true"
+    />
+    <van-popup
+      v-model:show="state.showList"
+      round
+      position="bottom"
+      style="height: 90%; padding-top: 4px"
+    >
+      <van-coupon-list
+        :coupons="coupons"
+        :chosen-coupon="state.chosenCoupon"
+        :disabled-coupons="disabledCoupons"
+        :show-count="false"
+        @change="onChange"
+        @exchange="onExchange"
+      />
+    </van-popup>
+  </demo-block>
+</template>