zhapp/pages/orders/orders.vue

<template>
	<view class="page">
		<!-- 头部区域 -->
		<u-sticky zIndex="10072" customNavHeight="0">
			<uni-NavBar headerTitle="报价详情" background="#fff" :isSlot="true" :rightSlot="true"
				:borderBottom="orderFilterShow?'1rpx solid #eee':'none'">
				<template #search>
					<view class="order-search dis a-c j-s">
						<view @tap="goToSearch" style="flex: 1;">
							<u-search placeholder="可使用车牌号查询" v-model="SearchText" bgColor="#f7f7f7"
								:showAction="false"></u-search>
						</view>
						<view class="right-icon dis a-c " @tap="orderFilterShow=!orderFilterShow">
							<image src="/static/icon/orders/filterIcon.png" mode=""></image>
							<text>筛选</text>
						</view>
					</view>
				</template>
			</uni-NavBar>
			<!-- 下拉内容（默认隐藏） -->
			<view class="dropdown-content" :class="[ { 'show': orderFilterShow }]">
				<view class="p-3">
					<!-- 筛选条件 -->
					<view class="overflow-content">
						<view class="filterCriteria-item mb-3">
							<text class="title">险种</text>
							<view class="options dis a-c f-wrap mt-3">
								<view class="options-card  dis a-c j-c"
									:class="item.value==pageRequest.productid? 'active':''"
									v-for="(item,index) in insurance_typeoptions" :key="index"
									@click="filterCriteriaClick(item.value,'productid')">
									{{item.label}}
								</view>
							</view>
						</view>
						<view class="filterCriteria-item mb-3">
							<text class="title">录单时间</text>
							<view class="options dis a-c f-wrap mt-3">
								<view class="options-card  dis a-c j-c"
									:class="item.value==timespecifications? 'active':''"
									v-for="(item,index) in dateList" :key="index" @click="dateclick(item.value)">
									{{item.label}}
								</view>
							</view>
							<!-- 自定义时间选择 -->
							<view class="customTime mt-3 dis a-c j-s " @click="customDateShow=true">
								<view class="item  dis a-c j-c">{{pageRequest.startDate|| '起始时间'}}</view>
								<text class="line">-</text>
								<view class="item dis a-c j-c">{{pageRequest.endDate|| '终止时间'}}</view>
							</view>
						</view>
						<view class="filterCriteria-item mb-3">
							<text class="title">保险公司</text>
							<view class="options dis a-c f-wrap mt-3" style="grid-template-columns: repeat(3, 1fr);">
								<view class="options-card nameSimple  dis a-c j-c"
									:class="item.id==pageRequest.companyId? 'active':''"
									v-for="(item,index) in esmInsCompanyList" :key="index"
									@click="filterCriteriaClick(item.id,'companyId')">
									<u--text :lines="1" align="center" :text="item.nameSimple" color="#666"
										size="14"></u--text>
								</view>
							</view>
						</view>
					</view>
					<view class="footer dis a-c j-s ">
						<view class="btn dis a-c j-c mr-3" @click="clearForm">
							清空
						</view>
						<view class="btn btns dis a-c j-c" @click="querySearch">
							确定
						</view>
					</view>
				</view>

			</view>
			<!-- 下拉遮罩 -->
			<view class="overlay-mask" :class="[ { 'show': orderFilterShow }]"
				@click="orderFilterShow=!orderFilterShow">
			</view>
			<view class="tabView">
				<u-tabs :list="statusList" @click="tabClick" :current="statusCurrent" :scrollable="true" lineWidth="32"
					:activeStyle="{ color: '#333', fontWeight: 'bold' }" :inactiveStyle="{ color: '#999' }"
					:itemStyle="{ height: '48rpx' }"></u-tabs>
			</view>
		</u-sticky>
		<!-- 区分两种布局样式 -->
		<view class="content-body">
			<template v-if="statusCurrent==0">
				<view class="orderAll-card" @longpress="bigOrderActionSheet=true" v-for="(item,index) in  subPageResult"
					:key="index">
					<view class="cardAll-header">
						<view class="title dis a-c ">
							<text class="plateNo">{{item.licenseNo}}</text>
							<view class="status-tag dis a-c j-c ml-1" :style="statusColorMatch(item.orderStatus).style">
								{{statusColorMatch(item.orderStatus).label}}
							</view>
							<!-- <text class="company-sum" -->
							<!-- v-if="['1','2','6','7'].includes(item.orderStatus)">12家保司可报价</text> -->
						</view>
						<view class="content dis f-wrap">
							<view class="item">
								<text>姓名</text>
								<text>{{item.ownerName}}</text>
							</view>
							<view class="item">
								<text>投保人</text>
								<text>{{item.policyName}}</text>
							</view>
							<view class="item">
								<text>录单时间</text>
								<text>{{item.createTime.slice(0,10)}}</text>
							</view>
							<view class="item">
								<text>险种</text>
								<text>{{item.productName}}</text>
							</view>
						</view>
					</view>
					<view class="cardAll-btn dis a-c j-end ">
						<view v-for="(cardAllitem,cardAllindex) in cardAllbtns(item.orderStatus)" :key="cardAllindex"
							@click="cardAllbtnChange(cardAllitem.value,item.mainDetails[cardAllitem.value],'ITEM',item)">
							<text>{{cardAllitem.label}}</text>
							<u-badge v-if="item.mainDetails  && item.mainDetails[cardAllitem.value]  "
								numberType="overflow" :max="99" :value="item.mainDetails[cardAllitem.value].length"
								:absolute="true" bgColor="#FF4545" :offset="[-5,-16]"
								style="font-size: 18rpx;"></u-badge>
						</view>
						<view @click="cardAllbtnChangeAll(item.mainDetails,'ALL')">查看全部</view>
					</view>
				</view>
				<u-loadmore v-if="subPageResult.length!=0" :status="substatus" />
			</template>
			<template v-else>
				<view class="orderStatus-card mb-2" v-for="(subPageItem,subPageIndex) in  subPageResult"
					:key="subPageIndex" @click="orderDetails(subPageItem)">
					<view class="header-title dis a-c ">
						<image v-if="subPageItem.companyLogo" :src="subPageItem.companyLogo" class="companyIcon"
							mode=""></image>
						<text class="companyName">{{subPageItem.companyName}}</text>
						<view class="dis a-end price" v-if="subPageItem.sumPremium">
							<text>￥</text>
							<text>{{subPageItem.sumPremium}}</text>
						</view>
					</view>
					<view class="content dis f-wrap">
						<view class="item">
							<text>车主</text>
							<text>{{subPageItem.ownerName}}</text>
						</view>
						<view class="item">
							<text>投保人</text>
							<text>{{subPageItem.policyName}}</text>
						</view>
						<view class="item">
							<text>录单时间</text>
							<text>{{subPageItem.createTime.slice(0,10)}}</text>
						</view>
						<view class="item">
							<text>险种</text>
							<text>{{subPageItem.productName}}</text>
						</view>
					</view>
					<view class="card-footer dis a-c j-s">
						<view class="plateNo-tag dis a-c">
							<text>{{subPageItem.licenseNo}}</text>
						</view>
						<view class="dis a-c btns">
							<view class="loadMore">
								<uni-cloudPopup text="更多" color="#666" size="14"
									:buttons="loadMoreButtons(pageRequest.orderStatus)" direction="bottom"
									@click="val=>cloudPopupChange(val,subPageItem)"></uni-cloudPopup>
							</view>
							<view class="btn" @tap.stop="primaryButtonClick(item,subPageItem)"
								v-for="(item,index) in primaryButton(pageRequest.orderStatus)" :key="index">
								{{item}}
							</view>
						</view>

					</view>
				</view>
				<u-loadmore v-if="subPageResult.length!=0" :status="substatus" />
			</template>
		</view>
		<!-- 订单轨迹弹窗 -->
		<uni-Popup :show="orderTrackingShow" @close='orderTrackingShow=false' headerTitle="订单轨迹" overflow="auto"
			maxHeight="1250rpx">
			<template #content>
				<view class="orderTracking">
					<view class=" dis f-c " v-for="(item,index) in orderTrackingList" :key="index">
						<view class="trackFlow dis a-c j-s">
							<view class="dis a-c ">
								<view class="circle mr-2"></view>
								<text class="time">{{item.createTime}}</text>
							</view>
							<image
								:src="item.orderTrackingisCollapsed?'/static/icon/orders/collapse.png':'/static/icon/orders/expand.png'"
								mode="" @click="toggleCollapse(item)"></image>
						</view>
						<view class="content">
							<text class="actionContent">{{item.createBy}} <text
									class="ml-1">{{matchOperationType(item.optType)}}</text> </text>
							<view v-if="item.orderTrackingisCollapsed">
								<view class="feedbackDetails" v-if="item.status==1">
									{{item.result}}
								</view>
								<view class="updateRecord mt-2" v-if="Array.isArray(item.result)">
									<ul>
										<li v-for="(resultItem,resultIndex) in item.result" :key="resultIndex">
											<text>{{item.createBy}}</text>将<text>{{resultItem.propertyName}}</text>由<text>{{resultItem.oldValue}}</text>修改为<text>{{resultItem.newValue}}</text>
										</li>
									</ul>
								</view>
							</view>

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

			</template>
		</uni-Popup>
		<!-- 子订单状态弹窗 -->
		<uni-Popup :show="subOrderStatusModal" @close='subOrderStatusModal=false' :headerSlot="true"
			headerTitle="选择出单机构" overflow="auto" maxHeight="1280rpx" class="subOrderStatusModalClass">
			<template #header>
				<view class="dis a-c j-c">
					<text class="plateNo">{{itemInfo.licenseNo}}</text>
					<view class="tag">{{itemInfo.productName}}</view>
				</view>
			</template>
			<template #content>
				<view class="content">
					<view class="status-card dis "
						v-if="bigOrderIndicator=='ITEM'? cardAllbtnsIndex==item.statusCode:item.companyOptions!=null"
						:style="{borderColor:item.style.cardBorderColor}" v-for="item in subOrderStatusModalList"
						:key="item.statusName">
						<view class="left-title  dis a-c j-c"
							:style="{borderColor:item.style.titleBorderColor,background:item.style.titlebg}">
							{{item.statusName}}
						</view>
						<view class="right-company dis f-c">
							<view class="item dis a-c " v-for="(companyItem,companyIndex) in item.companyOptions"
								:key="companyIndex" @click="subOrderRedirectLogic(item.statusName,companyItem)">
								<image class="logo" :src="companyItem.logo" mode=""></image>
								<text class="name ml-1">{{companyItem.companyName}}</text>
								<view class="getView dis a-c" v-if="['核保中','核保失败','已承保'].includes(item.statusName)">
									<text class="mr-1">查看</text>
									<u-icon name="arrow-right" color="#666" size="11"></u-icon>
								</view>
								<view class="getView dis a-c" v-if="['报价失败'].includes(item.statusName)">
									<text class="mr-1" style="color: #FFAC1D;">去报价</text>
									<u-icon name="arrow-right" color="#FFAC1D" size="11"></u-icon>
								</view>
								<view class="price dis a-c " v-if="['报价成功','待缴费'].includes(item.statusName)">
									<text class="mr-1">{{companyItem.totalPremium || 0}}</text>
									<u-icon name="arrow-right" color="#FF540A" size="11"></u-icon>
								</view>
							</view>

						</view>
					</view>
				</view>
			</template>
		</uni-Popup>
		<!-- 日期组件 -->
		<uni-datePicker :contentTabslist="contentTabslist" :show="customDateShow" @close="customDateShow=false"
			:quickOptionsShow="true" @customTime="customTime"></uni-datePicker>
		<!-- 大订单长按菜单 -->
		<u-action-sheet :actions="[{name:'删除订单'}]" cancelText="取消" @close="bigOrderActionSheet=false"
			:show="bigOrderActionSheet" :closeOnClickOverlay="false" round="10"
			@select="deletebigOrderShow=true"></u-action-sheet>
		<!-- 大订单删除订单提示 -->
		<uni-PopupMessage :show="deletebigOrderShow" @close='deletebigOrderShow=false'
			@cancelEvent='deletebigOrderEvent' headerTitle="提示" @confirmEvent="deletebigOrderShow=false"
			cancelText="确认删除" confirmText="关闭">
			<template #content>
				<view class="dis a-c j-c ">
					确认要删除订单吗
				</view>
			</template>
		</uni-PopupMessage>
		<!-- 小订单删除 -->
		<uni-PopupMessage :show="deletesubOrderShow" @close='deletesubOrderShow=false'
			@cancelEvent='deletesubOrderEvent' headerTitle="提示" @confirmEvent="deletesubOrderShow=false"
			cancelText="确认删除" confirmText="关闭">
			<template #content>
				<view class="dis a-c j-c ">
					确认要删除订单吗
				</view>
			</template>
		</uni-PopupMessage>
		<!-- 自定义加载动画 -->
		<global-loading :show="loadingShow" :text="loadingText"></global-loading>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import {
		turnBase64Image
	} from "../../plugins/utils";
	export default {
		data() {
			return {
				loadingShow: false, //loading
				loadingText: "加载中", //加载文字
				cloudPopupName: "", //选中搜索字段名称
				fieldName: "", //搜索字段Field
				SearchText: "",
				contentTabslist: [{
					name: "自定义时间"
				}],
				bigOrderId: "", //大订单id
				subOrderId: "", //子订单 id
				deletesubOrderShow: false,
				deletebigOrderShow: false, //删除订单弹窗
				bigOrderActionSheet: false, //大订单长按菜单
				customDateShow: false, //日期组件
				orderFilterShow: false,
				cardAllbtnsIndex: "", //子订单指定状态
				subOrderStatusModal: false, //子订单状态弹窗
				orderTrackingShow: false, //订单轨迹弹窗
				bigOrderIndicator: 'ITEM',
				orderStatus: "1", //订单状态
				AllorderStatus: "7",
				statusCurrent: 0, //状态tabs切换
				insurance_typeoptions: [], //险种集合
				esmInsCompanyList: [], //保险公司集合
				timespecifications: "",
				orderTrackingList: [], //订单轨迹数据
				pageRequest: { //查询的默认条件
					companyId: "",
					orderNo: "",
					frameNo: "",
					insuredName: "",
					licenseNo: "",
					orderStatus: "",
					userId: "",
					deptId: "",
					endDate: "",
					startDate: "",
					productid: "",
					parentId: '0',
					pages: 1,
					size: 20,

				},
				subPageResult: [], //子订单列表
				substatus: "loadmore",
				subtotalPages: 0, //订单总页数
				// 状态列表
				statusList: [{
						name: "全部",
						value: null,
					},
					{
						name: "待核保",
						value: 1,
					},
					{
						name: "核保中",
						value: 2,
					},
					{
						name: "人工处理",
						value: 3,
					},
					{
						name: "待缴费",
						value: 4,
					},
					{
						name: "已承保",
						value: 5,
					}, {
						name: "报价失败",
						value: 6,
					}, {
						name: "核保失败",
						value: 7,
					},
					{
						label: "订单关闭",
						value: 8,
					}
				],
				// 子订单弹窗综合数据
				subOrderStatusModalList: [{
						statusName: "报价成功",
						statusCode: 1,
						style: {
							cardBorderColor: '#FFE6B5',
							titleBorderColor: '#FFF1D5',
							titlebg: '#FFFEF0',
						},
						companyOptions: [],
					},
					{
						statusName: "报价失败",
						statusCode: 6,
						style: {
							cardBorderColor: '#DBECFF',
							titleBorderColor: '#E9F4FF',
							titlebg: '#F2F9FF',
						},
						companyOptions: [],
					},
					{
						statusName: "核保中",
						statusCode: 2,
						style: {
							cardBorderColor: '#FFDDD3',
							titleBorderColor: '#FFE8E1',
							titlebg: '#FFF6F0',
						},
						companyOptions: [],
					},
					{
						statusName: "待缴费",
						statusCode: 4,
						style: {
							cardBorderColor: '#FFE8C2',
							titleBorderColor: '#FFF0D9',
							titlebg: '#FFF9EE',
						},
						companyOptions: [],
					},
					{
						statusName: "核保失败",
						statusCode: 7,
						style: {
							cardBorderColor: '#FFD9D9',
							titleBorderColor: '#FFE5E5',
							titlebg: '#FFF8F8',
						},
						companyOptions: [],
					},
					{
						statusName: "已承保",
						statusCode: 5,
						style: {
							cardBorderColor: '#FFD9D9',
							titleBorderColor: '#FFE5E5',
							titlebg: '#FFF8F8',
						},
						companyOptions: [],
					}
				],
				//日期筛选list
				dateList: [{
						label: '今日',
						value: "今日",
					},
					{
						label: '近7天',
						value: 7,
					},
					{
						label: '近30天',
						value: '近30天',
					},

					{
						label: '近6个月',
						value: '近6个月',
					},

				],
				scrollTop: 0,
				itemInfo: {}, //操作中数据信息
			}
		},
		async onShow() {
			this.loadingShow = true;
			try {
				this.getDicType("insurance_type"); //车船税类型
				await this.esmInsCompany();
				await this.getsubOrdersList();
				this.loadingShow = false;
			} catch {
				this.loadingShow = false;
			}


		},
		onLoad() {},
		onReachBottom() {
			this.loadNextPage(); //触底加载（加载中/没有更多时内部自动忽略）
		},
		onPageScroll(e) {
			this.handleScroll(e);
		},
		destroyed() {
			uni.$off('scroll', this.handleScroll);
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			// 订单详情
			orderDetails(item) {
				switch (item.orderStatus) {
					case "1":
					case "7":
						uni.navigateTo({
							url: '/pages/quote/quoteRecordDetail?ordersNo=' + item.orderNo,
						})
						break;
					case "6":
						uni.navigateTo({
							url: "/pages/quote/premiumCalc?ordersNo=" + item.orderNo,
						})
						break;
					case "2":
					case "4":
					case "5":
					case "8":
						uni.navigateTo({
							url: "/pages/quote/quoteDetail?ordersNo=" + item.orderNo,
						})
						break;
					default:
				}

			},
			// 删除大订单
			deletebigOrderEvent() {},
			// 删除子订单
			deletesubOrderEvent() {},
			handleScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			//订单轨迹展开收起
			toggleCollapse(item) {
				item.orderTrackingisCollapsed = !item.orderTrackingisCollapsed
			},
			//订单轨迹状态命名
			matchOperationType(optType) {
				const Operation = {
					0: '订单创建',
					1: '报价',
					2: '补传影像',
					3: '调整特约',
					4: '修改折扣系数',
					5: '核保',
					6: '获取支付码',
					7: '撤销支付码',
					8: '下载电子保单',
					9: '同步订单',
					10: '订单编辑',
				}
				return Operation[optType] || ''
			},

			// 加载下一页（触底与自动补屏共用）
			loadNextPage() {
				if (this.substatus == 'loading' || this.substatus == 'nomore') return; //加载中/没有更多：忽略
				this.substatus = 'loading';
				this.pageRequest.pages = this.pageRequest.pages + 1;
				setTimeout(async () => {
					let res = await this.$http.post('/supplementOrder/queryList', this.pageRequest);
					if (res.code == '200') {
						this.subPageResult = [...this.subPageResult, ...res.data.records];
						this.subtotalPages = res.data.pages; //以接口返回的总页数为准
						if (this.pageRequest.pages >= this.subtotalPages) this.substatus = 'nomore';
						else this.substatus = 'loadmore'; //还有下一页：回到"加载更多"
						this.autoLoadMore(); //追加后若仍不满一屏，继续自动补页
					} else {
						this.substatus = 'loadmore'; //请求失败：回到"加载更多"，允许重试
					}
				}, 1000)
			},
			// 列表内容不满一屏时自动加载，直到占满或没有更多（搜索只返回几条数据时触底事件不会触发）
			autoLoadMore() {
				this.$nextTick(() => {
					uni.createSelectorQuery().in(this)
						.select('.content-body').boundingClientRect()
						.selectViewport().boundingClientRect()
						.exec((res) => {
							if (!res || !res[0] || !res[1]) return;
							// 内容底部已超出可视区底部：已占满一屏，无需补页
							if (res[0].bottom >= res[1].height) return;
							// 没有更多数据：直接置为"没有更多"
							if (this.pageRequest.pages >= this.subtotalPages) {
								if (this.subPageResult.length > 0) this.substatus = 'nomore';
								return;
							}
							// 还有数据：自动翻页（loadNextPage 成功后还会再次检查）
							this.loadNextPage();
						});
				});
			},
			// 子订单列表接口
			async getsubOrdersList(page, size) {
				if (page) {
					this.pageRequest.pages = page;
					this.pageRequest.size = size;
				} else {
					this.pageRequest.pages = 1; //全新查询（切tab/筛选/onShow刷新）回到第一页
				}
				this.substatus = 'loadmore'; //每次查询都重置加载状态，防止残留 loading/nomore
				if (this.statusCurrent == 0) {
					this.pageRequest.parentId = '0';
					this.pageRequest.isLargeOrder = '1';
				} else {
					this.pageRequest.parentId = '1';
				}
				let res = await this.$http.post('/supplementOrder/queryList', this.pageRequest);
				if (res.code == '200') {
					this.subPageResult = res.data.records;
					this.subtotalPages = res.data.pages;
					this.autoLoadMore(); //数据不满一屏时自动补页/置为"没有更多"
				}
			},
			//日期自定义时间回调
			customTime(start, end) {
				this.pageRequest.startDate = start;
				this.pageRequest.endDate = end;
				this.customDateShow = false;
			},
			// 跳转搜索页
			goToSearch() {
				let params = {
					cloudPopupName: this.cloudPopupName, //选中搜索字段名称
					fieldName: this.fieldName, //搜索字段Field
					...this.pageRequest
				}
				uni.navigateTo({
					url: '/pages/orders/orderSearch?search=' + JSON.stringify(params)
				})
			},
			//分页列表查询事件
			async querySearch() {
				this.orderFilterShow = false;
				await this.getsubOrdersList();
			},
			// 下拉筛选清空操作
			clearForm() {
				for (let key in this.pageRequest) {
					if (key != 'pages' && key != 'size') {
						this.pageRequest[key] = "";
					}
				}
				this.timespecifications = null;
			},
			//日期筛选
			dateclick(e) {
				this.timespecifications = e;
				switch (e) {
					case '今日':
						this.pageRequest.startDate = this.transformTime();
						this.pageRequest.endDate = this.transformTime();
						break;
					case 7:
						this.pageRequest.startDate = this.transformTime(e);
						this.pageRequest.endDate = this.transformTime();
						break;
					case '近30天':
						this.pageRequest.startDate = this.transformTime1(1);
						this.pageRequest.endDate = this.transformTime();
						break;
					case '近6个月':
						this.pageRequest.startDate = this.transformTime1(6);
						this.pageRequest.endDate = this.transformTime();
						break;
					default:
				}
			},
			// 保险公司列表
			async esmInsCompany() {
				let commpanykad = await this.$http.get('/supplementOrder/getExistCompany');
				if (commpanykad.code == '200') {
					this.esmInsCompanyList = [{
						nameSimple: "全部",
						value: null,
					}, ...commpanykad.data];
				}
			},
			// 条件筛选选择
			filterCriteriaClick(value, name) {
				this.pageRequest[name] = value;
			},
			// 字典
			async getDicType(type) {
				let res = await this.$http.get('/dict/get?dictCode=' + type);
				if (res.code == 200) {
					this[type + 'options'] = [{
						label: "全部",
						value: null,
					}, ...res.data];
				}
			},
			// 子订单弹窗订单跳转逻辑
			/**
			 * @param {string} statusName 订单状态--不同状态区分不同跳转逻辑
			 * @param {string} item  子订单数据  
			 */
			subOrderRedirectLogic(statusName, item) {
				switch (statusName) {
					case '报价成功':
						uni.navigateTo({
							url: '/pages/quote/quoteRecordDetail?ordersNo=' + item.id,
						})
						break;
					case '报价失败':
						uni.navigateTo({
							url: "/pages/quote/premiumCalc?ordersNo=" + item.id,
						})
						break;
					case '核保中':
					case '待缴费':
					case '核保失败':
					case '已承保':
						uni.navigateTo({
							url: "/pages/quote/quoteDetail?ordersNo=" + item.id,
						})
						break;
					default:
				}
			},
			// 订单状态颜色匹配
			statusColorMatch(orderStatus) {
				const STATUS_COLOR = {
					1: {
						label: "待核保",
						style: {
							color: '#FFA719',
							background: '#FFF4E1',
							border: '1rpx solid #FFA719',
						}
					},
					2: {
						label: "核保中",
						style: {
							color: '#FF5722',
							background: '#FFF4ED',
							border: '1rpx solid #FF5722',
						}
					},
					3: {
						label: "人工处理",
						style: {
							color: '#FF5722',
							background: '#FFF4ED',
							border: '1rpx solid #FF5722',
						}
					},
					4: {
						label: "待缴费",
						style: {
							color: '#FF496D',
							background: '#FFF1F4',
							border: '1rpx solid #FF496D',
						}
					},
					5: {
						label: "已承保",
						style: {
							color: '#22C2BA',
							background: '#E8FFFF',
							border: '1rpx solid #22C2BA',
						}
					},
					6: {
						label: "报价失败",
						style: {
							color: '#0a6cb6',
							background: '#deecff',
							border: '1rpx solid #0a6cb6',
						}
					},
					7: {
						label: "核保失败",
						style: {
							color: '#0a6cb6',
							background: '#deecff',
							border: '1rpx solid #0a6cb6',
						}
					},
				};
				return STATUS_COLOR[orderStatus] || [];
			},
			// 大订单按钮过滤
			cardAllbtns(orderStatus) {
				const STATUS_BUTTONS = {
					1: [{
						label: "报价成功",
						value: "1"
					}, {
						label: "报价失败",
						value: "6"
					}],
					2: [{
						label: "核保中",
						value: "2",
					}, {
						label: "报价成功",
						value: "1",
					}],
					4: [{
						label: "待缴费",
						value: "4",
					}, {
						label: "核保失败",
						value: "7",
					}, {
						label: "报价成功",
						value: "1",
					}],
					5: [{
						label: '已承保',
						value: "5",
					}],
					6: [{
							label: "报价成功",
							value: "1",
						},
						{
							label: '报价失败',
							value: "6",
						}
					],
					7: [{
							label: "报价成功",
							value: "1",
						},
						{
							label: '报价失败',
							value: "6",
						}
					],
				};
				return STATUS_BUTTONS[orderStatus] || [];
			},
			// 大订单按钮弹窗事件
			/**
			 * @param {Object} value  当前按钮对应的订单状态
			 * @param {Object} list   该状态下的所有报价记录
			 */
			cardAllbtnChange(value, list, identifier, item) {
				this.itemInfo = item;
				this.cardAllbtnsIndex = value;
				this.bigOrderIndicator = identifier;
				this.subOrderStatusModalList.map(val => {
					if (val.statusCode == value) {
						val.companyOptions = list;
					}
					return val;
				})
				this.subOrderStatusModal = true;
			},
			//查看全部
			cardAllbtnChangeAll(item, identifier) {
				this.bigOrderIndicator = identifier;
				Object.keys(item).forEach(key => {
					this.subOrderStatusModalList.map(val => {
						if (val.statusCode == key) {
							val.companyOptions = item[key];
						}
						return val;
					})
				})
				this.subOrderStatusModal = true;

			},
			// 小订单主按钮过滤
			primaryButton(orderStatus) {
				const STATUS_BUTTONS = {
					1: ['修改信息', '去核保'],
					2: ['订单轨迹'],
					4: ['支付码', '更新状态'],
					5: ['查看电子保单'],
					6: ['查看详情'],
					7: ['查看详情'],
					8: ['查看详情', '重新提核'],
				};
				return STATUS_BUTTONS[orderStatus] || [];
			},
			//小订单更多操作按钮过滤
			loadMoreButtons(orderStatus) {
				const STATUS_BUTTONS = {
					1: ['修改方案', '删除订单', '订单轨迹'],
					2: ['删除订单', '取消核保'],
					4: ['订单轨迹', '删除订单', '撤销支付码'],
					5: ['订单轨迹'],
					6: ['删除订单', '订单轨迹'],
					7: ['删除订单', '订单轨迹'],
					8: ['删除订单', '订单轨迹'],
				};
				return STATUS_BUTTONS[orderStatus] || [];
			},
			// tabs状态切换
			async tabClick(e) {
				this.loadingShow = true;
				try {
					if (e.name == '全部') {
						this.statusCurrent = e.index;
						this.pageRequest.orderStatus = null;
						this.pageRequest.parentId = '0';
						this.pageRequest.isLargeOrder = '1';
						await this.getsubOrdersList(1, 20);
					} else {
						this.statusCurrent = e.index;
						this.pageRequest.orderStatus = e.value;
						this.pageRequest.parentId = '1';
						delete this.pageRequest.isLargeOrder
						await this.getsubOrdersList(1, 20)
					}
					if (this.scrollTop > 0) {
						uni.pageScrollTo({
							selector: 'content-body', // 滚动到顶部
							duration: 100, // 动画时长（ms）
						});
					}
					this.loadingShow = false;
				} catch {
					this.loadingShow = false;
				}

			},
			// 小订单主按钮点击
			async primaryButtonClick(name, info) {
				switch (name) {
					case '修改信息':
						uni.navigateTo({
							url: "/pages/quote/premiumCalc?ordersNo=" + info.orderNo,
						})
						break;
					case '去核保':
						// 跳转报价详情
						uni.navigateTo({
							url: '/pages/quote/quoteRecordDetail?ordersNo=' + info.orderNo,
						})
						break;
					case '订单轨迹':
						await this.trackOrder(info.orderNo); //订单轨迹接口
						break;
					case '更新状态':
						await this.refreshPayment(info.orderNo) //支付状态刷新
						break;
					case '支付码':
						// 跳转支付码页面
						uni.navigateTo({
							url: '/pages/quote/paymentCode?ordersNo=' + info.orderNo,
						})
						break;
					case '查看电子保单':
						//跳转电子保单页面
						uni.navigateTo({
							url: '/pages/quote/ePolicy?ordersNo=' + info.orderNo,
						})
						break;
					case '查看详情':
						uni.navigateTo({
							url: "/pages/quote/quoteDetail?ordersNo=" + info.orderNo,
						})
						break;
					case '重新提核':
						// 跳转报价详情
						uni.navigateTo({
							url: '/pages/quote/quoteRecordDetail?ordersNo=' + info.orderNo,
						})
						break;
					default:
				}
			},
			//更多操作选中
			async cloudPopupChange(name, info) {
				switch (name) {
					case '修改方案':
						uni.navigateTo({
							url: "/pages/quote/premiumCalc?ordersNo=" + info.orderNo,
						})
						break;
					case '删除订单':
						this.deletesubOrderShow = true;
						break;
					case '订单轨迹':
						await this.trackOrder(info.orderNo); //订单轨迹接口
						break;
					case '取消核保':
						break;
					case '撤销支付码':
						break;
					default:
				}
			},
			//订单轨迹查询
			async trackOrder(ordersNo) {
				let res = await this.$http.post('/orderTrack/list', {
					orderNo: ordersNo
				})
				if (res.code == 200) {
					res.data.map(item => {
						item.orderTrackingisCollapsed = false;
					})
					this.orderTrackingList = res.data;
					this.orderTrackingShow = true;
				}
			},
			//支付状态刷新
			async refreshPayment(ordersNo) {
				let OrderStatus = await this.$http.post('/unify/order/getOrderStatus', {
					order: {
						ordersNo: ordersNo,
					},
				});
				if (OrderStatus.code == '200') {
					uni.showToast({
						icon: 'none',
						title: OrderStatus.msg,
					})
				}
			},

			//当前时间
			transformTime(day) {
				const date = new Date();
				if (day) {
					date.setDate(date.getDate() - day);
				}
				const year = date.getFullYear();
				const month = date.getMonth() + 1; // 月份从0开始
				const dayOfMonth = date.getDate();
				// 格式化月份和日期
				const formattedMonth = month < 10 ? `0${month}` : month;
				const formattedDay = dayOfMonth < 10 ? `0${dayOfMonth}` : dayOfMonth;
				return `${year}-${formattedMonth}-${formattedDay}`;
			},
			transformTime1(month) {
				const date = new Date();
				let year = date.getFullYear();
				let monthValue = date.getMonth() + 1; // 月份从0开始，所以要+1
				let day = date.getDate();

				// 处理月份偏移
				if (month) {
					monthValue -= month;
					// 处理跨年情况
					while (month < 1) {
						monthValue += 12;
						year--;
					}
					// 处理月份超过12的情况
					while (monthValue > 12) {
						monthValue -= 12;
						year++;
					}
				}
				// 格式化月份和日期
				const strMonth = monthValue < 10 ? `0${monthValue}` : monthValue;
				const strDay = day < 10 ? `0${day}` : day;

				return `${year}-${strMonth}-${strDay}`;
			},

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
	}

	.page {
		background-color: #f8f8f8;
	}

	.order-search {
		flex: 1;
	}

	.right-icon {
		image {
			width: 28rpx;
			height: 28rpx;
			margin-left: 20rpx;
			margin-right: 8rpx;
		}

		font-size: 28rpx;
		color: #333;
	}

	.tabView {
		padding: 20rpx 0;
		box-sizing: border-box;
		background-color: #fff;
	}

	.content-body {
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		.orderAll-card {
			background-color: #fff;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			margin-bottom: 20rpx;


			.cardAll-header {
				padding: 25rpx 20rpx 20rpx;
				box-sizing: border-box;

				.title {
					.plateNo {
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
					}

					.status-tag {
						padding: 2rpx 10rpx;
						box-sizing: border-box;
						background: #E3FBE7;
						border-radius: 20rpx 20rpx 20rpx 0rpx;
						border: 1rpx solid #18B63B;
						color: #18B63B;
						font-size: 22rpx;
					}

					.company-sum {
						font-size: 22rpx;
						color: #999;
						margin-left: auto;
					}
				}

				.content {
					padding: 20rpx;
					box-sizing: border-box;
					gap: 20rpx 0;

					.item {
						width: 50%;

						text:first-child {
							width: 112rpx;
							font-size: 28rpx;
							color: #999;
							display: inline-block;
						}

						text:last-child {
							font-size: 28rpx;
							color: #333;
							margin-left: 20rpx;
						}
					}
				}
			}

			.cardAll-btn {
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				border-top: 1rpx solid #eee;
				gap: 0 70rpx;

				>view {
					position: relative;
					font-size: 28rpx;
					color: #FFAC1D;
				}
			}
		}

		.orderStatus-card {
			background-color: #fff;
			border-radius: 10rpx;

			.header-title {
				padding: 25rpx 20rpx 0;
				box-sizing: border-box;

				.companyIcon {
					width: 40rpx;
					height: 40rpx;
				}

				.companyName {
					font-size: 32rpx;
					color: #333;
					font-weight: bold;
					margin-left: 10rpx;
				}

				.price {
					margin-left: auto;

					text:first-child {
						font-size: 28rpx;
						color: #FF540A;
						font-weight: bold;

					}

					text:last-child {
						font-size: 42rpx;
						color: #FF540A;
						font-weight: bold;
						line-height: 1.2;
					}
				}
			}

			.content {
				padding: 0 20rpx;
				box-sizing: border-box;
				margin-top: 30rpx;
				gap: 20rpx 0;

				.item {
					width: 50%;

					text:first-child {
						width: 112rpx;
						font-size: 28rpx;
						color: #999;
						display: inline-block;
					}

					text:last-child {
						font-size: 28rpx;
						color: #333;
						margin-left: 20rpx;
					}
				}
			}

			.card-footer {
				margin-top: 30rpx;
				padding-right: 20rpx;
				box-sizing: border-box;

				.btns {
					gap: 0 25rpx;
				}

				.plateNo-tag {
					width: 256rpx;
					height: 100rpx;
					// position: absolute;
					// left: 0;
					// bottom: 0;
					background-image: url('../../static/image/plateNoback.png');
					background-size: 100% 100%;

					text {
						font-size: 34rpx;
						color: #333;
						font-weight: bold;
						margin-left: 36rpx;
					}
				}

				.loadMore {
					font-size: 28rpx;
					color: #666;
				}

				.btn {
					padding: 14rpx 20rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					color: #1F1F1F;
					border-radius: 50rpx 50rpx 50rpx 50rpx;
					border: 1rpx solid #DDDDDD;
					line-height: 1;
				}

				.btn:last-child {
					background-color: #FDE935;
					border: 1rpx solid #FDE935;
				}
			}
		}
	}

	.subOrderStatusModalClass {
		.plateNo {
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
		}

		.tag {
			padding: 3rpx 16rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			color: #FF5174;
			font-weight: bold;
			background: #FFEAEE;
			border-radius: 20rpx 20rpx 20rpx 0rpx;
			margin-left: 20rpx;
		}

		.content {
			padding: 40rpx;
			box-sizing: border-box;

			.status-card {
				margin-bottom: 30rpx;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 1rpx solid #FFD9D9;

				.left-title {
					width: 50rpx;
					padding: 20rpx 12rpx;
					box-sizing: border-box;
					background: #FFF8F8;
					border-radius: 4rpx 0rpx 0rpx 4rpx;
					border-right: 1rpx solid #FFE5E5;
					writing-mode: vertical-rl; //文字竖排
					font-size: 28rpx;
					color: #333;
				}

				.right-company {
					width: 100%;
					height: 100%;
					padding: 30rpx 20rpx 0;
					box-sizing: border-box;

					// gap: 30rpx 0;
					.item {
						margin-bottom: 30rpx;
					}

					.logo {
						width: 36rpx;
						height: 36rpx;
					}

					.name {
						font-size: 30rpx;
						color: #333;
					}

					.getQuote {
						font-size: 28rpx;
						color: #FFAC1D;
						margin-left: auto;
					}

					.getView {
						font-size: 28rpx;
						color: #666;
						margin-left: auto;
					}

					.price {
						font-size: 24rpx;
						color: #FF540A;
						margin-left: auto;
					}
				}
			}
		}
	}

	/* 自定义tab滑块样式 */
	::v-deep .u-tabs__wrapper__nav__line {
		background: linear-gradient(90deg, #FDE935 10%, rgba(253, 233, 53, 0.1) 100%) !important;
		border-radius: 6rpx;
	}


	/* 下拉内容（绝对定位，默认隐藏） */
	.dropdown-content {
		position: absolute;
		/* 紧贴按钮下方 */
		left: 0;
		right: 0;
		background: white;
		height: 0px;
		overflow: hidden;
		z-index: 100;
		transition: height 0.4s ease;
		border-radius: 0 0 20rpx 20rpx;

		.overflow-content {
			overflow-y: auto;
			height: 926rpx;
		}

		// 筛选条件
		.filterCriteria-item {
			.title {
				flex: 1;
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}

			.options {
				display: grid;
				/* 启用网格布局 */
				grid-template-columns: repeat(4, 1fr);
				/* 3 列，每列等宽 */
				grid-template-rows: auto;
				/* 行高自适应 */
				row-gap: 30rpx;
				/* 只设置行间距（上下） */
				column-gap: 20rpx;
				/* 列间距设为 0（可选） */
			}

			.options-card {
				padding: 9rpx 24rpx;
				box-sizing: border-box;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 1rpx solid #EEEEEE;
				font-size: 28rpx;
				color: #666;
			}

			.active {
				background-color: #FDE935;
				border: 1rpx solid #FDE935;
				color: #333;
			}

			// 自定义日期
			.customTime {
				.item {
					width: 50%;
					padding: 20rpx;
					box-sizing: border-box;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					border: 1rpx solid #EEEEEE;
					font-size: 28rpx;
					color: #999;
				}

				.line {
					margin: 0 20rpx;
					font-size: 28rpx;
					color: #000;
				}
			}
		}

		.footer {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			border-top: 1rpx solid #EEEEEE;
			padding: 30rpx 44rpx;
			box-sizing: border-box;

			.btn {
				padding: 18rpx 30rpx;
				box-sizing: border-box;
				width: 50%;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				border: 1rpx solid #FDE935;
				font-size: 30rpx;
				color: #333;
			}

			.btns {
				width: 50%;
				background: #FDE935;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
			}
		}
	}

	.dropdown-content.show {
		opacity: 1;
		height: 1126rpx;
		overflow: auto;
	}

	//订单轨迹弹窗
	.orderTracking {
		padding: 30rpx 40rpx;
		box-sizing: border-box;

		.trackFlow {
			.circle {
				width: 20rpx;
				height: 20rpx;
				background: #FDE935;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}

			.time {
				font-size: 30rpx;
				color: #999;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.content {
			padding: 20rpx 0 40rpx 30rpx;
			margin-left: 10rpx;
			border-left: 2rpx dashed #333;

			.actionContent {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}

			.feedbackDetails {
				background-color: #FAFAFA;
				border-radius: 6rpx;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				margin-top: 20rpx;
				color: #666;
			}

			.updateRecord {
				ul {
					padding-left: 60rpx;

					li {
						margin-top: 20rpx;
						color: #666;
						font-size: 30rpx;

						text {
							color: #333;
							font-weight: bold;
						}
					}

					li::marker {
						color: #333;
					}
				}
			}
		}
	}

	/* 遮罩层（覆盖全屏） */
	.overlay-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: none;
		/* 默认隐藏 */
		z-index: 99;
		/* 低于下拉内容，高于其他元素 */
	}

	/* 激活状态 */
	.overlay-mask.show {
		display: block;
	}
</style>