vue-insagent-app/pages/tools/customer/customer.vue

<template>
	<view class="parent">
		<service-widget @btnClick="btn_click"></service-widget>
		<!-- 查询区域Start -->
		<view>
			<view class=" flexd " style="z-index: 99;">
				<view class="search dis f-c">
					<view class="dis a-c j-start ">
						<u-icon name="arrow-left" size="40" @tap="back"></u-icon>
						<text style="margin: auto;">客户管理</text>
					</view>
					<view class="dis j-s a-c mt-5">
						<u-search style="box-shadow: 0px 4px 10px 0px #DAE3F4;border-radius: 6px;"
							v-model="pageRequest.param" @custom="custom" @search="search" :shape="shape" :height='68'
							bg-color="#fff" color="#000" :input-style="{background:'transparent'}"
							placeholder-color="rgba(51,51,51,0.6)" :clearabled="clearabled" :show-action="showAction"
							:input-align="inputAlign" @clear="clear" :action-style="{background:'#fff'}"
							placeholder="请输入车牌号、保险公司查询"></u-search>
						<image src="/static/image/addStaff/screen.png" mode="" @tap="searchPopup"></image>
					</view>

				</view>
				<view :class="['dropdown-content', { 'show': showDropdown }]" @tap="searchPopup">
					<view :class="['dropdown-content1','dis','f-c','j-s', { 'show1': showDropdown }]" @tap.stop.prevent>
						<view style="padding: 0 16px; box-sizing: border-box;">
							<view class="term">
								<text>日期筛选</text>
								<view class="dis  a-c f-wrap j-s" style="margin-top: 10px;">
									<view class="dis a-c j-c">
										<text>交强终保日期：</text>
										<view class="status-data" @tap="jqShowmethod()">
											<text v-if="pageRequest.jqStartDate!=''">{{pageRequest.jqStartDate}}</text>
											<text v-else>{{transformTime()}}</text>
										</view>

										<view class="status-data" @tap="jqEndShowmethod()" style="margin-left: 10px;">
											<text v-if="pageRequest.jqEndDate!=''">{{pageRequest.jqEndDate}}</text>
											<text v-else>{{transformTimeEnd()}}</text>
										</view>
									</view>
									<view class="dis a-c j-c mt-2">
										<text>商业终保日期：</text>
										<view class="status-data" @tap="syShowmethod()">
											<text v-if="pageRequest.syStartDate!=''">{{pageRequest.syStartDate}}</text>
											<text v-else>{{transformTime()}}</text>
										</view>
										<view class="status-data" @tap="syEndShowmethod()" style="margin-left: 10px;">
											<text v-if="pageRequest.syEndDate!=''">{{pageRequest.syEndDate}}</text>
											<text v-else>{{transformTimeEnd()}}</text>
										</view>

									</view>
								</view>
							</view>
						</view>
						<view class="operateBtn dis ">
							<view class="cancel dis a-c j-c" @click="showDropdown=false">
								取消
							</view>
							<view class="confirm dis a-c j-c" @click="querysearch">
								确定
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="padding: 160px 16px 50px 16px;">
			<view class="Paging dis f-c " v-for="(item,index) in list" :key="index">
				<view class="pa-title dis a-c j-s">
					<view class="dis a-c ">
						<image :src="item.iconImg" mode=""></image>
						<text>{{item.insCompany}}</text>
					</view>
					<u-button size="mini" type="primary" :custom-style="{fontSize:'14px'}" :plain="true"
						@click="details(item.orderno)">查看详情</u-button>
				</view>
				<view class="pa-cent dis f-c mt-2">
					<view class="dis j-s a-c">
						<text style="color: #333;">车牌号：{{item.licenseno}}</text>
						<u-tag :text="item.product" mode="light" type="warning" border-color="#fff" />
					</view>
					<text v-if="item.jqenddate">交强险终保日期：{{item.jqenddate}}</text>
					<text v-if="item.syenddate">商业险终保日期：{{item.syenddate}}</text>
					<text v-if="item.jqDiff" :class="item.jqDiff<=30 ? 'on':''">交强保期剩余：{{item.jqDiff}}天</text>
					<text v-if="item.syDiff" :class="item.syDiff<=30 ? 'on':''">商业保期剩余：{{item.syDiff}}天</text>
				</view>
			</view>
		</view>
		<!-- 回到顶部 -->
		<u-picker v-model="jqstartShow" mode="time" :params="params" @confirm="jqconfirm"></u-picker>
		<u-picker v-model="systartShow" mode="time" :params="params" @confirm="syconfirm"></u-picker>

		<u-picker v-model="jqendShow" mode="time" :params="params" @confirm="jqEndConfirm"></u-picker>
		<u-picker v-model="syendShow" mode="time" :params="params" @confirm="syEndConfirm"></u-picker>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import {
		watch
	} from "vue";
	export default {
		data() {
			return {

				show: true,
				showDropdown: false,
				/* 时间筛选相关 */
				jqendShow: false,
				syendShow: false,
				jqstartShow: false,
				systartShow: false,
				endShow: false,
				params: {
					year: true, //年
					month: true, //月
					day: true, //日
					hour: true,
					minute: true,
					second: true,
				},
				/* 时间筛选相关 */
				pageRequest: { //查询的默认条件
					jqStartDate: "",
					jqEndDate: "",
					syStartDate: "",
					syEndDate: "",
					userId: "",
					param: "",
					pageNum: 1,
					pageSize: 20,
				},
				pageResult: [], //列表数据
				/* 搜索框配置 */
				shape: 'square',
				clearabled: true,
				showAction: false,
				inputAlign: 'left',
				/* 搜索框配置 */
				toTopFlag: false, //显示回到顶部按钮
				queryLicenseNo: "",
				queryFrameNo: "",
				insureMore: false,
				insureMoreIndex: null,
				esmInsCompanyList: [],
				list: [],

			}
		},
		computed: {
			...mapState(['userInfo', 'typeIndex', 'stageIndex'])
		},

		// 页面触底加载
		onReachBottom() {
			this.currentPage = this.currentPage + 1;
			if (this.totalPages >= this.currentPage) {} else {
				return false;
			}
		},
		// 页面滚动触发
		onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
			if (e.scrollTop > 600) { //当距离大于600时显示回到顶部按钮
				this.toTopFlag = true
			} else { //当距离小于600时显示回到顶部按钮
				this.toTopFlag = false
			}
		},
		onShow() {},
		async onLoad(e) {
			this.pageRequest.userId = this.userInfo.sysUser.id;
			this.pageRequest.jqEndDate = this.transformTimeEnd();
			this.pageRequest.syEndDate = this.transformTimeEnd();
			this.pageRequest.syStartDate = this.transformTime();
			this.pageRequest.jqStartDate = this.transformTime();

			this.querylist();
		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			details(id) {
				uni.navigateTo({
					url: "/pages/tools/customer/custormerDetail?companyId=" + id
				})
			},
			async querylist() {
				let res = await this.$http.post('/insurance/order/getExpirationInsure', this.pageRequest);
				if (res.code == '200') {
					let data = res.data.records;
					this.$base.insCompanyList.map(val => {
						data.map(ele => {
							if (ele.insCompany == val.name) {
								ele.iconImg = val.icon;
							}
							return ele;
						})
					})
					this.list = data;
				}
			},
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
			},

			jqShowmethod() {
				this.jqstartShow = true;
			},
			syShowmethod() {
				this.systartShow = true;
			},
			jqEndShowmethod() {
				this.jqendShow = true;
			},
			syEndShowmethod() {
				this.syendShow = true;
			},
			searchPopup() {
				this.showDropdown = !this.showDropdown;
			},
			//查询事件
			querysearch() {
				this.querylist();
				this.showDropdown = false;
			},
			//状态筛选
			statusclick(e) {
				this.pageRequest.orderStatus = e;
			},

			jqconfirm(e) {
				this.pageRequest.jqStartDate = e.year + '-' + e.month + '-' + e.day + " " + e.hour + ":" + e.minute + ":" +
					e
					.second;
			},
			syconfirm(e) {
				this.pageRequest.syStartDate = e.year + '-' + e.month + '-' + e.day + " " + e.hour + ":" + e.minute + ":" +
					e
					.second;
			},
			jqEndConfirm(e) {
				this.pageRequest.jqEndDate = e.year + '-' + e.month + '-' + e.day + " " + e.hour + ":" + e.minute + ":" + e
					.second;
			},
			syEndConfirm(e) {
				this.pageRequest.syEndDate = e.year + '-' + e.month + '-' + e.day + " " + e.hour + ":" + e.minute + ":" + e
					.second;
			},
			//当前时间
			transformTime(day) {
				var date = new Date();
				date.setFullYear(date.getFullYear());
				date.setTime(date.getTime());
				var strYear = date.getFullYear();
				var strDay = day ? date.getDate() - day : date.getDate();
				var strMonth = date.getMonth() + 1;
				if (strMonth < 10) {
					strMonth = "0" + strMonth;
				}
				if (strDay < 10) {
					strDay = "0" + strDay;
				}
				var datastr = strYear + "-" + strMonth + "-" + strDay + ' 00:00:00';
				return datastr;
			},
			//往后一月时间
			transformTimeEnd(day) {
				let current = new Date().getTime()
				let monthInms = 30 * 24 * 60 * 60 * 1000
				var date = new Date(monthInms + current);
				date.setFullYear(date.getFullYear());
				date.setTime(date.getTime());
				var strYear = date.getFullYear();
				var strDay = day ? date.getDate() - day : date.getDate();
				var strMonth = date.getMonth() + 1;
				if (strMonth < 10) {
					strMonth = "0" + strMonth;
				}
				if (strDay < 10) {
					strDay = "0" + strDay;
				}
				var datastr = strYear + "-" + strMonth + "-" + strDay + ' 00:00:00';
				return datastr;
			},
			//回车搜索事件
			search(val) {
				this.querylist();
			},
			//搜索按钮事件
			custom(val) {
				this.querylist();
			},
			//搜索框清除事件
			clear(val) {

			},
		}
	}
</script>
<style>
	page {
		background-color: #F8FAFE;
	}
</style>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.pa-cent .on {
		color: red !important;
	}

	::deep uni-tabbar .uni-tabbar-bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}

	::deep .u-action[data-v-1a326067] {
		color: #FFFFFF;
	}

	::deep .u-dropdown__menu__item__arrow[data-v-01c0c507] uni-text {
		color: #FFFFFF !important;
	}

	.dropdown-content {
		background-color: rgba(0, 0, 0, 0.6);
		height: 0px;
		opacity: 0;
		transition: opacity 0.3s ease;

		.title {
			font-size: 14px;
			color: #232832;
			font-weight: bold;
			border-bottom: 1px solid #E1E1E1;
		}

		.term {
			padding-top: 10px;

			>text {
				color: #232832;
				font-weight: bold;
				font-size: 13px;
			}
		}

		.operateBtn {
			font-weight: bold;
			font-size: 16px;

			.cancel {
				width: 50%;
				height: 46px;
				color: #0052FF;
				background-color: #EAEAEA;
			}

			.confirm {
				width: 50%;
				height: 46px;
				color: #fff;
				background-color: #0052FF;
			}
		}
	}

	.dropdown-content1 {
		background-color: #fff;
		height: 0px;
		overflow: hidden;
		transition: height 0.4s ease;
	}

	.show {
		height: 100vh;
		opacity: 1;
		/* 下拉菜单内容的最大高度 */
	}

	.show1 {
		height: 200px;
		/* 下拉菜单遮罩最大高度 */
	}

	.headers {
		background-color: rgba(199, 198, 202, 0.4);
		width: 100%;
		height: 0;
		position: absolute;
		z-index: 999;
	}

	.parent {
		position: relative;

	}

	.search-condition {
		padding: 0 16px;

		.title {
			font-size: 14px;
			color: #232832;
			font-weight: bold;
			border-bottom: 1px solid #E1E1E1;
		}

		.term {
			padding-top: 10px;

			>text {
				color: #232832;
				font-weight: bold;
				font-size: 13px;
			}
		}
	}



	.search {
		height: auto;
		width: 100%;
		z-index: 999999;
		padding: 16px;
		padding-top: 50px;
		height: auto;
		background: #F8FAFE;
		background-image: url("/static/image/addStaff/bfg.png");
		background-size: 100% 100%;

		text {
			font-size: 18px;
			font-weight: bold;
			color: #000;
		}

		image {
			width: 22px;
			height: 22px;
			margin-left: 20px;
		}
	}

	.slot-content1 {
		background-color: #FFFFFF;
		padding: 24rpx;
	}

	.title {
		font-weight: bold;
		color: #333;
	}

	.status-data {
		padding: 4px 10px;
		box-sizing: border-box;
		font-size: 12px;
		border: 1px solid #eee;
		cursor: pointer;
	}

	.active {
		position: relative;
		background: rgba(0, 82, 255, 0.1);
		color: #0052FF;
		border: 1px solid #0052FF;
		font-weight: 700;
	}

	.active::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 10px;
		height: 10px;
		background-image: url("/static/image/car-insure/before.png");
		background-size: cover;
	}


	.orderItemPane {
		width: 100%;
		height: auto;
		margin: 10px 0;
		border-radius: 10px;
		background: #FFFFFF;
		box-shadow: 0px 4px 10px 0px #DAE3F4;
		border-radius: 12px;
		cursor: pointer;
		padding: 10px;
	}

	.orderItemPane-upper {
		padding-bottom: 8px;
		border-bottom: 1px solid #D4D0D0;
	}

	.orderItemPane .orderItemPane-centre,
	.inscommny-sum>text {
		color: rgba(51, 51, 51, 0.8);
		font-weight: 400;
	}

	.orderItemPane-centre text:first-child {
		font-weight: bold;
		color: #232832;
	}

	.orderItemPane-below {
		height: auto;

		&>button {
			margin-left: 10px;
		}
	}


	.orderItemPane-extend .extend-button>text {
		color: #ff9000;
		font-size: 12px;
	}

	.orderItemPane-extend {
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
	}

	.classes::before {
		content: "·";
		color: #ff9000;
		margin-right: 10px;
	}

	.flexd {
		position: fixed;
		left: 0;
		right: 0;
	}

	.moosize {
		font-size: 12px;
		color: rgba(51, 51, 51, 0.6);
		font-weight: 400;
	}

	.color {
		color: #ff9000;
	}

	.Paging {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 10px 0px #DAE3F4;
		border-radius: 6px;
		padding: 10px;
		box-sizing: border-box;
		margin-bottom: 10px;

		.pa-title {
			padding-bottom: 6px;
			border-bottom: 1px solid #f2f2f2;

			text {
				font-size: 14px;
				color: #333;
				font-weight: bold;
				margin-left: 6px;
			}

			image {
				width: 20px;
				height: 20px;
			}
		}

		.pa-cent {
			text {
				font-size: 13px;
				color: rgba(51, 51, 51, 0.8);
				font-weight: 400;
			}

			image {
				width: 20px;
				height: 20px;
			}
		}
	}

	/* 查询区域End */
</style>