jufubao-base 1.0.311-beta101 → 1.0.311-beta3

package/src/components/JfbBaseNotice/JfbBaseNotice.vue

@@ -13,18 +13,25 @@
       <view class="jfb-base-notice__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-notice__body" :style="[noticeComp]">
+    <view class="jfb-base-notice__body">
       <view class="jfb-base-notice__body-line" v-if="contentList.length > 0"></view>
       <view>
         <template v-if="style === '3' && isPreview">
-          <view class="jfb-base-notice__body-pop" :style="[noDataStyleComp]">弹窗模式方便编辑(占位)，在线上此模块不显</view>
+          <view class="jfb-base-notice__body-pop" :style="{backgroundColor:backgroundColor, color:warningColor}">弹窗模式方便编辑(占位)，在线上此模块不显</view>
         </template>
         <template v-if="style === '2'">
           <template v-if="contentList.length === 0 && isPreview">
-            <view class="jfb-base-notice__body-pop" :style="[noDataStyleComp]">接口无数返回，请检查是否配置成功!</view>
+            <view class="jfb-base-notice__body-pop" :style="{backgroundColor:backgroundColor, color:warningColor}">接口无数返回，请检查是否配置成功!</view>
           </template>
           <view v-if="contentList.length > 0" class="jfb-base-notice__body-scroll">
-            <view class="upAndDown" :style="[scrollStyleComp]">
+            <view
+              class="upAndDown"
+              :style="{
+                backgroundColor:backgroundColor,
+                color:warningColor,
+                margin:scrollMarginUi,
+              }"
+            >
               <view>
                 <xd-font-icon icon="icontongzhi" :size="24"></xd-font-icon>
               </view>
@@ -64,35 +71,52 @@
                 <xd-font-icon icon="iconxiangyou_xian" :size="24" @click="handleShow(true)"></xd-font-icon>
               </view>
             </view>
+
           </view>
         </template>
         <template v-if="style === '1'">
           <template v-if="!content && isPreview">
-            <view class="jfb-base-notice__body-pop" :style="[noDataStyleComp]">接口无数返回，请检查是否配置成功!</view>
+            <view
+              class="jfb-base-notice__body-pop"
+              :style="{backgroundColor:backgroundColor, color:warningColor}"
+            >接口无数返回，请检查是否配置成功!</view>
           </template>
           <template v-else>
-            <view :style="[oneBoxStyleComp]">
-              <view class="jfb-base-notice__body-title" :style="[oneTitleStyleComp]" v-if="isTitle" >{{title}}</view>
-              <view class="jfb-base-notice__body-content" :style="[oneContStyleComp]" v-if="content">
-                <image
-                  v-if="show_tip_icon==='Y' && staticTipIcon"
-                  :src="staticTipIcon"
-                  :style="{height: '50rpx'}"
-                  style="width: auto; margin-right: 12rpx;"
-                  mode="heightFix"
+            <view :style="{margin:marginComp}">
+              <view
+                class="jfb-base-notice__body-title"
+                :style="{
+                  fontSize: titleFontSize + 'rpx',
+                  background: bgc,
+                  color:textColor,
+                  borderRadius: titleRadius,
+                  padding: titlePaddingComp,
+                  borderBottomColor: borderTitleColor,
+                  textAlign: textAlign,
+                }"
+                v-if="isTitle"
+              >{{title}}</view>
+              <view
+                class="jfb-base-notice__body-content"
+                :style="{
+                  background: bgc,
+                  color:textColor,
+                  borderRadius: contRadius,
+                  padding: paddingComp,
+                  lineHeight: '50rpx',
+                }"
+                v-if="content"
+              >
+                <image v-if="show_tip_icon==='Y' && staticTipIcon" :src="staticTipIcon"
+                  :style="{height: tipIconHeight+'rpx'}"
+                  style="width: auto;margin-right: 12rpx;" mode="heightFix"
                 ></image>
-                <view
-                  v-if="show_tip_icon==='Y'"
-                  class="jfb-base-notice__body-content_inner"
+                <view class="jfb-base-notice__body-content_inner"
+                  :style="{
+                    fontSize: fontSize + 'rpx',
+                  }"
                   v-html="contentComp"
                   @click="handleShowStatic"
-                  :style="{ fontSize: oneContStyleComp.fontSize}"
-                >
-                </view>
-                <view
-                  v-else
-                  v-html="contentComp"
-                  :style="{ fontSize: oneContStyleComp.fontSize}"
                 >
                 </view>
               </view>
@@ -100,12 +124,7 @@
           </template>
         </template>
       </view>
-      <XdDailog
-        :show.sync="showStaticDialog"
-        :showTitle="false"
-        :cancel="false"
-        :confirm="false"
-      >
+      <XdDailog :show.sync="showStaticDialog" :showTitle="false" :cancel="false" :confirm="false">
         <view style="padding-top: 60rpx;">
           <xd-content-xss
             :key="contentKey"
@@ -159,7 +178,7 @@
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins"
   import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer.vue";
-  import {gCPVal } from "@/utils/xd.base";
+  import { getContainerPropsValue } from "@/utils/xd.base";
   import getServiceUrl from "@/common/getServiceUrl";
   import storage from "@/common/storage";
   import Color from "color";
@@ -176,28 +195,20 @@
     mixins: [componentsMixins,extsMixins,JfbBaseNoticeMixin],
     data() {
       return {
-        closeMask: true,
-        isMp:false, //是否为小程序
-        backgroundColor: '',//提示信息背景
-        isPreview: false,
-
-        //内容变量
-        contentList: [], //滚动列表
-        content : '', //内容
-        contentKey: 'contentKey',
+        selfMask: true,
+        showUp: false,
+        isTitle: '', //是否显示标题
         title: '', //标题
-
-        //基础内容
+        textAlign: 'left', //标题对其方式
+        noData: false,
         style: '1', //显示内容（静态/弹窗/滚动）
-        notice:{},
-        num: 1, //滚动记录数量（滚动时候可以设置多条，其他模式只显示一条）
 
-        //style
-        //静态显示
-        isTitle: '', //是否显示标题
-        textAlign: 'left', //标题对其方式
         bgc: '', //背景颜色
-        borderTitleColor: '#fff',//标题下边线
+        textColor: '', //文字颜色
+        content : '', //内容
+        contentKey: 'contentKey',
+        borderTitleColor: '#fff',
+
         margin: {
           top: 0,
           left: 0,
@@ -217,31 +228,30 @@
           right: 20
         },
         radius: 0, //圆角
-        contStyle:{},
-        titleStyle:{},
-        fontSize: 24,
-
-        //icon
-        show_tip_icon: "N",//是否展示icon
-        staticTipIcon: "", //icon路径
-        tipIconHeight: 50,//icon大小
-
+        fontSize: 20,
+        titleFontSize: 26,
+        time: 3, //小时
+        isPreview: false,
 
         //滚动
         speed: 30, //滚动速度
-        scrollMargin:{},//滚动边距
-        scrollRadius:'0',
-        scrollShadow:'none',
-        scrollShadowWidth:0,
-        scrollBorder:0,
         speedKey: 'speedKey',
-        timer: false, //调整速度重载
-        showStaticDialog: false, //打开确认框
-        showUp: false,//打开抽屉效果
+        num: 1, //滚动记录数量
+        timer: false,
+        contentList: [],
+        scrollMargin:{},
 
-        //弹窗显示
-        time: 3, //小时
-        btnConfirmWidth: "auto",
+        backgroundColor: '',
+        is_hide_dailog:'N',
+        show_tip_icon: "",
+        staticTipIcon: "",
+        tipIconHeight: 50,
+
+        showStaticDialog: false,
+
+        isMp:false,
+
+        btnConfirmWidth: "",
         btnConfirmBgColor: "",
         btnConfirmTextColor: "",
       }
@@ -254,73 +264,62 @@
           this.onJfbLoad()
         }
       },
-    },
-    computed:{
-      noDataStyleComp(){
-        return {
-          backgroundColor:this.backgroundColor,
-          color:this.warningColor
+      num(){
+        if (this.$configProject['isPreview']) this.onJfbLoad()
+      },
+      style() {
+        if(this.$configProject['isPreview']) this.onJfbLoad()
+      },
+      speed(){
+        if(this.timer) {
+          clearTimeout(this.timer);
+          this.timer = null
         }
+        setTimeout(()=>{
+          this.speedKey = Date.now()
+        }, 400)
+
       },
+      is_hide_dailog(value){
+        if(value === 'N') {
+          storage.remove(this.containerId);
+          this.onJfbLoad();
+        }
+      },
+    },
+    computed:{
       contentComp(){
         if(this.show_tip_icon==='Y') return  this.$xdUniHelper.filterHtml(this.content,'')
         return this.content
       },
-      oneBoxStyleComp() {
-        return {
-          margin: this.getMarginAndPadding(this.margin, 0)
-        }
+      marginComp() {
+        return this.getMarginAndPadding(this.margin, 0)
       },
-      oneTitleStyleComp(){
-        return {
-          ...this.titleStyle,
-          backgroundColor: this.bgc,
-          borderRadius: `${this.radius}rpx ${this.radius}rpx 0rpx 0rpx`,
-          padding: this.getMarginAndPadding(this.titlePadding, 0),
-          borderBottomColor: this.borderTitleColor,
-          textAlign: this.textAlign,
-        }
+      paddingComp() {
+        return this.getMarginAndPadding(this.padding, 20)
       },
-      oneContStyleComp(){
-        return {
-          ...this.contStyle,
-          background: this.bgc,
-          borderRadius: this.contRadius,
-          padding: this.getMarginAndPadding(this.padding, 0),
-          lineHeight: '50rpx',
-        }
+
+      scrollMarginUi(){
+        return this.getMarginAndPadding(this.scrollMargin, 0)
+      },
+
+
+      titlePaddingComp() {
+        debugger
+        return this.getMarginAndPadding(this.titlePadding, 20)
       },
       contRadius(){
         if(this.isTitle) return `0rpx 0rpx ${this.radius}rpx ${this.radius}rpx`;
         else return `${this.radius}rpx`;
       },
+      titleRadius() {
+        return `${this.radius}rpx ${this.radius}rpx 0rpx 0rpx `
+      },
+
       getScrollType(){
         return this.num > 1
       },
-      noticeComp(){
-        let height = 100;
-        if(this.style === '2') height = 70;
-        return {
-          minHeight: height + 'rpx',
-          '--jufubao-min-height': height + 'rpx'
-        }
-      },
-      scrollStyleComp(){
-        let margin = {
-          top: Math.max(this.scrollMargin.top,this.scrollShadowWidth),
-          bottom: Math.max(this.scrollMargin.bottom,this.scrollShadowWidth),
-          left: Math.max(this.scrollMargin.left,this.scrollShadowWidth),
-          right: Math.max(this.scrollMargin.right,this.scrollShadowWidth),
-        };
-
-        return {
-          ...this.noDataStyleComp,
-          margin: this.getMarginAndPadding(margin, 0),
-          borderRadius: this.scrollRadius + 'rpx',
-          border: this.scrollBorder,
-          boxShadow:this.scrollShadow
-        }
-      }
+
     },
     created() {
       this.backgroundColor = Color(this.warningColor).alpha(0.2).toString();
@@ -342,68 +341,51 @@
        */
       init(container) {
         let colorBg = Color(this.warningColor).alpha(0.1).array();
+        this.style = getContainerPropsValue(container, 'content.style', '1');
+        this.time = Number(getContainerPropsValue(container, 'content.time', 3));
+        this.textColor = getContainerPropsValue(container, 'content.textColor', this.warningColor);
+        this.textAlign = getContainerPropsValue(container, 'content.textAlign', 'left');
 
-        //基础
-        this.style = gCPVal(container, 'style', '1');
-        this.notice = gCPVal(container, 'notice', {position:{},type:'notice'});
-
-        //style
-        //静态显示
-        let textColor = gCPVal(container, 'textColor', this.warningColor);
-        this.textAlign = gCPVal(container, 'textAlign', 'left');
-        this.isTitle = gCPVal(container, 'isTitle', false);
-        this.margin = gCPVal(container, 'margin', [0],{sKey: 'marginStatus', fields: ['margin'], isPMR: true});
-        this.padding = gCPVal(container, 'padding', [16,20],{sKey: 'paddingStatus', fields: ['padding'], isPMR: true});
-        this.radius = gCPVal(container, 'radius', [this.gStyleValue.radius,0],{sKey: 'radiusStatus', fields: ['radius']})||0;
-
-        //背景与下边线边框
-        this.bgc = gCPVal(container, 'bgc', `rgba(${colorBg.join(',')})`,{sKey:'bgcStatus',fields:['bgc']});
+        this.bgc = getContainerPropsValue(container, 'content.bgc', `rgba(${colorBg.join(',')})`);
         if(Color(this.bgc).isDark()) this.borderTitleColor = Color(this.bgc).lighten(0.9).toString();
         else if(Color(this.bgc).isLight()) this.borderTitleColor = Color(this.bgc).darken(0.05).toString();
-        this.titlePadding = gCPVal(container, 'titlePadding', [16,20],{sKey: 'titlePaddingStatus', fields: ['titlePadding'], isPMR: true});
 
-        //icon
-        this.show_tip_icon = gCPVal(container, 'show_tip_icon', 'N');
-        let staticTipIcon = gCPVal(container, 'staticTipIcon', '');
-        this.staticTipIcon = staticTipIcon ? getServiceUrl(staticTipIcon.url) : '';
 
 
-        //文字样式
-        let fontSize = Number(gCPVal(container, 'fontSize', '20'));
-        let defContStyle = {color:textColor,fontSize:'24rpx',fontWeight:'normal'}, defOldContStyle={color:textColor,fontSize:`${fontSize}rpx`,fontWeight:'normal'};
-        let defTitleStyle = {color:textColor,fontSize:'28rpx',fontWeight:'normal'}, defOldTitleStyle = {color:textColor,fontSize:`${fontSize + 4}rpx`,fontWeight:'normal'};
-        this.contStyle = gCPVal(container, 'contStyle', [defContStyle,defOldContStyle],{sKey: 'contStyleStatus', fields: ['contStyle'],isMerge: true});
-        this.titleStyle = gCPVal(container, 'titleStyle', [defTitleStyle,defOldTitleStyle],{sKey: 'titleStyleStatus', fields: ['titleStyle'],isMerge: true});
+        this.margin = getContainerPropsValue(container, 'content.margin', {top: 0, left: 0, bottom: 0, right: 0});
+        this.padding = getContainerPropsValue(container, 'content.padding', {top: 20, left: 20, bottom: 20, right: 20});
+        this.titlePadding = getContainerPropsValue(container, 'content.titlePadding', {top: 20, left: 20, bottom: 20, right: 20});
+        this.scrollMargin =  getContainerPropsValue(container, 'content.scrollMargin', {top: 0, left: 0, bottom: 0, right: 0});
+        debugger
+        this.radius = getContainerPropsValue(container, 'content.radius', 0);
+        this.fontSize = Number(getContainerPropsValue(container, 'content.fontSize', '20'));
+        this.titleFontSize = this.fontSize * 1.2;
+        this.btnConfirmWidth = getContainerPropsValue(container, 'content.btnConfirmWidth', '');
+        this.btnConfirmBgColor = getContainerPropsValue(container, 'content.btnConfirmBgColor', '');
+        this.btnConfirmTextColor = getContainerPropsValue(container, 'content.btnConfirmTextColor', '');
+        this.show_tip_icon = getContainerPropsValue(container, 'content.show_tip_icon', '');
+        let staticTipIcon = getContainerPropsValue(container, 'content.staticTipIcon', '');
+        this.staticTipIcon = staticTipIcon ? getServiceUrl(staticTipIcon.url) : '';
+        this.tipIconHeight = getContainerPropsValue(container, 'content.tipIconHeight', 50);
 
-        //滚动显示
-        this.scrollMargin = gCPVal(container, 'scrollMargin', 0,{sKey: 'scrollMarginStatus', fields: ['scrollMargin'], isPMR: true});
-        this.scrollRadius = gCPVal(container, 'scrollRadius', [this.gStyleValue.radius,0],{sKey: 'scrollRadiusStatus', fields: ['scrollRadius']})||0;
-        this.scrollShadow = gCPVal(container, 'scrollShadow', [this.gStyleValue.shadow, {color:'',width:'0',}],{isShadow: true});
-        this.scrollShadowWidth = gCPVal(container, 'scrollShadow', [this.gStyleValue.shadow, {color:'',width:'0',}],{isShadow: true,isBsWidth: true});
-        this.scrollBorder = gCPVal(container, 'scrollBorder', [{color: '#fff',width: 0,style: 'solid'}],{isBorder: true});
 
+        if (this.fontSize === 20) this.titleFontSize = 28;
+        if (this.fontSize === 26) this.titleFontSize = 36;
+        if (this.fontSize === 36) this.titleFontSize = 44;
+        this.isTitle = getContainerPropsValue(container, 'content.isTitle', false);
 
         if(this.style === '2') {
-          this.num = gCPVal(container, 'num', 1, {sKey:'numStatus',fields:['num']});
-          const speed = Number(gCPVal(container, 'speed', 30, {sKey: 'speedStatus', fields:['speed']}));
+          this.num = getContainerPropsValue(container, 'content.num', 1);
           //#ifdef H5
-          this.speed = speed;
+          this.speed = Number(getContainerPropsValue(container, 'content.speed', 30));
           //#endif
           //#ifdef MP-WEIXIN
-          this.speed = speed/2.5;
+          this.speed = Number(getContainerPropsValue(container, 'content.speed', 30))/2.5;
           //#endif
         }
         else this.num = 1;
-
-        //弹窗显示
-        const defBtnFields= ['btnConfirmWidth','btnConfirmBgColor','btnConfirmTextColor']
-        this.time = Number(gCPVal(container, 'time', '3',{sKey:'timeStatus',fields:['time']}));
-        this.btnConfirmWidth = gCPVal(container, 'btnConfirmWidth', 'auto',{sKey:'btnStatus',fields:defBtnFields});
-        this.btnConfirmBgColor = gCPVal(container, 'btnConfirmBgColor', '',{sKey:'btnStatus',fields:defBtnFields});
-        this.btnConfirmTextColor = gCPVal(container, 'btnConfirmTextColor', '',{sKey:'btnStatus',fields:defBtnFields});
-
+        this.is_hide_dailog = getContainerPropsValue(container, 'content.is_hide_dailog', 'N');
       },
-
       handleShowStatic(){
         if(this.show_tip_icon === 'Y') {
           this.$xdConfirm({
@@ -422,7 +404,7 @@
         storage.set(this.containerId, 1, this.time);
         this.$xdConfirm({
           styles: this.styles,
-          title: this.title,
+          title: this.title || this.ajaxTitle,
           content: this.content,
           isHtml: true,
           zIndex: 2000,
@@ -434,13 +416,14 @@
       },
 
       getContent(){
-
-        let params = {
-          page_id: this.pageAttr['page_id'], //页面ID
-          container_id: this.containerId, //组件ID
-          page_size:['2'].includes(this.style)? this.num : 1 //可以不传
-        }
-        jfbRootExec('getListNewsContent', { vm: this,data: params})
+        jfbRootExec('getListNewsContent', {
+          vm: this,
+          data: {
+            page_id: this.pageAttr['page_id'], //页面ID
+            container_id: this.containerId, //组件ID
+            page_size: (this.type==='1' &&  this.type==='2') ? 1: this.num //可以不传
+          },
+        })
           .then(res => {
             //弹窗显示
             if (this.style === '3') {
@@ -451,12 +434,12 @@
               }
             }
 
-            //滚动模式
             else if(this.style === '2') {
               if(res.list.length > 0) {
                 this.contentList = res.list;
                 this.speedKey = Date.now()
               }
+
             }
 
             //静态显示
@@ -466,25 +449,37 @@
                 this.contentKey = Date.now();
                 this.title = res.list[0].title;
               }
+              this.noData = res.list.length > 0;
             }
 
           })
           .catch(error => {
-            console.error(error);
-            this.contentList = [];
-            this.title = ''
+            console.error(error)
           })
       },
 
       onJfbLoad() {
-        this.title = '';
-        this.content = '';
-        this.contentList = [];
-        this.showUp = false;
-        this.showStaticDialog = false;
-        storage.remove(this.containerId);
+        if(this.timer){
+          clearTimeout(this.timer);
+          this.timer = null
+        }
+
+        this.timer = setTimeout(()=>{
+          //弹窗模式
+          if(this.style === '3') {
+            if(this.isPreview) {
+              if(this.is_hide_dailog === 'N') this.getContent();
+            }
+            else {
+              if(!storage.get(this.containerId)) this.getContent()
+            }
+          }
 
-        this.getContent();
+          //非弹窗模式
+          else {
+            this.getContent()
+          }
+        }, 500)
       },
 
       onJfbUpdate(data) {
@@ -502,7 +497,7 @@
 
   .jfb-base-notice {
     position: relative;
-    min-height: var(--jufubao-min-height)!important;
+    z-index: 100;
 
     &__body{
       .content-list {
@@ -581,7 +576,6 @@
 
     .upAndDown-swiper-all {
       padding: unit(40, rpx) unit(30, rpx) unit(40, rpx);
-      height: calc(1000rpx - 80rpx);
 
       &-list{
         padding-bottom: unit(40, rpx);
@@ -604,14 +598,13 @@
 
       & > view:first-child {
         padding-bottom: unit(30, rpx);
-        height: calc(100% - 120rpx);
+        max-height: 50vh;
         overflow-y: auto;
         margin: unit(40, rpx) unit(10, rpx) unit(20, rpx);
       }
 
     }
   }
-
   .isMp {
     width: 100%;
   }