vist_go_uniApp/pages/order/search.vue

<template>
	<view :style="{ paddingTop: statusBarHeight + 'px' }">
		<view class="flex-items pad-t-20">
			<view class="mar-r-20">
				<uni-icons @tap="back" type="left" color="#545454" size="30"></uni-icons>
			</view>
			<view class="search-box">
				<input confirm-type="search" class="search-input" focus type="text" placeholder="请输入搜索内容"
					v-model="historySearch.name" />
				<uni-icons @tap="clear" v-if="historySearch.name" type="closeempty" color="#545454" size="20"
					class="mar-r-20"></uni-icons>
				<button class="search-button" @click="onSearchClick">搜索</button>
			</view>
		</view>
		<view class="flex-items-between pad-32">
			<view class="font28 font-bold">
				历史搜索
			</view>
			<uni-icons @tap="delSearch" type="trash" size="26"></uni-icons>
		</view>
		<view class="pad-lr-32">
			<view class="search-container">
				<view v-for="(item, index) in historySearchList" :key="index" class="search-item">
					<view class="searchBg mar-b-16" @tap="onHistorySearch(item.name)">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		delHistorySearch,
		submitHistorySearch,
		getHistorySearchList
	} from '../../config/api.js';
	import {
		MAIN_COLOR
	} from '../../common/config.js'

	export default {
		data() {
			return {
				bgColor: 'transparent',
				statusBarHeight: 0, // 状态栏高度
				historySearch: {
					name: "",
					type: ""
				},
				historySearchList: [],
			}
		},
		onLoad(op) {
			console.log(op.searchKey)
			this.historySearch.type = op.type
			if (op.searchKey) {
				console.log(op.searchKey)
				this.historySearch.name = op.searchKey
			}
			// 获取设备信息，包括状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			this.getSearch();
		},
		methods: {
			clear() {
				this.historySearch.name = ""
			},
			onHistorySearch(name) {
				this.historySearch.name = name
				if (this.historySearch.type == 2) {
					this.$route('/pages/order/list?serachKey=' + this.historySearch.name)
				}
				if (this.historySearch.type == 1) {
					this.$route('/pages/shop/product-type-list?serachKey=' + this.historySearch.name)
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			getSearch() {
				getHistorySearchList({
					type: this.historySearch.type
				}).then((res) => {
					this.historySearchList = res.data
				})
			},
			delSearch() {
				delHistorySearch().then((res) => {
					this.getSearch()
				})
			},
			onSearchClick() {
				console.log(this.historySearch.type)
				// 执行搜索操作
				submitHistorySearch(this.historySearch)
				if (this.historySearch.type == 2) {
					this.$route('/pages/order/list?serachKey=' + this.historySearch.name)
				}
				if (this.historySearch.type == 1) {
					this.$route('/pages/shop/product-type-list?serachKey=' + this.historySearch.name)
				}
			}
		}
	}
</script>

<style>
	.search-container {
		display: flex;
		flex-wrap: wrap;
	}

	.search-item {
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	.searchBg {
		background-color: #d8d8d8;
		padding: 8rpx 12rpx;
		border-radius: 10rpx;
		font-size: 14px;
		color: #333;
	}

	.search-box {
		display: flex;
		align-items: center;
		border-radius: 20rpx;
		background-color: #f0f0f0;
		padding: 10rpx 20rpx;
		width: 100%;
		/* Ensure it takes full width */
	}

	.search-input {
		flex: 1;
		border: none;
		outline: none;
		font-size: 14px;
		color: #999;
		background-color: #f0f0f0;
		border-radius: 20rpx;
		padding: 8rpx 12rpx;
		width: 100%;
	}

	.search-button {
		background-color: #f27c22;
		/* 橘色背景 */
		color: white;
		border: none;
		padding: 0rpx 30rpx 0rpx 30rpx;
		border-radius: 20rpx;
		margin-left: 10rpx;
		font-size: 14px;
		cursor: pointer;
		white-space: nowrap;
		/* Prevent text overflow */
	}
</style>