add OrderCoupon component

2017-09-04 15:15:21 +08:00
parent 225df48ba5
commit 556f5ce75b
12 changed files with 1014 additions and 23 deletions
@@ -0,0 +1,56 @@
+<template>
+  <div class="van-order-coupon">
+    <van-cell-group>
+      <van-cell title="优惠" :isLink="editable" @click="$emit('click')">
+        <div v-if="coupons[chosenCoupon]">
+          <h2>{{ amount }}</h2>
+          <span>{{ coupons[chosenCoupon].condition }}</span>
+        </div>
+        <template v-else>{{ guide }}</template>
+      </van-cell>
+    </van-cell-group>
+  </div>
+</template>
+
+<script>
+import Cell from '../cell';
+import CellGroup from '../cell-group';
+
+export default {
+  name: 'van-order-coupon',
+
+  components: {
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup
+  },
+
+  model: {
+    prop: 'chosenCoupon'
+  },
+
+  props: {
+    coupons: {
+      type: Array,
+      default: () => []
+    },
+    chosenCoupon: {
+      type: Number,
+      default: -1
+    },
+    editable: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  computed: {
+    guide() {
+      return this.coupons.length === 0 ? '使用优惠' : `您有 ${this.coupons.length} 个可用优惠`;
+    },
+    amount() {
+      const coupon = this.coupons[this.chosenCoupon];
+      return `${coupon.name} 省￥${(coupon.value / 100).toFixed(2)}`;
+    }
+  }
+};
+</script>