zhapp/pages/quote/quoteRecords.vue

<template>
	<view class="page">
		<view class="header">
			<uni-NavBar headerTitle="报价记录" background="#fff" rightText="搜索" :isSlot="false" @share="search"
				:rightIcon="false" :rightTextStyle="{fontSize:'30rpx'}"></uni-NavBar>
		</view>
		<view class="data-content dis f-c ">
			<view class="view-item dis  a-c j-s" v-for="(item,index)  in quoteRecordsList" :key="index">
				<view class="info dis a-c">
					<image class="img mr-1" src="/static/image/car.png" mode=""></image>
					<view class="dis f-c  j-s">
						<text class="license">{{item.licenseNo}}</text>
						<text class="count">{{item.quoteNumber}}次报价记录</text>
					</view>
				</view>
				<view class="btn" @click="revisedQuote(item.orderNo)">
					重新报价
				</view>
				<view class="btn ml-2" @click="historyQuery(item.licenseNo)">
					历史查询
				</view>
			</view>
			<u-loadmore v-if="quoteRecordsList.length!=0" :status="status" />
		</view>
		<!-- 报价记录弹窗 -->
		<uni-Popup :show="quotationRecordShow" @close='quotationRecordShow=false' :headerSlot="true" :closeable="false"
			headerTitle="选择出单机构" overflow="auto" maxHeight="1162rpx">
			<template #header>
				<view class="RecordPopup-header dis j-s a-c">
					<view class="license dis  a-c">
						<image src="/static/image/car.png" mode=""></image>
						<text>{{licenseNo}}</text>
					</view>
					<text class="count">{{insuranceCompanyList.length}}次报价记录</text>
				</view>
			</template>
			<template #content>
				<view class="RecordPopup-overflow">
					<view class="item mb-2" v-for="(item,index) in insuranceCompanyList" :key="index">
						<view class="quotationInfo dis f-c ">
							<view class="Info-header dis a-c j-s ">
								<view class="dis a-c ">
									<image class="insuranceCompany" :src="item.logo" mode=""></image>
									<text class="Company-title">{{item.companyName}}</text>
								</view>
								<view class="time dis a-c ">
									<image src="/static/icon/time.png" mode=""></image>
									<text>{{item.quoteTime}}</text>
								</view>
							</view>
							<view class=" dis sum">
								<text>险种：{{item.productName}}</text>
								<text>保费：￥{{item.sumPremium || 0 }}</text>
							</view>
						</view>
						<view class="combination-btn dis ">
							<view class="dis a-c j-c " @click="revisedQuote(item.orderNo)">
								重新报价
							</view>
							<view class="dis a-c j-c " @click="Detailview(item.orderNo)">
								查看
							</view>
						</view>
					</view>
					<view class=" dis a-c f-c" v-if="insuranceCompanyList.length==0">
						<u-empty mode="car" icon="/static/image/Empty1.png" text="暂无报价记录" width="120" height="120">
						</u-empty>
						<view class="empty-btn mt-2" @click="quote">
							去报价
						</view>
					</view>

				</view>
			</template>
		</uni-Popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				quotationRecordShow: true,
				pageRequest: {
					pages: 1,
					size: 20,
					licenseNo: "", //车牌号
				},
				status: 'loadmore',
				totalPages: 0, //订单总页数
				licenseNo: "",
				quoteRecordsList: [], //报价记录列表
				insuranceCompanyList: [], //保险公司列表
			}
		},
		onReachBottom() {
			this.loadNextPage(); //触底加载（加载中/没有更多时内部自动忽略）
		},
		onShow() {

		},
		onLoad(options) {
			if (options) {
				this.licenseNo = options.license;
				this.fetchQuoteHistory();
				this.quoteHistory(this.licenseNo);
			}
		},
		methods: {
			// 加载下一页（触底与自动补屏共用）
			loadNextPage() {
				if (this.status == 'loading' || this.status == 'nomore') return; //加载中/没有更多：忽略
				this.status = 'loading';
				this.pageRequest.pages = this.pageRequest.pages + 1;
				setTimeout(async () => {
					let res = await this.$http.post('/supplementOrder/getHistoryQuoteList', this.pageRequest);
					if (res.code == '200') {
						this.quoteRecordsList = [...this.quoteRecordsList, ...res.data.records];
						this.totalPages = res.data.pages; //以接口返回的总页数为准
						if (this.pageRequest.pages >= this.totalPages) this.status = 'nomore';
						else this.status = 'loadmore'; //还有下一页：回到"加载更多"
						this.autoLoadMore(); //追加后若仍不满一屏，继续自动补页
					} else {
						this.status = 'loadmore'; //请求失败：回到"加载更多"，允许重试
					}
				}, 1000)
			},
			// 列表内容不满一屏时自动加载，直到占满或没有更多（报价记录少于一屏时触底事件不会触发）
			autoLoadMore() {
				this.$nextTick(() => {
					uni.createSelectorQuery().in(this)
						.select('.data-content').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.totalPages) {
								if (this.quoteRecordsList.length > 0) this.status = 'nomore';
								return;
							}
							// 还有数据：自动翻页（loadNextPage 成功后还会再次检查）
							this.loadNextPage();
						});
				});
			},
			//报价记录
			async fetchQuoteHistory() {
				this.pageRequest.pages = 1; //每次重新查询都从第一页开始
				this.status = 'loadmore'; //重置加载状态
				let res = await this.$http.post('/supplementOrder/getHistoryQuoteList', this.pageRequest);
				if (res.code == 200) {
					this.quoteRecordsList = res.data.records;
					this.totalPages = res.data.pages;
					this.autoLoadMore(); //数据不满一屏时自动补页/置为"没有更多"
				}
			},
			async quoteHistory(licenseNo) {
				let res = await this.$http.post('/supplementOrder/getHistoryQuoteByLicenseNo', {
					licenseNo: licenseNo,
				});
				if (res.code == 200) {
					this.insuranceCompanyList = res.data;
				}
			},
			//重新报价
			revisedQuote(orderNo) {
				uni.navigateTo({
					url: "/pages/quote/premiumCalc?ordersNo=" + orderNo
				})
			},
			//报价历史查询
			async historyQuery(item) {
				this.licenseNo = item;
				await this.quoteHistory(item)
				this.quotationRecordShow = true;
			},
			search() {
				uni.navigateTo({
					url: '/pages/quote/quoteRecordSearch'
				})
			},
			//去报价
			quote() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			//查看详情
			Detailview(orderNo) {
				this.quotationRecordShow = false;
				uni.navigateTo({
					url: '/pages/quote/quoteRecordDetail?ordersNo=' + orderNo
				})
			}
		}
	}
</script>

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

	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
	}

	.data-content {
		padding-top: 180rpx;

		.view-item {
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #eee;
			background-color: #fff;

			.info {
				flex: 1;
			}

			.img {
				width: 90rpx;
				height: 90rpx;
			}

			.license {
				font-size: 34rpx;
				color: #333;
				font-weight: bold;
			}

			.count {
				font-size: 28rpx;
				color: #999;
			}

			.btn {
				padding: 13rpx 20rpx;
				box-sizing: border-box;
				background: rgba(253, 233, 53, 0.2);
				border-radius: 58rpx 58rpx 58rpx 58rpx;
				border: 1rpx solid #FDE935;
				font-size: 30rpx;
				color: #1F1F1F;
			}
		}
	}

	// 弹窗样式
	.RecordPopup-header {
		.license {
			image {
				width: 48rpx;
				height: 48rpx;
			}

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

		.count {
			font-size: 28rpx;
			color: #999;
		}
	}

	// 弹窗内容区
	.RecordPopup-overflow {
		padding: 30rpx;
		box-sizing: border-box;

		.item {
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 1rpx solid #EEEEEE;
		}

		.quotationInfo {
			padding: 30rpx 30rpx 24rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #EEEEEE;

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

			// 保险公司
			.Company-title {
				font-size: 32rpx;
				color: #333;
				margin-left: 10rpx;
			}

			// 日期
			.time {
				image {
					width: 22rpx;
					height: 22rpx;
				}

				font-size: 22rpx;
				color: #666;
			}

			.sum {
				width: 100%;
				font-size: 30rpx;
				color: #666;
				margin-top: 24rpx;

				text {
					width: 50%;
				}
			}
		}

		.combination-btn {
			view {
				width: 49%;
				padding: 14rpx;
				box-sizing: border-box;
				font-size: 30rpx;
				color: #333;
				font-weight: bold;

			}

			view:last-child {
				border-left: 1rpx solid #eee;
			}

		}
	}

	.empty-btn {
		padding: 13rpx 30rpx;
		box-sizing: border-box;
		background: rgba(253, 233, 53, 0.2);
		border-radius: 58rpx 58rpx 58rpx 58rpx;
		border: 1rpx solid #FDE935;
		font-size: 30rpx;
		color: #1F1F1F;
	}
</style>