zhuishuyun_ios_wap_front/src/view/my_coupon.vue

<template>
  <div class="coupon">
    <x-header></x-header>
    <div class="coupon-list">
      <template v-if="enableList.length > 0">
        <div class="coupon-item" v-for="coupon in enableList">
          <p class="coupon-item__amount">
            <span>&yen;</span>{{ coupon.price }}
          </p>
          <div class="coupon-item__info">
            <div class="info-amount">
              <p class="title">大于{{ coupon.use_condition }}元可用</p>
              <p class="desc">
                {{ coupon.expire_time && coupon.expire_time.slice(0, 16) }}到期
              </p>
            </div>
            <v-touch class="info-button" @tap="goPay">
              立即使用
            </v-touch>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="no-coupon">
          <img src="../assets/no_coupon.png" />
        </div>
      </template>
    </div>
    <div class="show-disabled">
      <p @click="showDisabled">查看已失效的券</p>
    </div>
    <mt-popup v-model="popupVisible" position="right" closeOnClickModal="false">
      <div class="pop-page">
        <div class="x-header">
          <header>
            <a href="javascript:;" @click="popupVisible = false">
              <img src="../assets/书库-返回.png" />
            </a>
            <span>失效优惠券</span>
            <div style="height: 0.35rem; width: 0.35rem;"></div>
          </header>
        </div>
        <div class="coupon-list">
          <template v-if="disableList.length > 0">
            <div
              class="coupon-item disabled"
              :class="`disable-${coupon.use_status}`"
              v-for="coupon in disableList"
            >
              <p class="coupon-item__amount">
                <span>&yen;</span>{{ coupon.price }}
              </p>
              <div class="coupon-item__info">
                <div class="info-amount">
                  <p class="title">大于{{ coupon.use_condition }}元可用</p>
                  <p class="desc">
                    {{
                      coupon.expire_time && coupon.expire_time.slice(0, 16)
                    }}到期
                  </p>
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="no-coupon">
              <img src="../assets/no_coupon.png" />
            </div>
          </template>
        </div>
      </div>
    </mt-popup>
  </div>
</template>
<script>
import { Coupon, Pay } from "./namespace.js";
import { getUserCoupon } from "../api";

export default {
  name: Coupon.name,
  data() {
    return {
      enableList: [],
      disableList: [],
      popupVisible: false
    };
  },
  created() {
    getUserCoupon().then(r => {
      this.enableList = r.enabled;
      this.disableList = r.expired;
    });
  },
  methods: {
    goPay() {
      this.$router.push({ name: Pay.name });
    },
    showDisabled() {
      this.popupVisible = true;
    }
  },
  mounted() {}
};
</script>
<style scoped lang="scss"></style>