CommunityApp/pagesM/pages/coupon_list.vue

<template>
  <view class="dt-page">
    <scroll-view scroll-x="true" class="tab-h">
      <view v-for="(item,index) in tabItemList" :key="index" :class="['tab-item', currentTab == index ? 'active' : '']" @tap="swichNav(index)">{{item.tabName}}</view>
    </scroll-view>
    <view style="height:80rpx;"></view>
    <swiper :style="calcHeight" class="tab-content" :current="currentTab" duration="300" @change="swiperSwitchTab">
      <swiper-item v-for="(item, index) in tabItemList" :key="index">
        <scroll-view @scrolltolower="onScrollToLower" scroll-y="true" class="scoll-h">
          <view v-if="emptyType==0" class="container">
            <view style="height:30rpx;"></view>
            
            <view class="voucher" v-for="(item, idx) in dataList" :key="idx">
              <DtCoupon :dataDetail="item.coupon" :isEnable="isEnable"
                @visible="onVisible($event,idx)"
                @recieve="onRecieve"
                @use="onUse"/>
            </view>
          </view>
		
          <DtNoMore v-if="isNoMore" />
          
          <DtEmpty :type="emptyType" />

        </scroll-view>
      </swiper-item>
    </swiper>
	<view style="height: 90upx;"></view>
	<view @tap="tapToCoupon" 
	style="
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #2f7ff5;
	height: 90upx;
	line-height: 90upx;
	text-align: center;
	font-size: 32upx;
	color: #fff;">领取更多优惠券</view>
  </view>
</template>

<script>
import DtNoMore from "../comps/dt_no_more.vue";
import DtCoupon from '../comps/dt_coupon.vue';
import DtEmpty from '../comps/dt_empty.vue'
export default {
  components: {
    DtNoMore,
    DtCoupon,
    DtEmpty
  },
  data () {
    return {
      tabItemList: [
        {
          tabName: "可使用",
          useStatue: 3
        },
        {
          tabName: "已使用",
          useStatue: 1,
        },
        {
          tabName: "已过期",
          useStatue: 2
        }
      ],
      winHeight: "", //窗口高度
      currentTab: 0, //预设当前项的值

      dataList: [
        // {
        //   is_get:1,
        //   voucher_type:1,
        //   status:1,
        // },{
        //   is_get:0,
        //   voucher_type:2,
        //   status:1,
        // },{
        //   is_get:1,
        //   voucher_type:1,
        //   status:2,
        // }
      ],

      memberId: '',
      showNoMore: false,
      showNoDataView: false
    };
  },
  computed: {
	  
    calcHeight () {
      return "height:"+this.winHeight+"px;";
    },
    isEnable(){
      return this.currentTab==0
    },
    
  },
  methods: {
	  // 跳转优惠券
	  tapToCoupon() {
	    uni.navigateTo({
	      url: "/pagesM/pages/coupon_center"
	    })
	  },
    // 滚动切换标签样式
    swiperSwitchTab(e) {
      console.log(113,e)
      let cur=e.detail.current;
      this.currentTab=e.detail.current;
      
      this.pageIndex = 0
      this.dataList.length = 0
      this.queryDataList()
    },

    // 点击标题切换当前页时改变样式
    swichNav(cur) {
      if(this.currentTab==cur) {
        return false;
      } else {
        this.showNoMore=false;
        this.currentTab=cur;
      }
    },

    //查看详情
    onVisible(ev, idx) {
      let dataList = this.dataList.slice(0)
      dataList[idx].coupon.isShowDetail = !dataList[idx].coupon.isShowDetail
      this.$set(this, 'dataList', dataList)
    },
    // 领取优惠券
    onRecieve(item){
      console.log('get Voucher',item)
    },
    onUse(){
      uni.switchTab({
        url:'/pagesM/pages/home'
      })
    },
    //获取优惠券列表
    async queryDataList(){
      let useStatue = this.tabItemList[this.currentTab].useStatue
      let resp = await this.$api.getMyCoupons({
        memberId:this.memberId,
        status:useStatue,
        pageNo:this.pageIndex,
        pageSize:this.pageSize
      })

      let list = this.getDataList(resp)
      if(this.currentTab==0){
        list.map((item,idx)=>{
          item.coupon.isReceive = true
          return item
        })
      }
      this.dataList = this.dataList.concat(list)
    },
    onLoadPage (options) {
	  wx.hideShareMenu();
      this.memberId = this.$auth.getMemberId()
      this.queryDataList();

      //  高度自适应
      let res=uni.getSystemInfoSync();
      let clientHeight=res.windowHeight;
      let clientWidth=res.windowWidth;
      let upxR=750/clientWidth;
      let calc=clientHeight*upxR-80;
      let height=uni.upx2px(calc);
      this.winHeight=height;
    },
    onScrollToLower(){
      if(!this.isNoMore){
        this.queryDataList()
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.dt-page {
  min-height: 100vh;
  background-color: #f2f2f2;
  .tab-h {
    height: 80upx;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 80upx;
    background: white;
    font-size: 28upx;
    white-space: nowrap;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    .tab-item {
      display: inline-block;
      color: rgb(51, 51, 51);
      width: 30%;
    }
    .tab-item.active {
      color: $base; 
      position: relative;
      width: 30%;
      font-weight: 600;
    }
    .tab-item.active:after {
      content: "";
      display: block;
      height: 4upx;
      width: 30%;
      background: $base;
      position: absolute;
      bottom: 0;
      left: 34%;
      border-radius: 16upx;
    }
  }
  .scoll-h {
    height: 100%;
    .container {
      font-size: 22upx;
      color: rgb(153, 153, 153);
      padding: 0 30upx;
    }
    .voucher {
      background: white;
      display: flex;
      flex-direction: column;
      border-radius: 10upx;
      margin: 0 0 30upx 0;
      position: relative;
    }
  }
}
</style>