搜索组件优化

前端开发-罗建龙
1 parent 8b708855
Showing 3 changed files with 29 additions and 14 deletions
components/diy_searchbox/diy_searchbox.js
components/diy_searchbox/diy_searchbox.wxml
components/diy_searchbox/diy_searchbox.wxss
@@ -9,6 +9,14 @@ Component({
       type: Object,
       value: null,
     },
+    transparent: {
+      type: Number,
+      value: 0,
+    },
+    nav_backgroundColor: {
+      type: String,
+      value: '',
+    },
   },
   data: {
     // 这里是一些组件内部数据
 <!--pages/diy_ss/diy_ss.wxml-->
  <!-- wx:if="{{object.style==1}}" -->
- <!-- first -->
+ <!-- first --> 
 <block wx:if="{{object.style==1}}">
-	<view class='ss' style="position: relative;background-color: #fff">
-		<view bindtap='click_sear'  class="s1_gk_a1" wx:if="{{first}}">
-		   <view class='s_ge'>
+	<view class='ss' style="position: relative;{{transparent ? '' : (nav_backgroundColor ? ('background-color:' + nav_backgroundColor) : 'background-color:#fff;')}}">
+		<view bindtap='click_sear'   class="s1_gk_a1 " wx:if="{{first}}">
+		   <view class="s_ge {{object.is_bord==1 ? 'is_bord' : ''}}" style="text-align: {{object.searchbox_center}};">
 			   <image src='{{imghost}}/miniapp/images/search.png'></image>
-		    	<text>请输入商品关键字</text>
+          <text wx:if="{{object.searchbox_text}}">{{object.searchbox_text}}</text>
+	           <text wx:else>请输入商品关键字</text>
 		   </view>
 		</view>
 		<!-- 响应搜索事件 -->
@@ -19,7 +20,7 @@
 			 <view class="his_str his_str1" wx:if="{{searchRecord.length>0}}">
 				<block wx:for="{{searchRecord}}"> 
 			 	   <view class="item" bindtap="sear_key" data-item="{{item}}" >{{item}}</view>
-				</block>		 	
+				</block>
 			 	<view wx:if="{{searchRecord.length>0}}" class="clear" bindtap="del_his">清除</view>
 			 </view>
 		</view>		
@@ -32,14 +33,16 @@
 <view style="position: relative;">
 	<view style='background-color:{{object.top_bgcolor}}; display: flex; align-items: center; justify-content: space-around;padding:16rpx 0;'>
 	    <view class='s2_left'>
-	        <navigator open-type="switchTab" url="/pages/goods/categoryList/categoryList" class="s1_gk_a1">
-	        <image src='{{imghost}}/miniapp/images/model/nav.png' style="margin:0;position: relative;left: 6rpx"></image>
+	        <navigator open-type="switchTab" url="/pages/goods/categoryList/categoryList" class="s1_gk_a1 ">
+	        <image wx:if="{{object.leftImage}}" src='{{object.leftImage}}' style="margin:0;position: relative;left: 6rpx"></image>
+	        <image wx:else src='{{imghost}}/miniapp/images/model/nav.png' style="margin:0;position: relative;left: 6rpx"></image>
 	        </navigator>
 	    </view>
-	    <view class='s2_cen' style='background-color:{{object.inner_bgcolor}}'>
-	        <navigator wx:if="{{first}}" bindtap='click_sear' class="s1_gk_a2 flex" style='height: 100%;color:{{object.word_color?object.word_color:"#fff"}}'>
+	    <view class="s2_cen {{object.is_bord==1 ? 'is_bord' : ''}}" style='background-color:{{object.inner_bgcolor}}'>
+	        <navigator wx:if="{{first}}" bindtap='click_sear' class="s1_gk_a2 flex " style='height: 100%;color:{{object.word_color?object.word_color:"#fff"}};'>
 	           <text class="iconfont icon-search" style="font-size: 40rpx;"></text>
-	           <text>请输入商品关键字</text>
+	           <text wx:if="{{object.searchbox_text}}">{{object.searchbox_text}}</text>
+	           <text wx:else>请输入商品关键字</text>
 	        </navigator>
 			<view wx:else class="s1_gk_a2" style='color:{{object.word_color?object.word_color:"#fff"}}'>
 					<!-- <view class="pr"> -->
@@ -63,7 +66,8 @@
 	    </view>
 	    <view class='s2_right'>
 	        <navigator open-type="switchTab"  url="/pages/cart/cart/cart" class="s1_gk_a1">
-	        <image src='{{imghost}}/miniapp/images/model/car.png' style="margin:0;;"></image>
+	        <image wx:if="{{object.rightImage}}" src='{{object.rightImage}}' style="margin:0;;"></image>
+	        <image wx:else src='{{imghost}}/miniapp/images/model/car.png' style="margin:0;;"></image>
 	        </navigator>
 	    </view>
@@ -7,7 +7,7 @@
 }
 .s_ge{
-    width: 700rpx;
+    /* width: 700rpx; */
     height: 70rpx;
     text-align: center;
     border-radius: 8rpx;
@@ -15,6 +15,7 @@
     background: #fff none repeat scroll 0 0;
     border: 2px solid #eee;
     line-height: 64rpx;
+    padding: 0 10rpx;
 }
 .s_ge image{
@@ -153,7 +154,9 @@
 	color: #FF5B5A;
 	font-size: 26rpx;
 }
-
+.is_bord{
+  border-radius: 30rpx !important;
+}
 /* .w100 {
 	width: 100%;
 	box-sizing: border-box;