jikeH5/pages/addjk/signJkDetail.vue

<template>
	<view class="box">

		<view class="top">
			<view class="activityName">{{activity.ActivityName}}</view>
			<view class="stateBox">
				<view class="jinxing" v-if="activity.state=='进行中'">进行中</view>
				<view class="jieshu" v-if="activity.state=='已结束'">已结束</view>
				<view class="weiqiyong" v-if="activity.state=='未启用'">未启用</view>
				<view class="weiqiyong" v-if="activity.state=='未开始'">未开始</view>
				<view class="date" v-if="activity.StartTime">
					{{activity.StartTime.slice(0,10)}}-{{activity.EndTime.slice(0,10)}}</view>
			</view>
		</view>

		<!-- 搜索 -->
		<view class="searchBoxBg">
			<searchBox placeholder="手机号、车牌号、姓名、客户单位" @search='search($event)'></searchBox>
		</view>

		<view class="boxstate">
			<view class="typeBox">
				<view class="type" @click="changeType" v-if="selectTab==0">核销状态</view>
				<view class="type" @click="changeType" v-if="selectTab==1">未核销</view>
				<view class="type" @click="changeType" v-if="selectTab==3">已核销</view>
				<image src="../../static/img/arrow_down.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
			</view>
			<view class="black" v-if="showSift==true">
				<view class="siftBox">
						<view class="siftItem" @click="tab(0)">
							<view class="item" :class="{blueColor:selectTab==0}">全部</view>
							<image v-if="selectTab==0" src="../../static/img/select_icon.png" mode=""
								style="width: 40rpx;height: 40rpx;"></image>
						</view>
						<view class="siftItem" @click="tab(3)">
							<view class="item" :class="{blueColor:selectTab==3}">已核销</view>
							<image v-if="selectTab==3" src="../../static/img/select_icon.png" mode=""
								style="width: 40rpx;height: 40rpx;"></image>
						</view>
						<view class="siftItem" @click="tab(1)">
							<view class="item" :class="{blueColor:selectTab==1}">未核销</view>
							<image v-if="selectTab==1" src="../../static/img/select_icon.png" mode=""
								style="width: 40rpx;height: 40rpx;"></image>
						</view>
					</view>
				
			</view>
			</view>


		<view class="contentBox">
			<view class="itemHistory" v-for="(item,index) in itemData" :key="index">
				<view class="itemTop">
					<image :src="item.HeadImg" mode="" class="icon"></image>
					<view class="topRight">
						<view class="nickName">微信昵称</view>
						<view class="phone">{{item.str}}</view>
					</view>
				</view>

				<view class="timeBox"><span class="leftTitle">报名时间：</span>{{item.CreateTime}}</view>
				<view class="zhuangtaiBox" v-if="item.WriteoffState==1"><span class="leftTitle">核销状态：</span> 未核销</view>
				<view class="zhuangtaiBox" v-if="item.WriteoffState==3"><span class="leftTitle">核销状态：</span> 已核销 {{item.WriteoffTime}}</view>
			</view>

			<!-- 上拉 加载更多 -->
			<view class="noMore" v-if="noMoreShow && (itemData.length!=0)">没有更多数据</view>
			<!-- 无数据空白页 -->
			<nodata v-if="itemData.length==0"></nodata>
		</view>


		

	</view>
</template>

<script>
	import searchBox from '@/components/searchBox/searchBox.vue'
	import nodata from '../../components/nodata/nodata.vue'
	export default {
		components: {
			nodata,
			searchBox
		},

		data() {
			return {
				activity: {},
				page: 1,
				itemData: [],
				noMoreShow: false,
				searchValue: '',
				showSift: false,
				selectTab: 0,

			}
		},
		onLoad(opt) {
			this.activity = JSON.parse(opt.activity);
			console.log('activity==', this.activity);
			this.page = 1
			this.myOrderCoupon()
		},
		methods: {

			changeType() {
				this.showSift = !this.showSift
				// console.log('showSift==', this.showSift);
			},
			tab(state) {
				this.selectTab = state
				this.showSift = false
				this.page = 1
				this.myOrderCoupon()
			},
			search(val) {
				// console.log(val);
				this.searchValue = val
				this.page = 1
				this.myOrderCoupon()
			},

			myOrderCoupon() {
				uni.showLoading({
					title: '加载中'
				})
				this.$http('openH5SetTheGuest/registrationDetails', {
					itemId: this.activity.ID,
					name: this.searchValue,
					writeoffState: this.selectTab ? this.selectTab : '',
					page: this.page,
					limit: 10,
				}, 'GET').then(res => {
					uni.hideLoading();
					// var list = res.data.Items
					var list = res.data.Items
					
					//str 拼接字符串
					list.forEach((item, index) => {
						
						item.str = item.MobilePhone?item.MobilePhone:'' + item.PlateNumber?'/'+item.PlateNumber:'' + item.CustomerName?'/'+item.CustomerName+'/':''  + item.Unit?'/'+item.Unit:''
						
					})

					if (this.page == 1) {
						this.itemData = list
					} else {
						this.itemData = this.itemData.concat(list)
					}

					if (list.length < 10) {
						this.noMoreShow = true
					} else {
						this.noMoreShow = false
					}





				})
			},


		},

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

<style>
	.box {
		min-height: 100vh;
		background-color: #F4F5F7;
		width: 100vw;
	}

	.top {
		padding: 30rpx 24rpx;
		background-color: #FFFFFF;
	}

	.activityName {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
	}

	.stateBox {
		margin-top: 4rpx;
		display: flex;
		align-items: center;
	}

	.jinxing {

		font-size: 22rpx;
		color: #00A040;
		line-height: 30rpx;
		width: 74rpx;
		height: 30rpx;
		background: #F2FBF6;
		border-radius: 4rpx;
	}

	.jieshu {
		font-size: 22rpx;
		color: #FF6010;
		line-height: 30rpx;
		width: 74rpx;
		height: 30rpx;
		background: #FFECE3;
		border-radius: 4rpx;
	}
	.weiqiyong{
		font-size: 22rpx;
		color: #3C3C3C;
		line-height: 30rpx;
		width: 74rpx;
		height: 30rpx;
		background: #F4F5F7;
		border-radius: 4rpx;
	}

	.date {
		height: 30rpx;
		font-size: 22rpx;
		color: #999999;
		line-height: 30rpx;
		margin-left: 15rpx;
	}

	.searchBoxBg {

		width: 100%;
		background-color: #FFFFFF;
		border: 1rpx solid #EEEEEE;
	}

	.searchBox {
		display: flex;
		height: 72rpx;
		margin: 24rpx;
		background-color: #F4F5F7;
		border-radius: 36rpx;
		padding: 30rpx 24rpx;
	}
	.boxstate{
		position: relative;
		width: 100vw;
	}
	.typeBox {
		background-color: #FFFFFF;
		padding: 30rpx 24rpx;
		display: flex;
		align-items: center;
	}

	.type {
		width: 114rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
	}





	.contentBox {
		padding: 20rpx 24rpx;
		height: calc(100vh - 415rpx);
	}

	.itemHistory {

		padding: 24rpx 20rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.itemTop {
		display: flex;
		padding-bottom: 24rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.icon {
		width: 72rpx;
		height: 72rpx;
		border-radius: 36rpx;
		margin-right: 20rpx;
	}

	.nickName {
		height: 42rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #3C3C3C;
		line-height: 42rpx;
		margin-bottom: 8rpx;
	}

	.phone {
		height: 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		line-height: 33rpx;
	}

	.timeBox {
		height: 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #3C3C3C;
		line-height: 33rpx;
		margin-top: 24rpx;
	}

	.leftTitle {
		color: #999999;
		font-size: 24rpx;
	}

	.zhuangtaiBox {
		height: 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #3C3C3C;
		line-height: 33rpx;
		margin-top: 16rpx;
	}

	.black {
		width: 100vw;
		height: calc(100vh - 414rpx);
		background: rgba(0, 0, 0, 0.6000);
		z-index: 999;
		position: absolute;
	}

	.siftBox {
		width: 100vw;
		background-color: #FFFFFF;
		
	}

	.siftItem {
		padding: 22rpx 24rpx;
		border-bottom: 1rpx solid #EEEEEE;
		display: flex;
		justify-content: space-between;
	}

	.item {
		height: 37rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #3C3C3C;
		line-height: 37rpx;
	}

	.blueColor {
		color: #3F90F7;
	}



	.noMore {
		text-align: center;
		line-height: 50rpx;
		color: #999999;
		font-size: 28rpx;
	}
</style>