service_card/qianshancardshang_wx/pages/index/record.vue

<template>
	<view class="index">
		<view class="sous_sear">
			<view class="sous_box" @click="getSearch">
				<image :src="searimg" class="sous_img"></image>
				<input  placeholder="请输入姓名或时间查询" class="sous_input" disabled/>
			</view>
		</view>
		<p style="height: 20rpx; background-color: #f2f2f2;"></p>
		<view class="tab">
			<!-- //表格 -->
			<view class="exele">

				<view class="box">
					<table @change="change">
						<tr class="tr_one">
							<th style="width: 120rpx; text-align: center;">姓名</th>
							<th style="width:230rpx; text-align: center;">手机号码</th>
							<th style="width: 120rpx; text-align: center;">等级</th>
							<th style="width: 230rpx; text-align: center;">核销时间</th>
						</tr>
						<scroll-view scroll-y class="scroll-view" upper-threshold="40" lower-threshold="40" @scrolltolower="bot_btn" :style="'max-height: calc(100vh - 210rpx - '+padtop+'px);'">
							<tr v-for="(item,index) in list" :key="index" :class=" [index%2  ==0 ? 'two_tr two_trtwo':'two_tr']" @click="chakn(item)">
								<td style="width: 120rpx; text-align: center;" >{{item.creditName==null?'暂无信息':item.creditName}}</td>
								<td style="width: 280rpx; text-align: center;" >{{item.creditPhone==null?'暂无信息':item.creditPhone}}</td>
								<td style="width: 120rpx; text-align: center;" >{{item.recordLevel==null?'暂无信息':item.recordLevel}}</td>
								<td style="width: 230rpx; text-align: center;" >{{item.createTime==null?'暂无信息':item.createTime}}</td>
								<!-- <td style="width: 50rpx; color: #32B16C;" @click.stop="goDetail(item)">查看</td> -->
							</tr>
							<div class="shax" v-if="list.length>0">
								{{wtdt}}
							</div>
							<div class="zanwu " v-else><span>暂无数据</span></div>
						</scroll-view>
						
					</table>
				</view>

			</view>
		</view>

		
		<!-- 弹窗 -->
		<!-- 搜索弹窗 -->
		<view class='bgbox' v-if="searchflag"></view>
		<view class="sfixed" v-if="searchflag">
			<view class="sfixed_tit">筛选查询</view>
			<image :src="closeimg" class="sfixed_clo" @click="getSearClose"></image>
			<view class="sfixed_box">		
				<input placeholder="请输入姓名进行查询" class="sfixed_inp" type="text" value="" v-model="creditName"/>
				<view class="sfixed_line"></view>
				<view class="sfixed_flex">
					<view class="sfixed_a">筛选条件</view>
					<view class="sfixed_ar" @click="getClearFn">重置</view>
				</view>
				<view class="address">
					<view class="addtita">核销年份</view>
					<view class="addressa">
						<picker mode="date" fields="year" :value="recordYear" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="addsa" :style="recordYear?'':'color:#aaaaaa'">{{recordYear?recordYear:'选择核销年份'}}</view>
						
					</picker>
					<image :src="rimg" class="addsimg"></image>
					</view>
				</view>
				<view class="address">
					<view class="addtita">核销日期</view>
					<view class="addressa">
						<picker mode="date" :value="createTime" @change="bindDateChangeTime">
						<view class="addsa" :style="createTime?'':'color:#aaaaaa'">{{createTime?createTime:'选择核销日期'}}</view>
						
					</picker>
					<image :src="rimg" class="addsimg"></image>
					</view>
					<!-- <view class="addressa">
						<view class="addsa" style="color:#AAAAAA;">选择核销日期</view>
						<image :src="rimg" class="addsimg"></image>
					</view> -->
				</view>
				<!-- <view class="address">
					<view class="addtita">核销等级</view>
					<view class="addressa">
						<picker  :value="levelval" :range="levellist" range-key='label' @change="bindDateChangeLevel">
							<view class="addsa" :style="recordLevel?'':'color:#aaaaaa'">{{recordLevel?recordLevel:'选择核销等级'}}</view>
							
						</picker> -->
						<!-- <view class="addsa" style="color:#AAAAAA;">选择核销等级</view> -->
					<!-- 	<image :src="rimg" class="addsimg"></image>
					</view>
				</view> -->
			</view>
			<view class="sfixed_btn" @click="Seach">查询</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			 // const currentDate = this.getDate({
			 //            format: true
			 //        })
			return {
				searimg:require("@/static/image/search.png"),
				closeimg:require("@/static/image/del.png"),
				searchflag:false,
				rimg:require('@/static/image/rimg.png'),
				//列表数据
				list: [],
				params: { //上拉刷新
					pageNum: 1,
					pageSize:20,
					recordYear:"",
					createTime:'',
					recordLevel:'',
					businessId:'',
				},
				haveMore: true,
				wtdt: '上拉加载更多',
				listShow: true, //判断是否有数据 true 有

				creditName:null,//姓名
				recordYear:'',//核销年份
				createTime:'',//核销日期
				recordLevel:"",//核销等级
				levellist: [],//核销等级
				levelval:0,
				businessId:'',
			};
		},
		onShow() {
			return
			let type = uni.getStorageSync('token')
			if (!type) {
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		},
		 // computed: {
		 //        startDate() {
		 //            return this.getDate('start');
		 //        },
		 //        endDate() {
		 //            return this.getDate('end');
		 //        }
		 //    },
		onLoad(option) {
			uni.$on('refreshData',(data) => {

				this.params.pageNum = 1;
				this.list = []
				// 修改 获取列表的
				// 获取统计
				this.lists(this.params)
			})
			this.businessId = uni.getStorageSync('businessId');
			this.params.businessId=uni.getStorageSync('businessId');
			 // this.getTownsFn();
			 this.params.pageNum = 1
			 this.list = []
			 // 修改 获取列表的
			 // this.lists(this.params)
			 // 获取字典值
			 // this.getStatelist()
		},
		beforeDestroy() {
			uni.$off("refreshData")
		},
		created() {

		},
		methods: {
			bindDateChange: function(e) {
			    this.recordYear = e.detail.value
			},
			bindDateChangeTime(e){
				this.createTime = e.detail.value
				if(this.recordYear){
					var d=e.detail.value.split('-')
					this.recordYear=d[0]
				}
			},
			bindDateChangeLevel(e){
				var idx=e.detail.value
				this.levelval = idx;
				this.recordLevel=this.levellist[idx].value
			},
			// getDate(type) {
			//             const date = new Date();
			//             let year = date.getFullYear();
			//             let month = date.getMonth() + 1;
			//             let day = date.getDate();
			
			//             if (type === 'start') {
			//                 year = year - 60;
			//             } else if (type === 'end') {
			//                 year = year + 2;
			//             }
			//             month = month > 9 ? month : '0' + month;
			//             day = day > 9 ? day : '0' + day;
			//             // return `${year}-${month}-${day}`;
			//             return `${year}`;
			//         },

			
			// 字典值
			getStatelist(){
				var that=this;
				// 旧字典值
				this.$http.get("system/dict/data/type/credit_level").then(res => {
					if (res.code == 200) {
						that.levellist = res.data.map(v => {
							return {
								label: v.dictLabel,
								value: v.dictValue
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
				
					}
				})
			},
			getSearch(){
				this.recordYear=this.params.recordYear||"";
				this.createTime=this.params.createTime||"";
				this.recordLevel=this.params.recordLevel||"";
				this.creditName=this.params.creditName||"";
				this.searchflag=true;
			},
			getSearClose(){
				this.searchflag=false
			},
			getClose(){
				this.houseflag=false;
				this.delfalg=false;
			},
			getClearFn(){
				this.recordYear='';
				this.createTime='';
				this.recordLevel='';
				this.creditName='';
			},
			lists(params) {
				this.$http.get("system/record/list", params).then(res => {
					//停止下拉加载
					uni.hideNavigationBarLoading()
					uni.stopPullDownRefresh()
					if (res.code == 200) {
						if (res.rows.length < params.pageSize) {
							this.listShow = false
							this.haveMore = false
							this.wtdt='到底了~';
						} else {
							var num=parseInt(res.rows.length)+parseInt(params.pageSize)*parseInt(params.pageNum-1)
							if(num<res.total){
								this.listShow = true
								this.haveMore = true
								this.wtdt='上拉加载更多'
							}else{
								this.listShow = false
								this.haveMore = false
								this.wtdt='到底了~';
							}	
						}
						if(params.pageNum==1){
							this.list = res.rows
						}else{
							this.list = this.list.concat(res.rows) 
						}
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
				
				
					}
				})
			},
			//刷新
			bot_btn() {
				if (this.haveMore) {
					this.params.pageNum++
					this.lists(this.params)
				}
			},

			//搜索
			Seach() {
				this.list = [];
				this.searchflag=false;
				this.params={
					pageNum:1,
					pageSize: 20,
					recordYear:this.recordYear,
					createTime:this.createTime,
					recordLevel:this.recordLevel,
					creditName:this.creditName,
					businessId:this.businessId,
				}
				this.list = [];
				this.lists(this.params)
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	// 新的
	.sous_sear{
		padding: 18rpx 34rpx;background: #FFFFFF;
		.sous_box{width: 100%;height: 72rpx;
background: #F2F2F2;
border-radius: 36rpx;display: flex;align-items: center;padding: 0 34rpx;box-sizing: border-box;
			.sous_img{width: 32rpx;height: 34rpx;margin-right: 18rpx;flex: 0 0 auto;}
			.sous_input{font-size: 30rpx;color: #AAAAAA;flex: 1;}
		}
	}
	//tab
	.tab {
		.tabs {
			.one_tab {
				color: #1678FF !important;
	
			}
	
			.one_tabqie {
				border-bottom: 8rpx solid #1678FF;
	
			}
		}
	}
	
	// 搜索条件width: 562rpx;
	.bgbox{position: fixed;left: 0;right: 0;top: 0;bottom: 0;z-index: 3;
	background: rgba(0,0,0,0.5);}
		.sfixed{min-height: 768rpx;background: #FFFFFF;border-radius: 14rpx;padding: 40rpx 34rpx;box-sizing: border-box;position: fixed;left: 60rpx;right: 60rpx;top: 50%;transform: translateY(-50%);
		z-index: 100;max-height: calc(100vh - 280rpx);overflow-y: auto;
			.sfixed_tit{font-size: 28rpx;font-weight: bold;color: #343434;line-height: 44rpx;text-align: center;}
			.sfixed_clo{width: 34rpx;height: 34rpx;position: absolute;right: 34rpx;top: 44rpx;}
			.sfixed_box{
				padding-top: 20rpx;
				.sfixed_inp{width: 100%;height: 76rpx;background:#F2F2F2;padding: 0 34rpx;box-sizing: border-box;font-size: 28rpx;color: #333333;margin-top: 30rpx;}
				.sfixed_line{width: 62rpx;height: 6rpx;background: #A04CFF;margin: 38rpx auto 32rpx;}
				.sfixed_flex{display: flex;align-items: center;justify-content: space-between;
					.sfixed_a{font-size: 26rpx;font-weight: bold;color: #666666;}
					.sfixed_ar{font-size: 26rpx;font-weight: bold;color: #DF0024;}
				}
			}
			.sfixed_btn{width: 100%;height: 76rpx;background: #A04CFF;
border-radius: 38rpx;font-size: 28rpx;font-weight: bold;
	color: #FFFFFF;text-align: center;line-height: 76rpx;margin-top: 62rpx;}
			
		}
	.address{
			display: flex;align-items: center;
			margin-top: 38rpx;
			.addtita{flex: 0 0 auto;font-size: 28rpx;font-weight: bold;
	color: #343434;}
			.addressa{
				flex: 1;
				display: flex;align-items: center;justify-content: flex-end;
				overflow: hidden;
				.addsa{font-size: 26rpx;color: #333333;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
				flex: 1;text-align: right;
				}
				.addsimg{width: 16rpx;height: 24rpx;margin-left: 10rpx;flex: 0 0 auto;}

			}
			
			.addclear{color: #EA2929;font-size: 26rpx;flex: 0 0 auto;height: 60rpx;line-height: 60rpx;width: 128rpx;text-align:center}
		}
	//暂无数据
	.zanwu {
		text-align: center;
		padding-top: 20rpx;
	
		span {
			font-size: 24rpx;
		}
	}
	.shax {
		// height: 83rpx;
		font-size: 25rpx;
		color: #666;
		text-align: center;
	}
	// .scroll-view {
	// 	max-height: calc(100vh - 401rpx);
	// }
	// 新的
	
	.index {
		// padding-top: 33rpx;
		max-height: 100vh;
		box-sizing: border-box;
		//表格
		.exele {
			.box {
				table{border-spacing: 0rpx;}
				.tr_one {
					display: flex;
					// padding: 0 20rpx;
					box-sizing: border-box;
					justify-content: space-between;
					th {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						line-height: 78rpx;
						height: 78rpx;
					}
				}

				.two_tr {
					display: flex;
					// padding: 0 20rpx;
					box-sizing: border-box;
					justify-content: space-between;

					td {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #343434;
						
						min-height: 82rpx;
						padding: 20rpx 0;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;

					}

					// .tdse {
					// 	color: #E60012 !important;
					// }
					// .apply_span_xl{
					// 	color: #32B16C !important;
					// }
					// .apply_span_xltwo{
					// 	color: #ffa200 !important;
					// }
					// .apply_span_xlfive{
					// 	color: #4c4b4b !important;
					// }
					// .apply_span_xlthreo{
					// 	color: #f00404 !important;
					// }
					// .apply_span_xlforu{
					// 	color: #aaaaaa !important;
					// }
					// .coiu {
					// 	color: #EC1717;
					// }
				}

				.two_trtwo {
					background-color: #F2F2F2;
				}
			}

		}
	}
</style>