mnsx/pages/product/discount.vue

<template>
	<view class="content">
		<view class="top-nav flex">
			<view class="nav-item" v-for="(item,index) in navList" :key="index" :class="{'action': currentIndex == index}" @click="tabChange(index)">
				{{item.tit}}
			</view>
			<view class="jg"></view>
		</view>
		<scroll-view scroll-y="true" class="swiper-box" :style="{'height': height}">
			<empty v-if="navList[currentIndex].loaded === true && navList[currentIndex].list.length === 0"></empty>
			<view class="itemt" v-for="(navItem , index) in navList[currentIndex].list">
				<image :src="currentIndex == 0 ? '../../static/img/act-dis.png': '../../static/img/no-dis.png'" mode=""></image>
				<view class="price" :class="{'price1': currentIndex == 1}">
					{{parseFloat(navItem.coupon_price)}}
				</view>
				<view class="tit">
					{{navItem.coupon_title}}
				</view>
				<view class="time" :class="{'time1': currentIndex == 1}">
					{{navItem._add_time + ' - ' + navItem._end_time}}
				</view>
				<view class="status" :class="{'status1': currentIndex == 1 || navItem.is_fail != 0 }">
					{{navItem.is_fail != 0? '已过期' : currentIndex == 0? '未使用': '已使用'}}
				</view>
				<view class="condition">
					{{parseFloat(navItem.use_min_price) == 0 ? '无门槛': '满' + parseFloat(navItem.use_min_price) + '使用'}}
				</view>
			</view>
			<uni-load-more :status="navList[currentIndex].loadingType"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from '@/components/empty';
	
	import { getMyCoupons } from '../../api/index.js'
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				currentIndex: 0,
				navList: [
					{
						tit: '未使用',
						status: 1,
						list: [],
						page: 1,
						limit: 10,
						loadingType: 'more'
					},
					{
						tit: '已使用',
						status: 2,
						list: [],
						page: 1,
						limit: 10,
						loadingType: 'more'
					}
				],
				height: '',
			}
		},
		onReady() {
			var _this = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.swiper-box').boundingClientRect();
					query.exec(function(res) {
						console.log(res, 'ddddddddddddd');
						_this.height = resu.windowHeight - res[0].top + 'px';
						console.log('打印页面的剩余高度', _this.height);
					});
				},
				fail: res => {}
			});
		},
		onShow() {
			this.loadData()
		},
		methods: {
			tabChange(index) {
				this.currentIndex = index
				this.loadData()
			},
			loadData() {
				let obj = this
				let index = obj.currentIndex
				let navItem = obj.navList[index]
				if(navItem.loadingType == 'noMore' || navItem.loadingType == 'loading') {
					return
				}
				navItem.loadingType = 'loading'
				getMyCoupons({
					page: 1,
					limit: 10
				},navItem.status).then(({data}) => {
					console.log(data,'++++++')
					navItem.list = data
					navItem.page++
					if(data.length == navItem.limit) {
						navItem.loadingType = 'more'
					}else {
						navItem.loadingType = 'noMore'
					}
					obj.$set(navItem,'loaded',true)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-nav {
		height: 100rpx;
		width: 100%;
		background-color: #fff;
		border-top: 1px solid #e7e7e7;
		position: relative;
		.nav-item {
			text-align: center;
			width: 50%;
			line-height: 100rpx;
			font-size: 32rpx;
		}
		.action {
			color: #901b21;
			font-weight: bold;
		}
		.jg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			height: 58rpx;
			width: 2rpx;
			background-color: #e7e7e7;
		}
	}
	.swiper-box {
		// background-color: red;
		padding-top: 30rpx;
		.itemt {
			width: 701rpx;
			height: 199rpx;
			margin: 0 auto 30rpx;
			position: relative;
			image {
				width: 100%;
				height: 100%;
			}
			.price {
				width: 190rpx;
				line-height: 50rpx;
				color: #901b21;
				font-size: 50rpx;
				font-weight: bold;
				position: absolute;
				top: 43rpx;
				left: 21rpx;
				text-align: center;
			}
			.price1 {
				color: #d8d8d8;
				
			}
			.condition {
				width: 190rpx;
				line-height: 50rpx;
				font-size: 24rpx;
				position: absolute;
				top: 100rpx;
				left: 21rpx;
				text-align: center;
				color: #9a9a9a;
			}
			.tit {
				width: 490rpx;
				line-height: 45rpx;
				position: absolute;
				right: 0;
				top: 40rpx;
				font-size: 30rpx;
				font-weight: 500;
				padding-left: 20rpx;
				color: #1b1b1b;
			}
			.time {
				width: 490rpx;
				line-height: 30rpx;
				position: absolute;
				right: 0;
				top: 90rpx;
				font-size: 20rpx;
				font-weight: 500;
				padding-left: 20rpx;
				color: #1b1b1b;
			}
			.time1 {
				color: #d8d8d8;
			}
			.status {
				width: 123rpx;
				line-height: 50rpx;
				border-radius: 25rpx;
				font-size: 24rpx;
				border: 1px solid #1b1b1b;
				color: #1b1b1b;
				text-align: center;
				position: absolute;
				top: 124rpx;
				left: 234rpx;
			}
			.status1 {
				color: #d8d8d8;
				border: 1px solid #d8d8d8;
			}
		}
	}
</style>