partnerApp/pages/orders/orders.vue

<template>
	<view>
		<!-- 顶部搜索框区域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 range-key="label" @change="bindPickerStageChange" :value="stageIndex" :range="stageArray">
					<view class="d-flex a-center">{{stageArray[stageIndex].label}}
						<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 -->

		<!-- 车险订单Start -->
		<template v-if="typeIndex == 0">
			<carOrders @searchOrder="closeOrders" :stageIndex="stageIndex" :ordersList="ordersList"
				:loadStatus="loadStatus" style="margin-top: 110px;"></carOrders>
		</template>
		<!-- 车险订单End -->

		<!-- 意外险订单Start -->
		<template v-if="typeIndex == 1">
			意外险
		</template>
		<!-- 意外险订单End -->

		<!-- 寿险订单Start -->
		<template v-if="typeIndex == 2">
			寿险
		</template>
		<!-- 寿险订单End -->
		<template v-if="ordersList.length==0">
			<nothingOrder></nothingOrder>
		</template>


		<!-- 回到顶部 -->
		<to-top :showToTop="toTopFlag"></to-top>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import search from "@/components/modules/orders/search.vue";
	import carOrders from "@/components/modules/orders/carOrders.vue";
	import nothingOrder from "@/components/modules/orders/nothingOrder.vue";
	import toTop from "@/components/modules/orders/to-top.vue";
	export default {
		components: {
			search,
			carOrders,
			nothingOrder,
			toTop
		},
		data() {
			return {
				toTopFlag: false, //显示回到顶部按钮
				/* 查询区域Start */
				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,	//订单的类型选择
				// stageIndex:0,	//订单的阶段选择
				yearIndex: 0, //订单的年份选择
				monthIndex: 0, //订单的月份选择
				/* 查询区域End */

				queryLicenseNo: "",
				queryFrameNo: "",
				ordersList: [], //获取到的订单列表
				loadStatus: 0, //上拉加载状态

				// 订单的分页
				currentPage: 1, //当前的页数
				totalPages: 1, //总共的页数
				totalSize: 0, //数据条数
				pageSize: 5, //每次请求的条数
			}
		},
		computed: {
			...mapState(['userInfo', 'typeIndex', 'stageIndex'])
		},
		//上拉加载
		onPullDownRefresh() {
			// 还原订单数据设置
			this.setOrderType(0);
			this.setOrderStage(0);
			// this.typeIndex = 0;
			// this.stageIndex = 0;
			this.totalSize = 0;
			this.loadStatus = 0;
			this.yearIndex = this.yearArray.length - 1; //年份
			this.monthArray = [];
			if (this.yearIndex == (this.yearArray.length - 1)) {
				var month = new Date().getMonth() + 1;
				for (var i = 1; i <= month; i++) {
					if (i < 10) {
						this.monthArray.push('0' + i);
					} else {
						this.monthArray.push(i);
					}
				}
				this.monthIndex = this.monthArray.length - 1;
			} else {
				for (var i = 1; i <= 12; i++) {
					if (i < 10) {
						this.monthArray.push('0' + i);
					} else {
						this.monthArray.push(i);
					}
				}
				this.monthIndex = 0;
			}
			this.ordersList = []; //获取到的订单列表
			this.currentPage = 1; //当前的页数
			this.totalPages = 1; //总共的页数
			this.getOrdersList(); //请求订单数据
		},
		// 页面触底加载
		onReachBottom() {
			this.currentPage = this.currentPage + 1;
			if (this.totalPages >= this.currentPage) {
				this.getOrdersList();
			} else {
				return false;
			}
		},
		// 页面滚动触发
		onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
			if (e.scrollTop > 600) { //当距离大于600时显示回到顶部按钮
				this.toTopFlag = true
			} else { //当距离小于600时显示回到顶部按钮
				this.toTopFlag = false
			}
		},
		onLoad() {
			// 搜索年选项Start
			this.yearArray = [(new Date().getFullYear() - 2), (new Date().getFullYear() - 1), new Date().getFullYear(), ]
			this.yearIndex = this.yearArray.length - 1;
			// 搜索年选项End

			// 搜索月选项Start
			var month = new Date().getMonth() + 1;
			for (var i = 1; i <= month; i++) {
				if (i < 10) {
					this.monthArray.push('0' + i);
				} else {
					this.monthArray.push(i);
				}
			}
			this.monthIndex = this.monthArray.length - 1;
			// 搜索月选项End
		},
		onShow() {
			this.ordersList = []; //获取到的订单列表
			this.currentPage = 1; //当前的页数
			this.totalPages = 1; //总共的页数
			this.totalSize = 0;
			// 获取订单列表Start
			this.getOrdersList()
			// 获取订单列表End
		},
		methods: {
			...mapMutations(['setOrderType', 'setOrderStage']),
			// 订单类型发生变化
			bindPickerTypeChange(e) {
				// this.typeIndex = e.target.value;
				console.log(e.target.value)
				this.setOrderType(e.target.value);
				console.log(this.typeIndex)
			},
			// 订单阶段发生变化
			bindPickerStageChange(e) {
				this.queryFrameNo = ""
				this.queryLicenseNo = "";
				// this.stageIndex = e.target.value
				this.setOrderStage(e.target.value); //订单阶段
				this.totalSize = 0;
				this.ordersList = []; //获取到的订单列表
				this.currentPage = 1; //当前的页数
				this.totalPages = 1; //总共的页数
				this.getOrdersList(); //重新查询订单
			},
			//搜索年发生变化
			bindPickerYearChange(e) {
				this.queryFrameNo = ""
				this.queryLicenseNo = "";
				this.yearIndex = e.target.value;
				this.monthArray = [];
				if (this.yearIndex == (this.yearArray.length - 1)) {
					var month = new Date().getMonth() + 1;
					for (var i = 1; i <= month; i++) {
						if (i < 10) {
							this.monthArray.push('0' + i);
						} else {
							this.monthArray.push(i);
						}
					}
					this.monthIndex = this.monthArray.length - 1;
				} else {
					for (var i = 1; i <= 12; i++) {
						if (i < 10) {
							this.monthArray.push('0' + i);
						} else {
							this.monthArray.push(i);
						}
					}
					this.monthIndex = 0;
				}
				this.totalSize = 0;
				this.ordersList = []; //获取到的订单列表
				this.currentPage = 1; //当前的页数
				this.totalPages = 1; //总共的页数
				this.getOrdersList(); //重新查询订单
			},
			//搜索月发生变化
			bindPickerMonthChange(e) {
				this.queryFrameNo = ""
				this.queryLicenseNo = "";
				this.monthIndex = e.target.value
				this.totalSize = 0;
				this.ordersList = []; //获取到的订单列表
				this.currentPage = 1; //当前的页数
				this.totalPages = 1; //总共的页数
				this.getOrdersList(); //重新查询订单
			},
			//验证车架号
			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())
			},

			search(a) {
				// this.stageIndex = this.stageArray.length-1;
				if (this.isFrameno(a.trim())) {
					this.queryFrameNo = ""
					this.queryLicenseNo = "";
					this.queryFrameNo = a.trim();
					this.totalSize = 0;
					this.ordersList = []; //获取到的订单列表
					this.currentPage = 1; //当前的页数
					this.totalPages = 1; //总共的页数
					this.getOrdersList(); //重新查询订单
				} else if (this.isCarBrand(a.trim())) {
					this.queryFrameNo = ""
					this.queryLicenseNo = "";
					this.queryLicenseNo = a.trim();
					this.totalSize = 0;
					this.ordersList = []; //获取到的订单列表
					this.currentPage = 1; //当前的页数
					this.totalPages = 1; //总共的页数
					this.getOrdersList(); //重新查询订单
				} else {
					return uni.showToast({
						icon: "none",
						title: "请输入正确的车牌号或车架号",
						duration: 1500
					})
				}
			},

			//关闭订单后查询
			closeOrders() {
				this.totalSize = 0;
				this.ordersList = []; //获取到的订单列表
				this.currentPage = 1; //当前的页数
				this.totalPages = 1; //总共的页数
				this.getOrdersList(); //重新查询订单
			},
			//获取订单数据Start
			async getOrdersList() {
				this.loadStatus = 1; //加载中
				var queryStartDate = this.yearArray[this.yearIndex] + '-' + this.monthArray[this.monthIndex] + '-' +
					'01';
				var formatQueryDate = new Date(queryStartDate);
				formatQueryDate.setMonth(formatQueryDate.getMonth() + 1)
				formatQueryDate.setTime(formatQueryDate.getTime() - 24 * 60 * 60 * 1000);
				var queryEndDate = formatQueryDate.getFullYear() + '-' + (formatQueryDate.getMonth() + 1) + '-' +
					formatQueryDate.getDate();
				var data = {
					"columnFilters": {
						"orderstatus": {
							"name": "orderstatus",
							"value": this.stageArray[this.stageIndex].value
						},
						"licenseNo": {
							"name": "licenseNo",
							"value": this.queryLicenseNo
						},
						"frameNo": {
							"name": "frameNo",
							"value": this.queryFrameNo
						},
						"startdate": {
							"name": "startdate",
							"value": queryStartDate
						},
						"enddate": {
							"name": "enddate",
							"value": queryEndDate
						},
						"userid": {
							"name": "userid",
							"value": this.userInfo.sysUser.id
						},
						"quotestatus": {
							"name": "quotestatus",
							"value": '1'
						}
					},
					"pageNum": this.currentPage,
					"pageSize": this.pageSize
				};
				let res = await this.$http.post('/insOrder/findPage', data);
				if (res.code == 200) {
					for (var i = 0; i < res.data.content.length; i++) {
						//解析每一条订单Start
						var singleOrder = {};
						singleOrder.orderno = res.data.content[i].orderno;
						singleOrder.insuredname = res.data.content[i].insureinfo.name;
						singleOrder.inscompany = res.data.content[i].inscompany;
						singleOrder.product = res.data.content[i].product;
						singleOrder.createtime = res.data.content[i].createtime;
						singleOrder.sumpremium = res.data.content[i].sumpremium;
						singleOrder.licenseNo = res.data.content[i].carinfo.licenseNo;
						singleOrder.orderstatus = res.data.content[i].orderstatus;
						singleOrder.quoteno = res.data.content[i].quoteno;
						singleOrder.auditopinion = res.data.content[i].auditopinion;
						singleOrder.showCompanyList = false;
						singleOrder.company = [];
						this.ordersList.push(singleOrder)
						//解析每一条订单End
					}
					this.totalPages = res.data.totalPages;
					this.totalSize = res.data.totalSize;
					this.loadStatus = 0; //上拉加载更多
					if ((this.ordersList.length < 5) || (this.ordersList.length == this.totalSize)) {
						this.loadStatus = 2; //全部数据加载完毕
					}
					// 关闭提示
					uni.stopPullDownRefresh()
					return;
				}
			},
			//获取订单数据End
		}
	}
</script>
<style>
	/* 顶部搜索框区域Start */
	.search {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		background-color: #F8F8F8;
		z-index: 999;
	}

	/* 顶部搜索框区域End */

	/* 查询区域Start */
	.queryView {
		background-color: #fff;
		justify-content: space-around;
		width: 100%;
		height: 90rpx;
		margin-top: 10px;
		position: fixed;
		top: 43px;
		left: 0;
		z-index: 999;
		padding-bottom: 5px;
	}

	.queryView>view {
		border-top: 1px solid #FFC38F;
		border-bottom: 1px solid #FFC38F;
		border-left: 1px solid #FFC38F;
		box-sizing: border-box;
		color: #FFC38F;
	}

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

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

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

	.queryView>view:nth-child(4) {
		border-right: 1px solid #FFC38F;
		flex: 3;
	}

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