<template>
	<view class="page">
		<view class="tabs-box">
			<u-tabs-swiper ref="tabs" :current="current" :list="tabList" @change="tabsChange" :is-scroll="false" :font-size="28" active-color="#0FBB59" :height="70">
			</u-tabs-swiper>
		</view>
		<view class="page-info">
		  	<view class="banner" v-for="(item,idnex) in datalist">
				<view class="list">
					<view class="titles">联系人</view>
					<view class="concat">{{item.name}}</view>
				</view>
				<view class="list">
					<view>联系方式</view>
					<view>{{item.phone}}</view>
				</view>
				<view class="list">
					<view>出行人数</view>
					<view>{{item.num}}人</view>
				</view>
				<view class="list">
					<view>出行时间</view>
					<view>{{item.time}}</view>
				</view>
				<view class="lists">
					<view>状态</view>
					<view :style="item.state==1?'color:#BB9970':item.state==2?'color:#0FBB59':item.state==3?'color:#BB0F0F':'color:#A4A4A4'">{{item.state==1?'待核销':item.state==2?'已核销':item.state==3?'已过期':'已取消'}}</view>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList:[
					{ name: '全部' },
					{ name: '待核销' },
					{ name: '已核销' },
					{ name: '已过期' },
					{ name: '已取消' }
				],
				current: 0,
				datalist: [
					{ name: '张三',state:1,phone:'1981516515611',num:2,time:'2025-03-25 09:00-10:00' },
					{ name: '张三',state:2,phone:'1981516515611',num:2,time:'2025-03-25 09:00-10:00' },
					{ name: '张三',state:3,phone:'1981516515611',num:2,time:'2025-03-25 09:00-10:00' },
					{ name: '张三',state:4,phone:'1981516515611',num:2,time:'2025-03-25 09:00-10:00' },
				],
				
				pageIndex :{
					activityName: '',
					pageNumber: 0,
					pageSize: 10,
					createUser:uni.getStorageSync('user').phone
				},
			};
		},
		onLoad(option) {
			this.imgurl = this.$img
		},
		mounted() {
		
		},
		methods: {
			tabsChange(val) {
				this.pageIndex={
					activityName: '',
					pageNumber: 0,
					pageSize: 10,
					createUser:uni.getStorageSync('user').phone
				}
				this.current = val
				
				if(val == 0){
					this.getAll()
				}else if(val == 5){
					this.pageIndex.activeState = 1
					this.getAll()
				}else if(val==6){
					this.pageIndex.activeState = 2
					this.getAll()
				}else{
					this.getAll(val)
				}
			},
			getAll(val){
				
			}

		}
	}
</script>

<style scoped lang="scss">

	
.poster-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 101;
}
.share-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 999;
}
.poster-container {
  position: relative;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
}
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}
.page-info {
	width: 100%;
	padding: 24rpx;
}
// 活动详情
.banner {
	width: 100%;
	margin-top: 10rpx;
	border-radius: 30rpx;
	background-color: #fff;
	padding: 24rpx 30rpx;
	color: #888D9C;
	margin-bottom: 20rpx;
	.list{
		font-weight: 400;
		color: #3D3D3D;
		font-size: 28rpx;
		padding: 12px 15px;
		border-bottom: 1px solid #C8D2DF;
		display: flex;
		justify-content: space-between;
	}
	.lists{
		font-weight: 400;
		color: #3D3D3D;
		font-size: 28rpx;
		padding: 12px 15px;
		display: flex;
		justify-content: space-between;
	}
	

}
</style>
