wxThird/pages/subPack/luckList.vue

<template>
	<view class="content">
		<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="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'
	export default {
		components: {
			nodata
		},
		data() {
			return {
				list:[],
				chooseTab: 0,
				page: 1,
				limit: 9,
				loading:false,
			}
		},
		onLoad(opt) {
			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.getData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

	}
</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;
	}
	.tablineActyh{
		color: #FF7D30;
		border-bottom: 5rpx solid #FF7D30;
	}
</style>