jufubao-base 1.0.74 → 1.0.75-beta1

package/package.json

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

package/src/components/JfbBaseFastLink/Attr.js

@@ -12,6 +12,24 @@ export default {
         ele: 'slot', //package 名称
         slot: 'is_reference_title',
       },
+      {
+        ele: 'title',
+        label: '基础设置',
+        size: 'small', //default/mini/small
+      },
+      {
+        label: '布局:',
+        ele: 'xd-radio',
+        valueKey: 'is_layout',
+        value: data['is_layout'] || 'noraml',
+        placeholder: '请选择是否有边框',
+        multiple: false,
+        className: 'input80',
+        list: [
+          {label: '平铺', value: 'noraml'},
+          {label: '悬浮', value: 'fixed'},
+        ]
+      },
       {
         label: '快速链接配置:', //label
         ele: 'xd-footer-setting', //package 名称
@@ -63,12 +81,12 @@ export default {
           },
         ],
       },
-      {
+      data['is_layout'] ==='noraml' && {
         ele: 'title',
         label: '样式设置',
         size: 'small', //default/mini/small
       },
-      {
+      data['is_layout'] ==='noraml' && {
         label: '文字大小:',
         ele: 'xd-site-select-list',
         valueKey: 'fontSize',
@@ -88,7 +106,7 @@ export default {
             });
         },
       },
-      {
+      data['is_layout'] ==='noraml' && {
         label: '背景颜色:',
         ele: 'xd-color',
         valueKey: 'backgroundColor',
@@ -96,7 +114,7 @@ export default {
         placeholder: '请选择背景颜色',
         classNmae: 'input80',
       },
-      {
+      data['is_layout'] ==='noraml' && {
         label: '文字颜色:',
         ele: 'xd-color',
         valueKey: 'textColor',
@@ -104,7 +122,7 @@ export default {
         placeholder: '请选择文字颜色',
         classNmae: 'input80',
       },
-      {
+      data['is_layout'] ==='noraml' && {
         label: 'ICON颜色:',
         ele: 'xd-color',
         valueKey: 'iconColor',
@@ -112,7 +130,7 @@ export default {
         placeholder: '请选择ICON颜色',
         classNmae: 'input80',
       },
-      {
+      data['is_layout'] ==='noraml' && {
         label: '间距:',
         ele: 'el-input',
         type: 'number',
@@ -121,7 +139,7 @@ export default {
         placeholder: '请输入间距',
         className: 'input80',
       },
-      {
+      data['is_layout'] ==='noraml' && {
         label: '内容边距设置:',
         ele: 'xd-margin-padding',
         valueKey: 'margin',
@@ -134,12 +152,12 @@ export default {
         inline: false,
         notice: '内容边距设置，<span style="color: red">单位：像素</span>。默认值：0像素',
       },
-      {
+      data['is_layout'] ==='noraml' && {
         ele: 'title',
         label: '边框设置',
         size: 'small', //default/mini/small
       },
-      {
+      data['is_layout'] ==='noraml' && {
         label: '是否有边框:',
         ele: 'xd-radio',
         valueKey: 'is_border',
@@ -152,7 +170,7 @@ export default {
           {label: '否', value: 'N'},
         ]
       },
-      data['is_border'] === 'Y' && {
+      data['is_layout'] ==='noraml' && data['is_border'] === 'Y' && {
         label: '边框颜色:',
         ele: 'xd-color',
         valueKey: 'is_border_c',
@@ -160,7 +178,7 @@ export default {
         placeholder: '请选择边框颜色',
         classNmae: 'input80',
       },
-      data['is_border'] === 'Y' && {
+      data['is_layout'] ==='noraml' && data['is_border'] === 'Y' && {
         label: '边框大小:',
         ele: 'el-input',
         type: 'number',
@@ -169,7 +187,7 @@ export default {
         placeholder: '请输入边框颜色',
         className: 'input80',
       },
-      {
+      data['is_layout'] ==='noraml' && {
         label: '内容圆角设置:',
         ele: 'xd-site-select-list',
         valueKey: 'radius',

package/src/components/JfbBaseFastLink/JfbBaseFastLink.vue

@@ -14,68 +14,85 @@
     </view>
     <!-- #endif -->
     <view class="jfb-base-fast-link__body">
-      <view class="fast-link" :style="{ margin: outMargin}" v-if="list.length > 0">
-        <view
-          class="fast-link__item"
-          v-for="item in list"
-          :key="item.key"
-          :style="{
-            background: backgroundColor,
-            border: borderBox,
-            borderRadius: radius + 'rpx',
-            marginBottom: padding + 'rpx'
-          }"
-          @click="handleClick(item)"
-        >
-          <view class="fast-link__item-icon" v-if="item.icon">
-            <xd-font-icon :color="iconColor" :size="item.size" :icon="item.icon"></xd-font-icon>
-          </view>
-          <view class="fast-link__item-text" :style="{color: color, fontSize: fontSize + 'rpx'}">
-            <view>{{item.name}}</view>
-            <view v-if="item['subName']" :style="subNameSize" @click.stop="toCall(item['subName'])">{{item['subName']}}</view>
-          </view>
-          <view class="fast-link__item-go" v-if="item.path">
-            <xd-font-icon :color="iconColor" size="24" icon="iconxiangyou_xian"></xd-font-icon>
+      <template v-if="is_layout === 'noraml'">
+        <view class="fast-link" :style="{ margin: outMargin}" v-if="list.length > 0">
+          <view
+            class="fast-link__item"
+            v-for="item in list"
+            :key="item.key"
+            :style="{
+              background: backgroundColor,
+              border: borderBox,
+              borderRadius: radius + 'rpx',
+              marginBottom: padding + 'rpx'
+            }"
+            @click="handleClick(item)"
+          >
+            <view class="fast-link__item-icon" v-if="item.icon">
+              <xd-font-icon :color="iconColor" :size="item.size" :icon="item.icon"></xd-font-icon>
+            </view>
+            <view class="fast-link__item-text" :style="{color: color, fontSize: fontSize + 'rpx'}">
+              <view>{{item.name}}</view>
+              <view v-if="item['subName']" :style="subNameSize" @click.stop="toCall(item['subName'])">{{item['subName']}}</view>
+            </view>
+            <view class="fast-link__item-go" v-if="item.path">
+              <xd-font-icon :color="iconColor" size="24" icon="iconxiangyou_xian"></xd-font-icon>
+            </view>
           </view>
         </view>
-      </view>
+      </template>
+      <template v-if="is_layout === 'fixed'">
+        <template v-if="isPreview">
+          <view
+            class="jfb-base-fast-link__body-pop"
+            :style="{backgroundColor:backgroundColor, color:warningColor}"
+          >弹窗模式方便编辑(占位)，在线上此模块不显</view>
+        </template>
+        <xd-fast-nav :list="listNave" :color="mainColor" :is-preview="isPreview"></xd-fast-nav>
+      </template>
     </view>
   </view>
 </template>
 
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
-  import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseFastLinkMixin from "./JfbBaseFastLinkMixin";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins"
   import { getContainerPropsValue } from "@/utils/xd.base";
+  import XdFastNav from "./XdFastNav.vue";
+  import Color from "color";
   const color = require('color');
-  
-  
+
+
   export default {
     name: "JfbBaseFastLink",
     components: {
-      XdFontIcon
+      XdFontIcon,
+      XdFastNav
     },
     mixins: [componentsMixins,extsMixins,JfbBaseFastLinkMixin],
     data() {
       return {
+        listNave:[],
         list: [],
-       
+        backgroundColor: '',
+        isPreview:false,
+
         //基础信息
         background: '#fff',
         color: '#000',
         fontSize: 26,
         radius: 10,
         iconColor: '#999',
-       
-        
+        is_layout: 'noraml',
+
+
         //边框
         is_border: 'Y',
         is_border_w: 0,
         is_border_c: '',
-  
+
         //其他
         margin: {
           top: 0,
@@ -84,7 +101,6 @@
           bottom: 0
         },
         padding: 20, //间距
-        
       }
     },
     watch: {
@@ -92,7 +108,7 @@
         this.init(value)
       }
     },
-    
+
     computed: {
       outMargin(){
         let margin = `${this.margin.top !== null ? this.margin.top : 20}rpx`;
@@ -105,7 +121,7 @@
         if (this.is_border === 'Y') return `${this.is_border_w}rpx solid ${this.is_border_c}`;
         else return '0';
       },
-  
+
       subNameSize(){
         return  {
           fontSize: '32rpx',
@@ -113,13 +129,15 @@
         }
       }
     },
-    
+
     created() {
+      this.isPreview = this.$configProject['isPreview'];
+      this.backgroundColor = Color(this.warningColor).alpha(0.2).toString();
       this.init(this.container);
     },
     methods: {
       toCall(num){
-        reg = /^[0-9\-]{8,20}$/;
+        const reg = /^[0-9\-]{8,20}$/;
         if(reg.test(num)) {
           num = num.replace(/[-]/g,'');
           uni.makePhoneCall(num)
@@ -143,11 +161,12 @@
         this.radius = getContainerPropsValue(container, 'content.radius', 10);
         this.iconColor = getContainerPropsValue(container, 'content.iconColor', '#999');
         this.padding = getContainerPropsValue(container, 'content.padding', 20);
-  
+        this.is_layout = getContainerPropsValue(container, 'content.is_layout', 'fixed');
+
         this.is_border = getContainerPropsValue(container, 'content.is_border', 'N');
         this.is_border_c = getContainerPropsValue(container, 'content.is_border_c', '#fff');
         this.is_border_w = getContainerPropsValue(container, 'content.is_border_w', 2);
-        
+
         this.list = getContainerPropsValue(container, 'content.quick_link_list', []).map(item=>{
           return {
             ...item,
@@ -156,8 +175,26 @@
           }
         });
         this.margin = getContainerPropsValue(container, 'content.margin', {top: 0, left: 0, right: 0, bottom: 0});
+        this.listNave = this.list.map(item=>{
+          const {dir, path,fixed_business_code} = item;
+          let bus = fixed_business_code? Base64.encodeURI(JSON.stringify({business_code: fixed_business_code})):'';
+          let jumpUrl = item.path;
+          //#ifdef H5
+          jumpUrl = `//${window.location.host}/${dir}${path}`;
+          //#endif
+
+          if(item['fixed_business_code'] === '') {
+            item['path'] = `${jumpUrl}?x-common=${bus}}`
+          }
+          else{
+            item['redirect_data']['path'] = `${jumpUrl}?x-common=${bus}}`
+          }
+
+          return { name: '首页', path: '/pages/company/zmyx11/index', icon: 'cakeiconfont cakeshouye', size: 24 }
+        })
+
       },
-      
+
       onJfbUpdate(...data) {
         console.log('event.onJfbUpdate', data)
       },
@@ -175,11 +212,21 @@
   .jfb-base-fast-link {
     display: flex;
     min-height: unit(100, rpx);
+
     &__body{
       flex: 1;
+
+      &-pop {
+        min-height: 58rpx;
+        text-align: center;
+        line-height: 58rpx;
+        color: #666;
+        font-size: unit(24, rpx);
+        padding:unit(20, rpx);
+      }
     }
   }
-  
+
   .fast-link {
     &__item {
       cursor: pointer;
@@ -189,11 +236,11 @@
       align-items: center;
       box-sizing: border-box;
       line-height: unit(50, rpx);
-      
+
       &:last-child {
         margin-bottom: 0!important;
       }
-      
+
       &-icon, &-go {
         width: unit(50, rpx);
         height: unit(50, rpx);
@@ -202,7 +249,7 @@
         align-items: center;
         flex-shrink: 0;
       }
-      
+
       &-text {
         flex: 1;
         padding: 0 unit(20, rpx);
@@ -212,5 +259,5 @@
       }
     }
   }
-  
+
 </style>

package/src/components/JfbBaseFastLink/XdFastNav.vue

@@ -0,0 +1,171 @@
+<template>
+  <view
+    class="xd-fast-nave"
+    v-if="list && list.length > 0"
+    :style="{
+      zIndex: uizIndex,
+      bottom: uiTop + 'rpx'
+    }"
+  >
+    <view class="xd-fast-nave__body">
+      <view class="xd-fast-nave__body-close" v-if="close" @click="close=false">
+        <xd-font-icon icon="iconjiantou_zuo" color="#fff" size="30"></xd-font-icon>
+        <view>快速导航</view>
+      </view>
+      <view class="xd-fast-nave__body-open" v-else @click="close=true">
+        <xd-font-icon icon="iconjiantou_you" color="#fff" size="30"></xd-font-icon>
+        <view>收起</view>
+      </view>
+      <view class="xd-fast-nave__body-list" v-if="!close">
+        <view
+          class="xd-fast-nave__body-list-item"
+          v-for="(item,index) in list"
+          :key="index"
+          @click="handleClick(item)"
+        >
+          <view>
+            <xd-font-icon v-if="item.icon" :icon="item.icon" size="34"  :color="color"></xd-font-icon>
+          </view>
+          <view :style="{color: color}">{{item.name}}</view>
+          <view v-show="index !== 0" :style="{background: lineColor}"></view>
+        </view>
+      </view>
+      <view class="xd-fast-nave__body-mask" v-if="!close" @click="close=true"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import Color from "color";
+
+  export default {
+    name: "XdFastNav",
+    components:{
+      XdFontIcon
+    },
+    props:{
+      top: {
+        type: Number|String,
+        default: 100
+      },
+      zIndex: {
+        type: Number| String,
+        default: 100
+      },
+      list:{
+        type: Array|Object,
+        required: true,
+      },
+      color: {
+        type: String,
+        required: true
+      },
+      isPreview:{
+        type: Boolean,
+        default: false
+      }
+    },
+    data(){
+      return {
+        uiTop: 100,
+        uizIndex: 100,
+        close: true,
+        lineColor: '#fff'
+      }
+    },
+
+    created() {
+      this.lineColor = Color(this.color).alpha(0.2).toString();
+    },
+
+    methods: {
+      handleClick(item){
+        if(this.isPreview) return;
+        this.close = true;
+        this.$xdUniHelper.navigateTo({
+          url: item.path
+        },false);
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-fast-nave {
+    position: fixed;
+    right:0;
+
+    &__body {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      height: unit(100,rpx);
+
+      &-mask{
+        position: fixed;
+        z-index: 48;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+      }
+
+      &-list {
+        position: relative;
+        z-index: 50;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        background: #fff;
+        border-radius: unit(15, rpx) 0 0 unit(15, rpx);
+        box-shadow: 0 0 unit(10,rpx) rgba(0,0,0,.1);
+
+        &-item {
+          text-align: center;
+          padding: 10rpx unit(20,rpx);
+          height: unit(80,rpx);
+          position: relative;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-flow: wrap;
+
+
+          & > view {
+            flex-shrink: 0;
+            width: 100%;
+            font-size: unit(26, rpx);
+          }
+
+          &> view:last-child {
+            width: 1px;
+            left: 0;
+            top: unit(10,rpx);
+            bottom: unit(10, rpx);
+            position: absolute;
+          }
+        }
+      }
+
+      &-close,&-open {
+        background: rgba(0,0,0,.5);
+        border-radius: unit(15,rpx) 0 0 unit(15, rpx);
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        height: unit(90, rpx);
+        padding: 0 unit(15,rpx);
+        box-sizing: border-box;
+        box-shadow: 0 0 unit(20, rpx) rgba(0, 0, 0, .1);
+
+        & > view:last-child {
+          font-size: unit(24,rpx);
+          width: unit(50,rpx);
+          color: #fff;
+          margin-left: unit(10,rpx);
+        }
+      }
+    }
+  }
+</style>