zhapp/pages/quote/quoteRecordSearch.vue

<template>
	<view class="page">
		<view class="header dis a-c j-s">
			<u-icon name="arrow-left" color="#333" size="18" :bold="true" style="margin-right: 20rpx;"
				@click="back"></u-icon>
			<u-search placeholder="可使用车牌号查询" v-model="pageRequest.licenseNo" bgColor="#f7f7f7"
				:actionStyle="{position: 'absolute',right:'20px',background:'#FDE935',padding:'8rpx 24rpx',boxSiting:'border-box',borderRadius:'100rpx'}"
				actionText="搜索" @search="search" @custom="custom" @clear="clear"></u-search>
		</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>
			<view class=" u-emptys dis a-c f-c" v-if="quoteRecordsList.lenght==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>
		<!-- 报价记录弹窗 -->
		<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: false,
				pageRequest: {
					pages: 1,
					size: 20,
					licenseNo: "", //车牌号
				},
				licenseNo: "",
				quoteRecordsList: [], //报价记录列表
				insuranceCompanyList: [], //保险公司列表
			}
		},
		onShow() {

		},
		onLoad() {
			this.fetchQuoteHistory();
		},
		methods: {
			async historyQuery(item) {
				this.licenseNo = item;
				await this.quoteHistory(item)
				this.quotationRecordShow = true;
			},
			//报价记录
			async fetchQuoteHistory() {
				let res = await this.$http.post('/supplementOrder/getHistoryQuoteList', this.pageRequest);
				if (res.code == 200) {
					this.quoteRecordsList = res.data.records;
				}
			},
			async quoteHistory(licenseNo) {
				let res = await this.$http.post('/supplementOrder/getHistoryQuoteByLicenseNo', {
					licenseNo: licenseNo,
				});
				if (res.code == 200) {
					this.insuranceCompanyList = res.data;
				}
			},
			back() {
				uni.navigateBack(1)
			},
			//回车事件
			search(value) {
				this.pageRequest.licenseNo = value;
				this.fetchQuoteHistory();
			},
			//搜索事件
			custom(value) {
				this.pageRequest.licenseNo = value;
				this.fetchQuoteHistory();
			},
			clear() {
				this.fetchQuoteHistory();
			},
			//去报价
			quote() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			//查看详情
			Detailview(orderNo) {
				uni.navigateTo({
					url: '/pages/quote/quoteRecordDetail?orderno=' + orderNo
				})
			},
			//重新报价
			revisedQuote(orderNo) {
				uni.navigateTo({
					url: "/pages/quote/premiumCalc1?orderno=" + orderNo
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.u-search__content {
			padding-right: 150rpx !important;
		}
	}

	.page {
		background-color: #F8F8F8;
		height: 100vh;
	}

	.u-emptys {
		width: 100%;
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%);
	}

	.header {
		padding: 96rpx 30rpx 16rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		width: 100%;

	}


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