wxThird/pages/subPack/luckList.vue

<template>
	<view class="content">
		<homenav :iStatusBarHeight="iStatusBarHeight" :title="'中奖记录'" :cj="4"></homenav>
		<!-- <view class="tabToptyh">
		  <view class="tabToplieyh" @click="getList(0)"  :class="{'tablineActyh':chooseTab==0}">未兑奖</view>
		  <view class="tabToplieyh" @click="getList(1)" :class="{'tablineActyh':chooseTab==1}">已兑奖</view>
		</view> -->
		<view class="tab">
			<view class="tabLine" :class="{tabActive:chooseTab==0}" @click="getList(0)">未兑奖</view>
			<view class="tabLine" :class="{tabActive:chooseTab==1}" @click="getList(1)">已兑奖</view>
			
		</view>
		<view class="newluckLinebox">
			<view class="coupon-item newluckLine" style="flex-direction: column;padding: 15px 10px;box-sizing: border-box;height: auto"
			 v-for="item in list">
			  <view class=" newluckLineActName">{{item.ActName}}</view>
			  <view class="luckDrawBpttom">
			    <view class="luckDrawBtime">抽奖时间: {{item.DrawTime}}</view>
			    <view class="luckDrawBdengji">{{item.PrizeName}}/{{item.PrizeValue}}</view>
			  </view>
			  <view class="luckDrawBtimedj" v-if="item.TakeTime">
			    兑奖时间: {{item.TakeTime}}
			  </view>
			
			</view>
		</view>
         <nodata v-show="list.length==0&&loading"></nodata>
		
		

	</view>
</template>

<script>
	import nodata from '@/components/nodata/nodata.vue'
	import homenav from "@/components/homenav/nav.vue"
	export default {
		components: {
			nodata,homenav
		},
		data() {
			return {
				list:[],
				chooseTab: 0,
				page: 1,
				limit: 10,
				loading:false,
				iStatusBarHeight:'',
			}
		},
		onLoad(opt) {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.getList(0);
		},
		onShow() {
			
		},
		methods: {
			
			getList(num) {
				this.chooseTab=num;
				uni.showLoading({
					title: '加载中'
				});
				this.loading=false
				this.$http('open/miniapp/marketingLuckDraw/listLuckyDrawCustomerDetailPage', {
					page: this.page,
					limit: this.limit,
					prizeState: 1,
					takeState: num
				}, 'POST').then(res => {
					uni.hideLoading();
					this.loading = true;
				
					var list = res.data.records;
				
					if (this.page == 1) {
						this.list = list
					} else {
						this.list = this.items.concat(list)
					}
				
				})
			},
			
			

		},

// 下拉刷新 
		onPullDownRefresh() {
			this.page = 1
			this.getList(this.chooseTab)
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
		// 上拉加载更多
		onReachBottom() {
			this.page++;
			this.getList(this.chooseTab)
		},
	

	}
</script>

<style scoped>
	.content{
		min-height: 100vh;
		background: rgb(247, 247, 247);
	}
	.coupon-item{
	  position: relative;
	  margin: 24rpx 0;
	  background:rgba(255,255,255,1);
	  border-radius:10rpx;
	
	  display: flex;
	  }
	.tabToptyh{
		display: flex;
		justify-content: space-around;
		height: 93rpx;
		background: #ffffff;
		border-bottom: 1px solid #EEEEEE;
	}
	.tabToplieyh{
		line-height: 90rpx;
		color: #3C3C3C;
		font-size: 30rpx;
		font-weight: 400;
	}
	.newluckLineActName{
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;				
		text-overflow: ellipsis;		
		display: -webkit-box;			
		-webkit-line-clamp: 2;			
		line-clamp: 2;					
		-webkit-box-orient: vertical;
		font-size: 28rpx !important;
		font-weight: 500 !important;
	}
	.luckDrawBpttom{
		display: flex;
		justify-content: space-between;
	}
	.luckDrawBtime{
		color: #666666;
		font-size: 24rpx;
	}
	.luckDrawBdengji{
		color: #FF7D30;
		font-size: 24rpx;
	}
	.luckDrawBtimedj{
		color: #666666;
		font-size: 24rpx;
		padding-top: 16rpx;
	}
	.luckDrawBpttom{
		padding-top: 22rpx;
	}
	.newluckLinebox{
		flex: 1;
		overflow-y: auto;
		padding: 12rpx 24rpx;
		padding-top: 92rpx;
	}
	.tablineActyh{
		color: #FF7D30;
		border-bottom: 5rpx solid #FF7D30;
	}
	.tab {
		background: #FFFFFF;
		display: flex;
		justify-content: space-around;
		line-height: 92rpx;
		position: fixed;
		width: calc(100vw - 100rpx);
		padding-left: 50rpx;
		padding-right: 50rpx;
		height: 92rpx;
		z-index: 11;
	}
	
	.tabLine {
	
		font-size: 28rpx;
		color: #333333;
		text-align: center;
	}
	
	.tabActive {
		color: #FF0000;
		font-weight: bold;
		border-bottom: 4rpx solid #FF0000;
	
	}
</style>