jufubao-base 1.0.195 → 1.0.197-beta1

package/package.json

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

package/src/components/JfbBaseHeaderElephant/Api.js

@@ -0,0 +1,22 @@
+'use strict';
+/**
+ * @description  接口配置，
+ * 在设置方法名字当时候，别忘记加上【模块名字】：Header
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    mapFnName: 'getListPosterContent', //自定义方法名字（必选）
+    title: '获取内容',
+    path: '/cms/v1/ad-content',
+    isRule: false,
+    params: {
+      scene: ['使用场景', 'String', '选填'],
+      container_id: ['插件ID', 'String', '必填'],
+      page_id: ['页面ID', 'String', '必填'],
+      page_size: ['记录条数', 'Number', '必填'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+];

package/src/components/JfbBaseHeaderElephant/Attr.js

@@ -0,0 +1,14 @@
+'use strict';
+
+/**
+ * @description 当表单组件中有联动操作时候，使用方法进行返回
+ */
+export default {
+  style: [],
+  content: (data) => {
+    return [
+      
+    ].filter(i=>i)
+  },
+  advanced: [],
+};

package/src/components/JfbBaseHeaderElephant/JfbBaseHeaderElephant.vue

@@ -0,0 +1,207 @@
+<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">
+          <view class="box_l">
+            <view class="box_logo"></view>
+            <view class="box_site_name"></view>
+          </view>
+          <view class="box_r">
+            <xd-font-icon icon="iconfenlei1"></xd-font-icon>
+          </view>
+        </view>
+        <view class="cate_pop">
+          <view></view>
+        </view>
+
+      </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: 4,
+        info: [],
+        //todo
+      }
+    },
+    watch: {
+      container(value, oldValue) {
+        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      },
+    },
+    created() {
+      this.init(this.container);
+
+      //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 => {
+          if(res.list.length === 0 && this.isPreview) {
+            res.list = this.getTestData();
+          }
+          this.handleOne(res.list);
+        })
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+
+      },
+      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.info = this.handleImage(list);
+
+        //轮播图记录为0条处理
+        if( this.info.length === 0)  return
+        let current = this.current || 0;
+        this.currentImage = this.info[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.width}x${this.height}`;
+          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)
+      },
+      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{
+
+    }
+  }
+</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/JfbBasePoster/Attr.js

@@ -295,6 +295,14 @@ export default {
         sort: true,
         maxlen: 100,
       },
+      {
+        label: '背景颜色:',
+        ele: 'xd-color',
+        valueKey: 'bgColor',
+        value: params.bgColor || '',
+        groupKey:'content',
+        classNmae: 'input80',
+      },
       {
         label: '广告位置使用张数:',
         ele: 'el-input',

package/src/components/JfbBasePoster/JfbBasePoster.vue

@@ -168,6 +168,7 @@
 				isPreview: false,
 				noData:false,
         background: '',
+        bgColor:'rgba(0,0,0,0)'
       }
     },
 		computed: {
@@ -181,6 +182,7 @@
         image = Object.assign({},image,{
           margin: this.margin,
           padding: this.outPadding,
+          backgroundColor: this.bgColor,
         })
         return image
       },
@@ -585,6 +587,7 @@
 
         this.carouselTime = Number(getContainerPropsValue(container, 'content.carouselTime', 5)) * 1000;
         this.useNumber = getContainerPropsValue(container, 'content.number', 1);
+        this.bgColor = getContainerPropsValue(container, 'content.bgColor', 'rgba(0,0,0,0)')
 
         if(this.poster.size) {
           this.width = this.poster.size.width;