jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseFastLink/JfbBaseFastLink.vue

@@ -0,0 +1,292 @@
+<template>
+  <view
+    class="jfb-base-fast-link"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-fast-link__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-fast-link__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-fast-link__body">
+      <template v-if="is_layout === 'noraml'">
+        <view class="x-line"></view>
+        <view
+          class="fast-link"
+          :style="[bodyStyle]"
+          v-if="list.length > 0">
+          <view
+            class="fast-link__item"
+            v-for="item in list"
+            :key="item.key"
+            :style="[contStyle]"
+            @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>
+      </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
+          :is-not-expand="isNotExpand === 'Y'"
+          :list="listNave"
+          :color="mainColor"
+          :is-preview="isPreview"
+          :fast-name="fastName"
+          :layoutInfo="layoutInfo"
+        ></xd-fast-nav>
+      </template>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import JfbBaseFastLinkMixin from "./JfbBaseFastLinkMixin";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins"
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import {parsePath} from '@/utils/linkUrl'
+  import XdFastNav from "./XdFastNav.vue";
+  import Color from "color";
+  const color = require('color');
+
+
+  export default {
+    name: "JfbBaseFastLink",
+    components: {
+      XdFontIcon,
+      XdFastNav
+    },
+    mixins: [componentsMixins,extsMixins,JfbBaseFastLinkMixin],
+    data() {
+      return {
+        listNave:[],
+        list: [],
+        backgroundColor: '',
+        isPreview:false,
+        isNotExpand: 'Y',
+
+        //基础信息
+        background: '#fff',
+        color: '#000',
+        fontSize: 26,
+        radius: 10,
+        iconColor: '#999',
+        is_layout: 'noraml',
+        fastName:'快速导航',
+        subColor:'',
+        fontSubSize:'',
+
+        //边框
+        is_border: 'Y',
+        is_border_w: 0,
+        is_border_c: '',
+
+        //其他
+        margin: {},
+        padding:{},
+        rowSpacing: 20, //间距
+      }
+    },
+    watch: {
+      container(value,oldValue) {
+        if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      }
+    },
+
+    computed: {
+      bodyStyle(){
+        let margin = `${this.checkValue(this.margin.top, 0)}rpx`;
+        margin = `${margin} ${this.checkValue(this.margin.right, 0)}rpx`;
+        margin = `${margin} ${this.checkValue(this.margin.bottom, 0)}rpx`;
+        margin = `${margin} ${this.checkValue(this.margin.left, 0)}rpx`;
+
+        let padding = `${this.checkValue(this.padding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.padding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.padding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.padding.left, 20)}rpx`;
+
+        return {
+          margin,
+          padding
+        }
+      },
+
+      contStyle(){
+        let border = 0;
+        if (this.is_border === 'Y') border = `${this.is_border_w}rpx solid ${this.is_border_c}`;
+        return {
+          background: this.backgroundColor,
+          borderRadius: this.radius + 'rpx',
+          marginBottom: this.rowSpacing + 'rpx',
+          border
+        }
+      },
+
+      subNameSize(){
+        return  this.styleObjectToString({
+          fontSize: this.fontSubSize + 'rpx',
+          color: this.subColor
+        })
+      }
+    },
+
+    created() {
+      this.isPreview = this.$configProject['isPreview'];
+      this.backgroundColor = Color(this.warningColor).alpha(0.2).toString();
+      this.init(this.container);
+    },
+    methods: {
+      toCall(num){
+        const reg = /^[0-9\-]{8,20}$/;
+        if(reg.test(num)) {
+          num = num.replace(/[-]/g,'');
+          uni.makePhoneCall(num)
+        }
+      },
+      handleClick(item){
+        if (this.$configProject['isPreview']) return
+        if(item.path && item.path.value) {
+          this.$xdUniHelper.navigateTo({
+            url : `${item.path.value}`
+          })
+        }
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        this.backgroundColor = getContainerPropsValue(container, 'content.backgroundColor', '#f8f8f8');
+        this.color = getContainerPropsValue(container, 'content.textColor', '#000');
+        this.fontSize = getContainerPropsValue(container, 'content.fontSize', 26);
+        this.radius = getContainerPropsValue(container, 'content.radius', 10);
+        this.iconColor = getContainerPropsValue(container, 'content.iconColor', '#999');
+        this.rowSpacing = getContainerPropsValue(container, 'content.rowSpacing', 20);
+        this.is_layout = getContainerPropsValue(container, 'content.is_layout', 'noraml');
+        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,
+            key: this.$xdUniHelper.randomChar(20),
+            size: item.size * this.$pxNum
+          }
+        });
+        this.margin = getContainerPropsValue(container, 'content.margin', {});
+        this.padding = getContainerPropsValue(container, 'content.padding', {})
+        this.subColor = getContainerPropsValue(container, 'content.textSubColor', '#000');
+        this.fontSubSize = getContainerPropsValue(container, 'content.fontSubSize', 24);
+        this.isNotExpand = getContainerPropsValue(container, 'content.isNotExpand', 'Y');
+        if(this.is_layout === 'fixed') {
+          this.listNave = this.list.map(item=>{
+            let {appValue,path} = item.path
+            if(appValue === '0') {
+              return { name: item.name, path: item.path.value, icon: item.icon, size: item.size}
+            }
+            else{
+              const {dir,fixed_business_code} = item.path;
+              let bus = fixed_business_code? Base64.encodeURI(JSON.stringify({business_code: fixed_business_code})):'';
+              if(bus) bus = `?x-common=${bus}`;
+              let jumpUrl = '';
+              //#ifdef H5
+              if(dir) jumpUrl = `//${window.location.host}/${dir}${path}`;
+              else jumpUrl = path;
+              //#endif
+
+              //#ifdef MP-WEIXIN
+              const pathObj = parsePath(path);
+              if(pathObj.isSameApp) jumpUrl = pathObj.url;
+              else jumpUrl =  `https://${this.projectAttr.host}/${pathObj.dir}${pathObj.url}`;
+              //#endif
+
+              jumpUrl = `${jumpUrl}${bus}`;
+              return { name: item.name, path: jumpUrl, icon: item.icon, size: item.size }
+            }
+          }).filter((item,index)=>{
+            return index < 3
+          });
+
+        }
+      },
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbBaseFastLinkLess.less";
+
+  .jfb-base-fast-link {
+    display: flex;
+
+    &__body{
+      flex: 1;
+
+      &-pop {
+        min-height: 100rpx;
+        text-align: center;
+        line-height: 100rpx;
+        color: #666;
+        font-size: unit(24, rpx);
+      }
+    }
+  }
+
+  .fast-link {
+    &__item {
+      cursor: pointer;
+      padding: unit(16, rpx) unit(20, rpx);
+      display: flex;
+      justify-content: flex-start;
+      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);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+      }
+
+      &-text {
+        flex: 1;
+        padding: 0 unit(20, rpx);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+    }
+  }
+
+</style>

package/src/components/JfbBaseFastLink/JfbBaseFastLinkLess.less

@@ -0,0 +1,79 @@
+/**
+* @desc 获取绝对路径完整地址
+* @param @path
+**/
+//例如：https://image.jufubao.cn/20220501010108/image/bg/default_gonghui_bg.png
+@basePath: 'business/';
+@doMain: '//sandbox-img.jufubao.cn/';
+
+.getBusinessImageUrl(@path, @size: 'size8') {
+  @url: "@{doMain}@{basePath}@{path}?x-oss-process=style/@{size}";
+  background-image: url(@url);
+}
+
+//start
+.jfb-base-fast-link {
+  box-sizing: border-box;
+
+  &__body{
+      position: relative;
+      overflow: hidden;
+      z-index: 2
+  }
+
+  &.editx,&.editx:hover {
+    position: relative;
+    min-height: unit(100, rpx);
+    z-index: 3;
+    &::after {
+      border: 2rpx dashed blue;
+      content: " ";
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      z-index: 4;
+      cursor: pointer;
+    }
+
+  }
+
+
+  &__edit {
+    cursor: pointer;
+    position: absolute;
+    right: unit(0, rpx);
+    top: unit(-52, rpx);
+    height: unit(50, rpx);
+    line-height: unit(50, rpx);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, .6);
+    border-radius: unit(10, rpx);
+    box-shadow: 0 0 10px rbga(0, 0, 0, 0.3);
+    color: #fff;
+    font-size: unit(22, rpx);
+
+    &-icon{
+      padding: 0 unit(20, rpx);
+    }
+
+    &.editx {
+      box-sizing: border-box;
+
+    }
+  }
+}
+//end
+
+
+/**notPreview**/
+.jfb-base-fast-link {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/

package/src/components/JfbBaseFastLink/JfbBaseFastLinkMixin.js

@@ -0,0 +1,30 @@
+'use strict';
+
+
+//@AttrImport
+import Attr from "./Attr";
+//@EndAttrImport
+
+
+export default {
+  data() {
+    return {
+      //#ifdef H5
+      
+      //@AttrData
+      Attr:{}, //对外开发编辑属性
+      //@EndAttrData
+      
+      // #endif
+      cssRoot: 'jfb-base-fast-link'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}

package/src/components/JfbBaseFastLink/Mock.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  aaaa: {}
+}

package/src/components/JfbBaseFastLink/XdFastNav.vue

@@ -0,0 +1,201 @@
+<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 v-if="0">{{fastName}}</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 v-if="item.icon">
+            <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="0&&!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
+      },
+      fastName:{
+        type:String,
+        default: '快速导航'
+      },
+      layoutInfo:{
+        type:Object,
+        default(){
+          return {}
+        }
+      },
+      isNotExpand:{
+        type:Boolean,
+        default: true
+      },
+    },
+
+    data(){
+      return {
+        uizIndex: 100,
+        close: true,
+        lineColor: '#fff'
+      }
+    },
+    watch:{
+      isNotExpand(value){
+        this.close = value;
+      }
+    },
+
+    computed:{
+      uiTop(){
+        return this.top + this.layoutInfo.bottomHeight + this.layoutInfo.footerHeight;
+      }
+    },
+
+    created() {
+      this.lineColor = Color(this.color).alpha(0.2).toString();
+      this.close =  this.isNotExpand;
+
+    },
+
+    methods: {
+      handleClick(item){
+        if(this.isPreview) {
+          console.warn(item.path);
+          return;
+        }
+        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: center;
+        text-align: center;
+        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>