partnerApp/pages/tools/customer/customer.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<!-- 顶部搜索框区域Start -->
		<view class="search">
			<search @search="search"></search>
		</view>
		<!-- 顶部搜索框区域End -->

		<!-- 查询区域Start -->
		<view class="queryView d-flex">
			<view class="d-flex a-center j-center">
				<picker @change="bindPickerTypeChange" :value="typeIndex" :range="typeArray">
					<view class="d-flex a-center">{{typeArray[typeIndex]}}
						<view class="icon iconfont icon-xiala"></view>
					</view>
				</picker>
			</view>
			<view class="d-flex a-center j-center">
				<picker @change="bindPickerYearChange" :value="yearIndex" :range="yearArray">
					<view class="d-flex a-center">{{yearArray[yearIndex]}}年 <view class="icon iconfont icon-xiala">
						</view>
					</view>
				</picker>
			</view>
			<view class="d-flex a-center j-center">
				<picker @change="bindPickerMonthChange" :value="monthIndex" :range="monthArray">
					<view class="d-flex a-center">{{monthArray[monthIndex]}}月 <view class="icon iconfont icon-xiala">
						</view>
					</view>
				</picker>
			</view>
		</view>
		<!-- 查询区域End -->
		<view class="container-list">
			<view class="container-list-item" v-for="(orderItem,orderIndex) in list " :key="orderIndex"
				@tap="openDetail(orderIndex)">
				<view class="container-list-item-body d-flex">
					<view class="left d-flex flex-1 flex-column">
						<view class="name">{{orderItem.inscompany}}</view>
						<!-- 	<view class="date">保险公司：</view>
						<view class="date">投保险种：交三</view> -->
						<block v-for="(riskItem,riskIndex) in orderItem.riskinfo" :key="riskIndex">
							<template v-if="riskItem.riskCode == '0507'">
								<view class="date">交强险到期时间：{{riskItem.endDate}}</view>
							</template>
						</block>
						<block v-for="(riskItem,riskIndex) in orderItem.riskinfo" :key="riskIndex">
							<template v-if="riskItem.riskCode == '0510'">
								<view class="date">商业险到期时间：{{riskItem.endDate}}</view>
							</template>
						</block>
						<view class="btn d-flex">
							<span class="d-flex a-center j-center" size="mini"
								style="background: #48A0D3;">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</span>
							<span class="d-flex a-center j-center" size="mini" style="background: #48A0D3;">到期提醒</span>
						</view>
					</view>
					<view class="right">
						<view style="font-size:24upx;" class="name d-flex a-center j-center">
							晋AWEKOI3
						</view>
						<view class="name d-flex a-center j-center" style="font-size:24upx;">
							{{orderItem.inscompany}}
						</view>
						<view class="name d-flex a-center j-center" style="font-size:24upx;">交三
						</view>

						<span class="btn">生效中</span>
					</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	import search from "@/components/modules/orders/search.vue";
	import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';
	export default {
		components: {
			search,
			ZPagingMixin
		},
		computed: {
			...mapState(['userInfo']),
			getHeight() {
				let height = uni.getSystemInfoSync().windowHeight - uni.upx2px(184);
				let bgColor = '#FFFFFF';
				if (this.list.length > 0) {
					bgColor = '#F5F5F5';
				}
				return `height: ${height}px; background-color:${bgColor}`;
			}
		},
		data() {
			return {
				list: [],

				/* 查询区域Start */
				typeArray: ['车险'], //订单的类型
				// typeArray:['车险','意外险','寿险'],	//订单的类型
				stageArray: [{
						"label": '待继续',
						"value": '0'
					},
					{
						"label": '核保中',
						"value": '1'
					},
					{
						"label": '已核保',
						"value": '2'
					},
					{
						"label": '已核保待缴费',
						"value": '5'
					},
					{
						"label": '已缴费',
						"value": '6'
					},
					{
						"label": '已承保',
						"value": '7'
					},
					{
						"label": '待修改',
						"value": '3'
					},
					{
						"label": '核保不通过',
						"value": '4'
					},
					{
						"label": '已关闭',
						"value": '99'
					}
				], //订单的阶段
				yearArray: [], //订单的查询年份
				monthArray: [], //订单的查询月份
				typeIndex: 0, //订单的类型选择
				yearIndex: 0, //订单的年份选择
				monthIndex: 0, //订单的月份选择
				/* 查询区域End */

				queryLicenseNo: ''
			}
		},
		onLoad() {
			// 搜索年选项Start
			this.yearArray = [(new Date().getFullYear() - 1), new Date().getFullYear(), (new Date().getFullYear() + 1)]
			this.yearIndex = this.yearArray.length - 1;
			// 搜索年选项End

			// 搜索月选项Start
			var month = new Date().getMonth() + 1;
			for (var i = 1; i <= 12; i++) {
				if (i < 10) {
					this.monthArray.push('0' + i);
				} else {
					this.monthArray.push(i);
				}
			}
			this.monthIndex = new Date().getMonth();
			this.getOrdersList();
			// 搜索月选项End
		},
		methods: {
			// 订单类型发生变化
			bindPickerTypeChange(e) {
				this.typeIndex = e.target.value;
			},

			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())
			},

			search(a) {
				if (this.isCarBrand(a.trim())) {
					this.queryLicenseNo = "";
					this.queryLicenseNo = a.trim();
					this.list = []; //获取到的订单列表
					var infodata = {
						"columnFilters": {
							"orderstatus": {
								"name": "orderstatus",
								"value": "7"
							},
							"licenseNo": {
								"name": "licenseNo",
								"value": this.queryLicenseNo
							},
							"userid": {
								"name": "userid",
								"value": this.userInfo.sysUser.id
							},
							"quotestatus": {
								"name": "quotestatus",
								"value": '1'
							}
						},
						"pageNum": 1,
						"pageSize": 10
					};
					this.getOrdersList(1, 10, infodata); //重新查询订单
				} else {
					return uni.showToast({
						icon: "none",
						title: "请输入正确的车牌号或车架号",
						duration: 1500
					})
				}
			},

			//搜索年发生变化
			bindPickerYearChange(e) {
				this.yearIndex = e.target.value;
				this.monthArray = [];
				for (var i = 1; i <= 12; i++) {
					if (i < 10) {
						this.monthArray.push('0' + i);
					} else {
						this.monthArray.push(i);
					}
				}
				this.list = []; //获取到的订单列表
				this.getOrdersList(1, 10); //重新查询订单
			},
			//搜索月发生变化
			bindPickerMonthChange(e) {
				this.monthIndex = e.target.value
				this.list = []; //获取到的订单列表
				this.getOrdersList(1, 10); //重新查询订单
			},
			//获取订单数据Start
			async getOrdersList() {
				let params = {
					"orderNo": "1731850885233725440"
				};
				let res = await this.$http.post('/insurance/order/querySuborder', params);
				if (res.code == 200) {
					this.list = res.data;
				}
			},
			//获取订单数据End

			//跳转订单详情页面Start（公用）
			openDetail(index) {
				this.navigate({
					url: "/pages/tools/customer/custormerDetail?",
					success: (res) => {
						res.eventChannel.emit("acceptData", {
							item: this.list[index].id
						})
					}
				}, 'navigateTo', true)
			},
			//跳转订单详情页面End（公用）
		}

	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.container-list-item {
		background: #fff;
		margin-bottom: 20rpx;
	}

	.container-list-item-header .date {
		background: rgba($themeColor, 0.8);
		color: #FFFFFF;
		width: 290upx;
		border-radius: 4upx;
		font-size: 24upx;
		text-align: center;
	}


	.container-list-item-body {
		padding: 20upx 30upx;
	}

	.container-list-item-body .left .name {
		font-size: 28upx;
		font-weight: bold;
	}

	.container-list-item-body .left .date {
		font-size: 24upx;
		color: #A3A5A4;
	}

	.container-list-item-body .left .btn>span {
		padding: 0 20upx;
		width: 120upx;
		/* border: 1px solid #587D93; */
		color: #587D93;
		margin: 10upx 20upx;
		font-size: 24upx;
		border-radius: 10upx;
		color: #FFFFFF;
		font-weight: bold;
	}

	.container-list-item-body .right {
		width: 180upx;
		flex-shrink: 0;
		color: #B2B3B2;
		font-size: 26upx;
	}

	.container-list-item-body .right>span {
		line-height: 70upx;
	}

	.container-list-item-body .right .btn {
		padding: 7upx 30upx;
		background: #DD525E;
		color: #FFFFFF;
		border-radius: 10upx;
		margin: 20upx 0 0 20upx;
	}

	/* 查询区域Start */
	.queryView {
		justify-content: space-around;
		height: 82upx;
		line-height: 80upx;
	}

	.queryView>view {
		border-top: 1px solid rgba($themeColor, 0.6);
		border-bottom: 1px solid rgba($themeColor, 0.6);
		border-left: 1px solid rgba($themeColor, 0.6);
		box-sizing: border-box;
		color: rgba($themeColor, 0.6);
	}

	.queryView>view:nth-child(1) {
		flex: 3;
	}

	.queryView>view:nth-child(2) {
		flex: 3;
	}

	.queryView>view:nth-child(3) {
		border-right: 1px solid rgba($themeColor, 0.6);
		flex: 3;
	}

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