zhapp/pages/orders/orderSearch.vue

<template>
	<view class="page">
		<u-sticky zIndex="999" customNavHeight="0">
			<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[fieldName]" bgColor="#f7f7f7"
					:style="{ '--arrow-margin': arrowMargin }" class="search-wrapper"
					:actionStyle="{position: 'absolute',right:'20px',background:'#FDE935',padding:'8rpx 24rpx',boxSiting:'border-box',borderRadius:'100rpx'}"
					：actionText="搜索" search-icon="arrow-down" searchIconColor="#333" :searchIconSize="11"
					@search="search" @custom="search" @clear="clear">
					<template #label>
						<uni-cloudPopup :text="cloudPopupName" color="#666" size="14" :buttons="cloudPopupList"
							direction="bottom" @click="cloudPopupChange"></uni-cloudPopup>
					</template>
				</u-search>
			</view>
		</u-sticky>
		<!-- 搜索历史记录 -->
		<view class="historyRecords ">
			<view class=" dis a-c j-s ">
				<text class="title">历史搜索</text>
				<u-icon name="trash" color="#666" size="20" @click="clearHistory"></u-icon>
			</view>
			<view class="content dis a-c f-wrap ">
				<view class="item" v-for="(item,index) in historySearchList" :key="index" @click="change(item)">
					{{item.content}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cloudPopupName: "车牌号", //搜索字段name
				fieldName: "licenseNo", //搜索字段
				cloudPopupNameHeight: 0,
				arrowMargin: '0', // 默认值
				pageRequest: {}, //查询的默认条件
				// 搜索字段
				cloudPopupList: [
					"车牌号",
					"投保人姓名",
					"投保人手机号",
					"被保人姓名",
					"被保人手机号",

				],
				cloudPopupList1: [{
						label: "车牌号",
						value: 'licenseNo',
					},
					{
						label: "投保人姓名",
						value: 'policyholder',
					},
					{
						label: "投保人手机号",
						value: 'policyholderMobile',
					}, {
						label: "被保人姓名",
						value: 'insured',
					},
					{
						label: "被保人手机号",
						value: 'insuredMobile',
					}
				],
				// 历史搜索
				historySearchList: []
			}
		},
		onShow() {

		},
		async onLoad(options) {
			if (options.search) {
				let info = JSON.parse(options.search);
				this.cloudPopupName = info.cloudPopupName || '车牌号';
				this.fieldName = info.fieldName || 'licenseNo';
				this.pageRequest = info;
			}
			await this.getHistorySearch(); //查询历史搜索
		},
		async mounted() {
			// 获取左侧下拉组件宽度
			const query = uni.createSelectorQuery();
			query.select('.u-tooltip').boundingClientRect((rect) => {
				this.arrowMargin = `${rect.width+5}px`;
			}).exec();
		},
		methods: {
			// 查询搜索记录
			async getHistorySearch() {
				let res = await this.$http.get(`/order/searchHistory/getHistory`);
				if (res.code == 200) {
					this.historySearchList = res.data;
				}
			},
			back() {
				uni.navigateBack(-1)
			},
			// 切换搜索字段
			cloudPopupChange(value) {
				this.cloudPopupName = value;
				this.$nextTick(() => { //切换字段获取动态宽度
					const query = uni.createSelectorQuery();
					query.select('.u-tooltip').boundingClientRect((rect) => {
						this.arrowMargin = `${rect.width+5}px`;
					}).exec();
				})
				switch (value) {
					case '车牌号':
						this.fieldName = "licenseNo";
						break;
					case '投保人姓名':
						this.fieldName = "policyholder";
						break;
					case '投保人手机号':
						this.fieldName = "policyholderMobile";
						break;
					case '被保人姓名':
						this.fieldName = "insured"
						break;
					case '被保人手机号':
						this.fieldName = "insuredMobile";
						break;
				}
			},
			async search(value) {
				if (value) {
					let res = await this.$http.get(
						`/order/searchHistory/saveHistory?groupType=${this.fieldName}&content=${value}`);
				}
				this.getHistorySearch();
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.cloudPopupName = this.cloudPopupName; //搜索字段
				prevPage.$vm.fieldName = this.fieldName; //搜索字段Field
				prevPage.$vm.pageRequest[this.fieldName] = value; //订单列表检索条件赋值
				prevPage.$vm.SearchText = value; //搜索框回显
				uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				});
			},
			// 清空搜索框输入值
			clear() {
				for (let key in this.pageRequest) {
					if (key != 'pages' && key != 'size') {
						this.pageRequest[key] = "";
					}
				}
			},
			//清空历史搜索
			async clearHistory() {
				let res = await this.$http.get(`/order/searchHistory/clearAllHistory`);
				if (res.code == 200) {
					this.getHistorySearch();
					uni.showToast({
						icon: "none",
						title: "已清空"
					})
				}
			},
			async change(item) {
				let res = await this.$http.get(
					`/order/searchHistory/saveHistory?groupType=${item.groupType}&content=${item.content}`);
				this.getHistorySearch();
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.cloudPopupName = this.cloudPopupList1.find(val => val.value == item.groupType)
					.label; //搜索字段
				prevPage.$vm.fieldName = item.groupType; //搜索字段Field
				prevPage.$vm.pageRequest[item.groupType] = item.content; //订单列表检索条件赋值
				prevPage.$vm.SearchText = item.content; //搜索框回显
				uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				});
			},
		}
	}
</script>

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

		.u-tooltip {
			position: absolute;

			.u-tooltip__wrapper__popup {
				top: 20rpx;
			}
		}
	}

	.search-wrapper ::v-deep .uicon-arrow-down {
		margin-left: var(--arrow-margin) !important;
		font-weight: bold !important;
	}

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

	.header {
		padding: 116rpx 30rpx 16rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		width: 100%;
		border-bottom: 1rpx solid #eee;

		.fieldLabel {
			font-size: 28rpx;
			color: #333;
			margin-right: 10rpx;
		}

	}

	.historyRecords {
		background-color: #FFFFFF;
		height: calc(100vh - 200rpx);
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;

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

		.content {
			margin-top: 20rpx;
			gap: 20rpx;

			.item {
				padding: 10rpx 16rpx;
				box-sizing: border-box;
				background: #F8F8F8;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				font-size: 26rpx;
				color: #666;
			}
		}
	}
</style>