xiongmao/pages/index/search/search.vue

<!-- 搜索 -->
<template>
	<view class="wrap">
		
		<view class="header">
			<view class="header-bottom">
				<image src="../../../static/return.png" class="return" @tap="back" mode="widthFix"></image>
				<view class="search-bar">
					<image src="../../../static/search-icon.png" mode="" class="search-icon"></image>
					<input type="text" value="" placeholder="西藏冬虫夏草  大红袍" placeholder-class="placeholder"
						class="search-input" />
					<button type="default" class="search-btn">搜索</button>
				</view>
			</view>
		</view>
		
		
		<view class="search-history" v-if="status == 1">
			<view class="history-search-box">
				<text>历史搜索</text>
				<button type="default" class="del-btn">
					<image src="../../../static/del-img2.png" mode="widthFix"></image>
				</button>
			</view>
			<view class="history-list">
				<view class="history-item">
					头疼头晕
				</view>
				<view class="history-item">
					烟台苹果
				</view>
				<view class="history-item">
					新鲜奶莓
				</view>
			</view>
			<view class="hot-box">
				<view class="hot-search-label">
					热搜
					<view class="hot-search-tag">HOT</view>
				</view>
				<view class="history-list">
					<view class="history-item">
						清暑大礼盒
					</view>
					<view class="history-item">
						清暑大礼盒3号
					</view>
					<view class="history-item">
						新人满减清暑大礼盒3号
					</view>
					<view class="history-item">
						燕窝枸杞
					</view>
					<view class="history-item">
						微山莲子
					</view>
					<view class="history-item">
						烟台苹果
					</view>
					<view class="history-item">
						新鲜奶莓
					</view>
					<view class="history-item">
						冬虫夏草
					</view>
					<view class="history-item">
						青海耗牛
					</view>
					<view class="history-item">
						冬瓜荷叶茶
					</view>
				</view>
			</view>
			<view class="hot-box">
				<view class="hot-search-label">
					亚健康咨询
				</view>
				<view class="history-list">
					<view class="history-item">
						头疼头晕
					</view>
					<view class="history-item">
						腹部不适
					</view>
					<view class="history-item">
						心烦气躁
					</view>
					<view class="history-item">
						手脚发麻
					</view>
					<view class="history-item">
						腰酸背痛
					</view>
					<view class="history-item">
						手脚冰凉
					</view>
				</view>
			</view>
		</view>
		
		<view class="search-product" v-if="status == 2">
			<view class="tab-list">
				<view :class="{ 'active' : isActive === index }" class="child" v-for="(item,index) in navList"
					:key="index" @click="checked(index)">
					{{item.title}}
				</view>
			</view>
			<view v-if="isActive == 0">
				<view class="product-list">
					<view class="product-item">
						<view class="product-item-column2">
							<image src="../../../static/img-4.png" class="product-item-column2-img" mode="aspectFill">
							</image>
							<view class="product-item-column2-bottom">
								<view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
								<view class="product-item-column2-row-between">
									<view class="product-item-column2-price">
										￥394.00
										<text>￥34.00</text>
									</view>
									<button type="default" class="product-item-column2-btn">
										<image src="../../../static/add-icon.png" mode=""></image>
									</button>
								</view>
							</view>
						</view>
					</view>
					<view class="product-item">
						<view class="product-item-column2">
							<image src="../../../static/img-4.png" class="product-item-column2-img" mode="aspectFill">
							</image>
							<view class="product-item-column2-bottom">
								<view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
								<view class="product-item-column2-row-between">
									<view class="product-item-column2-price">
										￥394.00
										<text>￥34.00</text>
									</view>
									<button type="default" class="product-item-column2-btn">
										<image src="../../../static/add-icon.png" mode=""></image>
									</button>
								</view>
							</view>
						</view>
					</view>
					<view class="product-item">
						<view class="product-item-column2">
							<image src="../../../static/img-4.png" class="product-item-column2-img" mode="aspectFill">
							</image>
							<view class="product-item-column2-bottom">
								<view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
								<view class="product-item-column2-row-between">
									<view class="product-item-column2-price">
										￥394.00
										<text>￥34.00</text>
									</view>
									<button type="default" class="product-item-column2-btn">
										<image src="../../../static/add-icon.png" mode=""></image>
									</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="isActive == 1">
				<view class="list">
					<view class="item">
						<image src="../../../static/img-4.png" class="product-item-column-img" mode="aspectFill" />
						<view class="product-item-sidebar">
							<view class="product-item-sidebar-top">
								<image src="../../../static/hot.png" class="product-tag-img" mode="widthFix"></image>
								<text class="product-item-column-name">有勇气去改变可以改变的事，有胸怀去接受</text>
							</view>
							<view class="product-item-row-between">
								<text class="look-num">3.2万人浏览</text>
								<button type="default" class="collect-btn">
									<image src="../../../static/heart-active.png" mode="widthFix"></image>
									3386
								</button>
							</view>
						</view>
					</view>
					<view class="item">
						<image src="../../../static/img-4.png" class="product-item-column-img" mode="aspectFill" />
						<view class="product-item-sidebar">
							<view class="product-item-sidebar-top">
								<image src="../../../static/newest.png" class="product-tag-img" mode="widthFix"></image>
								<text class="product-item-column-name">有勇气去改变可以改变的事，有胸怀去接受</text>
							</view>
							<view class="product-item-row-between">
								<text class="look-num">3.2万人浏览</text>
								<button type="default" class="collect-btn">
									<image src="../../../static/heart-active.png" mode="widthFix"></image>
									3386
								</button>
							</view>
						</view>
					</view>
					<view class="item">
						<image src="../../../static/img-4.png" class="product-item-column-img" mode="aspectFill" />
						<view class="product-item-sidebar">
							<view class="product-item-sidebar-top">
								<text class="product-item-column-name">有勇气去改变可以改变的事，有胸怀去接受</text>
							</view>
							<view class="product-item-row-between">
								<text class="look-num">3.2万人浏览</text>
								<button type="default" class="collect-btn">
									<image src="../../../static/heart-active.png" mode="widthFix"></image>
									3386
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//选项卡
				isActive: 0,
				navList: [{
					index: 0,
					title: '产品',
				}, {
					index: 1,
					title: "康养百科",
				}],
				status: 1,
			}
		},
		methods: {
			//选项卡
			checked(index) {
				this.isActive = index
			},
			/**
			 * 返回上一页
			 */
			back() {
				uni.navigateBack({
					delta: 1,
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./search.css";
</style>