修改首页搜索栏样式

src/app.wpy

@@ -40,10 +40,13 @@ wepy.app({
     let that = this;
     wx.getSystemInfo({
       success: function (res) {
-        const {statusBarHeight} = res;
+        const {statusBarHeight, platform} = res;
         that.$options.globalData.statusBarHeight = statusBarHeight;
+        that.$options.globalData.platform = platform;
       }
     });
+    const rect = wx.getMenuButtonBoundingClientRect();
+    this.$options.globalData.menuButtonTop = rect.top;
     wx.setStorageSync('onNetworkStatusChange', true);
     wx.onNetworkStatusChange((res) => {
       wx.setStorageSync('onNetworkStatusChange', res.isConnected);

src/components/custom/goodsList.wpy

@@ -28,7 +28,8 @@
               <van-loading slot="loading" type="spinner" size="20" vertical />
             </van-image>
             <view class="title">{{item.title}}</view>
-            <p class="price">￥{{item.price}}</p>
+            <p class="price">￥{{item.netPrice}}</p>
+            <p class="price-raw">￥{{item.price}}</p>
             <p class="buy">{{item.saleCount}}人购买</p>
           </view>
         </swiper-item>
@@ -247,15 +248,32 @@
     word-break:break-all;
     margin-top:10rpx;
   }
-  .list-item .price{
-    color:@maincolor;
-    font-size:@font-common;
-    margin-top:2rpx;
-  }
-  .list-item .buy{
-    font-size: 16rpx;
-    color:@darkgrey;
+  .list-item {
+
+    .price,
+    .price-raw {
+      display: inline-block;
+    }
+
+    .price {
+      color:@maincolor;
+      font-size:@font-common;
+      margin-top:2rpx;
+    }
+
+    .price-raw {
+      margin-left: 8rpx;
+      font-size: @font-tiny;
+      color: @text-color-lightgray;
+      text-decoration: line-through;
+    }
+
+    .buy {
+      font-size: @font-tiny;
+      color: @darkgrey;
+    }
   }
+
   .list-item.subright {
     transform: scale(0.85,0.85) translateY(26rpx) translateX(25rpx);
   }

src/pages/index.wpy

@@ -44,14 +44,20 @@
   .search{
     position: fixed;
     z-index: 10;
-    top:100rpx;
-    left: 310rpx;
-    font-size: @font-large;
-    color: @whitecolor;
-    .searchimg {
-      width: 34rpx;
-      height: 34rpx;
-      vertical-align: middle;
+    top: 100rpx;
+    left: 260rpx;
+    width: 230rpx;
+    height: 27px;
+    display: flex;
+    border: 2rpx solid @orange;
+    align-items: center;
+    border-radius: 28rpx;
+    padding: 0 10rpx;
+
+    &-content {
+      margin-left: 9rpx;
+      fonts-size: @font-normal;
+      color: @text-color-lightgray;
     }
   }
   @-webkit-keyframes fadeout {
@@ -187,8 +193,8 @@
       <image v-if="!authmodal" @tap="showMenu(!showModal)" :src="userInfo.avatarUrl" mode="cover" class="userimage"></image>
     </view>
     <view class="search"  style="{{ searchStyle }}" bindtap="toSearch">
-      <image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAMAAAANmfvwAAAAZlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+Vn2moAAAAIXRSTlMA+NQVHOYPmT8K38bDv5RMMSwnBobu7ciBhRK8lXd2TarCw2kxAAAA5klEQVQ4y9WSyxKCMAxFE+0DKFBpURSf9/9/Ul1YaelM3XpWYeYkBHLpg7udJbM83xzlqVoE2ioj1BrYX6zwtbOXPaDr1JgNeFSfJ3VimDmZMaEZaMHQYIrnaEgRNwkJHW0K3lHCjrHcucVIK0a0iwYc1FpRB3xHH9FThh7HUHe45xSLLtQSIqcIyFAzfE7x4IWiSoqEK7youG75o8u/rnyA7xmH1BgYVRyGJg1DA12MFCdN8wQ+RcFkbLaZePdWeC9s/4632KwcqgwC5rXpNuOQu3aSWXbX9z0iJ8c/O4ZKjnnQDzwBL9QS17pdGmYAAAAASUVORK5CYII=" class="searchimg"></image>
-      搜索
+      <van-icon name="search" color="#ff5d15" size="20px"/>
+      <text class="search-content">搜索</text>
     </view>
     <view>
       <gold type="gold" :des="mainInfo && mainInfo.account && mainInfo.account.quantity || 0" :gold="sign" :isReceive="isReceive" @resetAddGold="resetAddGold" @showCorn="cornModalShow"></gold>
@@ -562,10 +568,14 @@
         return;
       }
 
+      const {menuButtonTop, statusBarHeight, platform} = this.$app.$options.globalData;
+
       // 获取头像安全距离
-      let statusHeight = this.$app.$options.globalData.statusBarHeight || '';
-      this.setSafeAreaStyle('top:' + statusHeight + 'px');
-      this.searchStyle = 'top:' + (statusHeight + 12) + 'px';
+      this.setSafeAreaStyle('top:' + (statusBarHeight || '') + 'px');
+
+      // 搜索栏和胶囊按钮顶部对齐
+      const fix = platform === 'android' ? -1 : platform === 'ios' ? 1 : 0;
+      this.searchStyle = `top: ${menuButtonTop + fix}px`;
   
       // 获取分享人openid
       if (query.openid) {

src/pages/search.wpy

@@ -11,7 +11,7 @@
           <image wx:if="{{historyList.length}}" bindtap="clearHistory" src="/static/images/remove@2x.png">删除</image>
         </view>
         <view class="history-list">
-          <view>
+          <view class="history-list-tags">
             <van-tag wx:for="{{historyList}}" wx:key="index" color="#F1F1F1" text-color="#666666" size="medium" 
               round
               bindtap="doSearch"
@@ -57,10 +57,10 @@
           </view>
         </view>
       </view>
+      <view class="search-last" v-show="isLoading"><van-loading type="spinner" text-size="26rpx">加载中</van-loading></view>
+      <view class="search-last" v-show="isDone">没有更多了~</view>
+      <go-loading show="{{showLoading}}"></go-loading>
     </view>
-    <view class="search-last" v-show="isLoading"><van-loading type="spinner" text-size="26rpx">加载中</van-loading></view>
-    <view class="search-last" v-show="isDone">没有更多了~</view>
-    <go-loading show="{{showLoading}}"></go-loading>
   </view>
 </template>
 <script>
@@ -313,10 +313,17 @@
       display: flex;
       align-items: flex-end;
 
+      &-tags {
+        width: 100%;
+      }
+
       .van-tag {
         margin-right: 20rpx;
         font-size: 26rpx;
         margin-bottom: 22rpx;
+        max-width: 80%;
+        .ellipsis();
+        display: inline-block;
       }
 
       &-action {

src/style/common.less

@@ -28,6 +28,7 @@
 
 //字体大小
 @font-normal: 24rpx;
+@font-tiny: 18rpx;
 @font-small: 20rpx;
 @font-common: 22rpx;
 @font-middle: 28rpx;