添加搜索页面

2025-08-15 17:12:35 +08:00
parent b978edf7b0
commit 6f86254028
1 changed files with 105 additions and 0 deletions
--- a/src/pages/search/search.vue
+++ b/src/pages/search/search.vue
@ -0,0 +1,105 @@
+<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
+<route lang="jsonc" type="page">{
+	"layout": "tabbar",
+	"style": {
+		// 'custom' 表示开启自定义导航栏，默认 'default'
+		"navigationStyle": "custom"
+	}
+}</route>
+
+<template>
+    <view class="">
+        <view class="home-bg">
+            <view class="home-bg w-[100vw] fixed top-0 left-0 z-100">
+                <wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
+                    <template #left>
+                        <view class="flex items-center" @click="search.back">
+                            <wd-img width="48rpx" height="48rpx" :src="`${OSS}icon/icon_arrow_left.png`" />
+                        </view>
+                    </template>
+                    <template #title>
+                        <view class="search-box flex items-center ml-26rpx">
+                            <wd-search placeholder="搜索茶址名称" hide-cancel :placeholder-left="true"
+                                placeholderStyle="text-align:left;padding-left: 24rpx;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;"></wd-search>
+                        </view>
+                    </template>
+                </wd-navbar>
+            </view>
+        </view>
+
+        <view class="mx-30rpx mt-30rpx" :style="{ paddingTop: navbarHeight + 'px' }">
+            <view class="flex justify-between items-center">
+                <view class="text-30rpx leading-42rpx text-[#303133] font-bold">历史搜索</view>
+                <wd-icon name="delete-thin" size="22px" color="9D9D9D"></wd-icon>
+            </view>
+
+            <view class="mt-40rpx flex flex-wrap items-center">
+                <view class="bg-[#F8F9FA] rounded-28rpx w-112rpx h-56rpx text-center text-[#606266] text-26rpx leading-56rpx mr-20rpx mb-24rpx" v-for="(item, index) in 10" :key="index">
+                    茶叶
+                </view>
+            </view>
+        </view>
+    </view>
+	
+</template>
+
+<script lang="ts" setup>
+	import { ref, inject } from 'vue'
+	import { getNavBarHeight } from '@/utils/index'
+
+	let navbarHeight = ref(0)
+	let OSS = inject('OSS')
+
+	onLoad(() => {
+		navbarHeight.value = getNavBarHeight()
+	})
+
+    const search = {
+		back: () => {
+			uni.navigateBack({
+                delta: 1,
+            })
+		}
+	}
+	
+</script>
+
+<style lang="scss">
+page {
+    background-color: #fff;
+}
+
+.home-bg {
+    background-color: #F8F9FA;
+}
+
+.search-box {
+	display: flex;
+	height: 100%;
+	margin-right: 40px;
+	--wot-search-padding: 0;
+	--wot-search-side-padding: 0;
+
+	:deep() {
+		.wd-search {
+			background: transparent !important;
+			width: 100% !important;
+		}
+
+		.wd-search__block {
+			background-color: #fff !important;
+		}
+
+		.wd-search__input {
+			// #ifdef MP
+			padding-left: 32px !important;
+			padding-right: 32px !important;
+			// #endif
+
+			// #ifndef MP
+			padding-right: 0 !important;
+			// #endif
+		}
+	}
+}
+</style>