添加配件搜索

components/Yl_switch/index.js

@@ -0,0 +1,72 @@
+Component({
+    properties: {
+        list: {
+            type: Array,
+            value: ['最新', '最热']
+        },
+        change: {
+            type: Function
+        },
+        sort: {
+            type: Array
+        },
+        reversed: {
+            type: Number,
+            value: 0
+        }
+    },
+    lifetimes: {
+        attached() {},
+        ready: function () {
+            const that = this;
+            let query = wx.createSelectorQuery().in(this)
+            query.select('.switch-box').boundingClientRect();
+            query.exec(function (res) {
+                that.setData({
+                    baseLeft: res[0].left
+                })
+                that.chengeSelect()
+            })
+        }
+    },
+    data: {
+        checkedItem: 0, //选中项
+        animationData: {}, //横线平移动画
+        baseLeft: 0,
+    },
+    methods: {
+        changeSwitch(e) {
+            let checkedItem = this.data.checkedItem == 0 ? 1 : 0
+            this.setData({
+                checkedItem
+            })
+            let name = this.data.list[this.data.checkedItem],
+                sort = this.data.sort;
+            for (let i = 0; i < sort.length; i++) {
+                sort[i].sorted = sort[i].sortname == name ? 1 : 0;
+                sort[i].reversed = this.data.reversed
+            }
+            this.triggerEvent('change', checkedItem)
+            this.chengeSelect()
+        },
+        chengeSelect() {
+            let animation = wx.createAnimation({
+                duration: 1000,
+                timingFunction: 'ease',
+            })
+            let that = this;
+            let query = wx.createSelectorQuery().in(this)
+            query.select('.active').boundingClientRect();
+            query.exec(function (res) {
+                let baseLeft = that.data.baseLeft == res[0].width ? 0 : res[0].width;
+                animation.translate(baseLeft).step({
+                    duration: 300
+                })
+                that.setData({
+                    animationData: animation.export(),
+                    baseLeft
+                })
+            })
+        }
+    }
+})

components/Yl_switch/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

components/Yl_switch/index.scss

@@ -0,0 +1,36 @@
+.switch-box {
+    position: relative;
+    display: flex;
+    width: 170rpx;
+    height: 60rpx;
+    background: #F5F5F5;
+    border-radius: 30rpx;
+
+    .view {
+        flex: 1;
+        height: 60rpx;
+        text-align: center;
+        line-height: 60rpx;
+        z-index: 2;
+        font-size: 24rpx;
+        font-family: PingFang SC-Regular, PingFang SC;
+        color: #999999;
+    }
+
+    .active {
+        font-size: 24rpx;
+        color: #FFFFFF;
+    }
+
+    .bg {
+        /* width: ;
+        height: 52px; */
+        position: absolute;
+        width: calc(50% - 4px);
+        height: calc(100% - 8rpx);
+        background: #FA8C16;
+        border-radius: 30rpx;
+        top: 4rpx;
+        z-index: 1;
+    }
+}

components/Yl_switch/index.wxml

@@ -0,0 +1,4 @@
+<view class="switch-box">
+    <view class="bg view" animation="{{animationData}}" />
+    <view class="{{checkedItem==index?'active':''}} view" wx:for="{{list}}" wx:key="{{item}}" wx:if="{{index<2}}" bindtap="changeSwitch">{{language[item]||item}}</view>
+</view>

pages/index/market/index.js

@@ -1,11 +1,4 @@
-const content = {
-    ismodule: 0,
-    pageNumber: 1,
-    pageTotal: 1
-  },
-  _Http = getApp().globalData.http;
-let sa_brandid = 0,
-  downCount = null;
+const _Http = getApp().globalData.http;
 Component({
   options: {
     addGlobalClass: true
@@ -15,14 +8,21 @@ Component({
     typeList: [],
     list: [],
     filtratelist: [],
-    popupShow: false
+    popupShow: false,
+    content: {
+      ismodule: 0,
+      pageNumber: 1,
+      pageTotal: 1
+    }
   },
   methods: {
     init() {
-      content.where = {
-        condition: "",
-        tradefield: ""
-      }
+      this.setData({
+        "content.where": {
+          condition: "",
+          tradefield: ""
+        }
+      })
       this.getList(true);
       return true;
     },
@@ -30,6 +30,7 @@ Component({
     getList(init = false) {
       wx.hideLoading()
       if (init.detail != undefined) init = init.detail;
+      let content = this.data.content;
       if (init) content.pageNumber = 1;
       if (content.pageNumber > content.pageTotal) return;
       content.brandids = [];
@@ -51,7 +52,8 @@ Component({
         content.pageNumber = res.pageNumber + 1;
         content.pageTotal = res.pageTotal;
         this.setData({
-          list: res.pageNumber == 1 ? res.data : this.data.list.concat(res.data)
+          list: res.pageNumber == 1 ? res.data : this.data.list.concat(res.data),
+          content
         })
         this.setListHeight()
       })
@@ -60,47 +62,34 @@ Component({
     onSearch({
       detail
     }) {
-      content.where.condition = detail;
       wx.showLoading({
         title: '搜索中...',
       })
       this.setData({
-        'condition': detail
+        'condition': detail,
+        "content.where.condition": detail
       })
       this.getList(true)
     },
     onChange({
       detail
     }) {
-      content.where.condition = detail
       this.setData({
-        'condition': detail
+        'condition': detail,
+        "content.where.condition": detail
       })
     },
-    /* 设置页面高度 */
-    setListHeight() {
-      this.selectComponent("#ListBox").setHeight(".division", this);
-    },
-    tradefieChange({
+    changeModule({
       detail
     }) {
-      content.where.tradefield = detail.item.tradefield == '全部' ? '' : detail.item.tradefield
-      this.getList(true);
-      this.selectAllComponents('#tradefieList').filter(v => {
-        v.setData({
-          active: detail.index
-        })
-      })
-    },
-    openPopup() {
       this.setData({
-        popupShow: true
+        "content.ismodule": detail
       })
+      this.getList(true)
     },
-    onClose() {
-      this.setData({
-        popupShow: false
-      })
+    /* 设置页面高度 */
+    setListHeight() {
+      this.selectComponent("#ListBox").setHeight(".division", this);
     }
   }
 })

pages/index/market/index.json

@@ -2,6 +2,7 @@
   "component": true,
   "usingComponents": {
     "List": "./modules/list/index",
-    "Tabs": "./modules/tabs/index"
+    "Tabs": "./modules/tabs/index",
+    "Yl_switch": "/components/Yl_switch/index"
   }
 }

pages/index/market/index.wxml

@@ -1,5 +1,5 @@
 <van-search use-action-slot placeholder='请输入搜索关键词' shape='round' bind:change='onChange' bind:search="onSearch" bind:clear="onSearch">
-	<view wx:if="{{condition}}" style="padding: 0 10rpx;" slot="action" bind:tap="getList">搜索</view>
+	<Yl_switch slot="action" list="{{['产品','配件']}}" bind:change='changeModule' />
 </van-search>
 <view class="division" style="height: 10rpx;" />
 <Yl_ListBox id='ListBox' bind:getlist='getList'>