vue-insagent-app/pages/orders/orders.vue

<template>
	<view class="parent">
		<!-- 查询区域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%);padding-top:55px;">
					<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','', { 'scolcentent': showDropdown }]"
						@tap.stop.prevent>
						<scroll-view scroll-y="true" class="scolcentent ">
							<view style="padding: 0px 20px;">
								<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(item.value)" :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.dictValue==pageRequest.productid? 'active':''"
											v-for="(item,index) in productsTypeoptions"
											@tap="productstatusclick(item.dictValue)" :key="index">
											{{item.dictTag}}
										</view>
									</view>
								</view>
								<view class="term">
									<text>保险公司</text>
									<view class="dis  a-c f-wrap j-start" 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-start" style="margin-top: 10px;">
										<view class="status-data" :class="item==pageRequest.licenseNo? 'active':''"
											v-for="(item,index) in vehiclePlateList" @tap="licenseNoclick(item)"
											:key="index">
											{{item}}
										</view>
									</view>
								</view>
								<view class="term">
									<text>被保人</text>
									<view class="dis  a-c f-wrap j-start" style="margin-top: 10px;">
										<view class="status-data" :class="item==pageRequest.insuredName? 'active':''"
											v-for="(item,index) in insuranceList" @tap="insuranceclick(item)"
											:key="index">
											{{item}}
										</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(item.value)" :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>
						</scroll-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 v-for="(item,index) in pageResult" :key="index">
				<view class="orderItemPane" v-for="(statusitem, statusindex) in statusList" :key="statusindex"
					v-if="item.orderstatus == statusitem.value" :style="{background:statusitem.itemback}">
					<view class="orderItemPane-upper dis j-s a-c ">
						<view class="dis a-c j-start">
							<image :src="statusitem.src" mode="" style="width: 22px;height: 22px;margin-right: 5px;">
							</image>
							<text class=" licenseno">{{item.licenseno}}</text>
						</view>
						<view class="colorBlock">
							{{item.product}}
						</view>
					</view>
					<view class="orderItemPane-centre ">
						<view class="dis f-c">
							<text>订单号：{{item.orderno}}</text>
							<view class="dis a-c j-s mt-2">
								<view class="dis a-end ">
									<view class="dis f-c a-c">
										<text style="font-size: 24rpx;color: #333">车主</text>
										<text style="font-size: 24rpx;color: #333">{{item.ownerinfo.name}}</text>
									</view>
									<image src="../../static/image/car-insure/phone.png" mode=""
										style="width: 16px;height: 16px;margin: 0 0 5px  10px;"
										@click="phone(item.ownerinfo.mobile)"></image>
								</view>
								<view class="dis a-end ">
									<view class="dis f-c a-c">
										<text style="font-size: 24rpx;color: #333">投保人</text>
										<text style="font-size: 24rpx;color: #333">{{item.applyinfo.name}}</text>
									</view>
									<image src="../../static/image/car-insure/phone.png" mode=""
										style="width: 16px;height: 16px;margin: 0 0 5px  10px;"
										@click="phone(item.applyinfo.mobile)"></image>
								</view>
								<view class="dis a-end ">
									<view class="dis f-c a-c">
										<text style="font-size: 24rpx;color: #333">被保人</text>
										<text style="font-size: 24rpx;color: #333">{{item.insureinfo.name}}</text>
									</view>
									<image src="../../static/image/car-insure/phone.png" mode=""
										style="width: 16px;height: 16px;margin: 0 0 5px  10px;"
										@click="phone(item.insureinfo.mobile)"></image>
								</view>
							</view>
							<view class="dis f-c mt-2">
								<view v-for="(riskitem,riskindex) in item.risk" :key="riskindex">
									<template v-if="riskitem.expirationDay && riskitem.expirationDay !='0'">
										<view v-if="riskitem.riskCode=='0507'" class="time dis j-s a-c">
											<text>交强险到期时间</text>
											<view class="dis a-c j-c">还差
												<text class="downstyle dis j-c a-c ">{{riskitem.expirationDay}}</text>
												天到期
											</view>
										</view>
										<view v-if="riskitem.riskCode=='0510'" class="time dis j-s a-c">
											<text>商业险到期时间</text>
											<view class="dis a-c j-c">还差
												<text class="downstyle dis j-c a-c ">{{riskitem.expirationDay}}</text>
												天到期
											</view>
										</view>
									</template>
									<template v-else-if="riskitem.expirationDay=='0'">
										<view v-if="riskitem.riskCode=='0507'" class="time dis j-s a-c">
											<text>交强险到期时间</text>
											<text>今天到期</text>
										</view>
										<view v-if="riskitem.riskCode=='0510'" class="time dis j-s a-c">
											<text>商业险到期时间</text>
											<text>今天到期</text>
										</view>
									</template>
									<template v-else>
										<view v-if="riskitem.riskCode=='0507'" class="time dis j-s a-c">
											<template v-if="item.orderstatus!=3">
												<text>交强险投保时间</text>
												<text>{{riskitem.startDate}}</text>
											</template>
											<template v-else>
												<text>交强险保险期间</text>
												<text>{{riskitem.startDate}}-{{riskitem.endDate}}</text>
											</template>

										</view>
										<view v-if="riskitem.riskCode=='0510'" class="time dis j-s a-c">
											<template v-if="item.orderstatus!=3">
												<text>商业险投保时间</text>
												<text>{{riskitem.startDate}}</text>
											</template>
											<template v-else>
												<text>商业险保险期间</text>
												<text>{{riskitem.startDate}}-{{riskitem.endDate}}</text>
											</template>
										</view>
									</template>

								</view>


							</view>
						</view>
					</view>
					<view class="orderItemPane-below dis a-c  j-end f-wrap ">
						<u-button v-if="item.orderstatus!='3'"
							:custom-style="{fontSize:'12px',background:'rgba(34,152,5,0.05)',color:'#229805',borderColor:'#229805'}"
							shape="circle" size="mini" :hair-line="false" :plain="true"
							@click="CloseEdit(item.orderno)">进行中</u-button>
						<u-button v-if="item.orderstatus!='3'"
							:custom-style="{fontSize:'12px',background:'rgba(255,86,0,0.05)',color:'#FF5600',borderColor:'#FF5600'}"
							shape="circle" size="mini" :hair-line="false" :plain="true"
							@click="quotehistory(item,'1')">核保中</u-button>
						<u-button v-if="item.orderstatus!='3'"
							:custom-style="{fontSize:'12px',background:'rgba(255,15,0,0.05)',color:'#FF0F00',borderColor:'#FF0F00'}"
							shape="circle" size="mini" :hair-line="false" :plain="true"
							@click="quotehistory(item,'2')">待缴费</u-button>
						<u-button
							:custom-style="{fontSize:'12px',background:'rgba(0,82,255,0.05)',color:'#0052FF',borderColor:'#0052FF'}"
							shape="circle" size="mini" :hair-line="false" :plain="true"
							@click="quotehistory(item,'3')">已承保</u-button>
						<u-button v-if="item.orderstatus!='3'"
							:custom-style="{fontSize:'12px',background:'rgba(158,0,255,0.05)',color:'#9E00FF',borderColor:'#9E00FF'}"
							shape="circle" size="mini" :hair-line="false" :plain="true"
							@click="quotehistory(item,'4')">核保退回</u-button>
					</view>
				</view>
			</view>
			<u-loadmore v-if="pageResult.length!=0" :status="status" />
		</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>
		<u-mask :show="stepShow" @click="stepShow = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<u-steps :list="numList" :current="4" direction="column" mode="number" :viewType="'order'">
						<template v-slot:header>
							<view>这是父组件传递给子组件的头部插槽内容</view>
						</template>

					</u-steps>
				</view>

			</view>
		</u-mask>
		<service-widget @btnClick="btn_click"></service-widget>
	</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 {
				productsTypeoptions: [],
				show: true,
				showDropdown: false,
				/* 时间筛选相关 */
				startShow: false,
				endShow: false,
				params: {
					year: true, //年
					month: true, //月
					day: true, //日
				},
				/* 时间筛选相关 */
				pageRequest: { //查询的默认条件
					companyId: "",
					orderNo: "",
					frameNo: "",
					insuredName: "",
					licenseNo: "",
					orderStatus: "",
					userId: "",
					deptId: "",
					endDate: "",
					startDate: "",
					productid: "",
					pageNum: 1,
					pageSize: 20,
				},
				timespecifications: null,
				pageResult: [], //列表数据
				/* 搜索框配置 */
				shape: 'square',
				clearabled: true,
				showAction: false,
				inputAlign: 'left',
				/* 搜索框配置 */
				//状态筛选list
				statusList: [{
						label: '全部',
						value: " ",
					}, {
						label: '进行中',
						value: 0,
						btnColor: "#229805",
						btnbackground: "rgba(34,152,5,0.05)",
						itemback: "linear-gradient( 180deg, #EEFFE4 0%, #CDFFB6 100%)",
						src: "/static/image/car-insure/state.png"
					},
					{
						label: '核保中',
						value: 1,
						btnColor: "#FF5600",
						btnbackground: "rgba(255,86,0,0.05)",
						itemback: "linear-gradient( 180deg, #FFEDE3 0%, #FFC7AB 100%)",
						src: "/static/image/car-insure/state.png"
					},
					{
						label: '待缴费',
						value: 2,
						btnColor: "#FF0F00",
						btnbackground: "rgba(255,15,0,0.05)",
						itemback: "linear-gradient( 180deg, #FFEEEC 0%, #FFA8A2 100%)",
						src: "/static/image/car-insure/state.png"
					},
					{
						label: '已承保',
						value: 3,
						btnColor: "#0052FF",
						btnbackground: "rgba(0,82,255,0.05)",
						itemback: "linear-gradient( 180deg, #ECFFFE 0%, #CCF9FF 100%)",
						src: "/static/image/car-insure/state.png"
					},
					{
						label: '核保退回',
						value: 4,
						btnColor: "#9E00FF",
						btnbackground: "rgba(158,0,255,0.05)",
						itemback: "linear-gradient( 180deg, #FDECFF 0%, #F5CCFF 100%)",
						src: "/static/image/car-insure/state.png"
					}
				],
				//日期筛选list
				dateList: [{
						label: '全部',
						value: 0,
					},
					{
						label: '近1天',
						value: 1,
					},
					{
						label: '近2天',
						value: 2,
					},
					{
						label: '近3天',
						value: 3,
					},
					{
						label: '近4天',
						value: 4,
					},
					{
						label: '近5天',
						value: 5,
					},
					{
						label: '近6天',
						value: 6,
					},
					{
						label: '近7天',
						value: 7,
					},
					{
						label: '一个月内',
						value: '一个月内',
					},
					{
						label: '三个月内',
						value: '三个月内',
					},
					{
						label: '六个月内',
						value: '六个月内',
					},

				],
				typeArray: [{
						label: '车险',
						value: 0,
					},
					{
						label: '意外险',
						value: 1,
					},
					{
						label: '寿险',
						value: 2,
					}
				], //订单的类型
				vehiclePlateList: [], //车牌
				insuranceList: [], //被保人
				toTopFlag: false, //显示回到顶部按钮
				queryLicenseNo: "",
				queryFrameNo: "",
				insureMore: false,
				insureMoreIndex: null,
				esmInsCompanyList: [],
				status: 'loadmore',
				totalPages: 0, //订单总页数
				stepShow: false, //步骤条弹框
				numList: [{
						"processingStatus": "1",
						"processingStatusFlag": true,
						"name": "提现申请",
						"date": "2024-07-31 19:25:12"
					},
					{
						"processingStatus": "2",
						"processingStatusFlag": true,
						"name": "处理中",
						"date": "2024-07-31 19:25:12"
					},
					{
						"processingStatus": "4",
						"processingStatusFlag": true,
						"name": "提现成功",
						"date": "2024-08-01 08:49:12"
					}
				],
			}
		},
		onReachBottom() {
			if (this.pageRequest.pageNum >= this.totalPages) return;
			this.status = 'loading';
			this.pageRequest.pageNum = ++this.pageRequest.pageNum;
			setTimeout(async () => {
				let res = await this.$http.post('/insurance/order/queryPageOrder', this.pageRequest);
				if (res.code == '200') {
					this.pageResult = [...this.pageResult, ...res.data.content];
				}
				if (this.pageRequest.pageNum >= this.totalPages) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		},
		computed: {
			...mapState(['userInfo', 'typeIndex', 'stageIndex'])
		},

		// 页面滚动触发
		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(1, 20)
			this.esmInsCompany()

		},
		onPullDownRefresh() {
			this.getOrdersList(1, 20)
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		async onLoad(e) {
			this.pageRequest.userId = this.userInfo.sysUser.id;
			this.pageRequest.deptId = this.userInfo.sysUser.deptId;
			this.getOrdersList(1, 20)
			this.getDicType("productsType"); //车船税类型
		},
		methods: {
			...mapMutations(['setOrderType', 'setOrderStage']),
			phone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone, //仅为示例
				});
			},
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			async getOrdersList(page, size) {
				this.pageRequest.pageNum = page;
				this.pageRequest.pageSize = size;
				let res = await this.$http.post('/insurance/order/queryPageOrder', this.pageRequest);
				if (res.code == '200') {
					this.pageResult = res.data.content;
					this.totalPages = res.data.totalPages;
				}
			},
			async getDicType(type) {
				let res = await this.$http.get('/sysDict/dictDetails/' + type);
				if (res.code == 200) {
					this[type + 'options'] = [{
						dictTag: "全部",
						dictValue: " ",
					}, ...res.data.ddList];
				}
			},
			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(1, 20);
				this.showDropdown = false;
			},
			insuranceclick(e) {
				this.pageRequest.insuredName = e;
			},
			licenseNoclick(e) {
				this.pageRequest.licenseNo = e;
			},
			//状态筛选
			statusclick(e) {
				if (e === this.pageRequest.orderStatus) {
					this.pageRequest.orderStatus = ''
				} else {
					this.pageRequest.orderStatus = e;
				}
				// console.log(this.pageRequest.orderStatus)

			},
			//保险公司筛选
			companystatusclick(e) {
				// this.pageRequest.companyId = e;
				if (e == this.pageRequest.companyId) {
					this.pageRequest.companyId = ''
				} else {
					this.pageRequest.companyId = e;
				}

			},
			//投保险种筛选
			productstatusclick(e) {

				if (e == this.pageRequest.productid) {
					this.pageRequest.productid = ''
				} else {
					this.pageRequest.productid = e;
				}
			},
			startShowmethod() {
				this.startShow = true;
				this.timespecifications = null;
			},
			endShowmethod() {
				this.endShow = true;
				this.timespecifications = null;
			},
			//日期筛选
			dateclick(e) {
				console.log(e);
				/* 0:全部  1：一周内 2：一个月内 3：三个月内  4:六个月内*/
				switch (e) {

					case 0:
						this.pageRequest.startDate = "";
						this.pageRequest.endDate = "";

						break;
					case 1:
					case 2:
					case 3:
					case 4:
					case 5:
					case 6:
					case 7:
						this.pageRequest.startDate = this.transformTime(e);
						this.pageRequest.endDate = this.transformTime();
						this.vehiclePlateform(this.pageRequest.startDate, this.pageRequest.endDate);
						this.insuranceform(this.pageRequest.startDate, this.pageRequest.endDate);
						break;
					case '一个月内':
						this.pageRequest.startDate = this.transformTime1(1);
						this.pageRequest.endDate = this.transformTime();
						break;
					case '三个月内':
						this.pageRequest.startDate = this.transformTime1(3);
						this.pageRequest.endDate = this.transformTime();
						break;
					case '六个月内':
						this.pageRequest.startDate = this.transformTime1(6);
						this.pageRequest.endDate = this.transformTime();
						break;
					default:
				}
				this.timespecifications = e;

			},
			async vehiclePlateform(start, end) {
				let res = await this.$http.post('/insurance/order/queryLicenseInOrder', {
					startDate: start,
					endDate: end,
				});
				if (res.code == 200) {
					this.vehiclePlateList = res.data;
				}
			},
			async insuranceform(start, end) {
				let res = await this.$http.post('/insurance/order/queryInsuredInOrder', {
					startDate: start,
					endDate: end,
				});
				if (res.code == 200) {
					this.insuranceList = res.data;
				}
			},
			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, Status) {
				let params = {
					orderno: val.orderno,
					insuredname: val.insuredname,
					licenseno: val.licenseno,
					modelcname: val.carinfo.modelcname,
					orderStatus: Status,
					product: val.product,
					ownername: val.ownerinfo.name,
					applyname: val.applyinfo.name,
					insurename: val.insureinfo.name,
				}
				uni.navigateTo({
					url: `/pages/orders/quoteHistory?orderno=${JSON.stringify(params)}`
				})
			},

			//编辑
			CloseEdit(val) {
				uni.navigateTo({
					url: "/pages/carInsure/premiumCalc?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(1, 20);
			},
			//搜索按钮事件
			custom(val) {
				this.getOrdersList(1, 20);
			},
			//搜索框清除事件
			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;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 90%;
		height: 80%;
		background-color: #fff;
	}
</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;
		/* 下拉菜单内容的最大高度 */
	}

	.scolcentent {
		height: 450px;
		margin-bottom: 10px;
		overflow-y: auto;
		/* 下拉菜单遮罩最大高度 */
	}

	.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: 6px;
		cursor: pointer;
	}

	.orderItemPane-upper {
		background: rgba(255, 255, 255, 0.5);
		border-radius: 6px 6px 0px 0px;
		padding: 13rpx 16rpx;

		.licenseno {
			font-family: Source Han Sans SC, Source Han Sans SC;
			font-weight: bold;
			font-size: 14px;
			color: #181818;
		}

		.colorBlock {
			background: #FF7F00;
			box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
			border-radius: 4px;
			border: 1px solid #FEEDDF;
			color: #fff;
			font-size: 26rpx;
			font-weight: bold;
			padding: 0 10px;
		}
	}

	.orderItemPane-centre {
		padding: 7px 14px;

		>view>text {
			font-weight: bold;
			color: #232832;
		}

		.time {
			>text {
				color: rgba(51, 51, 51, 0.8);
				font-size: 12px;
			}

			.downstyle {
				background: rgba(255, 255, 255, 0.6);
				border-radius: 2px;
				padding: 2px 8px;
				margin: 0 4px;
				color: #333333;
				font-size: 12px;
			}
		}
	}

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

	.orderItemPane-below {
		height: auto;
		padding: 10px;
		background: #ffff;
		border-radius: 0 0 6px 6px;

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


	.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>