cxw-010203

app.json

@@ -46,7 +46,7 @@
         "text": "洞察"
       },
       {
-        "pagePath": "pages/brandCrisis/index",
+        "pagePath": "pages/brandSearch/index",
         "iconPath": "/custom-tab-bar/icons/appSearch.png",
         "selectedIconPath": "/custom-tab-bar/icons/appSearchActive.png",
         "text": "品牌搜索"
@@ -93,7 +93,8 @@
     "van-dialog": "@vant/weapp/dialog/index",
     "van-row": "@vant/weapp/row/index",
     "van-col": "@vant/weapp/col/index",
-    "van-divider": "@vant/weapp/divider/index"
+    "van-divider": "@vant/weapp/divider/index",
+    "van-toast": "@vant/weapp/toast/index"
   }
   
 }

custom-tab-bar/index.js

@@ -16,7 +16,7 @@ Component({
                 "text": "洞察"
             },
             {
-                "pagePath": "pages/brandCrisis/index",
+                "pagePath": "pages/brandSearch/index",
                 "iconPath": "icons/appSearch.png",
                 "selectedIconPath": "icons/appSearchActive.png",
                 "text": "",

pages/brandSearch/index.js

@@ -8,36 +8,10 @@ Page({
         height:app.globalData.navBarHeight + app.globalData.statusBarHeight,
         statusBarHeight:app.globalData.statusBarHeight,
         navBarHeight:app.globalData.navBarHeight,
-        navData: [
-            {
-                img: "./cars/audi.jpg",
-                title: "奥迪"
-            },
-            {
-                img: "./cars/audi.jpg",
-                title: "奥迪"
-            },
-            {
-                img: "./cars/audi.jpg",
-                title: "奥迪"
-            },
-            {
-                img: "./cars/audi.jpg",
-                title: "奥迪"
-            },
-            {
-                img: "./cars/audi.jpg",
-                title: "奥迪"
-            },
-            {
-                img: "./cars/audi.jpg",
-                title: "奥迪"
-            },
-            {
-                img: "./cars/audi.jpg",
-                title: "奥迪"
-            }
-        ]
+        navData: [],
+        sourceData: [],
+        mockData: [],
+        heightTop: 210
     },
     onLaunch() {
         wx.getSystemInfo({
@@ -54,6 +28,71 @@ Page({
     },
     onShow() {
         this.getTabBar().init();
+        this.getData();
+        this.createSelectorQuery().select(".nav-top").boundingClientRect(res => {
+            if (res) {
+                const { height } = res;
+                this.setData({
+                    heightTop: height
+                })
+            }
+        }).exec();
+    },
+    handlerSearch(e) {
+        let val = e.detail;
+        const arr = this.data.sourceData.filter(ele => {
+            return ele.brandname.toLowerCase().indexOf(val.toLowerCase()) != -1
+        })
+        this.setData({
+            navData: arr
+        })
+    },
+    handlerChoose(e) {
+        const row = e.currentTarget.dataset.row;
+        wx.setStorageSync('sBrand', row.brandname);
     },
+    getData() {
+        //页面数据
+        wx.showToast({
+            title: '加载中',
+            icon: 'loading',
+            duration: 30000
+        }) 
+        app.globalData.request({
+            action: 'getUserBrand',
+            token: 't%2BrswgjvzGM=',
+        }).then(res => {
+            let arr = [];
+            for (let i = 65; i <= 90; i++) {
+                arr.push({
+                    name: String.fromCharCode(i),
+                    data: []
+                });
+            }
+            for(let i of res){
+                for(let j of arr){
+                    if(i.firstword == j.name){
+                        j.data.push(i)
+                    }
+                }
+            }
+            let newArr = [];
+            let obj = {};
+            for (var i = 0; i < res.length; i++) {
+               if (!obj[res[i].brandid]) {
+                 newArr.push(res[i])
+                 obj[res[i].brandid] = true
+               }
+            }
+            this.setData({
+                mockData:arr,
+                navData: newArr,
+                sourceData: newArr
+            })
+            setTimeout(() => {
+                wx.hideToast();
+            }, 1000)
          
+        })
+    }
 });

pages/brandSearch/index.wxml

@@ -4,77 +4,24 @@
     <view style="height:{{statusBarHeight}}px;width: 100%;"></view>
     <view class="bs-top-title" style="height: {{navBarHeight}}px;width: 100%;">硕为思汽车智能洞察</view>
     <view class="bs-top">
-      <van-search style="width: 100%;" background="#006BFF" value="{{ value }}" placeholder="请输入品牌" />
+      <van-search style="width: 100%;" background="#006BFF" value="{{ value }}" placeholder="请输入品牌" bind:search="handlerSearch" />
     </view>
     <view class="bs-tabs">
-        <scroll-view class="bs-tab-sv" scroll-x="true">
-          <view class="bs-tab-sv-item" wx:for="{{navData}}" wx:key="{{index}}">
+        <scroll-view class="bs-tab-sv" scroll-x="true" enable-flex="true">
+          <view class="bs-tab-sv-item" wx:for="{{navData}}" data-row="{{item}}" wx:key="index" bindtap="handlerChoose">
             <image class="userAvatar" src="{{item.img}}" />
-            <view class="bs-tab-title">{{item.title}}</view>
+            <view class="bs-tab-title">{{item.brandname}}</view>
           </view>
         </scroll-view>
       </view>
   </view>
-  <view class="bs-block"></view>
-  <van-index-bar class="bs-bar" sticky-offset-top="196">
-    <view>
-      <van-index-anchor index="A" />
-      <view class="bs-item">
-        <image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
-        <text>奥迪</text>
-      </view>
-      <view class="bs-item">
-        <image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
-        <text>奥迪</text>
-      </view>
-      <view class="bs-item">
-        <image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
-        <text>奥迪</text>
-      </view>
-    </view>
-    <view>
-      <van-index-anchor index="B" />
-      <view class="bs-item">
-        <image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
-        <text>奥迪</text>
-      </view>
-      <view class="bs-item">
-        <image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
-        <text>奥迪</text>
-      </view>
-      <view class="bs-item">
-        <image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
-        <text>奥迪</text>
-      </view>
-    </view>
-    <view>
-      <van-index-anchor index="C" />
-      <view class="bs-item">
-        <image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
-        <text>奥迪</text>
-      </view>
-      <view class="bs-item">
-        <image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
-        <text>奥迪</text>
-      </view>
-      <view class="bs-item">
-        <image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
-        <text>奥迪</text>
-      </view>
-    </view>
-    <view>
-      <van-index-anchor index="D" />
-      <view class="bs-item">
-        <image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
-        <text>奥迪</text>
-      </view>
-      <view class="bs-item">
-        <image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
-        <text>奥迪</text>
-      </view>
-      <view class="bs-item">
-        <image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
-        <text>奥迪</text>
+  <view class="bs-block" style="height: {{heightTop}}px;"></view>
+  <van-index-bar class="bs-bar" sticky-offset-top="{{heightTop}}">
+    <view wx:for="{{mockData}}" wx:key="idx">
+      <van-index-anchor index="{{item.name}}" />
+      <view class="bs-item" wx:for="{{item.data}}" wx:key="idx" wx:for-item="item2">
+        <image slot="icon" class="bs-item-image" src="{{item2.img}}" lazy-load="{{true}}"/>
+        <text>{{item2.brandname}}</text>
       </view>
     </view>
   </van-index-bar>

pages/brandSearch/index.wxss

@@ -32,17 +32,18 @@
     justify-items: flex-start;
     align-items: center;
     padding: 15px 13px;
-    font-size: 27rpx;
+    font-size: 30rpx;
+    color: #3C3C3C;
   } 
   .bs-item-image {
     display: inline-block;
-    width: 54rpx;
-    height: 54rpx;
-    margin-right: 15rpx;
+    width: 80rpx;
+    height: 80rpx;
+    margin-right: 20rpx;
   }
   .bs-block {
       position: relative;
-      height: 395rpx;
+      height: 430rpx;
   }
   .bs-bar {
     position: relative;  
@@ -58,7 +59,7 @@
 .bs-tabs {
     width: 100%;
     margin-top: 0px;
-    height: 120rpx;
+    height: 150rpx;
     background: #fff;
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
@@ -71,16 +72,15 @@
     width: 100%; 
     white-space: nowrap; 
     display: flex;
+    justify-content: flex-start;
 }
 .bs-tab-sv-item {
-    width: 20%;
-    height: 100rpx;
     text-align: center;
-    display: inline-block;
+    padding: 0rpx 36rpx;
 }
 .userAvatar{
-    width:  68rpx;
-    height: 60rpx;
+    width:  78rpx;
+    height: 78rpx;
     border-radius: 4px;
 }
 .bs-tab-title{

pages/varComm/pages/brand/index.js

@@ -65,7 +65,6 @@ Component({
                     mockData:arr
                 })
             })
-
         }
     },
 })

pages/varComm/pages/brand/index.wxml

@@ -2,7 +2,6 @@
 <van-dialog id="van-dialog" />
 <view class="box">
     <view class="add1">
-
         <view style="display: inline-block;" wx:for="{{result}}" wx:key="idx" wx:for-index="index">
             <view class="add_box1" wx:if="{{item==undefined}}">
                 <view class="heng1"></view>
@@ -39,7 +38,6 @@
                         <text>{{item2.brandname}}</text>
                     </view>
                 </view>
-
             </van-index-bar>
         </van-checkbox-group>
     </view>