[Improvement] Reorganize demos (#1052)

2018-05-12 15:22:37 +08:00
parent a55eda8891
commit 4de1e7da55
83 changed files with 109 additions and 113 deletions
@@ -0,0 +1,131 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-coupon-cell
+        :coupons="coupons"
+        :chosen-coupon="chosenCoupon"
+        @click="showList = true"
+      />
+
+      <van-popup v-model="showList" position="bottom">
+        <van-coupon-list
+          :coupons="coupons"
+          :chosen-coupon="chosenCoupon"
+          :disabled-coupons="disabledCoupons"
+          @change="onChange"
+          @exchange="onExchange"
+        />
+      </van-popup>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+/* eslint-disable camelcase */
+export default {
+  i18n: {
+    'zh-CN': {
+      coupon: {
+        name: '优惠券名称',
+        reason: '优惠券不可用原因'
+      },
+      exchange: '兑换成功'
+    },
+    'en-US': {
+      coupon: {
+        name: 'Coupon name',
+        reason: 'Coupon unavailable reason'
+      },
+      exchange: 'Success'
+    }
+  },
+
+  data() {
+    return {
+      showList: false,
+      chosenCoupon: -1,
+      exchangedCoupons: []
+    };
+  },
+
+  computed: {
+    coupons() {
+      return [this.coupon, this.discountCoupon, ...this.exchangedCoupons];
+    },
+
+    disabledCoupons() {
+      return [this.disabledCoupon, this.disabledDiscountCoupon];
+    },
+
+    coupon() {
+      return {
+        id: 1,
+        available: 1,
+        discount: 0,
+        denominations: 150,
+        origin_condition: 0,
+        reason: '',
+        value: 150,
+        name: this.$t('coupon.name'),
+        start_at: 1489104000,
+        end_at: 1514592000
+      };
+    },
+
+    discountCoupon() {
+      return {
+        ...this.coupon,
+        id: 2,
+        discount: 88,
+        denominations: 0,
+        origin_condition: 50,
+        value: 12
+      };
+    },
+
+    disabledCoupon() {
+      return {
+        ...this.coupon,
+        id: 3,
+        available: 0,
+        reason: this.$t('coupon.reason')
+      };
+    },
+
+    disabledDiscountCoupon() {
+      return {
+        ...this.discountCoupon,
+        discount: 10,
+        id: 4,
+        available: 0,
+        reason: this.$t('coupon.reason')
+      };
+    }
+  },
+
+  methods: {
+    onChange(index) {
+      this.showList = false;
+      this.chosenCoupon = index;
+    },
+    onExchange(code) {
+      Toast(this.$t('exchange'));
+      this.exchangedCoupons.push({
+        ...this.coupon,
+        id: this.randomId()
+      });
+    },
+    randomId(max = 999999) {
+      return Math.floor(Math.random() * max) + 1;
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-coupon-list {
+  .van-popup {
+    height: 100%;
+  }
+}
+</style>