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>
			<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" v-if="list.length > 0">
				<view class="fs-32 fw-600 fc-3">搜索历史</view>
				<view class="align-items-center">
					<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="list = []" type="trash" size="18" color="#999"></uni-icons>
				</view>
			</view>
			<view :class="!isOpen?'hide-h':''" class="flex-wrap-wrap mb-50" v-if="list.length > 0">
				<view class="fs-28 list-item text-overflow-ellipsis-one" @click="toList(item.name)" v-for="(item,i) in list" :key="i">{{item.name}}</view>
			</view>
			
		
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				search:'',
				isOpen:false,
				list:[{name:'土猪',},{name:'土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪',},{name:'土猪',},
				{name:'土猪',},{name:'土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪',},{name:'土猪',},
				{name:'土猪',},{name:'土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪',},{name:'土猪',},
				{name:'土猪',},{name:'土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪',},{name:'土猪',},],
			}
		},
		onShow() {
			
		},
		methods:{
			toList(name){
				let search = '';
				if(name){
					search = name;
				}else{
					search = this.search;
				}
				
				uni.navigateTo({
					url:"pages/index/search-list?search=" + search
				})
			},
		},
	}
</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;
			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;
			.input-icon{
				position: absolute;
				left: 48rpx;
				top: 20rpx;
			}
			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>