vue-insagent-app/pages/tools/policy/policy.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 a-c j-s" style="background: linear-gradient( 90deg, #0052FF 0%, #6697FF 100%);">
					<u-search v-model="pageRequest.licenseNo" @custom="custom" @search="search" :shape="shape"
						:height='68' bg-color="rgba(255,255,255,0.5)" color="#fff"
						:input-style="{background:'transparent'}" placeholder-color="#fff" :clearabled="clearabled"
						:show-action="showAction" :input-align="inputAlign" @clear="clear"
						:action-style="{background:'#fff'}" placeholder="请输入车牌号"></u-search>
					<image src="/static/image/car-insure/dropdown.png" mode="" @tap="searchPopup"></image>
				</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="status-data" :class="item.value==pageRequest.orderStatus? 'active':''"
										v-for="(item,index) in statusList" @tap.stop.prevent="statusclick(index)"
										:key="index">
										{{item.label}}
									</view>
								</view>
							</view> -->
							<view class="term">
								<text>保险公司</text>
								<view class="dis  a-c f-wrap j-s" style="margin-top: 10px;">
									<view class="status-data" :class="item.id==pageRequest.companyId? 'active':''"
										v-for="(item,index) in esmInsCompanyList" @tap="companystatusclick(item.id)"
										:key="index">
										{{item.namesimple}}
									</view>
								</view>
							</view>
							<view class="term">
								<text>订单日期</text>
								<view class="dis  a-c f-wrap j-s" style="margin-top: 10px;">
									<view class="status-data" :class="item.value==timespecifications? 'active':''"
										v-for="(item,index) in dateList" @tap="dateclick(index)" :key="index">
										{{item.label}}
									</view>
									<view class="dis a-c">
										<view class="status-data" :class="startShow? 'active' :''"
											@tap="startShowmethod()">
											<text v-if="pageRequest.startDate!=''">{{pageRequest.startDate}}</text>
											<text v-else>{{transformTime()}}</text>
										</view>
										<text style="margin: 0 8px;font-size: 12px;">至</text>
										<view class="status-data" :class="endShow? 'active' :''" @tap="endShowmethod()">
											<text v-if="pageRequest.endDate!=''">{{pageRequest.endDate}}</text>
											<text v-else>{{transformTime()}}</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: 110px 16px 50px 16px;">
			<view class=" orderItemPane" v-for="(item,index) in pageResult" :key="index" @click="querydetail(item)">
				<view class="orderItemPane-upper dis j-s a-c ">
					<view v-for="(statusitem, statusindex) in statusList" :key="statusindex" class="dis a-c"
						style="font-weight: bold;" v-if="item.orderstatus == statusitem.value">
						<image :src="statusitem.src" mode="" style="width: 22px;height: 22px;margin-right: 5px;">
						</image>
						<text :style="{color: statusitem.color}">{{statusitem.label}}</text>
					</view>
					<text class="upper-time moosize">{{item.createtime}}</text>
				</view>
				<view class="orderItemPane-centre ">
					<view class="dis f-c">
						<view class="dis a-c j-s " style="padding:4px 0;">
							<text>{{item.licenseno}}</text>
							<u-icon name="arrow-right" size="14px"
								style="margin-left: 5px;color: #C7C6CA;"></u-icon></text>
						</view>

						<text>订单号：{{item.orderno}}</text>
						<text>业务员：{{item.username}}({{item.userid}})</text>
						<text>被保人：{{item.insureinfo.name}}</text>
						<text>投保险种：{{item.product}}</text>
						<text v-if="item.orderstatus=='3'">承保公司：{{item.insCompany}}</text>

					</view>
				</view>
				<view class="orderItemPane-below dis a-c  j-end ">
					<u-button v-if="item.orderstatus!='3'" :custom-style="{fontSize:'15px'}" type="warning" size="mini"
						:hair-line="false" :plain="true" @click="CloseEdit(item.orderno)">编辑</u-button>
				</view>
			</view>
		</view>
		<o-empty v-if="pageResult.length==0" />
		<!-- 回到顶部 -->
		<u-picker v-model="startShow" mode="time" :params="params" @confirm="startconfirm"></u-picker>
		<u-picker v-model="endShow" mode="time" :params="params" @confirm="endconfirm"></u-picker>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	// import carOrders from "@/components/modules/orders/carOrders.vue";
	import {
		watch
	} from "vue";
	export default {
		components: {},
		watch: {
			stageIndex(newVal, oldVal) {
				if (newVal !== oldVal) {
					this.pageRequest.orderStatus = newVal;
				}
			}
		},
		data() {
			return {
				show: true,
				showDropdown: false,
				/* 时间筛选相关 */
				startShow: false,
				endShow: false,
				params: {
					year: true, //年
					month: true, //月
					day: true, //日
				},
				/* 时间筛选相关 */
				pageRequest: { //查询的默认条件
					companyId: "",
					orderNo: "",
					frameNo: "",
					insuredName: "",
					licenseNo: "",
					orderStatus: "3",
					userId: "",
					deptId: "",
					endDate: "",
					startDate: "",
					pageNum: 1,
					pageSize: 20,
				},
				timespecifications: null,
				pageResult: [], //列表数据
				/* 搜索框配置 */
				shape: 'square',
				clearabled: true,
				showAction: false,
				inputAlign: 'left',
				/* 搜索框配置 */
				//状态筛选list
				statusList: [{
						label: '报价中',
						value: 0,
						color: "#229805",
						src: "/static/image/car-insure/state1.png"
					},
					{
						label: '待核保',
						value: 1,
						color: "#FF5600",
						src: "/static/image/car-insure/state2.png"
					},
					{
						label: '待缴费',
						value: 2,
						color: "#FF0F00",
						src: "/static/image/car-insure/state3.png"
					},
					{
						label: '已承保',
						value: 3,
						color: "#0052FF",
						src: "/static/image/car-insure/state4.png"
					},
					{
						label: '核保退回',
						value: 4,
						color: "#727272",
						src: "/static/image/car-insure/state5.png"
					}
				],
				//日期筛选list
				dateList: [{
						label: '全部',
						value: 0,
					},
					{
						label: '一周内',
						value: 1,
					},
					{
						label: '一个月内',
						value: 2,
					},
					{
						label: '三个月内',
						value: 3,
					},
					{
						label: '六个月内',
						value: 4,
					},

				],
				typeArray: [{
						label: '车险',
						value: 0,
					},
					{
						label: '意外险',
						value: 1,
					},
					{
						label: '寿险',
						value: 2,
					}
				], //订单的类型
				toTopFlag: false, //显示回到顶部按钮
				queryLicenseNo: "",
				queryFrameNo: "",
				insureMore: false,
				insureMoreIndex: null,
				esmInsCompanyList: [],

			}
		},
		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() {
			const arr = uni.getStorageSync('historyInfo');
			if (arr) {
				uni.removeStorageSync('historyInfo');
			}
			this.getOrdersList()
			this.esmInsCompany()
		},
		async onLoad(e) {
			this.pageRequest.userId = this.userInfo.sysUser.id;
			this.pageRequest.deptId = this.userInfo.sysUser.deptId;
			this.getOrdersList()

		},
		methods: {
			...mapMutations(['setOrderType', 'setOrderStage']),
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			async getOrdersList() {
				let res = await this.$http.post('/insurance/order/queryPageOrder', this.pageRequest);
				if (res.code == '200') {
					this.pageResult = res.data.content;
				}
			},
			async esmInsCompany() {
				let commpanykad = await this.$http.get('/insurance/order/getAgreementInsCompany');
				if (commpanykad.code == '200') {
					this.esmInsCompanyList = commpanykad.data;
				}
			},
			searchPopup() {
				this.showDropdown = !this.showDropdown;
			},
			//展开
			selectMore(val) {
				this.insureMore = true;
				this.insureMoreIndex = val;
			},
			packup(val) {
				this.insureMore = false;
				this.insureMoreIndex = val;
			},
			//查询事件
			querysearch() {
				this.getOrdersList();
				this.showDropdown = false;
			},
			//状态筛选
			statusclick(e) {
				this.pageRequest.orderStatus = e;
			},
			//保险公司筛选
			companystatusclick(e) {
				this.pageRequest.companyId = e;
			},
			startShowmethod() {
				this.startShow = true;
				this.timespecifications = null;
			},
			endShowmethod() {
				this.endShow = true;
				this.timespecifications = null;
			},
			//日期筛选
			dateclick(e) {
				/* 0:全部  1：一周内 2：一个月内 3：三个月内  4:六个月内*/
				switch (e) {
					case 0:
						this.pageRequest.startDate = "";
						this.pageRequest.endDate = "";
						break;
					case 1:
						this.pageRequest.startDate = this.transformTime(7);
						this.pageRequest.endDate = this.transformTime();
						break;
					case 2:
						this.pageRequest.startDate = this.transformTime1(1);
						this.pageRequest.endDate = this.transformTime();
						break;
					case 3:
						this.pageRequest.startDate = this.transformTime1(3);
						this.pageRequest.endDate = this.transformTime();
						break;
					case 4:
						this.pageRequest.startDate = this.transformTime1(6);
						this.pageRequest.endDate = this.transformTime();
						break;
					default:
				}
				this.timespecifications = e;
			},
			startconfirm(e) {
				this.pageRequest.startDate = e.year + '-' + e.month + '-' + e.day;
			},
			endconfirm(e) {
				this.pageRequest.endDate = e.year + '-' + e.month + '-' + e.day;
			},
			//验证车架号
			isFrameno(str) {
				let mPattern = /^([0-9A-Z]){17}$/;
				return mPattern.test(str);
			},
			isCarBrand(str) {
				let mPattern = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼A-Z]{1}[A-Z]{1}[A-Z0-9]{4,5}([A-Z0-9挂学警港澳使领]{1}|应急)$/ ||
					/^沪[0-9A-Z]{5}$/ || /^陆丰[0-9A-Z]{4}临$/;
				return mPattern.test(str.trim())
				// return /^陆丰[0-9A-Z]{4}临$/.test(str.trim())
			},
			//查看子订单
			async querydetail(val) {
				let params = {
					orderno: val.orderno,
					insuredname: val.insuredname,
					licenseno: val.licenseno,
					modelcname: val.carinfo.modelcname,
				}
				uni.navigateTo({
					url: `/pages/tools/policy/subOrders?orderno=${JSON.stringify(params)}`
				})
			},
			//报价历史
			quotehistory(val) {
				let params = {
					orderno: val.orderno,
					insuredname: val.insuredname,
					licenseno: val.licenseno,
					modelcname: val.carinfo.modelcname,
				}
				uni.navigateTo({
					url: `/pages/orders/quoteHistory?orderno=${JSON.stringify(params)}`
				})
			},
			//编辑
			CloseEdit(val) {
				uni.navigateTo({
					url: "/pages/carInsure/quote?orderno=" + val
				})
				// this.navigate({
				// 	url: '/pages/carInsure1/quote1',
				// 	success: (res) => {
				// 		res.eventChannel.emit("acceptData", {
				// 			carInfo: val.carinfo, //车辆信息
				// 			ownerInfo: val.ownerinfo, //车主信息
				// 			policyHolderInfo: val.applyinfo, //
				// 			insuredPersonInfo: val.insureinfo,
				// 			riskList: val.risk,
				// 			kindList: val.king,
				// 			orderno: val.orderno, //车辆
				// 			quoteno: val.quoteno, //车主
				// 			vehicleAndVesselTaxForm: val.vehicleAndVesselTax, //车船税

				// 		})
				// 	}
				// }, "navigateTo", true);
			},
			//回车搜索事件
			search(val) {
				this.getOrdersList();
			},
			//搜索按钮事件
			custom(val) {
				this.getOrdersList();
			},
			//搜索框清除事件
			clear(val) {

			},
			//关闭订单后查询
			closeOrders() {
				this.totalSize = 0;
				this.ordersList = []; //获取到的订单列表
				this.currentPage = 1; //当前的页数
				this.totalPages = 1; //总共的页数
			},
			//当前时间
			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;
				return datastr;
			},
			transformTime1(month) {
				var date = new Date();
				date.setFullYear(date.getFullYear());
				date.setTime(date.getTime());
				var strYear = date.getFullYear();
				var strDay = date.getDate();
				var strMonth = month ? (date.getMonth() + 1) - month : date.getMonth() + 1;
				if (strMonth < 10) {
					strMonth = "0" + strMonth;
				}
				if (strDay < 10) {
					strDay = "0" + strDay;
				}
				var datastr = strYear + "-" + strMonth + "-" + strDay;
				return datastr;
			},
		}
	}
</script>
<style>
	page {
		background-color: #F8FAFE;
	}
</style>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	/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: 430px;
		/* 下拉菜单遮罩最大高度 */
	}

	.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 {
		padding: 13px 16px;

		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;
		margin: 0 4px 4px 0;
		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;
	}

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