OrderCoupon: rename to Coupon

2017-09-08 10:18:18 +08:00
parent eaaed9661c
commit df9c40bc3f
8 changed files with 93 additions and 86 deletions
@@ -0,0 +1,71 @@
+<template>
+  <div :class="['van-coupon-item', { 'van-coupon-item--disabled': disabled }]">
+    <div class="van-coupon-item__head">
+      <div class="van-coupon-item__lines"></div>
+      <div class="van-coupon-item__gradient">
+        <h2 v-html="faceAmount" />
+        <p>{{ conditionMessage }}</p>
+      </div>
+    </div>
+    <div class="van-coupon-item__body">
+      <h2>{{ data.name }}</h2>
+      <span>{{ validPeriod }}</span>
+      <p v-if="disabled && data.reason">{{ data.reason }}</p>
+      <div class="van-coupon-item__corner" v-if="chosen">
+        <van-icon name="success" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Icon from '../icon';
+
+export default {
+  name: 'van-coupon-item',
+
+  components: {
+    [Icon.name]: Icon
+  },
+
+  props: {
+    data: Object,
+    chosen: Boolean,
+    disabled: Boolean
+  },
+
+  computed: {
+    validPeriod() {
+      return `${this.getDate(this.data.start_at)}-${this.getDate(this.data.end_at)}`;
+    },
+    faceAmount() {
+      return this.data.denominations !== 0
+        ? `<span>¥</span> ${this.formatAmount(this.data.denominations)}`
+        : this.data.discount !== 0
+          ? this.formatDiscount(this.data.discount)
+          : '';
+    },
+    conditionMessage() {
+      let condition = this.data.origin_condition;
+      condition = condition % 100 === 0 ? Math.round(condition / 100) : (condition / 100).toFixed(2);
+      return this.data.origin_condition === 0 ? '无使用门槛' : `满${condition}元可用`;
+    }
+  },
+
+  methods: {
+    getDate(timeStamp) {
+      const date = new Date(timeStamp * 1000);
+      return `${date.getFullYear()}.${this.padZero(date.getMonth() + 1)}.${this.padZero(date.getDate())}`;
+    },
+    padZero(num) {
+      return (num < 10 ? '0' : '') + num;
+    },
+    formatDiscount(discount) {
+      return `${(discount / 10).toFixed(discount % 10 === 0 ? 0 : 1)}折`;
+    },
+    formatAmount(amount) {
+      return (amount / 100).toFixed(amount % 100 === 0 ? 0 : amount % 10 === 0 ? 1 : 2);
+    }
+  }
+};
+</script>
@@ -0,0 +1,153 @@
+<template>
+  <van-popup v-model="showPopup" position="bottom" class="van-coupon-list">
+    <van-cell-group class="van-coupon-list__top">
+      <van-field v-model="exchangeCode" :placeholder="inputPlaceholder" :maxlength="20" />
+      <van-button size="small" type="danger" class="van-coupon-list__exchange" :disabled="exchangeButtonDisabled || !exchangeCode.length" @click="onClickExchangeButton">{{ exchangeButtonText }}</van-button>
+    </van-cell-group>
+    <div class="van-coupon-list__list" ref="list">
+      <van-coupon-item
+        ref="card"
+        v-for="(item, index) in coupons"
+        :key="item.id || item.name"
+        :data="item"
+        :chosen="index === chosenCoupon"
+        @click.native="onClickCoupon(index)"
+      />
+      <h3 v-if="disabledCoupons.length">{{ disabledListTitle }}</h3>
+      <van-coupon-item
+        disabled
+        v-for="item in disabledCoupons"
+        :key="item.id || item.name"
+        :data="item"
+      />
+    </div>
+    <div class="van-coupon-list__close van-hairline--top" @click="onClickNotUse">{{ closeButtonText }}</div>
+  </van-popup>
+</template>
+
+<script>
+import Cell from '../cell';
+import CellGroup from '../cell-group';
+import Item from './Item';
+import Field from '../field';
+import Popup from '../popup';
+import Button from '../button';
+
+export default {
+  name: 'van-coupon-list',
+
+  components: {
+    [Button.name]: Button,
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup,
+    [Field.name]: Field,
+    [Popup.name]: Popup,
+    [Item.name]: Item
+  },
+
+  model: {
+    prop: 'show'
+  },
+
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    chosenCoupon: {
+      type: Number,
+      default: -1
+    },
+    coupons: {
+      type: Array,
+      default: () => []
+    },
+    disabledCoupons: {
+      type: Array,
+      default: () => []
+    },
+    exchangeButtonText: {
+      type: String,
+      default: '兑换'
+    },
+    exchangeButtonDisabled: {
+      type: Boolean,
+      default: false
+    },
+    displayedCouponIndex: {
+      type: Number,
+      default: -1
+    },
+    closeButtonText: {
+      type: String,
+      default: '不使用优惠'
+    },
+    disabledListTitle: {
+      type: String,
+      default: '不可用优惠'
+    },
+    inputPlaceholder: {
+      type: String,
+      default: '请输入优惠码'
+    }
+  },
+
+  watch: {
+    show(val) {
+      this.showPopup = val;
+    },
+    showPopup(val) {
+      this.$emit('input', val);
+      this.scrollToTop();
+    },
+    displayedCouponIndex(val) {
+      this.scrollToShowCoupon(val);
+    }
+  },
+
+  data() {
+    return {
+      exchangeCode: '',
+      showPopup: this.show
+    };
+  },
+
+  mounted() {
+    this.scrollToShowCoupon(this.displayedCouponIndex);
+  },
+
+  methods: {
+    onClickNotUse() {
+      this.showPopup = false;
+      this.$emit('change', -1);
+    },
+    onClickCoupon(index) {
+      this.showPopup = false;
+      this.$emit('change', index);
+    },
+    onClickExchangeButton() {
+      this.$emit('exchange', this.exchangeCode);
+      this.exchangeCode = '';
+    },
+    // 滚动到特定优惠券的位置
+    scrollToShowCoupon(index) {
+      if (index === -1) {
+        return;
+      }
+
+      this.$nextTick(() => {
+        const { card, list } = this.$refs;
+
+        if (list && card && card[index]) {
+          list.scrollTop = card[index].$el.offsetTop - 100;
+        }
+      });
+    },
+    scrollToTop() {
+      const { list } = this.$refs;
+
+      list.scrollTop = 0;
+    }
+  }
+};
+</script>