1.团队门店 换搜索

operatingCompany/components/searchBox/searchBox.vue

@@ -0,0 +1,77 @@
+<template>
+	<view>
+		<!-- 搜索 -->
+		<view class="searchBox">
+			<image src="../../static/img/icon_search.png" class="searchImg"></image>
+			<input type="text" class="searchInput" :placeholder='placeholder' v-model="inputValue"
+				@click="search" />
+			<image src="../../static/img/icon_close.png" class="searchClose" v-if="inputValue!=''"
+				@click="clear"></image>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "searchBox",
+		props: {
+			placeholder: {
+				type: String,
+				default: '请输入搜索内容'
+			},
+			
+		},
+		data() {
+			return {
+				inputValue: '',
+			};
+		},
+		methods:{
+			search(){
+				if (!this.inputValue) return;
+				// console.log(this.inputValue);
+				this.$emit(this.inputValue);
+				
+			},
+			clear(){
+				this.inputValue = ''
+				this.$emit('');
+			},
+		}
+	}
+</script>
+
+<style>
+	.searchBox {
+		height: 72rpx;
+		margin: 24rpx;
+		background-color: #F4F5F7;
+		border-radius: 36rpx;
+		display: flex;
+		position: relative;
+	}
+
+	.searchImg {
+		margin-top: 20rpx;
+		margin-left: 20rpx;
+		width: 32rpx;
+		height: 32rpx;
+	}
+
+	.searchInput {
+		height: 72rpx;
+		font-size: 28rpx;
+		padding-left: 16rpx;
+		width: 78%;
+	}
+
+	.searchClose {
+		position: absolute;
+		width: 36rpx;
+		height: 36rpx;
+		right: 36rpx;
+		top: 20rpx;
+
+	}
+</style>

operatingCompany/pages/teamStore/teamStore.vue

@@ -3,11 +3,13 @@
 		<!-- top -->
 		<view class="topView">
 			<!-- 搜索 -->
-			<view class="searchBox">
+			<!-- <view class="searchBox">
 				<image src="../../static/img/icon_search.png" class="searchImg"></image>
 				<input type="text" class="searchInput" placeholder="请输入门店名称、联系人、手机号" v-model="searchValue"
 					@confirm="searchDone" />
-			</view>
+			</view> -->
+			
+			<searchBox placeholder="请输入门店名称、联系人、手机号" @search='search'></searchBox>
 
 			<!-- 条件筛选 -->
 			<view class="siftBg">
@@ -82,8 +84,12 @@
 	</view>
 </template>
 
-<script>
-	export default {
+<script>
+	import searchBox from '@/components/searchBox/searchBox.vue'
+	export default {
+		components:{
+			searchBox
+		},
 		data() {
 			return {
 				searchValue: '',
@@ -131,7 +137,10 @@
 		},
 
 
-		methods: {
+		methods: {
+			search(val){
+				console.log(val);
+			},
 			searchDone(e) {
 				this.searchValue = e.target.value
 				this.page = 1