From c80d463657ef788b15e50081bc186cea829a3246 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Thu, 9 Sep 2021 09:49:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=90=9C=E7=B4=A2=E9=A1=B5?=
 =?UTF-8?q?=E5=92=8C=E6=90=9C=E7=B4=A2=E7=BB=93=E6=9E=9C=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E9=A1=B5UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                  |  14 +++
 pages/index/index/index.vue |   2 +-
 pages/shop/search.vue       |  86 +++++++++++++++++
 pages/shop/searchList.vue   | 181 ++++++++++++++++++++++++++++++++++++
 4 files changed, 282 insertions(+), 1 deletion(-)
 create mode 100644 pages/shop/search.vue
 create mode 100644 pages/shop/searchList.vue

diff --git a/pages.json b/pages.json
index 0b106ef..6438940 100644
--- a/pages.json
+++ b/pages.json
@@ -893,6 +893,20 @@
 				"navigationBarTitleText": "领券中心",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/shop/search",
+			"style" : {
+				"navigationBarTitleText": "搜索",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path" : "pages/shop/searchList",
+			"style" : {
+				"navigationBarTitleText": "搜索",
+				"navigationStyle": "custom"
+			}
 		}
     ],
 	"globalStyle": {
diff --git a/pages/index/index/index.vue b/pages/index/index/index.vue
index 995d5c6..b1e5217 100644
--- a/pages/index/index/index.vue
+++ b/pages/index/index/index.vue
@@ -9,7 +9,7 @@
 				<text class="lf-iconfont icon-nv"></text>
 				<text class="lf-m-l-4">停车</text>
 			</view>
-			<view class="lf-nav-capsule lf-bg-search" @click="$msg('敬请期待')">
+			<view class="lf-nav-capsule lf-bg-search" @click="$url('/pages/shop/search')">
 				<text class="lf-iconfont icon-nv"></text>
 				<text class="lf-m-l-4">搜索</text>
 			</view>
diff --git a/pages/shop/search.vue b/pages/shop/search.vue
new file mode 100644
index 0000000..788b555
--- /dev/null
+++ b/pages/shop/search.vue
@@ -0,0 +1,86 @@
+<template>
+	<view>
+		<lf-nav title="搜索" :showIcon="true"></lf-nav>
+		<view class="head">
+			<u-search placeholder="请输入商品名或商户名" :focus="is_focus" v-model="value" @custom="customClick"></u-search>
+		</view>
+		<view class="content">
+			<!-- 大家都在搜 -->
+			<view>
+				<text class="title">大家都在搜</text>
+			</view>
+			<view class="list">
+				<view class="item">秋上新</view>
+				<view class="item">纪梵希</view>
+				<view class="item">雅诗兰黛</view>
+				<view class="item">中秋</view>
+				<view class="item">苹果爱普</view>
+				<view class="item">基督教烧烤</view>
+			</view>
+			<!-- 我搜过的 -->
+			<view class="lf-row-between">
+				<text class="title">我搜过的</text>
+				<text class="lf-iconfont icon--1 lf-color-777"></text>
+			</view>
+			<view class="list">
+				<view class="item item-2">秋上新</view>
+				<view class="item item-2">纪梵希</view>
+				<view class="item item-2">雅诗兰黛</view>
+				<view class="item item-2">中秋</view>
+				<view class="item item-2">苹果爱普</view>
+				<view class="item item-2">基督教烧烤</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value: '',
+				is_focus: true // 是否自动获得焦点
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			customClick(event){
+				console.log("点击了", event);
+				this.$url('/pages/shop/searchList');
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.head{
+		padding: 30rpx 32rpx;
+	}
+	.content{
+		padding: 20rpx 32rpx;
+		.title{
+			font-size: 28rpx;
+			color: #999999;
+		}
+		.list{
+			display: flex;
+			flex-wrap: wrap;
+			padding: 20rpx 0 40rpx;
+			.item{
+				padding: 4rpx 20rpx;
+				background-color: #15716E;
+				color: #FFFFFF;
+				border-radius: 34rpx;
+				font-size: 28rpx;
+				margin-right: 20rpx;
+				margin-bottom: 20rpx;
+			}
+			.item-2{
+				background-color: #F4F8F8;
+				color: #333333;
+			}
+		}
+	}
+</style>
diff --git a/pages/shop/searchList.vue b/pages/shop/searchList.vue
new file mode 100644
index 0000000..1035e05
--- /dev/null
+++ b/pages/shop/searchList.vue
@@ -0,0 +1,181 @@
+<template>
+	<view>
+		<lf-nav title="搜索" :showIcon="true" @changeHeight="e => nav_height = e"></lf-nav>
+		<view class="head">
+			<u-search placeholder="请输入商品名或商户名" action-text="取消" v-model="value" @custom="customClick"></u-search>
+		</view>
+		<view>
+			<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="false" :current="tab_current" @change="tabChange"></u-tabs>
+		</view>
+		<swiper :current="tab_current" @change="swiperChange" :style="{height: autoHeight}">
+			<swiper-item v-for="(tab_item, tab_index) in tab_list" :key="tab_index">
+				<scroll-view :scroll-y="true" :style="{height: autoHeight}">
+					<view class="scroll-content" v-if="tab_index == 0">
+						<lf-waterfall :list="goods_list"></lf-waterfall>
+					</view>
+					<view class="scroll-content" v-else>
+						<view class="shop-box" v-for="(item, index) in 3" :key="index">
+							<image class="shop-img"></image>
+							<view class="shop-info">
+								<view class="lf-line-1">luckin coffee 瑞幸咖啡</view>
+								<view>餐饮·美食</view>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+	import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
+	export default {
+		components: {
+			lfWaterfall
+		},
+		data() {
+			return {
+				value: '爱慕先生',
+				tab_current: 0,
+				tab_list: [{
+					name: '商品(8)'
+				},{
+					name: '商户(1)'
+				}],
+				scrollH: 0,
+				nav_height: 0,
+				goods_list: [
+					{
+						id: 10,
+						original_price: "4111.00",
+						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+						price: "2412.00",
+						product_id: 1008,
+						sale: 0,
+						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+					},
+					{
+						id: 10,
+						original_price: "4111.00",
+						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+						price: "2412.00",
+						product_id: 1008,
+						sale: 0,
+						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+					},
+					{
+						id: 10,
+						original_price: "4111.00",
+						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+						price: "2412.00",
+						product_id: 1008,
+						sale: 0,
+						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+					},
+					{
+						id: 10,
+						original_price: "4111.00",
+						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+						price: "2412.00",
+						product_id: 1008,
+						sale: 0,
+						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+					}
+				]
+			}
+		},
+		computed: {
+			autoHeight(){
+				return `calc(${this.scrollH}px - ${this.nav_height}px - 124rpx - 86rpx)`;
+			}
+		},
+		onLoad(options){
+			let info = uni.getSystemInfoSync();
+			this.scrollH = info.screenHeight;
+		},
+		methods: {
+			customClick(){
+				this.$toBack();
+			},
+			tabChange(event){
+				this.tab_current = event;
+			},
+			swiperChange(event){
+				this.tab_current = event.detail.current;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.head{
+		padding: 30rpx 32rpx;
+	}
+	.scroll-content{
+		padding: 30rpx 32rpx;
+	}
+	.shop-box{
+		width: 100%;
+		height: 100rpx;
+		display: flex;
+		&:nth-child(n+2){
+			margin-top: 60rpx;
+		}
+		.shop-img{
+			width: 100rpx;
+			height: 100rpx;
+			background-color: #EEEEEE;
+			border-radius: 5rpx;
+			margin-right: 15rpx;
+		}
+		.shop-info{
+			width: 570rpx;
+			height: 100rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			&>view:nth-child(1){
+				font-size: 36rpx;
+				color: #222222;
+				font-weight: bold;
+			}
+			&>view:nth-child(2){
+				font-size: 24rpx;
+				color: #777777;
+			}
+		}
+	}
+	
+	// tabs 样式修改
+	/deep/.u-scroll-box {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
+	}
+	/deep/.u-scroll-box .u-tab-bar {
+		background-color: #15716E!important;
+		width: 80rpx!important;
+		position: absolute;
+		left: 0;
+		bottom: -12rpx;
+	}
+	
+	/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar {
+		background-color: #15716E!important;
+		width: 56rpx!important;
+		position: absolute;
+		height: 5rpx!important;
+		left: 8rpx;
+		bottom: -4rpx;
+	}
+	
+	/deep/ .u-tab-item {
+		font-size: 28rpx!important;
+	}
+</style>