jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseHeaderElephant/JfbBaseHeaderElephant.vue

@@ -0,0 +1,464 @@
+<template>
+  <view
+    class="jfb-base-header-elephant"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-header-elephant__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-header-elephant__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-header-elephant__body">
+      <view class="box_wrap">
+        <view class="box_cont" :style="[boxContStyle]">
+          <view class="box_l">
+            <view class="box_logo">
+              <image v-if="showLogoType==='self' && selfLogo" :src="selfLogo" mode="heightFix" />
+              <image v-if="showLogoType==='default'" :src="site_logo" mode="heightFix" />
+            </view>
+            <view v-if="showSiteName==='Y'"
+              class="box_site_name"
+              :style="[siteNameFont]"
+            >{{ site_name }}</view>
+          </view>
+          <view v-if="showCategory === 'Y'" class="box_r" @click="isExtendCate=!isExtendCate">
+            <xd-font-icon :icon=" categoryIcon || 'iconfenlei1'" :color="siteNameFont.color"></xd-font-icon>
+          </view>
+        </view>
+        <view v-if="isExtendCate && showCategory==='Y'" class="cate_pop" :style="[catePopBoxStyle]">
+          <view class="cate_list" :style="[cateListBoxStyle]">
+            <view class="cate_item"
+              v-for="(item, i) in cateList" :key="i"
+              :style="[cateItemBoxStyle]"
+              @click="handleClick(item)"
+            >
+              <view class="cate_img" :style=[cateIconStyle]>
+                <image :src="item.image_url" mode="aspectFill" />
+              </view>
+              <view class="cate_name">{{item.content_name}}</view>
+            </view>
+          </view>
+        </view>
+
+      </view>
+      <view v-if="isExtendCate && showCategory==='Y'" class="_modal"
+        @click="isExtendCate=false"
+        @touchmove.stop.prevent="moveHandle"
+      ></view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbBaseHeaderElephantMixin from "./JfbBaseHeaderElephantMixin";
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins";
+  import getServiceUrl from '@/common/getServiceUrl'
+  export default {
+    name: "JfbBaseHeaderElephant",
+    components: {
+      XdFontIcon
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbBaseHeaderElephantMixin
+    ],
+    data() {
+      return {
+        useNumber: 24,
+        cateList: [],
+        previewCateList: [],
+        site_logo: "",
+        site_name: "",
+        isPreview: false,
+        isExtendCate: false,
+        //todo
+        
+        showLogoType: "default",
+        selfLogo: "",
+        showSiteName: "",
+        showCategory: "",
+        categoryIcon: "",
+        bgColor: "",
+        siteNameFont: {},
+        navColumn: "",
+        navRow: "",
+        navPadding: "",
+        iconWidth: "",
+        iconHeight: "",
+        navBgColor: "",
+        navFontColor: "",
+        navColumnGap: "",
+        navRowGap: "",
+        navExpand: "",
+        iconMargin: "",
+        navRadius: "",
+        navShadow: "",
+        navCount: "",
+      }
+    },
+    computed: {
+      boxContStyle(){
+        return {
+          backgroundColor: this.bgColor,
+        }
+      },
+      cateListBoxStyle(){
+        let padding = `${this.checkValue(this.navPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.navPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.navPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.navPadding.left, 20)}rpx`;
+        return {
+          gridTemplateColumns: `repeat(${this.navColumn}, 1fr)`,
+          columnGap: `${this.navColumnGap}rpx`,
+          rowGap: `${this.navRowGap}rpx`,
+          padding: padding
+        }
+      },
+      cateItemBoxStyle(){
+        return {
+          backgroundColor: this.navBgColor,
+          color: this.navFontColor
+        }
+      },
+      cateIconStyle(){
+        let margin = `${this.checkValue(this.iconMargin.top, 0)}rpx`;
+        margin = `${margin} ${this.checkValue(this.iconMargin.right, 0)}rpx`;
+        margin = `${margin} ${this.checkValue(this.iconMargin.bottom, 0)}rpx`;
+        margin = `${margin} ${this.checkValue(this.iconMargin.left, 0)}rpx`;
+        return {
+          width: `${this.checkValue(this.iconWidth, 100)}rpx`,
+          height: `${this.checkValue(this.iconHeight, 100)}rpx`,
+          margin: margin,
+          borderRadius: this.navRadius + 'rpx',
+          boxShadow: this.navShadow
+        }
+      },
+      catePopBoxStyle(){
+        let position = 'absolute';
+        if(this.isPreview) position = 'relative';
+        return {
+          position: position,
+        }
+      }
+    },
+    watch: {
+      container(value, oldValue) {
+        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      },
+    },
+    created() {
+      this.init(this.container);
+      this.site_logo = getServiceUrl(this.projectAttr["site_logo"], "size3");
+      this.site_name = this.projectAttr["site_name"];
+      this.isPreview = this.$configProject['isPreview'];
+      //todo
+    },
+    methods: {
+      onJfbLoad(options) {
+
+        jfbRootExec('getListPosterContent', {
+          vm: this,
+          data: {
+            page_id: this.pageAttr['page_id'], //页面ID
+            container_id: this.containerId, //组件ID
+            page_size: this.useNumber //可以不传
+          },
+        }).then(res => {
+          this.previewCateList = res.list;
+          if(res.list.length === 0 && this.isPreview) {
+            res.list = this.getTestData();
+          }
+          this.handleOne(res.list);
+        })
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        this.showLogoType = getContainerPropsValue(container, 'content.showLogoType', 'default');
+        this.selfLogo = getServiceUrl(getContainerPropsValue(container, 'content.selfLogo', {url: ""}).url);
+        this.showSiteName = getContainerPropsValue(container, 'content.showSiteName', 'Y');
+        this.showCategory = getContainerPropsValue(container, 'content.showCategory', 'Y');
+        this.categoryIcon = getContainerPropsValue(container, 'content.categoryIcon', '');
+        this.bgColor = getContainerPropsValue(container, 'content.bgColor', '');
+        this.siteNameFont = getContainerPropsValue(container, 'content.siteNameFont', {});
+        this.navColumn = getContainerPropsValue(container, 'content.navColumn', 4);
+        this.navPadding = getContainerPropsValue(container, 'content.navPadding', {});
+        this.navRow = getContainerPropsValue(container, 'content.navRow', 2);
+        this.iconWidth = getContainerPropsValue(container, 'content.iconWidth', 100);
+        this.iconHeight = getContainerPropsValue(container, 'content.iconHeight', 100);
+        this.navBgColor = getContainerPropsValue(container, 'content.navBgColor', '');
+        this.navFontColor = getContainerPropsValue(container, 'content.navFontColor', '');
+        this.navColumnGap = getContainerPropsValue(container, 'content.navColumnGap', 10);
+        this.navRowGap = getContainerPropsValue(container, 'content.navRowGap', 10);
+        this.navExpand = getContainerPropsValue(container, 'content.navExpand', '');
+        this.iconMargin = getContainerPropsValue(container, 'content.iconMargin', {});
+        this.navRadius = getContainerPropsValue(container, 'content.navRadius', 0);
+        this.navCount = getContainerPropsValue(container, 'content.navCount', 0);
+        let navShadow = getContainerPropsValue(container, 'content.navShadow', '');
+        if(navShadow.type === "Y" && navShadow.value){
+          this.navShadow = `0 0 ${navShadow.value.width}rpx ${navShadow.value.color}`;
+        }else{
+          this.navShadow = 'none';
+        }
+        console.log("navShadow", this.navShadow);
+
+        this.useNumber = this.navCount || this.navRow * this.navColumn;
+        if(this.isPreview){
+          let testData = this.getTestData();
+          testData.unshift(...this.previewCateList);
+          //从数组testData中取useNumber个数据
+          this.handleOne(testData.slice(0, this.useNumber));
+          this.isExtendCate = this.navExpand === 'Y' ? true : false;
+          if(this.isExtendCate){
+            document.querySelector('.xd-Layout__top').style.zIndex = 149099;
+          }else{
+            document.querySelector('.xd-Layout__top').style.zIndex = 1490;
+          }
+        }
+      },
+      moveHandle(){},
+      handleClick(item) {
+        if(!item.redirect_data) {
+          console.warn(`未配置链接地址: ${item.redirect_data}`);
+          console.error(`未配置链接地址: ${item.redirect_data}`);
+          return
+        }
+
+        //内部链接跳转地址
+        if (item.redirect_type === 'INN') {
+          try {
+            let url = JSON.parse(item.redirect_data);
+            let params = '';
+            if(url.page) {
+              if (item['redirect_params']) params = `?${item['redirect_params']}`;
+              this.$xdUniHelper.navigateTo({url: url.page + params})
+            }
+            else {
+              console.error(`应用链接配置错误: ${url.page}`)
+            }
+          } catch (e) {
+            console.error(`应用链接配置错误: ${item.redirect_data}`)
+          }
+        }
+
+        //外部链接
+        if (item.redirect_type === 'URL') {
+          let reg = /^(http:\/\/|https:\/\/|\/\/)+.+$/;
+          let spReg = /(-apiuri\/v)/;
+          //#ifdef MP-WEIXIN
+          try {
+            let url = JSON.parse(item.redirect_data);
+            if (reg.test(url.url) || spReg.test(url.url)) {
+              console.warn(`广告跳转外站: ${url.url}`)
+              this.$xdUniHelper.navigateTo(url);
+            } else {
+              console.error(`广告跳转外站配置错误: ${url.url}`)
+            }
+          } catch (e) {
+            console.error(`广告跳转外站配置错误: ${item.redirect_data}`)
+          }
+          //#endif
+          //#ifdef H5
+          try {
+            let url = JSON.parse(item.redirect_data);
+            console.warn(`广告跳转外站: ${url.url}`);
+            this.$xdUniHelper.redirectTo(url, false)
+          } catch (e) {
+            console.error(`广告跳转外站配置错误: ${item.redirect_data}`)
+          }
+          //#endif
+
+        }
+
+        //无跳转地址
+        if(item.redirect_type === 'EMP') {
+          console.warn(`无跳转地址`);
+        }
+      },
+      handleImage(list){
+        list = this.filterItem(list);
+
+      	return list.map((item,index) => {
+          return {
+            ...item,
+            image_background_url: item.image_background_url?getServiceUrl(item.image_background_url):'',
+            image_url: item.image_url?getServiceUrl(item.image_url):''
+          }
+        })
+			},
+      handleOne(list){
+        this.cateList = this.handleImage(list);
+
+        //轮播图记录为0条处理
+        if( this.cateList.length === 0)  return
+        let current = this.current || 0;
+        this.currentImage = this.cateList[current]['image_background_url']
+			},
+      getTestData(){
+        let temp = [];
+        for (let i = 0; i< this.useNumber; i++) {
+          let item = this.$xdUniHelper.cloneDeep(this['posterTest']);
+          item.content_id = i;
+          item.content_name = item.content_name + i;
+          item.image_url = `//dummyimage.com/${this.iconWidth}x${this.iconHeight}`;
+          temp.push(item)
+				}
+        return temp
+			},
+      /**
+       * @description 过滤不可以用
+       * 当前项目未H5时,过滤所有小程序应用
+       * 当前项目未小程序时,过滤所有非当前小程序应用
+       * 站外地址直接返回
+       * 站内地址未选值直接返回
+       * 预览模式全过
+       */
+       filterItem(list){
+        let content = list.filter(item=>{
+          //预览模式
+          if( this.$configProject.isPreview) return true;
+
+          //非内部应用
+          if(item.redirect_type !== 'INN') return true
+
+          //没有配置链接
+          if(!item.redirect_data) return true;
+
+          //内部应用
+          else {
+            let redirect_data;
+            try {
+              redirect_data = JSON.parse(item.redirect_data);
+              if(!item['app_type']) item['app_type']= 'h5';
+
+              //#ifdef H5
+              return item['app_type'] !== 'wxmp';
+              //#endif
+
+              //#ifdef MP-WEIXIN
+              let actDir = this.$parent.projectAttr.deploy_dir;
+              let dir = this.getPathDir(redirect_data.page);
+              if(item['app_type'] === 'wxmp'){
+                return actDir === dir;
+              }
+              else if(item['app_type'] === 'h5') return true;
+              else return true
+              //#endif
+            }
+            catch (e) {
+              return true
+            }
+          }
+        });
+        console.warn(`PostersList:${JSON.stringify(content.map(item=>`${item.app_type}:${item.content_name}:${item.redirect_data}`), null,2)}`)
+        return content;
+
+      },
+      onJfbScroll(options) {
+        // console.log('event.onJfbScroll', options)
+      },
+      onJfbReachBottom(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+      onJfbShow(options) {
+        console.log('event.onJfbShow', options)
+        this.onJfbLoad(options);
+      },
+      onJfbHide(options) {
+        console.log('event.onJfbHide', options)
+      },
+      onJfbBack(options) {
+        console.log('event.onJfbBack', options)
+      },
+      onJfbUpdate(...data) {
+        console.log('event.onJfbUpdate', data)
+      },
+      onJfbCustomEvent(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbBaseHeaderElephantLess.less";
+
+  .jfb-base-header-elephant {
+    &__body{
+      overflow: initial !important;
+      ._modal{
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vh;
+        height: 100vh;
+        background: rgba(0, 0, 0, .5);
+        z-index: 999;
+      }
+      .box_wrap{
+        position: relative;
+        z-index: 1000;
+        .cate_pop{
+          top: 100%;
+          left: 0;
+          width: 100%;
+          z-index: 11;
+          background: #FFFFFF;
+        }
+      }
+      .box_cont{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 20rpx;
+        .box_l{
+          display: flex;
+          align-items: center;
+        }
+        .box_logo{
+          //width: 72rpx;
+          height: 72rpx;
+          image{
+            // width: 100%;
+            height: 100%;
+          }
+        }
+        .box_site_name{
+          margin-left: 20rpx;
+        }
+      }
+      .cate_list{
+        display: grid;
+        justify-items: center;
+        .cate_item{
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          .cate_img{
+            width: 100rpx;
+            height: 100rpx;
+            overflow: hidden;
+            image{
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

package/src/components/JfbBaseHeaderElephant/JfbBaseHeaderElephantLess.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-header-elephant {
+  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-header-elephant {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/

package/src/components/JfbBaseHeaderElephant/JfbBaseHeaderElephantMixin.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-header-elephant'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}

package/src/components/JfbBaseHeaderElephant/Mock.js

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

package/src/components/JfbBaseImageBlock/Attr.js

@@ -0,0 +1,85 @@
+'use strict';
+
+/**
+ * @description 当表单组件中有联动操作时候，使用方法进行返回
+ */
+export default {
+  style: [],
+  content: (data) => {
+    let width = 750,height = 562.5;
+    if(data.height) height = Number(data.height);
+    if(data.width) width = Number(data.width);
+
+    return [
+      {
+        label: '',
+        ele: 'slot',
+        slot: 'is_reference_title',
+        groupKey:'advanced',
+      },
+      {
+        label: '边距设置:',
+        ele: 'xd-margin-padding',
+        valueKey: 'margin',
+        groupKey:'content',
+        value: data.margin || null,
+        setting: {
+          type: 'margin',
+        },
+        placeholder: '请设置边距设置',
+        inline: false,
+        notice: '设置边距充，<span style="color: red">单位：像素（px）</span>。默认值：<span style="color: red">0</span>像素',
+
+      },
+      {
+        label: '图片真实宽度:',
+        groupKey:'content',
+        ele: 'el-input',
+        type: 'number',
+        valueKey: 'width',
+        value: data.width || '',
+        className: 'input60',
+        inline:false,
+        notice:'图片真实宽度设置，单位像素，默认：<span style="color:red">750</span>px',
+      },
+      {
+        label: '图片真实高度:',
+        groupKey:'content',
+        ele: 'el-input',
+        type: 'number',
+        valueKey: 'height',
+        value: data.height||'',
+        className: 'input60',
+        inline:false,
+        notice:'图片真实高度设置，单位像素，默认：<span style="color:red">562.5</span>px',
+      },
+      {
+        label: '占位背景图片:',
+        ele: 'xd-upload',
+        valueKey: 'backgroundImage',
+        groupKey:'content',
+        value: data.backgroundImage || {},
+        defaultValue: data.backgroundImage || null,
+        slot: true,
+        oneWidth: 300,
+        oneHeight: 300 * height / width,
+        elinputClassName: 'input40',
+        tipsformet: `上传文件格式：@imageType@，不超过@size@MB，图片尺寸:<span style="color:red"> ${width}*${height}</span>像素`,
+        type: ['jpg', 'png', 'jpeg'],
+        styleType: 'one',
+        uploadType: 'aliyun',
+        size: 1,
+        action: 'action',
+        sort: true,
+        maxlen: 1,
+      },
+      {
+        label: '',
+        ele: 'slot',
+        slot: 'is_reference',
+        groupKey:'advanced',
+      },
+    ].filter(i=>i)
+  },
+  advanced: [],
+};