完成开发

src/pages/counter/index.vue

@@ -30,7 +30,7 @@
         :lower-threshold="40"
         scroll-y>
           <div class="content-wrapper">
-            <div class="item-cell" v-for="(item, itemIndex) in itemList" :key="itemIndex" @click="handleItemCell(itemIndex)">
+            <div class="item-cell" v-for="item in itemList" :key="item.id" @click="handleItemCell(item)">
               <img class="item-cell-image" src="../../assets/img/sel_box.png" :style="{ display: item.is_active ? 'none' : 'block'} "/>
               <img class="item-cell-image" src="../../assets/img/sel_box_sel.png" :style="{ display: item.is_active ? 'block' : 'none'} "/>
               <img :src="item.img" class="item-img" mode="aspectFit" :lazy-load="true"/>
@@ -48,6 +48,7 @@
 
 <script>
 // Use Vuex
+import store from '@/store'
 import fly, { setAuthorization } from '@/request'
 export default {
   computed: {
@@ -60,6 +61,7 @@ export default {
   data() {
     // 性能触发.所有的list只存key
     return {
+      _cache: {},
       p_index: 1,
       itemList: [],
       brandList: [],
@@ -108,6 +110,10 @@ export default {
     handleGetUserInfo(e) {
       console.log(e)
       if (e.target.errMsg === 'getUserInfo:ok') {
+        if (wx.getStorageSync('hasLogin')) {
+          this.handleSubmit()
+          return
+        }
         this.getUserInfo(e.target)
       } else {
         wx.showModal({
@@ -118,10 +124,6 @@ export default {
       }
     },
     async getUserInfo(res) {
-      if (wx.getStorageSync('hasLogin')) {
-        this.handleSubmit()
-        return
-      }
       fly.post('auth_login', {
         encrypted_data: res.encryptedData,
         iv: res.iv,
@@ -141,6 +143,7 @@ export default {
     getConfig() {
       fly.get('config?version=1.0.0')
         .then(res => {
+          store.commit('setConfig', res.data)
           this.brandList = res.data.brands
           this.brandList = this.brandList.map(item => {
             return {
@@ -150,6 +153,7 @@ export default {
           })
           for (let { name } of this.brandList) {
             this._cache[name] = {}
+            this._cache[name].activeList = []
           }
           console.log(this._cache)
           this.fetchDetail(this.brandList[1].name)
@@ -190,12 +194,31 @@ export default {
             this._cache[brand].loaded = true
           }
           this.itemList = this.itemList.concat(...res.data.mobiles)
+          this.hasActiveId(brand)
           this._cache[brand].list = this.itemList
         })
         .catch(res => {
           console.log('warning')
         })
     },
+    // 是否有，有的话，激活
+    hasActiveId(brand) {
+      if (this._cache[brand].activeList) {
+        this.itemList = this.itemList.map(item => {
+          if (this._cache[brand].activeList.includes(item.id)) {
+            return {
+              ...item,
+              is_active: true
+            }
+          } else {
+            return {
+              ...item,
+              is_active: false
+            }
+          }
+        })
+      }
+    },
     // 根据条件获取手机列表
     fetchListByWord(word = '', page = 1, count = 20) {
       fly.get(`search?word=${word}&page=${page}&per_page=${count}`)
@@ -207,33 +230,77 @@ export default {
       console.log(this.brand, brand, this._cache)
       // 如果当前的已有list，就直接切换
       if (this._cache[brand].list) {
+        this._cache[brand].list = this._cache[brand].list.map(item => {
+          if (this._cache[brand].activeList.includes(item.id)) {
+            return {
+              ...item,
+              is_active: true
+            }
+          } else {
+            return {
+              ...item,
+              is_active: false
+            }
+          }
+        })
         this.itemList = this._cache[brand].list
         this.p_index = index
         return
       }
-      // 清空当前列表
       this.itemList = []
       this.fetchDetail(brand)
       this.p_index = index
     },
     // 点击右侧
-    handleItemCell(itemIndex) {
-      let total = 0
-      this.itemList = this.itemList.map((item, index) => {
-        if (item.is_active) {
-          total++
-        }
-        if (itemIndex === index) {
-          total++
-          return {
-            ...item,
-            is_active: !item.is_active
+    handleItemCell(option) {
+      console.log(option)
+      // 此时显然没有触发mutated，itemList的引用没变。not mutated，就不会update更不会re-render
+      option.is_active = !option.is_active
+      const status = option.is_active
+      const num = status ? 1 : -1
+      // 如果brands有多个分类，做排除自身意外的激活或移除操作
+      if (option.brands.length > 1) {
+        // 如果包括·经典·,经典的total需要去响应
+        // num移入外层判断，避免在forEach过程判断
+        if (num > -1) {
+          // 过滤出不属于当前brand的brands
+          option.brands.filter(item => item !== this.brand).forEach(brand => {
+            if (!this._cache[brand].activeList.includes(option.id)) {
+              this._cache[brand].activeList.push(option.id)
+              const brandIndex = this.brandList.findIndex(item => item.name === brand)
+              const temp = this.brandList[brandIndex]
+              temp.total += num
+              this.brandList.splice(brandIndex, 1, temp)
             }
+          })
+        } else {
+          option.brands.filter(item => item !== this.brand).forEach(brand => {
+            const index = this._cache[brand].activeList.findIndex(id => id === option.id)
+            if (index > -1) {
+              // 移除
+              this._cache[brand].activeList.splice(index, 1)
+              const brandIndex = this.brandList.findIndex(item => item.name === brand)
+              const temp = this.brandList[brandIndex]
+              temp.total += num
+              this.brandList.splice(brandIndex, 1, temp)
             }
-        return item
           })
+        }
+      }
+      // 当前brand的操作
       this._cache[this.brand].list = this.itemList
-      this.brandList[this.p_index].total = total
+      const index = this._cache[this.brand].activeList.findIndex(id => id === option.id)
+      if (num > -1) {
+        if (index === -1) {
+          this._cache[this.brand].activeList.push(option.id)
+        }
+      } else {
+        if (index > -1) {
+          this._cache[this.brand].activeList.splice(index, 1)
+        }
+      }
+      this.itemList = this.itemList.slice()
+      this.brandList[this.p_index].total += num
     }
   }
 }

src/pages/index/index.vue

@@ -3,12 +3,24 @@
     <img src="../../assets/img/index-bg.jpg" class="index-bg"/>
     <img src="../../assets/img/index-bg-cover.png" class="index-bg-cover" />
     <img src="../../assets/img/index-start-button.jpg" class="index-start-button" @click="handleStart"/>
-    <img src="../../assets/img/btn-more.png" class="btn-more"/>
+    <!-- <navigator
+    v-if="config.more_fun && !config.more_fun.hide"
+    class="navigator"
+    path=""
+    target="miniProgram" open-type="navigate" :app-id="config.more_fun.appid" > -->
+    <img src="../../assets/img/btn-more.png" class="btn-more" @tap="handleMore" v-if="config.more_fun && !config.more_fun.hide" />
+    <!-- </navigator> -->
   </div>
 </template>
 
 <script>
+import store from '@/store'
 export default {
+  computed: {
+    config() {
+      return store.state.indexPage.config
+    }
+  },
   onLoad () {
     console.log(this.$root.$mp.query, this.$root.$mp.appOptions, this.$root.$mp)
   },
@@ -33,22 +45,18 @@ export default {
         url: '/pages/counter/main'
       })
     },
-    getUserInfo () {
-      wx.login({
-        success: () => {
-          wx.getUserInfo({
-            success: (res) => {
-              this.userInfo = res.userInfo
-            }
-          })
+    handleMore() {
+      wx.navigateToMiniProgram({
+        appId: this.config.more_fun.appid,
+        path: '',
+        success() {
+          console.log('打开成功')
         }
       })
     }
   },
 
   created () {
-    // 调用应用实例的方法获取全局数据
-    // this.getUserInfo()
   }
 }
 </script>