partnerApp/pages/orders/orders.vue

<template>
	<view class="parent">
		<!-- 查询区域Start -->
		<view class="white flexd "
			style="box-shadow:rgb(255, 204, 149) 0px 0px 6px 1px;z-index: 99; background:  linear-gradient(to left, #f2994a, #f2c94c);padding-top: 50px;">
			<view class="search">
				<u-search v-model="pageRequest.licenseNo" @custom="custom" @search="search" :shape="shape"
					:clearabled="clearabled" :show-action="showAction" :input-align="inputAlign" @clear="clear"
					placeholder="车牌号搜索"></u-search>
			</view>
			<u-dropdown active-color="#fff" inactive-color="#fff" ref="uDropdown">
				<u-dropdown-item title="筛选条件">
					<view class="slot-content1">
						<view class="dis f-c">
							<text class="title" style="margin:0 10px;">订单状态</text>
							<view class="dis  a-c f-wrap" style="margin: 10px;">
								<view class="status-data" :class="item.value==pageRequest.orderStatus? 'active':''"
									v-for="(item,index) in statusList" @tap="statusclick(index)" :key="index">
									{{item.label}}
								</view>
							</view>
						</view>
						<view class="dis f-c">
							<text class="title" style="margin:0 10px;">保险公司</text>
							<view class="dis  a-c f-wrap" style="margin: 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="dis f-c">
							<text class="title" style="margin:0 10px;">订单日期</text>
							<view class="dis  a-c f-wrap" style="margin: 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>
									<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 class="dis j-s a-c" style="margin:10px;">
							<u-button type="success" size="medium" :hair-line="false" style="width: 45%;"
								@click="closeDropdown">取消</u-button>
							<u-button type="warning" size="medium" style="width: 45%;"
								@click="querysearch">确定</u-button>
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="search" style="padding-top: 150px;">
			<view class=" orderItemPane" v-for="(item,index) in pageResult" :key="index" @click="querydetail(item)">
				<view class="orderItemPane-upper dis j-s a-c search">
					<view class="dis j-s">
						<view class="icon iconfont icon-tree-round-car"
							style="color: rgba(255, 154, 23, 0.57);margin-right: 5px;">
						</view>
						<text class="title">{{item.licenseno}}</text>
					</view>
					<text class="upper-time moosize">{{item.createtime}}</text>

				</view>
				<view class="orderItemPane-centre " style="padding: 0 10px;">
					<view class="status dis j-end">
						<view v-for="(statusitem,statusindex) in statusList" :key="statusindex">
							<text v-if="item.orderstatus==statusitem.value"
								:style="{color:statusitem.color}">{{statusitem.label}}
								<u-icon name="arrow-right" size="14px"
									style="margin-left: 5px;color: #999;"></u-icon></text>
						</view>
					</view>
					<view class="dis f-wrap item  ">
						<text>投保人：{{item.insuredname}}</text>
						<text>投保险种：{{item.product}}</text>
						<text v-if="item.orderstatus=='3'">承保公司：{{item.insCompany}}</text>
						<text>订单号：{{item.orderno}}</text>
					</view>
				</view>
				<view class="orderItemPane-below dis a-c  j-end search">
					<u-button type="primary" size="mini" :hair-line="false" :plain="true"
						@click="quotehistory(item)">报价历史</u-button>
					<u-button v-if="item.orderstatus!='3'" type="success" 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 {
				dwdw: this.$u.color['success'],
				/* 时间筛选相关 */
				startShow: false,
				endShow: false,
				params: {
					year: true, //年
					month: true, //月
					day: true, //日
				},
				/* 时间筛选相关 */
				pageRequest: { //查询的默认条件
					companyId: "",
					orderNo: "",
					frameNo: "",
					insuredName: "",
					licenseNo: "",
					orderStatus: "",
					userId: "",
					deptId: "",
					endDate: "",
					startDate: "",
					pageNum: 1,
					pageSize: 20,
				},
				timespecifications: null,
				pageResult: [], //列表数据
				/* 搜索框配置 */
				shape: 'round',
				clearabled: true,
				showAction: true,
				inputAlign: 'left',
				/* 搜索框配置 */
				//状态筛选list
				statusList: [{
						label: '报价中',
						value: 0,
						color: "#1E9600"
					},
					{
						label: '待核保',
						value: 1,
						color: "#f5af19"
					},
					{
						label: '已核保待缴费',
						value: 2,
						color: "#f12711"
					},
					{
						label: '已承保',
						value: 3,
						color: "#86A8E7"
					},
					{
						label: '核保退回',
						value: 4,
						color: "#bdc3c7"
					}
				],
				//日期筛选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']),
			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;
				}
			},
			//展开
			selectMore(val) {
				this.insureMore = true;
				this.insureMoreIndex = val;
			},
			packup(val) {
				this.insureMore = false;
				this.insureMoreIndex = val;
			},
			//取消事件
			closeDropdown() {
				this.$refs.uDropdown.close();
			},
			//查询事件
			querysearch() {
				this.getOrdersList();
				this.$refs.uDropdown.close();
			},
			//状态筛选
			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/orders/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/carInsure1/quote1?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: #f2f2f2;
	}
</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;
	}



	.parent {}


	.search {
		padding: 10px;

	}

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

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

	.status-data {
		padding: 4px 10px;
		box-sizing: border-box;
		margin: 0 7px 7px 0;
		font-size: 15px;
		border: 1px solid #eee;
		border-radius: 5px;
		cursor: pointer;

	}

	.active {
		background: rgba(234, 142, 45, 0.08);
		color: #ff9556;
		border: 1px solid rgba(234, 85, 45, 0.01);
		font-weight: 700;
	}

	.white {
		background-color: white;
	}

	.orderItemPane {
		background-color: white;
		width: 100%;
		height: auto;
		margin: 10px 0;
		border-radius: 10px;
		box-shadow: 0 0 6px 1px #e3e3e3;
		// padding: 10px 10px 0 10px;
		cursor: pointer;
	}

	.orderItemPane .orderItemPane-centre,
	.orderItemPane .orderItemPane-upper .upper-time,
	.inscommny-sum>text {
		color: #999;
	}

	.orderItemPane-centre .status,
	.inscommny-sum>text text {
		color: #ff9000;
		font-weight: bold;
	}

	.orderItemPane-centre .item {
		border-bottom: 1px solid #f2f2f2;

	}

	.orderItemPane-centre .item>text,
	.inscommny-sum>text {
		margin: 0 10px 4px 10px;
		font-size: 14px;
	}

	.orderItemPane-below {
		height: auto;
		border-bottom: 1px solid #f2f2f2;

		&>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 {
		color: #ff9000;
	}

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