zh_order_food_xcx/pages/index/search-record.vue

<template>
	<view class="seacrh-record-index iPhone-bottom flex-common-css box-border-box">
		<view class="seacrh-bg"></view>
		<Nav title='搜索' bgckgroundBox='transparent'></Nav>

		<view class="s-input">
			<!-- <view class="input-icon">
				<uni-icons type="search" size="18" color="#999"></uni-icons>
			</view> -->
			<image class="wh32" src="@/static/img/index/ss.png" mode=""></image>
			<input v-model="search" type="text" placeholder="店铺名称或者商品名称">
			<view class="input-buttom fs-28 fc-f fw-500" @click="toList()">搜索</view>
		</view>

		<view class="scroll-view-css bgc-f seacrh-info box-border-box p-32">
			<view class="flex-justify-space mb-32">
				<view class="fs-32 fw-600 fc-3">搜索历史</view>
				<view class="align-items-center" v-if="list.length > 0 && historyType">
					<view @click="isOpen=!isOpen" class="">{{!isOpen?'收起':'展开'}}</view>
					<view @click="isOpen=!isOpen" :class="!isOpen?'down':'up'">
						<uni-icons type="right" size="14" color="#999"></uni-icons>
					</view>
					<view class="view-x"></view>
					<uni-icons @click="delList()" type="trash" size="18" color="#999"></uni-icons>
				</view>
			</view>
			<view id='' :class="isOpen?'hide-h':''" class="flex-wrap-wrap mb-50 search-history" v-if="list.length > 0">
				<view class="fs-28 list-item text-overflow-ellipsis-one" @click="toList(item)" v-for="(item,i) in list"
					:key="i">{{item}}</view>
			</view>


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

<script>
	import tools from "@/service/tools";
	import {
		getSearchList,
		delSearch
	} from '@/api/goods.js';
	export default {
		data() {
			return {
				search: '',
				isOpen: false,
				list: [],
				historyType: false
			}
		},
		onShow() {
			this.getList()
		},
		mounted() {},
		methods: {
			history() {
				// uni.createSelectorQuery().select('.search-history').boundingClientRect(data => {
				// 	if (data.height > 116) {
				// 		this.historyType = true
				// 	}
				// 	console.log(this.historyType);
				// }).exec()
				const query = uni.createSelectorQuery().in(this)
				query
					.select('.search-history')
					.boundingClientRect(data => {
						console.log(data.height)
					})
					.exec();

			},
			getList() {
				getSearchList().then((res) => {
					if (res.code === 1) {
						this.list = res.data.my_search;
					}
				})
			},
			toList(name) {
				let search = '';
				if (name) {
					search = name;
				} else {
					search = this.search;
				}
				if (!search) {
					return tools.error('请输入搜索内容')
				}
				uni.navigateTo({
					url: "pages/index/search-list?search=" + search
				})
			},
			delList() {
				delSearch().then((res) => {
					if (res.code === 1) {
						tools.success('删除成功');
						this.list = [];
					}
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.seacrh-record-index {
		position: relative;

		.hide-h {
			height: 232rpx !important;
			overflow: hidden !important;
		}

		.down {
			transform: rotate(-90deg);
			transition: all 0.5s;
		}

		.up {
			transform: rotate(90deg);
			transition: all 0.5s;
		}

		.view-x {
			width: 2rpx;
			height: 20rpx;
			background-color: #eee;
			margin: 0 24rpx;
		}

		.find-item {
			width: 48%;
			text-align: left;
		}

		.list-item {
			max-height: 688rpx;
			min-width: 10rpx;
			height: 56rpx;
			line-height: 56rpx;
			background: #F7F8FC;
			border-radius: 200rpx;
			margin: 0 8rpx 32rpx 0;
			box-sizing: border-box;
			padding: 0 24rpx;
		}

		.seacrh-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 376rpx;
			filter: blur(80rpx);
			background-image: linear-gradient(to right, #C9F7FC, #F9F6E0, #F6F5F3);
			z-index: -1;
		}

		.s-input {
			margin-top: 24rpx;
			width: 100%;
			height: 72rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			position: relative;

			.wh32 {
				position: absolute;
				left: 48rpx;
				top: 20rpx;
				width: 32rpx;
				height: 32rpx;
			}

			input {
				font-size: 32rpx;
				width: 100%;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 200rpx;
				box-sizing: border-box;
				padding: 0 126rpx 0 78rpx;
			}

			.input-buttom {
				width: 120rpx;
				height: 60rpx;
				background: linear-gradient(90deg, #57CAFF 0%, #41ABF5 100%);
				border-radius: 200rpx;
				text-align: center;
				line-height: 60rpx;
				position: absolute;
				right: 30rpx;
				top: 6rpx;
			}
		}

		.seacrh-info {
			margin-top: 20rpx;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
		}
	}
</style>