品牌对比

pages/varComm/pages/brand/index.js

@@ -34,8 +34,11 @@ Component({
             const {detail} = event
             const result = []
             if(detail.length>6){
-                console.log('至多六个');
-                return
+                Dialog.alert({
+                    message: '至多六个',
+                    context:this 
+                  })
+                  return
             }
             for(let i of detail){
                 result.push(JSON.parse(i))

pages/varComm/pages/brandRatio/filter.wxs

@@ -0,0 +1,8 @@
+var method = {
+    stringify: function (val) {
+        return JSON.stringify(val)
+    }
+}
+module.exports = {
+    stringify: method.stringify
+}

pages/varComm/pages/brandRatio/index.js

@@ -1,23 +1,55 @@
-// pages/varComm/pages/brandRatio/index.js
+import Dialog from '../../../../miniprogram_npm/@vant/weapp/dialog/dialog';
+const app = getApp()
 Page({
 
     /**
      * 页面的初始数据
      */
     data: {
-        boxArr:new Array(6),
-        tabActive:0,
-        sonCom:true
+        boxArr: new Array(6),
+        tabActive: 0,
+        result: [],
+        sonCom: true,
+        popupShow: false,
+        mockData:[],
     },
 
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad(options) {
-       this.setData({
-        boxArr:wx.getStorageSync('brandData')
-       })
-       wx.setStorageSync('brandRatioTime', {sTimeType:'34'})
+        this.setData({
+            boxArr: wx.getStorageSync('brandData'),
+            result:wx.getStorageSync('brandData').map(ele=>{
+                return JSON.stringify(ele)
+            })
+        })
+        wx.setStorageSync('brandRatioTime', {
+            sTimeType: '34'
+        })
+        this.brandReq()
+    },
+    onChange(event) {
+        const {detail} = event
+        const result = []
+        for(let i=0;i<=detail.length;i++){
+            if(detail[i]=='null') detail.splice(i,1),i--
+        }
+        if(detail.length>6){
+            Dialog.alert({
+                message: '至多六个',
+                context:this 
+              })
+              return
+        }
+        for(let i of detail){
+            result.push(JSON.parse(i))
+        }
+        result.length = 6
+        this.setData({
+            result:detail,
+            boxArr:result
+        })
     },
     changeTab(val) {
         let n = val.detail.index;
@@ -25,14 +57,73 @@ Page({
             tabActive: n
         })
     },
-    changeTime(event){
-       let {detail} = event
-       wx.setStorageSync('brandRatioTime', detail)
+    addBrand() {
+        this.setData({
+            popupShow: true
+        })
+    },
+    popupClose() {
+        this.setData({
+            popupShow: false
+        })
+        wx.setStorageSync('brandData', this.data.boxArr)
+        this.reLoad()
+    },
+    del(e) {
+        let index = e.currentTarget.dataset.index
+        let result = [...this.data.result]
+        let boxArr = []
+        result.splice(index, 1)
+        for (let i of result) {
+            boxArr.push(JSON.parse(i))
+        }
+        boxArr.length = 6
+        this.setData({
+            result: result,
+            boxArr: boxArr
+        })
+        wx.setStorageSync('brandData', this.data.boxArr)
+        this.reLoad()
+    },
+    changeTime(event) {
+        let {
+            detail
+        } = event
+        wx.setStorageSync('brandRatioTime', detail)
+        this.reLoad()
+    },
+    //获取品牌
+    brandReq() {
+        app.globalData.request({
+            action: 'getUserBrand',
+            token: wx.getStorageSync('token'),
+        }).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)
+                    }
+                }
+            }
+            console.log(arr);
+            this.setData({
+                mockData: arr
+            })
+        })
+    },
+    reLoad() {
         this.setData({
-            sonCom:false
+            sonCom: false
         })
         this.setData({
-            sonCom:true
+            sonCom: true
         })
     }
 })

pages/varComm/pages/brandRatio/index.wxml

@@ -1,18 +1,20 @@
+<wxs src="./filter.wxs" module="filter"></wxs>
+
 <view class="box">
     <view class="tiem_com">
         <time-custom bind:change="changeTime"></time-custom>
     </view>
     <view class="add1">
         <view style="display: inline-block;" wx:for="{{boxArr}}" wx:key="idx" wx:for-index="index">
-            <view class="add_box1" wx:if="{{item==undefined}}">
+            <view class="add_box1" wx:if="{{item==undefined}}" bindtap="addBrand" data-index="{{index}}">
                 <view class="heng1"></view>
                 <view class="shu1"></view>
                 <view class="event1">添加品牌一</view>
             </view>
             <view class="del_box" wx:else>
-                <view class="del"  bindtap="del(index)">
+                <view class="del" bindtap="del" bindtap="del" data-index="{{index}}">
                     <text style="font-size: 24rpx;display: inline-block;margin-left: 64rpx;">×</text>
-                    <text style="font-size: 24rpx;font-weight: 100;" > 删除</text>
+                    <text style="font-size: 24rpx;font-weight: 100;"> 删除</text>
                 </view>
                 <view class="brand_img_box">
                     <image src="{{item.img}}" style="width:100%;" mode="widthFix" lazy-load="{{true}}"></image>
@@ -23,7 +25,7 @@
 
     </view>
     <view class="event_recom1">
-        <van-tabs class="view-tabs" active="{{ tabActive }}" bind:change="changeTab" swipe-threshold="3" >
+        <van-tabs class="view-tabs" active="{{ tabActive }}" bind:change="changeTab" swipe-threshold="3">
             <van-tab title="概括" wx:key="0"></van-tab>
             <van-tab title="微博对比" wx:key="1"></van-tab>
             <van-tab title="论坛对比" wx:key="2"></van-tab>
@@ -37,4 +39,23 @@
         </view>
     </view>
 
-</view>
+</view>
+<van-popup show="{{ popupShow }}" bind:close="popupClose" position="bottom" custom-style="height: 80%;">
+    <van-checkbox-group value="{{ result }}" bind:change="onChange">
+            <van-index-bar sticky="{{false}}" index-list="{{ [] }}">
+                <view wx:for="{{mockData}}" wx:key="idx">
+                    <van-index-anchor index="{{item.name}}" />
+                    <view class="my_cell" wx:for="{{item.data}}" wx:key="idx" wx:for-item="item2">
+                        <van-checkbox name="{{filter.stringify(item2)}}" shape="square"></van-checkbox>
+                        <view class="imgBox"
+                            style="display: inline-block;height: 96rpx;width: 96rpx; margin-left: 48rpx;">
+                            <image src="{{item2.img}}" style="width:96rpx;" mode="widthFix" lazy-load="{{true}}">
+                            </image>
+                        </view>
+                        <text>{{item2.brandname}}</text>
+                    </view>
+                </view>
+            </van-index-bar>
+        </van-checkbox-group>
+</van-popup>
+<van-dialog id="van-dialog" />

pages/varComm/pages/brandRatio/index.wxss

@@ -88,6 +88,7 @@ page {
     height: 96rpx;
     background: white;
     display: flex;
+    margin-left: 16rpx;
     align-items: center;
 }
 .van-checkbox{
@@ -189,4 +190,32 @@ page {
     padding: 15px 0px;
     color: #909497;
     text-align: center;
-}
+}
+
+.van-index-anchor text {
+    font-size: 24rpx;
+    color: rgba(153, 153, 153, 1);
+}
+
+.event_recom1 .van-cell .van-cell__title {
+    font-size: 28rpx;
+}
+
+.my_cell {
+    width: 718rpx;
+    padding-left: 32rpx;
+    height: 96rpx;
+    background: white;
+    display: flex;
+    align-items: center;
+}
+
+.van-checkbox {
+    display: inline-block !important;
+    margin-left: 32rpx;
+}
+
+.my_cell text {
+    font-size: 28rpx;
+    margin-left: 24rpx;
+}