<template> <view> <view class="tabr" :style="{top:headerTop}"> <view :class="{on:typeClass=='valid'}" @tap="switchType('valid')">待使用</view> <!-- <view :class="{on:typeClass=='invalid'}" @tap="switchType('invalid')">已使用</view> --> <view :class="{on:typeClass=='noinvalid'}" @tap="switchType('noinvalid')">已过期</view> </view> <view class="place"></view> <view class="list"> <!-- 优惠券列表 --> <view class="sub-list" v-if="typeClass == 'valid'"> <view class="tis" v-if="couponValidList.length==0"> <image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image> </view> <view class="row" v-for="(row,index) in couponValidList" :key="index"> <!-- content --> <view class="carrier"> <view class="left"> <view class="title alijusstart"> <view class="text1 width70">{{row.discountActivityName}}</view> </view> <view class="term fcoreb5"> 剩余次数:{{row.partakeSurplusNum}} </view> <view class="term fcor999"> 有效期:{{row.endTime | formatDate('-')}} </view> </view> <view class="right"> <view class="ticket" style="background-color: #009DFF;padding-top: 1vw;"> <view class="num"> {{row.discountPrice}} </view> <view class="unit margle" v-if="row.discountType == 3"> 折 </view> <view class="unit margle" v-else> 元 </view> </view> </view> </view> </view> </view> <!-- //已使用 --> <!-- <view class="sub-list" v-if="typeClass == 'invalid'"> <view class="tis" v-if="couponinvalidList.length==0"> <image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image> </view> <view class="row" v-for="(row,index) in couponinvalidList" :key="index"> <view class="carrier"> <view class="left"> <view class="title alijusstart"> <view class="text1 width70">{{row.discountName}}</view> </view> <view class="term"> 有效期:{{row.useEndTime | formatDate('-')}} </view> <image src="../../../static/img/user/use.png" mode="widthFix" style="position: absolute;right: 5px;top: 5px;" class="icon50"></image> </view> </view> </view> </view> --> <!-- 已过期 --> <view class="sub-list" v-if="typeClass == 'noinvalid'"> <view class="tis" v-if="couponnoinvalidList.length==0"> <image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image> </view> <view class="row" v-for="(row,index) in couponnoinvalidList" :key="index"> <view class="carrier"> <view class="left"> <view class="title alijusstart"> <view class="text1 width70">{{row.discountActivityName}}</view> </view> <view class="term fcoreb5"> 剩余次数:{{row.partakeSurplusNum}} </view> <view class="term fcor999"> 有效期:{{row.endTime | formatDate('-')}} </view> <image src="../../../static/img/user/overdue.png" mode="widthFix" style="position: absolute;right: 5px;top: 5px;" class="icon50"></image> </view> <view class="right"> <view class="ticket" style="background-color: #999999;"> <view class="num"> {{row.discountPrice}} </view> <view class="unit margle" v-if="row.discountType == 3"> 折 </view> <view class="unit margle" v-else> 元 </view> </view> </view> </view> </view> </view> </view> </view> </template> <script> import { queryHzfDiscountList } from '../../../Utils/Api.js'; // #ifdef H5 var wx = require('jweixin-module'); // #endif let app = getApp(); export default { data() { return { couponValidList: [], couponinvalidList: [], couponnoinvalidList: [], imagewxUrl: app.globalData.imageWxImg, imgadres: 'noorder.png', headerTop: 0, headerswiperTop: '45px', //控制滑动效果 typeClass: 'valid', subState: '', theIndex: null, oldIndex: null, isStop: false, pageNum: 1, pageSize: 10, isNoMoreData: false, loadingText: '', couponcout: 0, statusid: '' //状态 } }, onPageScroll(e) { }, //下拉刷新,需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true onPullDownRefresh() { setTimeout(function() { uni.stopPullDownRefresh(); }, 1000); }, created() {}, onLoad() { // #ifdef H5 this.headerTop = '44PX'; this.headerswiperTop = '89px'; // #endif this.queryHzfDiscountList(1); }, 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} ${h}:${mm}:${s}`; }, //过滤器 用于格式化状态 msgFormat: function(value, value1) { for (var i = 0; i < value.length; i++) { if (value1 == value[i].codeValue) { let a = value[i].codeName; return a; } } } }, onReachBottom() { if (this.typeClass == 'valid') { this.queryHzfDiscountList(1); } else { this.queryHzfDiscountList(2); } }, methods: { //查询我的优惠券 queryHzfDiscountList(item) { this.statusid = 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, } queryHzfDiscountList(params).then(res => { if (res.return_code == '000000') { uni.hideLoading(); this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true; if (res.return_data.total == (this.pageNum * this.pageSize)) { this.isNoMoreData = true; } if (this.typeClass == 'valid') { this.couponValidList = this.couponValidList.concat(res.return_data.list); this.couponcout = res.return_data.total; } else if (this.typeClass == 'invalid') { this.couponinvalidList = this.couponinvalidList.concat(res.return_data.list); } else { this.couponnoinvalidList = this.couponnoinvalidList.concat(res.return_data.list); } this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum; } else { this.couponValidList = []; this.couponinvalidList = []; this.couponnoinvalidList = []; uni.hideLoading() } }) }, switchType(type) { if (this.typeClass == type) { return; } uni.pageScrollTo({ scrollTop: 0, duration: 0 }) this.typeClass = type; this.subState = this.typeClass == '' ? '' : 'show' + type; if (this.typeClass == 'valid') { this.pageNum = 1; this.couponValidList = [] this.isNoMoreData = false; this.queryHzfDiscountList(1); } else { this.pageNum = 1; this.couponnoinvalidList = [] this.isNoMoreData = false; this.queryHzfDiscountList(2); } } } } </script> <style lang="scss"> view { display: flex; flex-wrap: wrap; } page { background-color: #f5f5f5; } .place { width: 100%; height: 50px; } .tabr { background-color: #fff; width: 94%; height: 95upx; padding: 0 3%; border-bottom: solid 1upx #dedede; position: fixed; top: 0; z-index: 10; view { width: 50%; height: 90upx; justify-content: center; align-items: center; font-size: 32upx; color: #999; } .on { color: #0083f5; border-bottom: 2px solid #0083f5; } } .list { width: 100%; display: block; position: relative; } @keyframes showValid { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } @keyframes showInvalid { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } @keyframes shownoInvalid { 0% { transform: translateX(0); } 100% { transform: translateX(-200%); } } .sub-list { &.invalid { position: absolute; top: 0; left: 100%; display: none; } &.showvalid { display: flex; animation: showValid 0.20s linear both; } &.showinvalid { display: flex; animation: showInvalid 0.20s linear both; } &.shownoinvalid { display: flex; animation: shownoInvalid 0.20s linear both; } width: 100%; padding: 20upx 0 120upx 0; .tis { width: 100%; height: 60upx; justify-content: center; align-items: center; font-size: 32upx; } .row { width: 92%; height: 27vw; margin: 20upx auto 10upx auto; border-radius: 8upx; // box-shadow: 0upx 0 10upx rgba(0,0,0,0.1); align-items: center; position: relative; overflow: hidden; z-index: 4; border: 0; .menu { .icon { color: #fff; font-size: 50upx; } position: absolute; width: 28%; height: 100%; right: 0; justify-content: center; align-items: center; background-color: red; color: #fff; z-index: 2; } .carrier { @keyframes showMenu { 0% { transform: translateX(0); } 100% { transform: translateX(-28%); } } @keyframes closeMenu { 0% { transform: translateX(-28%); } 100% { transform: translateX(0); } } &.open { animation: showMenu 0.25s linear both; } &.close { animation: closeMenu 0.15s linear both; } position: absolute; width: 100%; padding: 0 0; height: 100%; z-index: 3; flex-wrap: nowrap; .left { background-color: #fff; width: 72%; background-image: radial-gradient(6px at top right, #ffffff 50px, #ffffff); .title { width: 90%; margin: 0 5%; font-size: 36upx; } .term { width: 95%; background-image: radial-gradient(6px at bottom right, #ffffff 50px, #ffffff); margin-left: 5%; font-size: 26upx; } position: relative; } .right { flex-shrink: 0; width: 28%; color: #fff; background: linear-gradient(to right, #66c4ff, #009DFF); background-image: radial-gradient(6px at bottom left, #009DFF 50px, #009DFF); &.invalid { background: linear-gradient(to right, #aaa, #999); } justify-content: center; .ticket { width: 100%; } .ticket { // background-image: radial-gradient(6px at top left, #f5f5f5 50px, #009DFF); // padding-top: 1vw; justify-content: center; align-items: center; .num { font-size: 30px; font-weight: 600; } .unit { font-size: 28upx; } } } } } } </style>