<template> <view> <view class="topTabBar"> <view class="grid" v-for="(grid,tbIndex) in businType" :key="tbIndex" @click="showType(tbIndex)"> <view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid}}</view> </view> </view> <view v-if="productList == '' " class="mart60 fotct font14 fcor666"> <image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image> </view> <view class="product-list mart20" v-for="product in productList" :key="product.id" @click="jumpMineCou(product.id,product.highCouponModel.id)"> <image mode="widthFix" class="headimg mart10 flleft" :src="imageUrl+product.highCouponModel.couponImg"> </image> <view class="headconts paddtright10"> <view class="headtitle paddtop15 font18 fontwig6 fcor333 text1">{{ product.highCouponModel.couponName }} </view> <view class="headtitle paddtop10 font15 fontwig6 fcor999 text1">有效期至: {{product.useEndTime | formatDate('-')}}</view> <view class="info mart5" v-if="product.highCouponModel.payType == 1"> <view class="price">¥{{ product.highCouponModel.discountPrice}}</view> <view class="slogan" v-if="product.highCouponModel.discountPrice !== product.highCouponModel.salesPrice"> ¥{{ product.highCouponModel.salesPrice}}</view> </view> <view class="info mart5" v-else> <view class="price"> <image style="width: 15px;height: 15px;vertical-align: sub;" src="../../../static/img/jfx.png"> </image>{{ product.highCouponModel.discountPrice *100}} </view> <view class="slogan" v-if="product.highCouponModel.discountPrice !== product.highCouponModel.salesPrice"> <image style="width: 15px;height: 15px;vertical-align: sub;" src="../../../static/img/jfh.png"> </image>{{ product.highCouponModel.salesPrice*100}} </view> </view> </view> </view> <view class="loading-text" v-if="productList != '' ">{{ loadingText }}</view> </view> </template> <script> import { getUserCouponList } from "../../../Utils/Api.js"; //您的api路径 let app = getApp(); export default { data() { return { businType: ['未使用', '已使用', '已过期'], tabbarIndex: 0, imageUrl: app.globalData.imgUrl, imagewxUrl: app.globalData.imageWxImg, imgadres: 'noorder.png', productList: [], pageNum: 1, pageSize: 10, isNoMoreData: false, loadingText: '' } }, onPageScroll(e) { return; //兼容iOS端下拉时顶部漂移 this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute"; }, filters: { //过滤器 用于格式化时间 formatDate: function(value, spe = '/') { let data = new Date(value); let year = data.getFullYear(); let month = data.getMonth() + 1; let day = data.getDate(); let h = data.getHours(); let mm = data.getMinutes(); let s = data.getSeconds(); month = month >= 10 ? month : "0" + month; day = day >= 10 ? day : "0" + day; h = h >= 10 ? h : "0" + h; mm = mm >= 10 ? mm : "0" + mm; s = s >= 10 ? s : "0" + s; return `${year}${spe}${month}${spe}${day}`; } }, onLoad() { this.getUserCouponList(1); }, onReachBottom() { if (this.tabbarIndex === 0) { this.getUserCouponList(1); } else if (this.tabbarIndex === 1) { this.getUserCouponList(2); } else if (this.tabbarIndex === 2) { this.getUserCouponList(0); } }, methods: { showType(tbIndex) { this.tabbarIndex = tbIndex; if (this.tabbarIndex === 0) { this.pageNum = 1; this.productList = [] this.isNoMoreData = false; this.getUserCouponList(1); } else if (this.tabbarIndex === 1) { this.pageNum = 1; this.productList = [] this.isNoMoreData = false; this.getUserCouponList(2); } else if (this.tabbarIndex === 2) { this.pageNum = 1; this.productList = [] this.isNoMoreData = false; this.getUserCouponList(0); } }, jumpMineCou(item, items) { uni.navigateTo({ url: '../../goods/coupon-details/coupon-details?id=' + item + '&mendId=' + items }) }, //赠券卡券列表 getUserCouponList(item) { uni.showLoading({ title: '加载中...' }) if (this.isNoMoreData) { uni.hideLoading() this.loadingText = '到底了'; return false; } let pagenum = this.pageNum; let params = { pageNum: pagenum, status: item, pageSize: this.pageSize } getUserCouponList(params).then(res => { if (res.return_code == '000000' && res.return_data.list != '') { uni.hideLoading(); this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true; this.productList = this.productList.concat(res.return_data.list); if (res.return_data.total == (this.pageNum * this.pageSize)) { this.isNoMoreData = true; } this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum; } else { this.productList = []; uni.hideLoading() } }) } } } </script> <style lang="scss"> page { background-color: #f7f7f7; } .loading-text { width: 100%; display: flex; justify-content: center; align-items: center; height: 60upx; color: #979797; font-size: 24upx; } .topTabBar { width: 100%; background-color: #FFFFFF; display: flex; justify-content: space-around; .grid { width: 20%; height: 80upx; display: flex; justify-content: center; align-items: center; color: #444; font-size: 28upx; .text { height: 76upx; display: flex; align-items: center; &.on { color: #0083f5; border-bottom: solid 4upx #0083f5; } } } } .product-list { background-color: #FFFFFF; width: 92%; height: 220rpx; margin-left: 4%; .headimg { width: 200rpx; margin-left: 10rpx; max-height: 200rpx; } .headconts { margin-left: 220rpx; } .info { display: flex; align-items: center; .price { color: #e65339; font-size: 30upx; display: flex; align-items: center; font-weight: 600; } .slogan { color: #807c87; font-size: 24upx; text-decoration: line-through; } } } </style>