jufubao-mall 2.0.20-beta4 → 2.0.20

package/src/components/JfbMallProductList/XdCateV1.vue

@@ -1,102 +1,67 @@
 <template>
-  <view class="xd-cate_v1" id="xd-cate_v1" :style="[borderComp]">
-    <view v-if="!isFixed" class="category_wrap-mask" :style="[categoryWarperMaskComp]" ></view>
+  <view class="xd-cate_v1" id="xd-cate_v1">
+    <view v-if="!isPreview && isShowCategory && showParent" class="category_wrap-mask" :style="{height: '110rpx'}" ></view>
     <view
-      class="category_wraper"
-      :style="[categoryWaperComp]"
-    >
-      <view v-if="showParent && isShowCategory" >
-        <view class="tab_wrap" :style="[{backgroundColor:titleBgcColor}]">
-          <cus-tab
-            class="xd-tab"
-            v-if="transformNavList.length"
-            :height="88"
-            :bg-color="titleBgcColor"
-            :line-bottom="12"
-            :spacing="40"
-            :tabIndex="tabIndex"
-            :footer-style="tabStyle['navStyle']"
-            :list="transformNavList"
-            :color="tabStyle['titleColor']"
-            :act-color="tabStyle['titleActColor']"
-            :font-size="tabStyle['titleFontSize']"
-            :act-font-size="tabStyle['titleActFontSize']"
-            :font-weight="tabStyle['titleFontWeight']"
-            :act-font-weight="tabStyle['titleActFontWeight']"
-            :no-border="false"
-            @onTab="handleTab"
-          ></cus-tab>
-        </view>
-      </view>
+      v-if="showParent && isShowCategory"
+      :class="{category_wrap: !isPreview, category_wrap_preview: isPreview}"
+      :style="{top:(layoutInfo.top) + 'rpx'}">
       <view
-        v-if="imageIconList.length"
-        class="sub_category_list-box"
-        :style="[subCategoryStyleComp]"
+        class="tab_wrap"
+        :style="{background: titleBgcColor,borderBottom: boxTitleBorder}"
       >
-        <scroll-view
-          :scroll-into-view="toView"
-          :scroll-with-animation="true"
-          scroll-x="true"
-          :key="sub_category_list"
-          class="sub_category_list"
-        >
-          <view v-for="(sub,i) in imageIconList" :key="sub.category_id" class="sub_cate icon">
-            <view
-              :id="'cate-scroll__index-'+i"
-              @click="handleCateClick(sub, 1)"
-            >
-              <view
-                :style="[sub.category_id === (['child','parentNew'].includes(showType)? uiPid:uiCateId )?subActTitleIcon:subTitleIcon,subTitleInIcon]"
-                class="sub_icon"
-              >
-                <view>
-                  <image :src="sub.category_icon" style="width:100%;height:100%"/>
-                </view>
-              </view>
-              <view
-                class="sub_name"
-                :style="[sub.category_id === (['child','parentNew'].includes(showType)? uiPid:uiCateId )?level2ActNameComp:level2NameComp]"
-              >{{sub.category_name}}</view>
-            </view>
-          </view>
-        </scroll-view>
+        <xd-tab
+          :key="refreshNav"
+          :height="110"
+          :tabIndex="tabIndex"
+          :list="transformNavList"
+          showFooterLine
+          class="tab-box"
+          :color="tabStyle['titleColor']"
+          :act-color="tabStyle['titleActColor']"
+          :font-size="tabStyle['titleFontSize']"
+          :act-font-size="tabStyle['titleActFontSize']"
+          :font-weight="tabStyle['titleFontWeight']"
+          :act-font-weight="tabStyle['titleActFontWeight']"
+          :no-border="false"
+          :bg-color="titleBgcColor"
+          @onTab="(item,index) => handleTab(item,index, 'onTab')"
+        ></xd-tab>
       </view>
-      <!--parentNew-->
-      <view
-        class="cate_child"
-        v-if="showType === 'parentNew' && subCategory.length > 0"
-        :style="{borderBottom: boxTitleBorder,backgroundColor:tabStyle['filterBgcColor'] }"
+    </view>
+    <view
+      class="sub_category_list-box"
+      :style="[subCategoryStyleComp]"
+    >
+      <scroll-view
+        v-if="subCategory.length"
+        :scroll-into-view="toView"
+        :scroll-with-animation="true"
+        scroll-x="true"
+        :key="sub_category_list"
+        class="sub_category_list"
       >
-        <scroll-view
-          scroll-x
-          class="sub_cate_scroll"
-          :scroll-into-view="toView"
-          :scroll-with-animation="true"
-        >
-          <view
-            v-for="item in subCategory"
-            :key="item.category_id"
-            :id="'cate-scroll__index-'+item.category_id"
-            class="sub_cate"
-            @click="handleCateClick(item, 2)"
-          ><view :style="[uiCateId == item.category_id?compActSubStyle: compSubStyle]">{{item.category_name|fCutLen}}</view></view>
-        </scroll-view>
-      </view>
-      <!--parentNew-->
+        <view v-for="(sub,i) in subCategory" :key="sub.category_id" class="sub_cate">
+          <view :id="'cate-scroll__index-'+i" @click="handleCateClick(sub)">
+            <view :style="[subTitleIcon]" class="sub_icon">
+              <image :src="sub.category_icon" style="width:100%;height:100%"/>
+            </view>
+            <view class="sub_name" :style="{color: sub.category_id == uiCateId ?mainColor:level2Color}">
+              {{sub.category_name}}
+            </view>
+          </view>
+        </view>
+      </scroll-view>
     </view>
   </view>
 </template>
 
 <script>
-import CusTab from "@/components/CusTab/CusTab.vue"
+import XdTab from "@/components/XdTab/XdTab.vue"
 import getServiceUrl from "@/common/getServiceUrl";
-import cateMixins from "./cateMixins";
-import Color from "color";
 export default {
   components: {
-    CusTab
+    XdTab
   },
-  mixins:[cateMixins],
   props: {
     layoutInfo: {
       type: Object,
@@ -131,8 +96,8 @@ export default {
       default: '#fff'
     },
     boxTitleBorder: {
-      type: String|Number,
-      default: '2rpx solid #f8f8f8'
+      type: String,
+      default: '1px solid #e5e5e5'
     },
     level2BgcColor: {
       type: String,
@@ -178,20 +143,15 @@ export default {
       orgNavList:[], //元素数据（包含全部分类）
       refreshNav:'refreshNav',
 
+      childHeight: 0,
       uiPid: "",
       uiCateId: "",
       uiIsFixed: false,
-      fixedTop: 0, //固定高度
+      fixedTop: 0,
 
       initPid: "",
     }
   },
-  filters:{
-    fCutLen(str){
-      if(str.length > 5) return str.substring(0,5) + '...'
-      return str
-    }
-  },
   watch: {
     isFixed(value){
       this.uiIsFixed = value;
@@ -227,84 +187,28 @@ export default {
     }
   },
   computed: {
-    categoryWarperMaskComp(){
-      let height = 0;
-      switch(this.showType){
-        case 'all' :
-          height += 88; //一级菜单
-          if(this.imageIconList.length > 0) height = height + 176 //二级菜单
-          //语句
-          break;
-        case 'parent' :
-          height = 88;
-          break;
-        case 'parentNew' :
-          height += 176; //一级菜单
-          if(this.subCategory.length > 0) height = height + 92 //二级菜单
-          break;
-        case 'child' :
-          height = 176
-          break;
-        default:
-          height = 88
-      }
-      this.fixedTop = height;
-      this.$emit('update:fixedTop',height)
-      return {height: height + 'rpx'}
-    },
-    subTitleInIcon(){
-      let {iconWdith, iconBgColor} = this.tabStyle
-      return {
-        width: iconWdith + 'rpx',
-        height: iconWdith + 'rpx',
-        backgroundColor: iconBgColor
-      }
-    },
     //是否展示父级分类
     showParent(){
-      //v1与v5显示父组件
-      return ['parent', 'all'].includes(this.showType);
+      if(this.showType === 'all') return true;
+      else{//只展示子级
+        if(this.isPreview) return false;
+        //有父级，则只展示子级
+        return !this.initPid;
+      }
     },
     subCategoryStyleComp(){
-      let temp = {
+      return {
         backgroundColor: this.level2BgcColor,
         color: this.level2Color,
+        border: this.tabStyle.titleBorder,
       }
-
-      let level2BgcColor = this.level2BgcColor || '#fff';
-      if(Color(level2BgcColor).isDark()) level2BgcColor = Color(level2BgcColor).lighten(0.8).toString();
-      else if(Color(level2BgcColor).isLight()) level2BgcColor = Color(level2BgcColor).darken(0.03).toString();
-
-      if(this.showParent && this.isShowCategory){
-        temp = Object.assign({},temp, {
-          borderTop:`2rpx solid ${level2BgcColor}`,
-          boxSizing: 'border-box'
-        })
-      }
-      return temp
     },
-    imageIconList(){
-      if(['child','parentNew'].includes(this.showType)) return this.transformNavList;
-      else return this.subCategory;
-    },
-    compSubStyle(){
-      if(this.$xdUniHelper.isEmpty(this.tabStyle)) return {}
+    subTitleIcon(){
       return {
-        color: '#666',
+        borderRadius: this.tabStyle.subTitleRadius,
         backgroundColor: '#fff',
-      }
-    },
-    compActSubStyle(){
-      if(this.$xdUniHelper.isEmpty(this.tabStyle)) return {}
-      return {
-        color: this.tabStyle.titleActColor,
-        backgroundColor: this.tabStyle.titleActBgColor,
-      }
-    },
-    categoryWaperComp(){
-      return {
-        position:this.$configProject.isPreview?'absolute':'fixed',
-        top: this.$configProject.isPreview ? 0 : (this.layoutInfo.top + 'rpx')
+        border: this.tabStyle.subTitleIconBorder,
+        boxShadow:this.tabStyle.subTitleIconShadow
       }
     }
   },
@@ -317,7 +221,9 @@ export default {
     this.orgNavList = this.$xdUniHelper.cloneDeep(this.navList);
     this.init(this.$xdUniHelper.cloneDeep(this.orgNavList),this.uiPid);
   },
-
+  mounted(){
+    this.getChildHeight();
+  },
   methods: {
     init(navList, pid){
       if(navList.length === 0) return;
@@ -325,66 +231,49 @@ export default {
       //预览模式生效
       if(this.isPreview) {
         navList = navList.filter(item=>{
-          //显示父级显示全部分类
-          if(['all', 'parent','parentNew'].includes(this.showType)) return true
-          //只显示子级去掉全部分类
-          else return item.category_id !== -1
+          if(this.showType === 'all') return true
+          else {
+            return item.category_id !== -1
+          }
         });
       }
 
       let tabIndex = -1;
       if(pid) tabIndex = navList.findIndex(item => Number(item.category_id) === Number(pid));
       this.tabIndex = tabIndex === -1 ? 0 : tabIndex;
-
-      //需要显示二级菜单操作
-      if(['all', 'child','parentNew'].includes(this.showType)) {
-        this.subCategory = navList[this.tabIndex].children;
-      }
-
+      this.subCategory = navList[this.tabIndex].children;
       this.transformNavList = navList;
       this.refreshNav = Date.now()
 
       //设置选中
       this.$nextTick(() => {
         if(this.uiCateId){
-          if(['all', 'child'].includes(this.showType)) {
-            let cateIndex = this.subCategory.findIndex(item => Number(item.category_id) === Number(this.uiCateId));
-            if(cateIndex !== -1) this.toView = `cate-scroll__index-${cateIndex}`;
-          }
-          else if(this.showType === 'parentNew') {
-            let cateItem = this.subCategory.find(item => Number(item.category_id) === Number(this.uiCateId));
-            if(cateItem) this.toView = `cate-scroll__index-${cateItem.category_id}`;
-          }
+          let cateIndex = this.subCategory.findIndex(item => Number(item.category_id) === Number(this.uiCateId));
+          this.toView = `cate-scroll__index-${cateIndex}`;
         }
       })
+      this.getFixedTop();
     },
 
     async handleTab(item,index, name){
-      //选择当前分类处理
-      if(index === this.tabIndex) return;
       this.tabIndex = index;
-
-      //展示所有功能
       if(index > -1){
         if(Number(this.uiPid) === Number(item.category_id)) {
           return false;
         }
         else{
           this.uiPid = item.category_id;
-
-          //需要显示二级菜单操作
-          if(['all', 'child'].includes(this.showType)) {
-            await this.handleSubNavList(item);
-          }
-
-          this.$emit("onCateChange", {
-            pid: this.uiPid,
-          });
+          await this.handleSubNavList(item);
+          this.getFixedTop();
         }
       }
+      if(name === 'onTab') {
+        this.$emit("onCateChange", {
+          pid: this.uiPid,
+        });
+      }
 
-      this.sub_category_list = Date.now();
-
+      this.sub_category_list = Date.now()
     },
 
     handleSubNavList(parent) {
@@ -410,54 +299,35 @@ export default {
       })
     },
 
-    /**
-     * @description 点击图文与文字模式
-     * @param sub
-     * @param type 1=>图文   2=>文字
-     */
-    handleCateClick(sub , type = 1){
-      debugger
-      //当前布局为v1时候
-      if(this.showType === 'all') this.clickClidItem(sub);
-
-      //当前布局为v3时候
-      if(this.showType === 'child') this.clickParentItem(sub, false);
-
-      //当前布局为v4时候
-      if(this.showType === 'parentNew') {
-        //点击父级分类
-        if(type === 1) this.clickParentItem(sub);
-        //点击子类操作
-        if(type === 2)  this.clickClidItem(sub);
-      }
+    getFixedTop(){
+      this.$nextTick(() => {
+        this.$xdUniHelper.getWindowHeight(['.sub_category_list-box'], this)
+          .then(res => {
+            this.fixedTop = res['.sub_category_list-box'].height;
+          })
+          .catch()
+      })
     },
 
-    //点击一级分类
-    async clickParentItem(sub, isLoadTwo = true){
-      //当用户继续操作当前选中分类
-      if(Number(this.uiPid) === Number(sub.category_id)) {
-        return false
-      }
-      else {
-        this.uiPid = sub.category_id;
-        if(isLoadTwo) await this.handleSubNavList(sub);
+    handleCateClick(sub){
+      if(Number(this.uiCateId) === Number(sub.category_id)){
+        this.uiCateId = "";
+      }else{
+        this.uiCateId = sub.category_id;
       }
-
       this.$emit("onCateChange", {
         pid: this.uiPid,
+        cateId: this.uiCateId
       });
     },
 
-    //点击二级分类
-    clickClidItem(sub){
-      //取消操作
-      if(Number(this.uiCateId) === Number(sub.category_id)) this.uiCateId = "";
-      //选中操作
-      else this.uiCateId = sub.category_id
-      this.$emit("onCateChange", {
-        pid: this.uiPid,
-        cateId: this.uiCateId
-      });
+    getChildHeight(){
+
+      this.$xdUniHelper.getWindowHeight(['.xd-cate_v1'], this)
+        .then(res => {
+          this.childHeight = res['.xd-cate_v1'].height / this.$rpxNum;
+        })
+        .catch()
     }
   }
 }
@@ -465,11 +335,6 @@ export default {
 
 <style lang="less" scoped>
 .xd-cate_v1 {
-  .category_wraper {
-    position: fixed;
-    left:0;
-    right: 0;
-  }
   .tab_wrap{
     height: 100%;
 
@@ -477,63 +342,42 @@ export default {
       height: 100%;
     }
   }
+  .category_wrap{
+    position: fixed;
+    left:0;
+    right: 0;
+    height: 110rpx;
+    z-index: 800;
+  }
+  .category_wrap_preview {
+    height: 110rpx;
+  }
 
   .sub_category_list-box {
     border-left-width: 0!important;
     border-right-width: 0!important;
     border-bottom-width: 0!important;
-    height: 176rpx;
 
     .sub_category_list {
       white-space: nowrap;
-      height: 100%;
 
       .sub_cate {
         display: inline-block;
-        margin: 16rpx 16rpx 16rpx 0;
+        margin: 20rpx;
         text-align: center;
-        width: 128rpx;
-        height: 144rpx;
+        max-width: 130rpx;
         flex-shrink: 0;
-        &:last-child {
-          margin-right: 32rpx;
-        }
-        &:first-child {
-          margin-left: 32rpx;
-        }
-
-        &.icon > view {
-          display: flex;
-          justify-content: center;
-          align-content: space-between;
-          height: 100%;
-          width: 100%;
-          flex-flow: wrap;
-
-        }
 
         .sub_icon {
-          width: 96rpx;
-          height: 96rpx;
-          margin: 0 auto;
+          width: 120rpx;
+          height: 120rpx;
           overflow: hidden;
-          box-sizing: border-box;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          & > view {
-            background-color: #fff;
-            width: calc(100% - var(--sub-icon-border)*2);
-            height: calc(100% - var(--sub-icon-border)*2);
-            border: var(--sub-icon-border) solid #fff;
-            border-radius: var(--sub-icon-w-radius);
-            overflow: hidden;
-          }
         }
 
         .sub_name {
           font-size: 24rpx;
           color: #333333;
+          font-weight: 400;
           margin-top: 8rpx;
           .uni-one-cut(36);
           line-height: 36rpx;
@@ -541,37 +385,5 @@ export default {
       }
     }
   }
-
-  .cate_child{
-    width: 100%;
-    box-sizing: border-box;
-    padding: 24rpx 0 8rpx 0;
-    .sub_cate_scroll{
-      white-space: nowrap;
-      width: 100%;
-
-      .sub_cate{
-        background-color: #fff;
-        height: 60rpx;
-        line-height: 60rpx;
-        display: inline-block;
-        border-radius: 30rpx;
-        margin: 0 0 0 32rpx;
-        &:last-child {
-          margin-right: 32rpx;
-        }
-
-        & > view {
-          padding: 0 24rpx;
-          font-size: 24rpx;
-          font-weight: 400;
-          border-radius: 30rpx;
-          color: #666;
-          min-width: 90rpx;
-          text-align: center;
-        }
-      }
-    }
-  }
 }
 </style>