kailin_mp/pages/search/index.vue

<template>
	<view class="search_top">
		<view class="search_content">
			<input class="search_input" type="text" v-model="requestParam.name" @input="searchChange" placeholder="请输入产品名称搜索" />
			<button class="search_btn" @click.stop="searchOpen()" data-eventsync="true">搜索</button>
		</view>
	</view>
	<view class="search_find" v-if="requestParam.name.length == 0">
		<view class="title">搜索发现</view>
		<view class="list_content">
			<view v-for="(item, index) in findList" :key="index" class="list_content_main" @click="chooseProduct(item.label)">{{ item.label }}</view>
		</view>
	</view>
	<view class="search_result">
		<view @click="toDetail(item)" v-if="productList.length !== 0" data-eventsync="true" class="product_item" v-for="(item, index) in productList" :key="index">
			<image class="product_image" :src="item.thumb" mode=""></image>
			<view class="product_name">
				<text>{{ item.name }}</text>
			</view>
			<view class="product_spec">
				<text>{{ item.spec }}</text>
			</view>
			<view class="stock_price">
				<view class="product_price" v-if="isShowPrice">
					<text>￥{{ item.price }}</text>
				</view>
				<view class="product_stock">剩{{ item.stock }}个</view>
			</view>
		</view>
		<view v-if="productList.length == 0 && requestParam.name.length !== 0" class="to_bottom">-----还没有产品啦-----</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navHeight: '', // 导航栏高度
			statusBarHeight: '', // 状态栏高度
			menuWidth: '', //导航栏宽度
			findList: [
				{ label: '感冒灵颗粒', index: 0 },
				{ label: '999皮炎平', index: 1 },
				{ label: '养胃舒颗粒', index: 2 },
				{ label: '感冒灵颗粒', index: 3 },
				{ label: '999皮炎平', index: 4 },
				{ label: '养胃舒颗粒', index: 5 },
				{ label: '感冒灵颗粒', index: 6 },
				{ label: '999皮炎平', index: 7 },
				{ label: '养胃舒颗粒', index: 8 },
				{ label: '藿香正气液', index: 9 }
			],
			requestParam: {
				name: '',
				page: 1
			},
			productList: []
		};
	},
	onLoad() {
		//初始化一些导航栏的高度与宽度
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		//获取手机系统的信息 里面有状态栏高度和设备型号
		let { statusBarHeight, system } = uni.getSystemInfoSync();
		// 注意返回的单位是px 不是rpx
		this.statusBarHeight = statusBarHeight;
		this.navHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 40 : 44);
		this.menuWidth = menuButtonInfo.width + 16;
	},

	methods: {
		backIndex: () => {
			uni.navigateBack({
				delta: '2'
			});
		},
		chooseProduct(label) {
			this.requestParam.name = label;
			this.searchOpen();
		},
		searchChange(e) {
			// 如果没有搜索词
			if (!this.requestParam.name) {
				// this.searchOpen();
				this.productList = [];
			}
		},
		searchOpen() {
			// 请求中，不再请求
			if (this.isReqing) return;
			// 是否是最后一页
			this.isLast = false;
			// 初始化页码为1
			this.requestParam.page = 1;
			// 设置请求中
			this.isReqing = true;
			// 请求列表
			this.$http.request('api/product/get_list', this.requestParam).then((re) => {
				// 设置非请求中
				this.isReqing = false;
				// 成功结果
				if (re.code == 'success') {
					this.productList = re.data.data;
					if (re.data.data.length && re.data.last_page >= this.requestParam.page) this.isLast = true;
				}
			});
		},
		toDetail(item) {
			uni.navigateTo({
				url: '/pages/product/index?product_id=' + item.id
			});
		}
	}
};
</script>

<style scoped lang="less">
.search_top {
	display: flex;
	align-items: center;
	padding: 0 16rpx;
	.back_icon {
		width: 36rpx;
		height: 36rpx;
	}
	.search_content {
		flex: 1;
		position: relative;
		.search_input {
			z-index: 0;
			float: left;
			width: 100%;
			height: 56rpx;
			display: block;
			font-size: 24rpx;
			padding-left: 20rpx;
			position: relative;
			border-top-left-radius: 40rpx;
			border-bottom-left-radius: 40rpx;
			border: 2rpx solid #dddddd;
		}
		.search_btn {
			top: 0rpx;
			z-index: 9;
			right: 0rpx;
			color: #ffffff;
			position: absolute;
			display: block;
			width: 120rpx;
			height: 60rpx;
			font-size: 24rpx;
			line-height: 60rpx;
			border-radius: 40rpx;
			background-color: #e03519;
		}
	}
}
.search_find {
	margin-top: 20px;
	padding: 0 16px;
	.title {
		font-size: 28rpx;
		color: gray;
	}
	.list_content {
		margin-top: 16rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
		.list_content_main {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 16rpx;
			border-radius: 60rpx;
			color: #587bb3;
		}
	}
}
.search_result {
	display: block;
	overflow: hidden;
	margin: 0rpx auto;
	padding: 16px;
	.product_item {
		float: left;
		width: 320rpx;
		height: 520rpx;
		display: block;
		overflow: hidden;
		margin: 20rpx 0rpx;
		margin-right: 40rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		.product_image {
			width: 320rpx;
			height: 320rpx;
		}
		.product_name {
			height: 80rpx;
			font-size: 30rpx;
			line-height: 40rpx;
			overflow: hidden;
			margin: 10rpx 0rpx;
			padding: 0rpx 10rpx;
			text-overflow: ellipsis;
		}
		.product_spec {
			height: 30rpx;
			color: #999999;
			font-size: 24rpx;
			line-height: 30rpx;
			padding: 0rpx 10rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.stock_price {
			color: #dddddd;
			font-size: 20rpx;
			overflow: hidden;
			line-height: 30rpx;
			padding: 0rpx 10rpx;
			.product_price {
				float: left;
				color: red;
				font-size: 30rpx;
				line-height: 60rpx;
				.product_market {
					font-size: 24rpx;
					color: #999999;
					line-height: 30rpx;
					vertical-align: top;
					text-decoration: line-through;
				}
			}
			.product_stock {
				float: right;
				font-size: 20rpx;
				line-height: 60rpx;
			}
		}
	}
	.product_item:nth-child(even) {
		margin-right: 0rpx;
	}
}
</style>