From 5f92b1982a4f5228309bd8e0f7429c24a3d3084b Mon Sep 17 00:00:00 2001
From: aihe <961836564@qq.com>
Date: Wed, 6 Dec 2023 19:54:44 +0800
Subject: [PATCH] uu

---
 components/tpx-search/tpx-search.vue | 119 ++++++++++++++-------------
 pages/tabBar/search/search.vue       |   3 +-
 2 files changed, 62 insertions(+), 60 deletions(-)

diff --git a/components/tpx-search/tpx-search.vue b/components/tpx-search/tpx-search.vue
index d5a29c9..19b698e 100644
--- a/components/tpx-search/tpx-search.vue
+++ b/components/tpx-search/tpx-search.vue
@@ -1,23 +1,49 @@
 <template>
-	<view>
-		<u-row justify="start">
-			<view v-for="(item) in list" @click="handleChangeTab(item)"
-				:class="`sta-item ${value == item.val?'active':''} stai-${mode}`">
-				<view class="stai-text">
-					{{item.title}}
-					<view class="stai-chk-line"></view>
-				</view>
-			</view>
-		</u-row>
+	<view class="sch-cont">
+		<view>
+			<u-input shape="circle" :placeholder="placeholder" v-model="keyword" :custom-style="`background-color: ${bgColor};height: ${height}rpx;`" 
+				 @focus="handleSwitchFouce()" @blur="handleSwitchFouce()"  @confirm="triggerChange()" @change="handleChange()">
+				<!-- <template v-slot:prefix>
+					<u-icon name="search" size="32"></u-icon>
+				</template> -->
+				<template v-slot:suffix>
+					<u-row>
+						<view v-if="focused && keyword.length > 0" style="0 20rpx 0 0">
+							<u-icon @click="handleClear()" color="#999"  name="close-circle-fill" size="36"></u-icon>
+						</view>
+						<view>
+							<u-icon @click="triggerChange()"  name="search" size="40" margin="0 0 0 20rpx"></u-icon>
+						</view>
+					</u-row>
+					<!-- <u-button type="primary" shape="circle"  custom-style="margin:0;height: 50rpx;">搜索</u-button> -->
+				</template>
+			</u-input>
+		</view>
+		
 	</view>
 </template>
 
 <script>
 	export default {
 		props: {
-			list: {
+			timelyTrigger: {
 				default () {
-					return []
+					return true
+				}
+			},
+			placeholder: {
+				default () {
+					return ''
+				}
+			},
+			bgColor: {
+				default () {
+					return '#f2f2f2'
+				}
+			},
+			height: {
+				default () {
+					return 50
 				}
 			},
 			value: {
@@ -25,15 +51,12 @@
 					return ''
 				}
 			},
-			mode: {
-				default () {
-					return 'primary' // primary info  
-				}
-			}
+			
 		},
 		data() {
 			return {
-
+				focused: false,
+				keyword: this.value
 			}
 		},
 		created() {
@@ -45,52 +68,32 @@
 		destroyed() {},
 		
 		methods: {
-			handleChangeTab(cur){
-				this.$emit('tabchange', cur.val)
-				this.$emit('update:value', cur.val) 
+			handleSwitchFouce() {
+				setTimeout(()=> {
+					this.focused = !this.focused
+				}, 100)
+			},
+			handleChange() {
+				if(this.timelyTrigger) {
+					this.triggerChange()
+				}
+			},
+			handleClear( ) {
+				debugger
+				this.keyword = ''
+				this.triggerChange()
+			},
+			triggerChange() {
+				let val = this.keyword
+				this.$emit('change', val)
+				this.$emit('update:value', val) 
 			}
 		}
 	}
 </script>
 
 <style scoped lang="scss">
-	.sta-item {
-		flex: 1;
-		padding: 0 0 30rpx 0;
-		margin-right: 30rpx;
+	.sch-cont{
 		position: relative;
-		font-size: 28rpx;
-		color: #FFF;
-		opacity: 0.8;
-		.stai-text {
-			position: relative;
-			display: inline-block;
-		}
-
-		&.active {
-			font-weight: 600;
-			opacity: 1;
-			.stai-text {
-				.stai-chk-line{
-					content: ' ';
-					position: absolute;
-					bottom: -30rpx;
-					left: 0;
-					margin-left: 10%;
-					width: 80%;
-					height: 4rpx;
-					background: #FFF;
-					border-radius: 2rpx;
-				}
-			}
-		}
-		&.stai-primary{
-			color: #0E0708;
-			&.active {
-				.stai-chk-line{
-					background: $u-primary;
-				}
-			}
-		}
 	}
 </style>
\ No newline at end of file
diff --git a/pages/tabBar/search/search.vue b/pages/tabBar/search/search.vue
index d7d8670..22daf35 100644
--- a/pages/tabBar/search/search.vue
+++ b/pages/tabBar/search/search.vue
@@ -4,8 +4,7 @@
 			<view class="customer_nav_bar">
 				<view class="com-jianju" style="width: 490rpx;">
 					<!-- 关键字搜索框 -->
-					<u-search placeholder="请输入运单号/订单号" v-model="searchParam.keyword" height="56" search-icon-size="40"
-						:clearabled="true" @change="(e)=> { handleSearchParamChange() }" :show-action="false"></u-search>
+					<tpx-search placeholder="请输入运单号/订单号" v-model:value="searchParam.keyword" @change="handleSearchParamChange()" bgColor="#FFF" :timelyTrigger="false"></tpx-search>					
 				</view>
 				
 				<view class="com-jianju" style="padding-top: 40rpx;">