qingyuan/pages/subPages2/lottery/previous/previous.vue

<template>
	<view class="previous">
		<view class="previousList" v-if="!!previousList && previousList.length > 0">
			<view class="previousItem" @click="goLotteryIndex(item)" v-for="(item,index) in previousList" :key="index">
				<view class="imgbox">
					<image :src="item.logo" mode=""></image>
					<view class="tag">
						抽奖
					</view>
				</view>
				<view class="content">
					<view class="title">
						<view class="periods">
							{{item.issueno}}期
						</view>
						{{item.title}}
					</view>
					<view class="f-24 col-9">
						开奖时间：{{item.drawtime == 0?'暂未开奖':item.drawtime}}
					</view>
					<view class="stationBtn" v-if="item.status == 0">
						进行中
					</view>
					<view class="nostationBtn" v-if="item.status == 1">
						待抽奖
					</view>
					<view class="yesstationBtn" v-if="item.status == 2">
						已抽奖
					</view>
				</view>
			</view>
		</view>
		<view  v-else>
		<image style="width: 750upx;height: 560upx;" :src="imgfixUrls + 'homemakingImg/wushuju.png'" mode=""></image>		
		</view>
		<TabBars :tabBarAct="0" />
	</view>
</template>

<script>
	import App from "@/common/js/app.js"
	import TabBars from '@/components/template/tabBar';
	export default{
		data(){
			return{
				id:'',
				page:1,
				previousList:[]
			}
		},
		components:{
			TabBars
		},
		onLoad(e) {
			this.id = e.id;
			this.getPrevious(e.id)
		},
		onReachBottom() {
			this.page++;
			this.getPrevious(this.id,true)
		},
		methods:{
			goLotteryIndex(item){
				App.navigationTo({
					url: `pages/subPages2/lottery/lotteryIndex/lotteryIndex?recordid=${item.id}&id=${item.drawid}`
				});
			},
			getPrevious(id,flag = false){
					let _this = this;
					App._post_form('&p=luckydraw&do=getRecordList', {
						id:id,
						page:this.page
					}, res => {
						if(flag){
							this.previousList = this.previousList.concat(res.data);
						}else{
							this.previousList = res.data;
						}
						// this.previousList.map((item,index)=>{
						// 	this.pluginList.map((it,i)=>{
						// 		if(item.plugin == it.type){
						// 			item.pluginName = it.title;
						// 		}
						// 	})
						// });
						console.log(this.previousList);
					}, false, () => {
						// _this.loadlogo = false;
					})
				},
			},
		}
</script>

<style>
	page{
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.previous{
		padding: 30upx 30upx 130upx;
		.previousList{
			.previousItem{
				padding: 20upx;
				display: flex;
				position: relative;
				background-color: #FFFFFF;
				border-radius: 20upx;
				margin-bottom: 20upx;
				.imgbox{
					position: relative;
					.tag{
						width: 70upx;
						height: 34upx;
						background: linear-gradient(130deg, #FEDB58 0%, #FBC84A 100%);
						opacity: 1;
						line-height: 34upx;
						font-size: 24upx;
						color: #E3A815;
						text-align: center;
						font-weight: bold;
						border-radius: 10upx 0upx 10upx 0upx;
						position: absolute;
						left: 0;
						top: 0;
					}
					image{
						width: 220upx;
						height: 220upx;
						border-radius: 10upx;
					}
				}
				.content{
					margin-left: 20upx;
					.title{
						overflow:hidden;
						text-overflow:ellipsis;
						display:-webkit-box;
						-webkit-box-orient:vertical;
						-webkit-line-clamp:2;
						font-size: 28upx;
						font-weight: bold;
						color: #333333;
						height: 70upx;
						margin-bottom: 30upx;
						.periods{
							display: inline-block;
							padding: 0 10upx;
							font-size: 20upx;
							font-weight: 300;
							margin-right: 10upx;
							color: #FFFFFF;
							background-color: #FF4444;
						}
					}
					.stationBtn{
						width: 90upx;
						height: 40upx;
						line-height: 40upx;
						text-align: center;
						background-color: #16D46B;
						color: #ffffff;
						border-radius: 10upx;
						font-size: 24upx;
						position: absolute;
						right: 20upx;
						bottom: 20upx;
					}
					.nostationBtn{
						width: 90upx;
						height: 40upx;
						line-height: 40upx;
						text-align: center;
						background-color: #FFC91E;
						color: #ffffff;
						border-radius: 10upx;
						font-size: 24upx;
						position: absolute;
						right: 20upx;
						bottom: 20upx;
					}
					.yesstationBtn{
						width: 90upx;
						height: 40upx;
						line-height: 40upx;
						text-align: center;
						background-color: #eeeeee;
						color: #999999;
						border-radius: 10upx;
						font-size: 24upx;
						position: absolute;
						right: 20upx;
						bottom: 20upx;
					}
				}
			}
		}
	}
</style>