doum
12 小时以前 b613bb368d4e678b42d25e94397d0aab3e213438
mini-program/pages/coupon/coupon.vue
@@ -1,24 +1,26 @@
<template>
   <view class="box">
      <view class="cate">
         <view class="cate-item" @click="i = index" v-for="(item, index) in cate" :key="index">
         <view class="cate-item" @click="sele(item.id)" v-for="(item, index) in cate" :key="index">
            <text>{{item.name}}</text>
            <view class="cate-item-x" v-if="i === index"></view>
            <view class="cate-item-x" v-if="status === index"></view>
         </view>
      </view>
      <view class="list">
         <view class="item disable">
         <view :class="[1,2].includes(status) ? 'item disable' : 'item'" v-for="(item, index) in list" :key="index">
            <view class="item-a">
               <text class="item-a-num">8</text>
               <text>满100可用</text>
               <text class="item-a-num" v-if="item.couponType === 0">{{item.price}}</text>
               <text class="item-a-num1" v-else-if="item.couponType === 1">{{item.price}}</text>
               <text>满{{item.limitPrice}}可用</text>
            </view>
            <view class="item-b">
               <view class="item-b-left">
                  <text>新客专享</text>
                  <text>2020.5.25 日到期</text>
                  <text>{{item.name}}</text>
                  <text>{{item.endDate.substring(0, 10)}} 日到期</text>
               </view>
               <image src="/static/images/ic_yishiyong@2x.png" mode="widthFix"></image>
               <!-- <view class="item-b-btn">查看详情</view> -->
               <image src="/static/images/ic_yishiyong@2x.png" mode="widthFix" v-if="status === 1"></image>
               <image src="/static/images/ic_yiguoqi@2x.png" mode="widthFix" v-else-if="status === 2"></image>
               <view class="item-b-btn" v-else @click="jumpDetails(item.id)">查看详情</view>
            </view>
         </view>
      </view>
@@ -29,13 +31,54 @@
   export default {
      data() {
         return {
            i: 0,
            status: 0,
            current: 1,
            list: [],
            next: true,
            cate: [
               { name: '未使用', id: 0 },
               { name: '已使用', id: 1 },
               { name: '已过期', id: 2 }
            ]
         };
      },
      onLoad() {
         this.getList()
      },
      onReachBottom() {
         this.getList()
      },
      methods: {
         jumpDetails(id) {
            uni.navigateTo({
               url: '/pages/coupon-details/coupon-details?id='+id
            })
         },
         sele(id) {
            this.status = id
            this.current = 1
            this.list = []
            this.next = true
            this.getList()
         },
         getList() {
            if (!this.next) return
            this.$u.api.memberCouponPage({
               couponType: 1,
               current: this.current,
               size: 10,
               status: this.status
            }).then(res => {
               if (res.code === 200) {
                  console.log(res)
                  this.current++
                  this.list.push(...res.data.records)
                  if (this.list.length === res.data.total) {
                     this.next = false
                  }
               }
            })
         }
      }
   }
</script>
@@ -89,6 +132,12 @@
                     color: #999999 !important;
                  }
               }
               .item-a-num1 {
                  color: #999999 !important;
                  &::after {
                     color: #999999 !important;
                  }
               }
               text {
                  color: #999999 !important;
               }
@@ -136,6 +185,17 @@
                     color: #E4001D;
                  }
               }
               .item-a-num1 {
                  font-weight: 600;
                  font-size: 44rpx;
                  color: #E4001D;
                  &::after {
                     content: '折';
                     font-weight: 600;
                     font-size: 24rpx;
                     color: #E4001D;
                  }
               }
               text {
                  font-weight: 400;
                  font-size: 24rpx;