搜索框组件的封装

components/search-box/README.md

@@ -0,0 +1,81 @@
+# SearchBox 搜索框组件
+
+一个可复用的搜索框组件，支持自定义宽度、图标、placeholder、按钮文字，支持 v-model 双向绑定和搜索事件，适用于 Vue2/uni-app 项目。
+
+## 功能特性
+- 支持 v-model 双向绑定父组件变量
+- 支持自定义宽度（width）
+- 支持自定义搜索图标（searchIcon，建议直接用 CommonEnum.SEARCH）
+- 支持自定义 placeholder
+- 支持自定义按钮文字
+- 支持点击按钮和回车触发搜索事件
+- 样式美观，易于复用
+
+## 基本用法
+
+```vue
+<template>
+  <search-box
+    v-model="searchName"
+    :width="'600rpx'"
+    :search-icon="CommonEnum.SEARCH"  <!-- 推荐这样写 -->
+    placeholder="请输入内容"
+    btn-text="查找"
+    @search="handleSearch"
+  />
+</template>
+
+<script>
+import SearchBox from '@/components/search-box/search-box.vue'
+import CommonEnum from '@/enum/common.js'
+
+export default {
+  components: { SearchBox },
+  data() {
+    return {
+      searchName: '',
+      CommonEnum
+    }
+  },
+  methods: {
+    handleSearch(val) {
+      // val 就是当前输入框内容
+      console.log('搜索内容：', val)
+      // 这里可以发请求等
+    }
+  }
+}
+</script>
+```
+
+## Props
+| 属性名      | 类型   | 默认值      | 说明                 |
+| ----------- | ------ | ----------- | -------------------- |
+| value       | String | ''          | v-model 绑定值       |
+| width       | String | '690rpx'    | 搜索框宽度           |
+| searchIcon  | String | CommonEnum.SEARCH | 搜索图标地址 |
+| placeholder | String | '请输入高僧姓名' | 输入框占位符    |
+| btnText     | String | '搜索'      | 按钮文字             |
+
+## 事件
+| 事件名 | 说明                 | 回调参数         |
+| ------ | -------------------- | --------------- |
+| input  | 输入内容变化时触发   | 当前输入框内容   |
+| search | 点击按钮或回车时触发 | 当前输入框内容   |
+
+## 父子通信说明
+- v-model 实现父子双向绑定，父组件变量会自动与输入框内容同步。
+- 子组件通过 `$emit('input', value)` 通知父组件更新 v-model。
+- 子组件通过 `$emit('search', value)` 通知父组件执行搜索。
+
+## 注意事项
+1. 组件适用于 Vue2/uni-app，v-model 默认绑定 `value` 和 `@input`。
+2. 建议传递合适的 `width`，如 `600rpx`、`690rpx` 等。
+3. 搜索图标建议直接用 `CommonEnum.SEARCH`。
+4. 可通过监听 `@search` 事件实现自定义搜索逻辑。
+
+## 样式自定义
+如需自定义样式，可直接修改组件内的 `<style lang="scss" scoped>` 部分。
+
+---
+如有更多需求，欢迎扩展！ 

components/search-box/search-box.vue

@@ -0,0 +1,97 @@
+<template>
+  <view class="searchBox" :style="{ width: width }">
+    <image class="search-icon" :src="searchIcon" mode="aspectFit"></image>
+    <input
+      class="search-input"
+      :value="value"
+      @input="onInput"
+      :placeholder="placeholder"
+      placeholder-class="search-placeholder"
+      @confirm="onSearch"
+      confirm-type="search"
+    />
+    <view class="search-btn" @click="onSearch">{{ btnText }}</view>
+  </view>
+</template>
+
+<script>
+import CommonEnum from '@/enum/common.js';
+export default {
+  name: 'SearchBox',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: String,
+      default: '690rpx'
+    },
+    placeholder: {
+      type: String,
+      default: '请输入高僧姓名'
+    },
+    btnText: {
+      type: String,
+      default: '搜索'
+    },
+    // 建议传递 CommonEnum.SEARCH 作为默认图标
+    searchIcon: {
+      type: String,
+      default: () => CommonEnum.SEARCH
+    }
+  },
+  methods: {
+    onInput(e) {
+      this.$emit('input', e.detail.value)
+    },
+    onSearch() {
+      this.$emit('search', this.value)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.searchBox {
+  display: flex;
+  align-items: center;
+  height: 70rpx;
+  background: #FFFBF5;
+  border-radius: 10rpx;
+  border: 1rpx solid #C7A26D;
+  margin-top: 20rpx;
+  margin-bottom: 20rpx;
+  padding: 0 12rpx;
+}
+.search-icon {
+  width: 32rpx;
+  height: 32rpx;
+  margin: 0 28rpx;
+}
+.search-input {
+  flex: 1;
+  font-size: 28rpx;
+  color: #333;
+  background: transparent;
+  border: none;
+  outline: none;
+  height: 100%;
+}
+.search-placeholder {
+  color: #bfa16b;
+  font-size: 28rpx;
+}
+.search-btn {
+  background: #bfa16b;
+  color: #fff;
+  font-size: 26rpx;
+  border-radius: 6rpx;
+  padding: 0 24rpx;
+  height: 48rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 16rpx;
+}
+</style> 

enum/common.js

@@ -3,7 +3,8 @@ export const CommonEnum = {
     BACKGROUND: "https://api.ccttiot.com/image-1753769939853.png", //磨砂背景图片
 	RIGHT_CHEVRON:"https://api.ccttiot.com/image-1753773619878.png", //右箭头
     BACK_BUTTON:"https://api.ccttiot.com/image-1753868358514.png", //导航栏返回按钮
-    BASE_COLOR:"#FAF8F3" //基调颜色
+    BASE_COLOR:"#FAF8F3", //基调颜色
+    SEARCH: "https://api.ccttiot.com/image-1753769500465.png" //通用搜索图标
 
 };
 export default CommonEnum;

enum/monk.js

@@ -1,9 +1,6 @@
 
 export const MonkEnum = {
-
+    MONK_IMAGE: "https://api.ccttiot.com/image-1753859218129.png"
-    SEARCH: "https://api.ccttiot.com/image-1753769500465.png", //返回的按钮图像
-    MONK_IMAGE:"https://api.ccttiot.com/image-1753859218129.png"
-
 };
 
 export default MonkEnum;

pages/monk/monk.vue

@@ -5,18 +5,14 @@
     <custom-navbar title="寺庙高僧" />
 		<view class="header">
 
-			<view class='searchBox'>
+			<monk-search-box
-				<image class="search-icon" :src="MonkEnum.SEARCH" mode="aspectFit"></image>
+				v-model="searchName"
-				<input
+				:width="'690rpx'"
-					class="search-input"
+				:search-icon="CommonEnum.SEARCH"
-					v-model="searchName"
+				placeholder="请输入高僧姓名"
-					placeholder="请输入高僧姓名"
+				btn-text="搜索"
-					placeholder-class="search-placeholder"
+				@search="onSearch"
-					@confirm="onSearch"
+			/>
-					confirm-type="search"
-				/>
-				<view class="search-btn" @click="onSearch">搜索</view>
-			</view>
 			<view class="monk-list">
 				<view class="monk-item" v-for="(item, idx) in monkList" :key="item.id">
 					<image class="monk-avatar" :src="item.imgUrl" mode="aspectFill"></image>
@@ -44,11 +40,13 @@
 	} from '@/api/monk/monk.js'
 	import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
 	import BaseBackground from "../../components/base-background/base-background.vue";
+	import SearchBox from "../../components/search-box/search-box.vue";
 
 	export default {
 		components: {
 			CustomNavbar,
-			BaseBackground
+			BaseBackground,
+			MonkSearchBox: SearchBox
 		},
 		data() {
 			return {
@@ -130,53 +128,6 @@
 
 
 
-	.searchBox {
-  display: flex;
-  align-items: center;
-  width: 690rpx;
-  height: 70rpx;
-  background: #FFFBF5;
-  border-radius: 10rpx;
-  border: 1rpx solid #C7A26D;
-  margin-top: 20rpx; /* 进一步减少顶部间距 */
-  margin-bottom: 20rpx;
-  padding: 0 12rpx;
-}
-
-	.search-icon {
-		width: 32rpx;
-		height: 32rpx;
-		margin: 0 28rpx;
-	}
-
-	.search-input {
-		flex: 1;
-		font-size: 28rpx;
-		color: #333;
-		background: transparent;
-		border: none;
-		outline: none;
-		height: 100%;
-	}
-
-	.search-placeholder {
-		color: #bfa16b;
-		font-size: 28rpx;
-	}
-
-	.search-btn {
-		background: #bfa16b;
-		color: #fff;
-		font-size: 26rpx;
-		border-radius: 6rpx;
-		padding: 0 24rpx;
-		height: 48rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		margin-left: 16rpx;
-	}
-
 	.monk-list {
 		width: 100%;
 		margin-top: 24rpx;