jufubao-mall 2.0.21 → 2.0.23-beta1

package/src/components/JfbMallProductList/XdCateV2.vue

@@ -1,8 +1,8 @@
 <template>
   <view class="xd-cate-v2">
     <!--占位-->
-    <view style="height: 100rpx;"></view>
-    <view class="modal" v-if="showChose" @click="showChose=''"></view>
+    <view style="height: 108rpx;"></view>
+    <view class="modal" v-if="showChose" @click="showChose=''" :style="{top: layoutInfo['top'] + 'rpx'}"></view>
     <!--占位-->
     <!--BAR-->
     <view class="category_wrap" :style="[cateBarStyleComp]">
@@ -12,12 +12,15 @@
         :style="[cateBarStyleRLComp]"
       >
         <view class="parent_name" :style="[cateBarStyleV1Comp]">{{curParent && (curParent.category_name||curParent.name)}}</view>
-        <xd-font-icon
-          :color="cateBarStyleV1Comp.color"
-          class="xd-font-icon"
-          icon="iconxia_down"
-          size="30"
-        ></xd-font-icon>
+        <view class="xd-font-icon">
+          <xd-font-icon
+            width="32"
+            height="32px"
+            :color="cateBarStyleV1Comp.color"
+            icon="iconxia_down"
+            size="24"
+          ></xd-font-icon>
+        </view>
       </view>
       <view class="cate_child">
         <scroll-view scroll-x class="sub_cate_scroll"
@@ -26,11 +29,11 @@
         >
           <view v-for="item in subCategory"
             :key="item.category_id"
-            :class="{active: uiCateId == item.category_id}"
+            :class="{active: uiCateId === item.category_id}"
             :id="'cate-scroll__index-'+item.category_id"
             class="sub_cate"
             @click="handleSubClick(item)"
-          >{{item.category_name}}</view>
+          >{{item.category_name|fCutLen}}</view>
         </scroll-view>
       </view>
       <view
@@ -39,7 +42,11 @@
         v-if="curParent && curParent.children.length > 0"
         :style="[cateBarStyleRLComp]"
       >
-        <xd-font-icon icon="iconxia_down" size="30" :color="cateBarStyleV1Comp.color"></xd-font-icon>
+        <xd-font-icon
+          icon="iconxia_down"
+          size="24"
+          :color="this.uiCateId?cateBarStyleV1Comp.color: '#999'"
+        ></xd-font-icon>
       </view>
     </view>
     <!--BAR-->
@@ -53,12 +60,14 @@
         v-for="item in navList"
         :key="item.category_id"
         class="chose_parent_item"
-        :class="{active: uiPid == item.category_id}"
+        :class="{active: uiPid === item.category_id}"
         @click="handleParentClick(item)"
-        :style="[itemStyleComp,(uiPid == item.category_id?cateBarNameActComp:cateBarNameComp)]"
+        :style="[itemStyleComp]"
       >
-        <image :src="item.category_icon"></image>
-        <view>{{item.category_name||item.name}}</view>
+        <view :style="[subTitleIcon]" class="sub_icon">
+          <image :src="item.category_icon" />
+        </view>
+        <view class="sub_name" :style="[(uiPid === item.category_id?level2ActNameComp:level2NameComp)]">{{item.category_name||item.name}}</view>
       </view>
     </view>
     <!--一级分类-->
@@ -72,8 +81,8 @@
         v-for="item in subCategory"
         :key="item.category_id"
         class="chose_child_item"
-        :style="[itemStyleL2Comp,(uiCateId == item.category_id?cateBarNameActComp:cateBarNameComp)]"
-        :class="{active: uiCateId == item.category_id}"
+        :style="[itemStyleL2Comp,(uiCateId === item.category_id?{}:{})]"
+        :class="{active: uiCateId === item.category_id}"
         @click="handleSubClick(item)"
       >{{item.category_name}}</view>
     </view>
@@ -83,12 +92,20 @@
 
 <script>
 import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import cateMixins from "./cateMixins";
 import Color from "color"
 
 export default {
   components: {
     XdFontIcon
   },
+  mixins:[cateMixins],
+  filters:{
+    fCutLen(str){
+      if(str.length > 5) return str.substring(0,5) + '...'
+      return str
+    }
+  },
   props: {
     layoutInfo: {
       type: Object,
@@ -96,6 +113,10 @@ export default {
         return {}
       }
     },
+    mainColor:{
+      type: String,
+      default: ""
+    },
     pid: {
       type: String | Number,
       default: ""
@@ -116,6 +137,12 @@ export default {
       default(){
         return {}
       }
+    },
+    tabStyle: {
+      type: Object,
+      default(){
+        return {}
+      }
     }
   },
   computed: {
@@ -123,62 +150,58 @@ export default {
       return this.navList[this.tabIndex];
     },
     cateBarStyleV1Comp(){
-      const {titleActFontSize, titleActFontWeight, titleActColor} = this.styleConfig.titleStyleLv1;
+      let {titleActFontSize, titleActFontWeight, titleActColor} = this.tabStyle;
+      if(titleActFontSize.indexOf('rpx') === -1) titleActFontSize = titleActFontSize + 'rpx';
       return {
-        fontSize: titleActFontSize + 'rpx',
+        fontSize: titleActFontSize,
         color: titleActColor,
         fontWeight: titleActFontWeight
       }
     },
-    cateBarNameActComp(){
-      const {titleActFontWeight, titleActColor} = this.styleConfig.titleStyleLv1;
-      return {
-        color: titleActColor,
-        fontWeight: titleActFontWeight
-      }
-    },
-    cateBarNameComp(){
-      const {titleFontWeight, titleColor} = this.styleConfig.titleStyleLv1;
-      return {
-        color: titleColor,
-        fontWeight: titleFontWeight
-      }
-    },
-
     cateBarStyleRLComp(){
       return {
-        backgroundColor: Color( this.styleConfig.backgroundColor).lighten(.2).hex().toString()
+        backgroundColor: Color( this.styleConfig.backgroundColor).lighten(.2).hex().toString(),
       }
     },
     cateBarStyleComp(){
+      let orderColor = '';
+      let {backgroundColor} = this.styleConfig;
+      if(Color(backgroundColor).isDark()) orderColor = Color(backgroundColor).lighten(0.8).toString();
+      else if(Color(backgroundColor).isLight()) orderColor = Color(backgroundColor).darken(0.05).toString();
+
       return {
         top: this.$configProject.isPreview?0:(this.layoutInfo.top) + 'rpx',
         backgroundColor: this.styleConfig.backgroundColor,
-        '--border-color': Color( this.styleConfig.backgroundColor).lighten(.5).hex().toString(),
+        '--border-color': orderColor,
         position: this.$configProject.isPreview?'absolute':'fixed',
       };
     },
     chosePanelFixedTop(){
+      let 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();
+
       return {
-        top: this.$configProject.isPreview?'100rpx':(parseInt(this.cateBarStyleComp.top) + 100) + 'rpx',
+        top: this.$configProject.isPreview?'108rpx':(parseInt(this.cateBarStyleComp.top) + 108) + 'rpx',
         position: this.$configProject.isPreview?'absolute':'fixed',
+        borderTop: `2rpx solid ${level2BgcColor}`
       }
     },
 
     itemStyleL2Comp(){
-      let column = 3;
-      let marginRL = 40;
-      let columnSpacing = 20 * (column-1)
+      let column = 4;
+      let marginRL = 64;
+      let columnSpacing = 24 * (column - 1)
       return {
-        width: this.getWidth(marginRL + columnSpacing ,3) + 'px',
-        margin:'20rpx 20rpx 0 0'
+        width: this.getWidth(marginRL + columnSpacing ,column) + 'px',
+        margin:'24rpx 24rpx 0 0'
       }
     },
-
     itemStyleComp(){
       return {
-        width: this.getWidth(40,5) + 'px',
-        margin:'10rpx 0'
+        width: this.getWidth(64,5) + 'px',
+        margin:'0 0 24rpx',
+        paddingBottom: '40rpx'
       }
     },
   },
@@ -191,8 +214,8 @@ export default {
     return {
       isPreview: false,
       showChose: "",
-      uiPid: "",
-      uiCateId: "",
+      uiPid: -1, //一级分类ID
+      uiCateId: -1, //二级分类ID
       tabIndex: 0,
       subCategory: [],
       toView: "",
@@ -202,8 +225,8 @@ export default {
   },
   created(){
     this.isPreview = this.$configProject.isPreview;
-    this.uiPid = this.pid || -1;
-    this.uiCateId = this.cateId;
+    if(this.pid) this.uiPid = typeof this.pid === 'string'?  Number(this.pid):this.pid;
+    if(this.cateId) this.uiCateId = typeof this.cateId === 'string'?  Number(this.cateId):this.cateId;
     this.init(this.navList, this.uiPid);
   },
   methods: {
@@ -227,7 +250,8 @@ export default {
         this.showChose = "";
         return;
       }
-      this.showChose = type
+      this.showChose = type;
+      this.$emit('on-open', true);
     },
     handleParentClick(item){
       if(Number(item.category_id) === Number(this.uiPid)) return;
@@ -267,50 +291,64 @@ export default {
   .category_wrap{
     display: flex;
     align-items: center;
-    height: 100rpx;
+    justify-content: flex-start;
+    height: 108rpx;
     width: 100%;
     z-index: 102;
 
     .cate_parent{
+      flex-shrink: 0;
       border-right: 1px solid var(--border-color);
       box-sizing: border-box;
-      width: 248rpx;
       height: 100%;
       display: flex;
       align-items: center;
-      padding: 0 20rpx;
-      font-size: 40rpx;
-      font-weight: 500;
+      padding: 0 24rpx;
+      width: 230rpx ;
+
       .parent_name{
+        width: 150rpx;
         flex: 1;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         color: var(--main-color);
+
       }
 
       .xd-font-icon{
-        margin-left: 12rpx;
-        color: var(--main-color);
+        width: 32rpx;
+        height: 32rpx;
+        display:flex;
+        justify-content: center;
+        align-items: center;
       }
     }
     .cate_child{
       flex: 1;
-      width: 100rpx;
+      padding: 0 0 0 24rpx;
+      height: 60rpx;
+      width: calc(100vw - 334rpx);
+      box-sizing: border-box;
+
       .sub_cate_scroll{
         white-space: nowrap;
         width: 100%;
         .sub_cate{
           display: inline-block;
-          padding: 12rpx 16rpx;
           background: #EEEEEE;
           font-size: 24rpx;
           font-weight: 400;
-          color: #999999;
+          color: #666;
           border-radius: 80rpx;
-          margin: 0 6rpx;
           min-width: 128rpx;
           text-align: center;
+          margin-right: 12rpx;
+          height: 60rpx;
+          line-height: 60rpx;
+          padding: 0 16rpx;
+          overflow: hidden;
+          box-sizing: border-box;
 
           &.active{
             background: var(--main-color-alpha);
@@ -318,22 +356,22 @@ export default {
             border-color: var(--main-color);
           }
 
-          &:first-child{
-            margin-left: 20rpx;
+          &:last-child{
+            margin-right: 0;
           }
         }
       }
     }
     .child_more{
-
-      width: 80rpx;
+      width: 84rpx;
       height: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
-      border-left: 1px solid #EEEEEE;
+      border-left: 4rpx solid var(--border-color);
       background: #FFFFFF;
       z-index: 1;
+      flex-shrink: 0;
     }
   }
   .modal{
@@ -351,11 +389,12 @@ export default {
     background: #FFFFFF;
     width: 100%;
     top: 100rpx;
-    padding: 0 20rpx 20rpx;
+    padding: 32rpx;
     display: flex;
     flex-wrap: wrap;
-    border-radius: 0 0 24rpx 24rpx;
+    border-radius:0;
     box-sizing: border-box;
+    border-top: 2rpx solid #f8f8f8;
   }
   .chose_parent{
     .chose_parent_item{
@@ -364,34 +403,63 @@ export default {
       align-items: center;
       font-size: 24rpx;
       color: #333333;
+      position: relative;
+
+      & > .sub_name {
+        left: 0!important;
+        right: 0!important;
+        text-align: center;
+        width: 100%!important;
+        overflow: hidden;
+        word-break: break-all;
+        white-space: wrap;
+        height: 36rpx;
+        line-height: 36rpx;
+      }
       &.active{
         color: var(--main-color);
       }
-      image{
+      .sub_icon {
         width: 96rpx;
         height: 96rpx;
-        margin-bottom: 8rpx;
+        overflow: hidden;
+        margin-bottom: 10rpx;
+
+        image{
+          width: 96rpx;
+          height: 96rpx;
+          margin-bottom: 8rpx;
+        }
       }
+
     }
   }
   .chose_child{
+
     .chose_child_item{
-      height: 65rpx;
-      border-radius: 80rpx;
-      background: #EEEEEE;
-      border: 1px solid #EEEEEE;
+      height: 64rpx;
+      border-radius: 32rpx;
+      background: #f7f7f7;
       box-sizing: border-box;
-      color: #999999;
+      color: #666;
       font-size: 24rpx;
+      padding: 0 16rpx;
       font-weight: 400;
       display: flex;
       align-items: center;
       justify-content: center;
+      line-height: 64rpx;
+      .uni-max-cut(1, 64);
+      text-align: center;
 
-      &:nth-child(3n) {
+      &:nth-child(4n) {
         margin-right: 0!important;
       }
 
+      &:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(4)  {
+        margin-top: 0!important;
+      }
+
       &.active{
         background: var(--main-color-alpha);
         color: var(--main-color);

package/src/components/JfbMallProductList/XdQueryCommon.vue

@@ -0,0 +1,189 @@
+<template>
+  <view class="xd-query-brand" :style="[boxStyleComp]">
+    <view class="query_brand" :style="[contStyleComp]">
+      <view
+        v-for="item in uiDataList" :key="item.value"
+        class="brand_item"
+        :class="{active: !!item.checked}"
+        :style="[itemStyleComp, (item.checked ? labelActColor : labelColor)]"
+        @click="setBrandActive(item)"
+      >{{ item.label }}</view>
+    </view>
+    <view class="bottom_btn">
+      <xd-button class="xd-button" type="info" width="220rpx" size="small" @click="onReset">重置</xd-button>
+      <xd-button class="xd-button" type="primary" width="220rpx" size="small" @click="onConfirm">确定</xd-button>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdButton from "@/components/XdButton/XdButton"
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon"
+  import Color from "color";
+  export default {
+    name:'XdQueryCommon',
+    components: {
+      XdButton,
+      XdFontIcon
+    },
+    props: {
+      dataList: Array,
+      valueIds: {
+        type: String,
+        default: ""
+      },
+      filterStyle:{
+        type: Object,
+        default(){
+          return {}
+        }
+      },
+      multiple:{
+        type: Boolean,
+        default() {
+          return true;
+        }
+      },
+      filterKey:String,
+      maxHeight: {
+        type: Number,
+        default: 500
+      },
+    },
+    data() {
+      return {
+        uiDataList: [],
+      }
+    },
+    computed: {
+      itemStyleComp(){
+        let column = 3;
+        let outWidth = uni.getSystemInfoSync().safeArea.width;
+        let columnSpacing = 24 * this.$rpxNum * (column-1);
+        let marginRL = this.filterStyle['filterPaddingRL'] * this.$rpxNum
+        return {
+          width: (outWidth - (columnSpacing + marginRL))/column + 'px',
+          marginRight: '24rpx',
+          marginTop: '24rpx',
+          borderRadius:(this.filterStyle['filterListRadius']||0) + 'rpx',
+        };
+      },
+      boxStyleComp(){
+        return {
+          backgroundColor: this.filterStyle.filterListColor,
+        }
+      },
+      contStyleComp(){
+
+        let temp = {
+          backgroundColor: '#fff',
+          padding: this.filterStyle['filterPadding'],
+          maxHeight: this.maxHeight + 'px'
+        };
+        if(this.$configProject.isPreview) {
+          temp = {...temp,maxHeight:'650rpx'}
+        }
+        return temp
+      },
+      labelColor(){
+        let font = this.filterStyle.filterFontStyle;
+        return {
+          color: font.color,
+          fontSize: font.fontSize,
+          borderColor: Color(font.color).alpha(0.01).toString(),
+          backgroundColor: Color(font.color).alpha(0.05).toString(),
+        }
+      },
+      labelActColor(){
+        let font = this.filterStyle.filterActFontStyle;
+        return {
+          color: font.color,
+          fontSize: font.fontSize,
+          borderColor: Color(font.color).alpha(0.2).toString(),
+          backgroundColor:  Color(font.color).alpha(0.05).toString(),
+        }
+      }
+    },
+    watch: {
+      dataList(val){
+        this.init(val)
+      },
+      valueIds(){
+        this.init(this.dataList)
+      }
+    },
+    created(){
+      this.init(this.dataList);
+      console.log('this.$root',this.$root)
+    },
+    methods: {
+      init(val){
+        let checkedIds = this.valueIds.split(',');
+        this.uiDataList = val.map(item => {
+          return {
+            ...item,
+            checked: checkedIds.includes(item.value)
+          }
+        })
+      },
+      setBrandActive(brand){
+        if(this.multiple === false) this.onReset();
+        this.$set(brand, 'checked', !brand.checked);
+      },
+      onConfirm(){
+        let checkedList = this.uiDataList.filter(item => item.checked);
+        let valueIds = checkedList.map(item => item.value);
+        this.$emit('onConfirm', {valueIds , filterKey: this.filterKey});
+      },
+      onReset(){
+        this.uiDataList.forEach(item => {
+          this.$set(item, 'checked', false);
+        });
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .xd-query-brand{
+    .query_brand{
+      display: flex;
+      flex-wrap: wrap;
+
+      overflow: auto;
+      .brand_item{
+        text-align: center;
+        line-height: 60rpx;
+        border-radius: 60rpx;
+        font-size: 24rpx;
+        border: 1px solid #fafafa;
+        color: #666666;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        box-sizing: border-box;
+        &:nth-child(3n){
+          margin-right: 0!important;
+        }
+        &:nth-child(1),&:nth-child(2),&:nth-child(3) {
+          margin-top: 0!important;
+        }
+        &.active{
+          border-color: #A5D63F;
+          color: #A5D63F;
+        }
+      }
+    }
+    .bottom_btn{
+      display: flex;
+      justify-content: center;
+      border-top: 1px solid #f8f8f8;
+      padding: 16rpx 0;
+      margin: 0 96rpx;
+      align-items: center;
+      .xd-button{
+        margin: 0 32rpx;
+      }
+    }
+  }
+</style>