分类页、搜索页

2022-12-18 13:08:32 +08:00
parent 8057d75a52
commit 9d1526a28e
20 changed files with 2138 additions and 77 deletions
--- a/components/uni-searchbar.vue
+++ b/components/uni-searchbar.vue
@@ -0,0 +1,116 @@
+<template>
+	<!-- 顶部导航栏 -->
+	<view class="search-bar-container">
+		<view class="search-box" :style="{marginTop:searchBarTop + 'px',height:searchBarHeight + 'px'}">
+			<view class="top-left">
+				<view class="back-button" hover-class="back-button-active" @click="goBack">
+					<u-icon name="arrow-left" color="#fff;" />
+				</view>
+				<view class="search-input">
+					<u-input v-if="!readOnly"
+									 v-model="queryParamF"
+									 :focus="true"
+									 placeholder="搜索优质产品"
+									 prefixIcon="search"
+									 :border="false" style="background-color: #fff;border: none;"/>
+					<view v-else style="width: 360rpx;padding: 10rpx 20rpx;display: flex;align-items: center;"  @click="goSearch">
+						<u-icon name="search" color="#969696" size="22"></u-icon>
+						<text style="margin-left:10rpx;font-size: 30rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #969696;line-height: 37rpx;">搜索优质商品</text>
+					</view>
+					<view class="search-btn" @click="goSearch">搜索</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "searchBar",
+		props: {
+			searchBarTop: {
+				//搜索栏的外边框高度，单位px
+				type: Number,
+				default: 30
+			},
+			searchBarHeight: {
+				//搜索栏的高度，单位px
+				type: Number,
+				default: 30
+			},
+			queryParam: {
+				type: String,
+				default: null
+			},
+			readOnly: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				queryParamF: null
+			}
+		},
+		watch: {
+			queryParam: {
+				handler(val) {
+					this.queryParamF = this.queryParam
+				},
+				immediate: true
+			}
+		},
+		methods: {
+			goSearch() {
+				if(this.readOnly) {
+					this.$emit('navigate')
+					return
+				}
+				this.$emit('search', this.queryParamF)
+			},
+			goBack() {
+				this.$emit('back')
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+	.search-bar-container {
+		position: fixed;
+		top: 0;
+		left: 0;
+		// z-index: 999;
+		width: 100%;
+		background-color: #12CA64;
+
+		.search-box {
+			margin: 10rpx 10rpx;
+			display: flex;
+			align-items: center;
+			.top-left {
+				width: calc(100% - 200rpx);
+				display: flex;
+				justify-content: space-around;
+				align-items: center;
+				height: 100%;
+				.search-input {
+					display: flex;
+					border: 2rpx solid #fff;
+					background-color: #fff;
+					border-radius: 50rpx;
+					height: 100%;
+					margin-left: 10rpx;
+					.search-btn {
+						font-size: 32rpx;
+						font-family: PingFangSC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #3E3E3E;
+						line-height: 64rpx;
+						margin-right: 18rpx;
+					}
+				}
+			}
+		}
+	}
+</style>