调试代码

MrShi

8 小时以前 63820a55496e99f54d68a1f16e3f6f606c582120

 mini-program/pages/mall/mall.vue

@@ -1,5 +1,6 @@
<template>
   <view class="mall">
      <view class="mall-zz" v-show="show"></view>
      <view class="head" :style="{ height: 'calc(' + (navHeight + statusbarHeight + 'px + 188rpx)') }">
         <view class="head-box">
            <view :style="{ width: '100%', height: statusbarHeight + 'px' }"></view>
@@ -24,27 +25,28 @@
               <text>适用品牌</text>
               <u-icon name="arrow-down" color="#777777" size="13"></u-icon>
            </view>
            <view class="head-list-item">
            <view class="head-list-item" @click="openSearch(3)">
               <text>系列</text>
               <u-icon name="arrow-down" color="#777777" size="13"></u-icon>
            </view>
         </view>
			
         <!-- 排序 -->
         <view class="list" v-if="show === 1">
            <view class="list-item">
               <text>综合排序</text>
               <image src="/static/icon/ic_selete@2x.png" mode="widthFix"></image>
            </view>
            <view class="list-item">
               <text>销量由高到低</text>
            </view>
            <view class="list-item">
               <text>价格由低到高</text>
            <view :class="item.active ? 'list-item red' : 'list-item'" v-for="(item, index) in paixu" :key="index" @click="clickpx(index)">
               <text>{{item.name}}</text>
               <image src="/static/icon/ic_selete@2x.png" mode="widthFix" v-show="item.active"></image>
            </view>
         </view>
			
         <view class="list" v-if="show === 2">
            <view class="list-cate active" v-for="(item, index) in 6" :key="index">自营品牌</view>
         <!-- 品牌 -->
         <view class="list" style="padding-top: 30rpx; box-sizing: border-box; justify-content: flex-start;" v-if="show === 2">
            <view :class="item.active ? 'list-cate active' : 'list-cate'" v-for="(item, index) in pingpai" :key="index" @click="getXiLie(item.id)">{{item.name}}</view>
         </view>
         <!-- 系列 -->
         <view class="list" v-if="show === 3">
            <view :class="item.active ? 'list-item red' : 'list-item'" v-for="(item, index) in xilie" :key="index" @click="clickpx(index)">
               <text>{{item.name}}</text>
               <image src="/static/icon/ic_selete@2x.png" mode="widthFix" v-show="item.active"></image>
            </view>
         </view>
      </view>
      <view class="commodity">
@@ -97,17 +99,56 @@
         return {
            keyword: '',
            show: null,
            list: [
               { name: '全部' },
               { name: '支重轮' },
               { name: '托轮' },
               { name: '平衡轮' },
               { name: '导轨' },
               { name: '导向轮' },
            ]
            list: [],
            paixu: [
               { name: '综合排序', id: 0, active: false },
               { name: '销量由低到高', id: 1, active: false },
               { name: '价格由低到高', id: 2, active: false },
               { name: '销量由高到低', id: 3, active: false },
               { name: '价格由高到低', id: 4, active: false },
            ],
            pingpai: [],
            xilie: []
         };
      },
      onLoad() {
         this.getLabels()
      },
      methods: {
         // 获取分类
         getLabels() {
            this.$u.api.getGoodsLabelsByType({ type: 0 })
               .then(res => {
                  if (res.code === 200) {
                     res.data.unshift({ name: '全部', id: '' })
                     this.list = res.data
                  }
               })
            this.$u.api.getGoodsLabelsByType({ type: 1 })
               .then(res => {
                  if (res.code === 200) {
                     res.data.forEach(item => {
                        item.active = false
                     })
                     res.data.unshift({ name: '自营品牌', id: '', active: true })
                     this.pingpai = res.data
                  }
               })
         },
         // 系列
         getXiLie(parentId) {
            this.$u.api.getGoodsLabelsByType({ type: 15, parentId })
               .then(res => {
                  if (res.code === 200) {
                     console.log(res)
                     res.data.forEach(item => {
                        item.active = false
                     })
                     res.data.unshift({ name: '系列', id: '', active: true })
                     this.xilie = res.data
                  }
               })
         },
         openSearch(type) {
            if (type === this.show) {
               this.show = null
@@ -118,6 +159,11 @@
         jump() {
            uni.navigateTo({
               url: '/pages/details/details'
            })
         },
         clickpx(i) {
            this.paixu.forEach((item, index) => {
               item.active = index === i
            })
         }
      }
@@ -132,6 +178,15 @@
<style lang="scss" scoped>
   .mall {
      width: 100%;
      .mall-zz {
         width: 100vw;
         height: 100vh;
         background-color: rgba(0,0,0,.5);
         position: fixed;
         top: 0;
         left: 0;
         z-index: 2;
      }
      .cart {
         position: fixed;
         right: 30rpx;
@@ -315,6 +370,7 @@
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            border-radius: 0rpx 0rpx 24rpx 24rpx;
            .active {
               background: rgba(0,64,150,0.1) !important;
               color: #004096 !important;
@@ -331,6 +387,13 @@
               font-size: 28rpx;
               color: #333333;
               margin-bottom: 24rpx;
               margin-right: 20rpx;
               &:last-child {
                  margin-right: 0 !important;
               }
            }
            .red {
               color: #E4001D !important;
            }
            .list-item {
               width: 100%;