jufubao-base 1.0.311-beta1 → 1.0.311-beta101

package/src/components/JfbBaseNotice/JfbBaseNotice.vue

@@ -13,25 +13,18 @@
       <view class="jfb-base-notice__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-notice__body">
+    <view class="jfb-base-notice__body" :style="[noticeComp]">
       <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="{backgroundColor:backgroundColor, color:warningColor}">弹窗模式方便编辑(占位)，在线上此模块不显</view>
+          <view class="jfb-base-notice__body-pop" :style="[noDataStyleComp]">弹窗模式方便编辑(占位)，在线上此模块不显</view>
         </template>
         <template v-if="style === '2'">
           <template v-if="contentList.length === 0 && isPreview">
-            <view class="jfb-base-notice__body-pop" :style="{backgroundColor:backgroundColor, color:warningColor}">接口无数返回，请检查是否配置成功!</view>
+            <view class="jfb-base-notice__body-pop" :style="[noDataStyleComp]">接口无数返回，请检查是否配置成功!</view>
           </template>
           <view v-if="contentList.length > 0" class="jfb-base-notice__body-scroll">
-            <view
-              class="upAndDown"
-              :style="{
-                backgroundColor:backgroundColor,
-                color:warningColor,
-                margin:scrollMarginUi,
-              }"
-            >
+            <view class="upAndDown" :style="[scrollStyleComp]">
               <view>
                 <xd-font-icon icon="icontongzhi" :size="24"></xd-font-icon>
               </view>
@@ -71,52 +64,35 @@
                 <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="{backgroundColor:backgroundColor, color:warningColor}"
-            >接口无数返回，请检查是否配置成功!</view>
+            <view class="jfb-base-notice__body-pop" :style="[noDataStyleComp]">接口无数返回，请检查是否配置成功!</view>
           </template>
           <template v-else>
-            <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"
+            <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"
                 ></image>
-                <view class="jfb-base-notice__body-content_inner"
-                  :style="{
-                    fontSize: fontSize + 'rpx',
-                  }"
+                <view
+                  v-if="show_tip_icon==='Y'"
+                  class="jfb-base-notice__body-content_inner"
                   v-html="contentComp"
                   @click="handleShowStatic"
+                  :style="{ fontSize: oneContStyleComp.fontSize}"
+                >
+                </view>
+                <view
+                  v-else
+                  v-html="contentComp"
+                  :style="{ fontSize: oneContStyleComp.fontSize}"
                 >
                 </view>
               </view>
@@ -124,7 +100,12 @@
           </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"
@@ -178,7 +159,7 @@
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins"
   import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer.vue";
-  import { getContainerPropsValue } from "@/utils/xd.base";
+  import {gCPVal } from "@/utils/xd.base";
   import getServiceUrl from "@/common/getServiceUrl";
   import storage from "@/common/storage";
   import Color from "color";
@@ -195,20 +176,28 @@
     mixins: [componentsMixins,extsMixins,JfbBaseNoticeMixin],
     data() {
       return {
-        selfMask: true,
-        showUp: false,
-        isTitle: '', //是否显示标题
-        title: '', //标题
-        textAlign: 'left', //标题对其方式
-        noData: false,
-        style: '1', //显示内容（静态/弹窗/滚动）
+        closeMask: true,
+        isMp:false, //是否为小程序
+        backgroundColor: '',//提示信息背景
+        isPreview: false,
 
-        bgc: '', //背景颜色
-        textColor: '', //文字颜色
+        //内容变量
+        contentList: [], //滚动列表
         content : '', //内容
         contentKey: 'contentKey',
-        borderTitleColor: '#fff',
+        title: '', //标题
+
+        //基础内容
+        style: '1', //显示内容（静态/弹窗/滚动）
+        notice:{},
+        num: 1, //滚动记录数量（滚动时候可以设置多条，其他模式只显示一条）
 
+        //style
+        //静态显示
+        isTitle: '', //是否显示标题
+        textAlign: 'left', //标题对其方式
+        bgc: '', //背景颜色
+        borderTitleColor: '#fff',//标题下边线
         margin: {
           top: 0,
           left: 0,
@@ -228,30 +217,31 @@
           right: 20
         },
         radius: 0, //圆角
-        fontSize: 20,
-        titleFontSize: 26,
-        time: 3, //小时
-        isPreview: false,
+        contStyle:{},
+        titleStyle:{},
+        fontSize: 24,
+
+        //icon
+        show_tip_icon: "N",//是否展示icon
+        staticTipIcon: "", //icon路径
+        tipIconHeight: 50,//icon大小
+
 
         //滚动
         speed: 30, //滚动速度
+        scrollMargin:{},//滚动边距
+        scrollRadius:'0',
+        scrollShadow:'none',
+        scrollShadowWidth:0,
+        scrollBorder:0,
         speedKey: 'speedKey',
-        num: 1, //滚动记录数量
-        timer: false,
-        contentList: [],
-        scrollMargin:{},
-
-        backgroundColor: '',
-        is_hide_dailog:'N',
-        show_tip_icon: "",
-        staticTipIcon: "",
-        tipIconHeight: 50,
-
-        showStaticDialog: false,
+        timer: false, //调整速度重载
+        showStaticDialog: false, //打开确认框
+        showUp: false,//打开抽屉效果
 
-        isMp:false,
-
-        btnConfirmWidth: "",
+        //弹窗显示
+        time: 3, //小时
+        btnConfirmWidth: "auto",
         btnConfirmBgColor: "",
         btnConfirmTextColor: "",
       }
@@ -264,62 +254,73 @@
           this.onJfbLoad()
         }
       },
-      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:{
+      noDataStyleComp(){
+        return {
+          backgroundColor:this.backgroundColor,
+          color:this.warningColor
+        }
+      },
       contentComp(){
         if(this.show_tip_icon==='Y') return  this.$xdUniHelper.filterHtml(this.content,'')
         return this.content
       },
-      marginComp() {
-        return this.getMarginAndPadding(this.margin, 0)
-      },
-      paddingComp() {
-        return this.getMarginAndPadding(this.padding, 20)
+      oneBoxStyleComp() {
+        return {
+          margin: this.getMarginAndPadding(this.margin, 0)
+        }
       },
-
-      scrollMarginUi(){
-        return this.getMarginAndPadding(this.scrollMargin, 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,
+        }
       },
-
-
-      titlePaddingComp() {
-        debugger
-        return this.getMarginAndPadding(this.titlePadding, 20)
+      oneContStyleComp(){
+        return {
+          ...this.contStyle,
+          background: this.bgc,
+          borderRadius: this.contRadius,
+          padding: this.getMarginAndPadding(this.padding, 0),
+          lineHeight: '50rpx',
+        }
       },
       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();
@@ -341,51 +342,68 @@
        */
       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.bgc = getContainerPropsValue(container, 'content.bgc', `rgba(${colorBg.join(',')})`);
+        //基础
+        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']});
         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) : '';
 
 
-        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);
+        //文字样式
+        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.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 = getContainerPropsValue(container, 'content.num', 1);
+          this.num = gCPVal(container, 'num', 1, {sKey:'numStatus',fields:['num']});
+          const speed = Number(gCPVal(container, 'speed', 30, {sKey: 'speedStatus', fields:['speed']}));
           //#ifdef H5
-          this.speed = Number(getContainerPropsValue(container, 'content.speed', 30));
+          this.speed = speed;
           //#endif
           //#ifdef MP-WEIXIN
-          this.speed = Number(getContainerPropsValue(container, 'content.speed', 30))/2.5;
+          this.speed = speed/2.5;
           //#endif
         }
         else this.num = 1;
-        this.is_hide_dailog = getContainerPropsValue(container, 'content.is_hide_dailog', 'N');
+
+        //弹窗显示
+        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});
+
       },
+
       handleShowStatic(){
         if(this.show_tip_icon === 'Y') {
           this.$xdConfirm({
@@ -404,7 +422,7 @@
         storage.set(this.containerId, 1, this.time);
         this.$xdConfirm({
           styles: this.styles,
-          title: this.title || this.ajaxTitle,
+          title: this.title,
           content: this.content,
           isHtml: true,
           zIndex: 2000,
@@ -416,14 +434,13 @@
       },
 
       getContent(){
-        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 //可以不传
-          },
-        })
+
+        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})
           .then(res => {
             //弹窗显示
             if (this.style === '3') {
@@ -434,12 +451,12 @@
               }
             }
 
+            //滚动模式
             else if(this.style === '2') {
               if(res.list.length > 0) {
                 this.contentList = res.list;
                 this.speedKey = Date.now()
               }
-
             }
 
             //静态显示
@@ -449,37 +466,25 @@
                 this.contentKey = Date.now();
                 this.title = res.list[0].title;
               }
-              this.noData = res.list.length > 0;
             }
 
           })
           .catch(error => {
-            console.error(error)
+            console.error(error);
+            this.contentList = [];
+            this.title = ''
           })
       },
 
       onJfbLoad() {
-        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.title = '';
+        this.content = '';
+        this.contentList = [];
+        this.showUp = false;
+        this.showStaticDialog = false;
+        storage.remove(this.containerId);
 
-          //非弹窗模式
-          else {
-            this.getContent()
-          }
-        }, 500)
+        this.getContent();
       },
 
       onJfbUpdate(data) {
@@ -497,7 +502,7 @@
 
   .jfb-base-notice {
     position: relative;
-    z-index: 100;
+    min-height: var(--jufubao-min-height)!important;
 
     &__body{
       .content-list {
@@ -576,6 +581,7 @@
 
     .upAndDown-swiper-all {
       padding: unit(40, rpx) unit(30, rpx) unit(40, rpx);
+      height: calc(1000rpx - 80rpx);
 
       &-list{
         padding-bottom: unit(40, rpx);
@@ -598,13 +604,14 @@
 
       & > view:first-child {
         padding-bottom: unit(30, rpx);
-        max-height: 50vh;
+        height: calc(100% - 120rpx);
         overflow-y: auto;
         margin: unit(40, rpx) unit(10, rpx) unit(20, rpx);
       }
 
     }
   }
+
   .isMp {
     width: 100%;
   }