jufubao-base 1.0.289-beta1 → 1.0.289-beta11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-base",
-  "version": "1.0.289-beta1",
+  "version": "1.0.289-beta11",
   "private": false,
   "description": "聚福宝业务组件基础插件包",
   "main": "index.js",

package/src/components/JfbBaseFooter/JfbBaseFooter.vue

@@ -36,7 +36,7 @@
 
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
-  import XdFooterBar from "@/components/XdFooterBar/XdFooterBar";
+  import XdFooterBar from "./XdFooterBar";
   import { jfbRootExec, jfbRootFnExec } from "@/utils/xd.event";
   import JfbBaseFooterMixin from "./JfbBaseFooterMixin";
   import componentsMixins from "@/mixins/componentsMixins";
@@ -112,12 +112,13 @@
       }
       //#endif
 
-      this.height = 96//Number(getComponentAttr(this.componentAttr, 'height'));
+      this.height = Number(getComponentAttr(this.componentAttr, 'height'));
 
       this.init(this.container);
 
       //监听重试消息数量
       this.$xdRoot.$on('restFooterNumber', this.handle)
+
     },
     methods: {
       handle(){

package/src/components/JfbBaseFooter/XdFooterBar.vue

@@ -0,0 +1,324 @@
+<template>
+  <view class="xd-footer-bar" :style="[boxStyleComp]">
+    <view class="xd-footer-bar__border">
+      <view
+        v-for="(item,index) in dataList"
+        :key="item.key"
+        class="xd-footer-bar__item"
+      >
+        <view
+          class="xd-footer-bar__item-badge"
+          v-if="item.num"
+          :style="[numStyleComp,{padding: item.num === '99+' ? '0 8rpx': '0'}]"
+        >{{item.num}}</view>
+        <navigator
+          class="xd-footer-bar__item-link"
+          open-type="redirect"
+          :url="view ? '': (item.path + '?' + params)"
+        >
+          <view class="xd-footer-bar__icon" :class="{noName:!item.name,isCenter:index === isCenterIndex}">
+            <view v-if="item.image" class="image">
+              <image :src="(activeUrl === getPath(item.path))?item['actImage']:item.image" />
+            </view>
+            <xd-font-icon
+              v-else-if="item.icon"
+              :size="(item.size ? item.size * 2 : 36) * nameSizeComp"
+              :icon="item.icon"
+              :style="{color: (activeUrl === getPath(item.path)) ? iconActColor : iconColor}"
+            ></xd-font-icon>
+          </view>
+          <view v-if="index !== isCenterIndex && item.name" class="xd-footer-bar__text" :style="{color: (activeUrl === getPath(item.path))?  nameActColor : nameColor}">{{item.name}}</view>
+        </navigator>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import {
+    getPlatformParamsValue,
+    getPlatformParamsForGroup
+  } from "@/project";
+  import storage from "@/common/storage";
+  import {
+    getParentsStyle,
+  } from '@/utils/xd.base';
+
+  /**
+   * XdFooterBar 全局Ui
+   * @description 底部功能
+   * @tutorial
+   * @property {Number} zIndex          层级数字 （可选）
+   * @property {Number} height          tabBar高度（可选）
+   * @property {Boolean} view           view显示模式（可选）
+   * @property {Object} styles          模版风格（可选）
+   * @property {Object} tabbar
+   *  tabBar.selectedColor  {String} tabBar当前选中文字颜色
+   *  tabBar.bgColor  {String} tabBar背景颜色值
+   *  tabBar.list {Array} tabBar列表
+   *  tabBar.list.name  {String} tabBar文案（4个汉字）
+   *  tabBar.list.path  {String} 链接路径
+   *  tabBar.list.icon  {String} iconfont图标
+   */
+
+  export default {
+    name: "XdFooterBar",
+    components: {
+      XdFontIcon
+    },
+    props: {
+      styles:{
+        type: Object,
+        default(){
+          return {}
+        },
+      },
+      view: {
+        type:Boolean,
+        default: false,
+      },
+      zIndex: {
+        type: Number,
+        default: 1500 //rpx
+      },
+      tabBar: {
+        type: Object,
+        required: true
+      },
+      height: {
+        type: Number,
+        default: 100 //rpx
+      },
+      baseUrl: {
+        type: String,
+        required: true
+      }
+    },
+
+    watch:{
+      tabBar(){
+        this.init();
+      }
+    },
+
+    computed:{
+      boxStyleComp(){
+        return {
+          zIndex: this.zIndex,
+          height: this.height + 'rpx',
+          "--center-border": `${this.centerBorderWidth * this.$rpxNum}px solid ${this.centerBorderColor}`,
+          "--center-background-color": this.centerBorderColor
+        }
+      },
+      numStyleComp(){
+        return {
+          backgroundColor: 'red',
+        }
+      },
+      nameSizeComp(){
+        if(this.hasName === false) return 80/52;
+        return 1
+      },
+    },
+
+    data(){
+      return {
+        dataList: [],
+        activeUrl: null, //当前路径
+        params: null, //系统透传参数
+        hasName:true,//展示文字
+
+        //文字样式
+        nameColor: '#333',
+        nameActColor: 'red',
+
+        //图标样式
+        iconColor: '#333',
+        iconActColor: 'red',
+
+        styleMainColor: null, //插件主题风格样式
+
+        //中间效果
+        isCenterIndex:-1,
+        centerBorderColor:'#333',
+        centerBorderWidth: 12
+
+      }
+    },
+
+    async created() {
+      this.styleMainColor = await getParentsStyle(this.$parent, '$mainColor');
+
+      //设置活动参数
+      let params = [];
+      let xParamsKey = getPlatformParamsForGroup([]);
+      xParamsKey.map(key=>{
+        let {paramKey, storageKey} = getPlatformParamsValue(key);
+        let value = storage.get(storageKey);
+        if(value) params.push(`${paramKey}=${value}`);
+      })
+      this.params = params.join("&");
+
+      this.init();
+    },
+
+    mounted() {
+      this.$nextTick(() => {
+        this.getActive()
+      })
+    },
+
+    methods:{
+
+      getPath(path){
+        if(this.baseUrl) path = require('path').normalize(`/${this.baseUrl}/${path}`);
+        return path;
+      },
+
+      getActive(){
+        let routes = this.$xdUniHelper.getCurrentPages(this.tabBar.home);
+        this.activeUrl = routes['path'];
+      },
+
+
+      /**
+       * @description 初始化数据
+       */
+      init(){
+        this.nameActColor = this.tabBar['selectedColor'] || this.styleMainColor || 'red';
+        this.nameColor = this.tabBar['color'] || '#333';
+        this.iconActColor = this.tabBar['selectedIconColor'] || this.styleMainColor || 'red';
+        this.iconColor = this.tabBar['iconColor'] || '#333';
+        this.hasName = this.tabBar['hasName'];
+        this.dataList = this.tabBar.list.map(item=>{
+          return {
+            key : this.$xdUniHelper.randomChar(20),
+            ...item
+          }
+        });
+        this.centerBorderWidth = this.tabBar['borderWidth'] || 12;
+        this.centerBorderColor = this.tabBar['borderColor'] || this.tabBar['bgColor'] || '#fff';
+
+        if(this.tabBar['tpl'] === 'itemCenterBig') {
+          if( this.dataList .length === 1) this.isCenterIndex = 0;
+          if( this.dataList .length === 3) this.isCenterIndex = 1;
+          if( this.dataList .length === 5) this.isCenterIndex = 2;
+        }
+        else {
+          this.isCenterIndex = -1
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-footer-bar {
+    height: 100%;
+    width: 100%;
+
+    &__icon {
+      width: 52rpx;
+      height: 52rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &.noName {
+        width: 80rpx;
+        height: 80rpx;
+      }
+    }
+
+    &__text {
+      line-height:1.2rem;
+    }
+
+    &__border {
+      border-top: 1px solid #eee;
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      box-sizing: border-box;
+    }
+
+    &__item {
+      height: 100%;
+      flex: 1;
+      font-size: @xd-font-size-sm;
+      text-align: center;
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+
+      &-link {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+
+        & .isCenter {
+          width: 120rpx;
+          height: 120rpx;
+          position: absolute;
+          background-color: var(--center-background-color);
+          border-radius: 50%;
+          box-sizing: border-box;
+          left:50%;
+          margin-left: -60rpx;
+          bottom: 0;
+          border: var(--center-border);
+        }
+      }
+
+      & > view:nth-child(2) {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+      }
+
+      &-badge {
+        position: absolute;
+        top: unit(0, rpx);
+        left: 50%;
+        color: #fff;
+        transform: translateX(unit(10,rpx));
+        min-width: unit(32, rpx);
+        height: unit(32, rpx);
+        line-height: unit(32, rpx);
+        border-radius: unit(16, rpx);
+        font-size: unit(18, rpx);
+        z-index: 20;
+      }
+    }
+
+
+    &__image {
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .image {
+      width: 100%;
+      height: 100%;
+
+      & > image {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+
+  }
+</style>

package/src/components/JfbBaseFooter/cusAttr/content.js

@@ -364,7 +364,21 @@ export default function (data, gValue, gColor, oldData){
             let setTpl = dataVal({data, key:'footerTpl', dValue:'normal', gValue});
             if(setTpl === 'normal') {
               if(value && value.length === 0) callback('请设置菜单');
-              else callback();
+              else {
+                let errorStr = '';
+                if(value && value.length > 0) {
+                  let len = value.length;
+                  for(let i = 0; i < len; i++) {
+                    if(value[i].name.length > 5) {
+                      errorStr = `菜单${i}最大长度不能超过5个汉字`;
+                      break
+                    }
+                  }
+                }
+                if(errorStr) {
+                  callback(errorStr)
+                }else callback();
+              }
             }
             else callback()
           },
@@ -385,6 +399,7 @@ export default function (data, gValue, gColor, oldData){
         icons:ICONS,
         mode: 'new',
         tplMode: footerTpl,
+
         showField: {
           path: true,
           icon: true,
@@ -409,7 +424,21 @@ export default function (data, gValue, gColor, oldData){
             let setTpl = dataVal({data, key:'footerTpl', dValue:'normal', gValue});
             if(setTpl === 'itemCenterBig') {
               if(value && value.length === 0) callback('请设置菜单');
-              else callback();
+              else {
+                let errorStr = '';
+                if(value && value.length > 0) {
+                  let len = value.length;
+                  for(let i = 0; i < len; i++) {
+                    if(value[i].name.length > 5) {
+                      errorStr = `菜单${i}最大长度不能超过5个汉字`;
+                      break
+                    }
+                  }
+                }
+                if(errorStr) {
+                  callback(errorStr)
+                }else callback();
+              }
             }
             else callback()
           },

package/src/components/JfbBaseTfkSearch/JfbBaseTfkSearch.vue

@@ -40,7 +40,7 @@
               <xd-font-icon size="24" icon="iconxia_down" color="#333"></xd-font-icon>
             </view>
             <view @click="handleGetFilterItem({value:'sort'})" v-if="showSort" class="menu_filter_item" >
-              <view>{{sortData.label || '排序'}}</view>
+              <view>{{sortData.label || '综合'}}</view>
               <xd-font-icon size="24" icon="iconxia_down" color="#333"></xd-font-icon>
             </view>
             <view class="menu_filter_item" @click="handleGetFilterItem(item)" v-for="(item,index) in filterTab" :key="index">
@@ -68,6 +68,7 @@
               ></xd-query-sort>
           </view>
         </view>
+        <view v-show="curQueryTab" class="modal"></view>
 
         <view v-if="!isPreview" :style="{height: menuHeight}"></view>
         <view class="tfk-search" :style="{padding: outSpacing + 'rpx'}">
@@ -173,7 +174,7 @@
         filterTabIcon: [
           { value: 'area', label: '区域',icon: 'icondizhitubiao', size: 24 },
           { value: 'brand', label: '品牌',icon: 'iconxia_down', size: 18 },
-          { value: 'shop', label: '门店分类',icon: 'iconxia_down', size: 18 },
+          { value: 'shop_category', label: '门店分类',icon: 'iconxia_down', size: 18 },
           { value: 'filter', label: '筛选', icon: 'iconshaixuanbiaoji_mian', size: 24 },
           { value: 'comprehensive', label: '综合', icon: 'iconxia_down', size: 18 },
           { value: 'sort', label: '排序', icon: 'iconxia_down', size: 18 },
@@ -193,7 +194,7 @@
         showSort:false,
         brands: [],
         namespace: '',
-        sortList: []
+        sortList: [],
       }
     },
     computed: {
@@ -287,6 +288,9 @@
           allModuleItemContRadius: this.allModuleItemContRadius,
           allModuleItemContBgColor: this.allModuleItemContBgColor
         }
+      },
+      showQueryModal() {
+        return this.curQueryTab?true:false
       }
     },
     watch: {
@@ -409,12 +413,13 @@
         this.filterType = item.type
         this.curQueryTab = '';
         this.searchFilterParams = {};
+        this.selectFilterParams = {};
         this.sortData = {};
         this.sort = '';
         if (item.filter_item && item.filter_item.tab_filter) {
           // 综合和排序的显示状态，当选中综合或排序时，下拉菜单取本地数据
-          this.showComprehensive = item.filter_item.tab_filter.find(item => item.value === 'comprehensive')
-          this.showSort = item.filter_item.tab_filter.find(item => item.value === 'sort')
+          this.showComprehensive = item.filter_item.tab_filter.find(item => item.value === 'comprehensive')?true:false;
+          this.showSort = item.filter_item.tab_filter.find(item => item.value === 'sort')?true:false;
           let filter_item = item.filter_item.tab_filter.filter(item => {
             return (item.value !== 'comprehensive'&&item.value !== 'sort')
           })
@@ -454,8 +459,9 @@
           this.curQueryTab = item.value;
         }
         if (this.curQueryTab === 'sort') {
+          this.sort = 'default'
           this.sortList = [{
-            label: "排序",
+            label: "综合",
             key: "default",
             value: "default"
           }]
@@ -491,6 +497,7 @@
         };
 
         if (sortMap[item.value]) {
+          this.curQueryTab = '';
           this.sort = sortMap[item.value];
           this.refresh = new Date().getTime();
           return;
@@ -507,32 +514,24 @@
       },
       handleQueryFilter({ items, ids, labels }) {
         const maps = {
-          'brand': 'brands',
+          'brand': 'brand_ids',
           'area': 'area_codes',
           'delivery_method': 'delivery_methods',
           'shop_category': 'category_ids',
-          'business_line': 'business_lines'
+          'business_line': 'namespaces'
         };
         Object.keys(items).map(key => {
           let keys = Object.keys(maps);
           if (keys.indexOf(key) > -1) {
             this.searchFilterParams[maps[key]] = ids[key]
+            if (this.$xdUniHelper.checkVarType(ids[key]) === 'array') {
+              if (ids[key].length === 0) {
+                this.searchFilterParams[maps[key]] = ''
+              } else {
+                this.searchFilterParams[maps[key]] = ids[key].join(',')
+              }
+            }
           }
-          // if (key === 'brand') {
-          //   this.searchFilterParams.brands = ids[key]
-          // }
-          // if (key === 'area') {
-          //   this.searchFilterParams.area_codes = ids[key]
-          // }
-          // if (key === 'delivery_method') {
-          //   this.searchFilterParams.delivery_methods = ids[key]
-          // }
-          // if (key === 'shop_category') {
-          //   this.searchFilterParams.category_ids = ids[key]
-          // }
-          // if (key === 'business_line') {
-          //   this.searchFilterParams.business_lines = ids[key]
-          // }
           this.selectFilterParams[key] = ids[key] 
         })
         this.curQueryTab = '';
@@ -622,4 +621,13 @@
       }
     }
   }
+  .modal{
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background: rgba(0, 0, 0, .4);
+    z-index: 102;
+  }
 </style>

package/src/components/JfbBaseTfkSearch/XdQueryFilter.vue

@@ -216,16 +216,9 @@ export default {
     setChooseTag(tab, item){
       //单选
       if(!tab.multiple) {
-        //取消
-        if(this.selectedIds[tab.value] && this.selectedIds[tab.value].includes(item.value)) {
-          this.setSelectData(tab.value, '', '', '')
-        }
-        //新增
-        else {
-          this.setSelectData(tab.value, item.value, item, item.label);
-          //单选直接触发返回数据
-          if(this.isShowBtn === false) this.onConfirm();
-        }
+        this.setSelectData(tab.value, item.value, item, item.label);
+        //单选直接触发返回数据
+        if(this.isShowBtn === false) this.onConfirm();
       }
       //多选
       else {
@@ -316,7 +309,7 @@ export default {
       flex-wrap: wrap;
       justify-content: flex-start;
       align-items: center;
-      max-height: 50vh;
+      // max-height: 50vh;
 
       & > ._tag{
         text-align: center;

package/src/components/JfbBaseTfkSearch/listMixins.js

@@ -51,18 +51,20 @@ export default {
         brandColor,imgRradius,contMargin,contRradius,contShadow,contBorder,contBgColor,contObjBorder,contBorderWidth}
     },
 
-    filtersResData(res){
-      let list = res.list.filter(item=>{
+    filtersResData(res) {
+      let list = res.list.filter(item => {
         return item.items.length > 0
       });
-      if(res.list.length  === list.length) return res;
-      let tabs = list.map(item=>{
+      if (res.list.length === list.length) { return res; }
+      let tabs = list.map(item => {
+        let filter_item = res.tabs.find(Titem => Titem.value === item.tab)['filter_item']
         return {
           label: item.name,
-          value: item.tab
+          value: item.tab,
+          filter_item
         }
       });
-      return {...res, list, tabs}
+      return { ...res, list, tabs }
     },