1.数据统计

pages/addjk/statistics.vue

@@ -1,22 +1,392 @@
-<template>
-	<view>
-		
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
+<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>
 				
-			}
-		},
-		methods: {
-			
-		}
+			</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;
 	}
-</script>
-
-<style>
-
+	.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>