jufubao-base 1.0.63-beta216 → 1.0.63-beta218

package/src/components/JfbBaseNotice/JfbBaseNotice.vue

@@ -13,80 +13,131 @@
       <view class="jfb-base-notice__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view
-      class="jfb-base-notice__body"
-      :style="{
-        margin: marginUi,
-      }"
-    >
-      <template v-if="style === '3' && isPreview">
-        <view
-          class="jfb-base-notice__body-pop"
-          :style="{backgroundColor:backgroundColor, color:warningColor}"
-        >弹窗模式方便编辑(占位)，在线上此模块不显</view>
-      </template>
-      <template v-if="style === '2'">
-        <template v-if="!content && isPreview">
+    <view class="jfb-base-notice__body">
+      <view class="jfb-base-notice__body-line"></view>
+      <view :style="{margin: marginUi}">
+        <template v-if="style === '3' && isPreview">
           <view
             class="jfb-base-notice__body-pop"
             :style="{backgroundColor:backgroundColor, color:warningColor}"
-          >接口无数返回，请检查是否配置成功!</view>
+          >弹窗模式方便编辑(占位)，在线上此模块不显</view>
         </template>
-        <view v-else class="jfb-base-notice__body-scroll">
-          <xd-notice-bar
-            :key="speedKey"
-            scrollable
-            :speed="speed"
-          >
+        <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>
+          </template>
+          <view v-else class="jfb-base-notice__body-scroll">
             <view
-              v-for="item in contentList"
-              class="jfb-base-notice__body-scroll-content"
-              :key="item.content_id"
-              v-html="item.content"
-            ></view>
-          </xd-notice-bar>
-        </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>
-        </template>
-        <template v-else>
-          <view
-            class="jfb-base-notice__body-title"
-            :style="{
-              fontSize: titleFontSize + 'rpx',
-              background: bgc,
-              color:textColor,
-              borderRadius: titleRadius,
-              padding: titlePadding,
-              borderBottomColor: borderTitleColor,
-              textAlign: textAlign
-            }"
-            v-if="isTitle"
-          >{{title}}</view>
-          <view
-            class="jfb-base-notice__body-content"
-            :style="{
-              background: bgc,
-              color:textColor,
-              borderRadius: contRadius,
-              padding: paddingUi,
-              lineHeight: '50rpx'
-            }"
-            v-if="content"
-          >
-            <xd-content-xss
-              :key="contentKey"
-              :html="content"
-              :font-sizes="fontSize"
-            ></xd-content-xss>
+              class="upAndDown"
+              :style="{
+                backgroundColor:backgroundColor,
+                color:warningColor
+              }"
+            >
+              <view>
+                <xd-font-icon icon="icontongzhi" :size="24"></xd-font-icon>
+              </view>
+              <view :class="{one:!getScrollType }">
+                <swiper
+                  v-if="getScrollType"
+                  class="upAndDown-swiper"
+                  circular
+                  vertical
+                  :interval="2500"
+                  autoplay
+                >
+                  <swiper-item v-for="(item) in contentList" :key="item.content_id">
+                    <view>{{item.title}}</view>
+                  </swiper-item>
+                </swiper>
+                <xd-notice-bar v-else :key="speedKey" scrollable :speed="speed" background-color="rgba(0,0,0,0)">
+                  <view
+                    v-for="item in contentList"
+                    class="jfb-base-notice__body-scroll-content"
+                    :key="item.content_id"
+                    v-html=" $xdUniHelper.filterHtml(item.content)"
+                  ></view>
+                </xd-notice-bar>
+              </view>
+              <view>
+                <xd-font-icon icon="iconxiangyou_xian" :size="24" @click="handleShow(true)"></xd-font-icon>
+              </view>
+            </view>
+
           </view>
         </template>
-      </template>
+        <template v-if="style === '1'">
+          <template v-if="!content && isPreview">
+            <view
+              class="jfb-base-notice__body-pop"
+              :style="{backgroundColor:backgroundColor, color:warningColor}"
+            >接口无数返回，请检查是否配置成功!</view>
+          </template>
+          <template v-else>
+            <view
+              class="jfb-base-notice__body-title"
+              :style="{
+                fontSize: titleFontSize + 'rpx',
+                background: bgc,
+                color:textColor,
+                borderRadius: titleRadius,
+                padding: titlePadding,
+                paddingBottom:0,
+                borderBottomColor: borderTitleColor,
+                textAlign: textAlign
+              }"
+              v-if="isTitle"
+            >{{title}}</view>
+            <view
+              class="jfb-base-notice__body-content"
+              :style="{
+                background: bgc,
+                color:textColor,
+                borderRadius: contRadius,
+                padding: paddingUi,
+                lineHeight: '50rpx'
+              }"
+              v-if="content"
+            >
+              <xd-content-xss
+                :key="contentKey"
+                :html="content"
+                :font-sizes="fontSize"
+              ></xd-content-xss>
+            </view>
+          </template>
+        </template>
+      </view>
+      <xd-down-drawer
+        v-if="showUp"
+        :show.sync="showUp"
+        :z-index="9999"
+        :is-close="true"
+        :is-body-close="false"
+        :fullscreen="true"
+        height="20vh"
+      >
+        <view class="upAndDown-swiper-all">
+          <view>
+            <view
+              class="upAndDown-swiper-all-list"
+              v-for="(item) in contentList"
+              :key="item.content_id"
+            >
+              <view :style="{color:warningColor}">{{item.title}}</view>
+              <view v-html="item.content"></view>
+            </view>
+          </view>
+          <view>
+            <xd-button
+              size="small"
+              type="primary"
+              radius="50rpx"
+              @click="handleShow(false)"
+            >我知道了</xd-button>
+          </view>
+        </view>
+      </xd-down-drawer>
     </view>
   </view>
 </template>
@@ -94,11 +145,13 @@
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
   import XdContentXss from '@/components/XdContentXss/XdContentXss';
-  import XdNoticeBar from "@/components/XdNoticeBar/XdNoticeBar"
+  import XdNoticeBar from "./XdNoticeBar"
+  import XdButton from "@/components/XdButton/XdButton.vue";
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseNoticeMixin from "./JfbBaseNoticeMixin";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins"
+  import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer.vue";
   import { getContainerPropsValue } from "@/utils/xd.base";
   import storage from "@/common/storage";
   import Color from "color";
@@ -108,18 +161,21 @@
     components: {
       XdFontIcon,
       XdContentXss,
-      XdNoticeBar
+      XdNoticeBar,
+      XdDownDrawer,
+      XdButton
     },
     mixins: [componentsMixins,extsMixins,JfbBaseNoticeMixin],
     data() {
       return {
+        selfMask: true,
+        showUp: false,
         isTitle: '', //是否显示标题
         title: '', //标题
         textAlign: 'left', //标题对其方式
         noData: false,
         style: '1', //显示内容（静态/弹窗/滚动）
 
-
         bgc: '', //背景颜色
         textColor: '', //文字颜色
         content : '', //内容
@@ -156,23 +212,11 @@
     },
     watch: {
       container(value) {
-        if (this.timer) {
-          clearTimeout(this.timer);
-          this.timer = null
-        }
-        setTimeout(() => {
-          if (this.$configProject['isPreview']) this.onJfbLoad()
-        }, 400)
-
+        this.init(this.container);
+        if (this.$configProject['isPreview']) this.onJfbLoad()
       },
       num(){
-        if (this.timer) {
-          clearTimeout(this.timer);
-          this.timer = null
-        }
-        setTimeout(() => {
-          if (this.$configProject['isPreview']) this.onJfbLoad()
-        }, 400)
+        if (this.$configProject['isPreview']) this.onJfbLoad()
 
       },
       style() {
@@ -207,6 +251,10 @@
         return `${this.radius}rpx ${this.radius}rpx 0rpx 0rpx `
       },
 
+      getScrollType(){
+        return this.num > 1
+      }
+
     },
     created() {
       this.backgroundColor = Color(this.warningColor).alpha(0.2).toString();
@@ -215,6 +263,11 @@
     },
     methods: {
 
+      handleShow(type){
+        this.showUp = type;
+      },
+
+
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
@@ -262,10 +315,12 @@
           data: {
             page_id: this.pageAttr['page_id'], //页面ID
             container_id: this.containerId, //组件ID
-            page_size: this.num //可以不传
+            page_size: (this.type==='1' &&  this.type==='2') ? 1: this.num //可以不传
           },
         })
           .then(res => {
+            //res = {"list":[{"content_id":"YSjVvl2X6f5qYW5G7NNNr","category_id":"KNCYuDPWmmb4jUaBEOvbz","partner_id":0,"site_id":"","title":"东北地区暴雪影响","content":"<p>尊敬的用户您好！因受东北地区暴雪影响，部分订单暂停发货或包裹运输会有延迟，我们将在预警恢复后尽快安排发货，请您耐心等待，给您带来不便敬请谅解！<\/p>","sort":1,"status":"","start_time":1699200000,"end_time":1699804800,"op_user_id":"","created_time":0,"updated_time":0,"code":"","code_name":""},{"content_id":"YSjVvl2X6f5qYW5G7NNNr1","category_id":"KNCYuDPWmmb4jUaBEOvbz","partner_id":0,"site_id":"","title":"东北地区暴雪影响","content":"<p>尊敬的用户您好！因受东北地区暴雪影响，部分订单暂停发货或包裹运输会有延迟，我们将在预警恢复后尽快安排发货，请您耐心等待，给您带来不便敬请谅解！<\/p>","sort":1,"status":"","start_time":1699200000,"end_time":1699804800,"op_user_id":"","created_time":0,"updated_time":0,"code":"","code_name":""}],"request_id":"2d3b6e0f1cb184c5"};
+
             //弹窗显示
             if (this.style === '3') {
               if (res.list.length > 0) {
@@ -276,7 +331,6 @@
             }
 
             else if(this.style === '2') {
-              console.log('getContent',res.list)
               if(res.list.length > 0) {
                 this.contentList = res.list;
                 this.speedKey = Date.now()
@@ -301,21 +355,29 @@
       },
 
       onJfbLoad() {
-        //弹窗模式
-        if(this.style === '3') {
-          if(this.isPreview) {
-            this.getContent();
-          }
-          else {
-            if(!storage.get(this.containerId)) this.getContent()
-          }
-        }
+        let delay = 500;
+        if(!this.isPreview)  delay = 10;
 
-        else {
-          this.getContent()
+        if(this.timer){
+          clearTimeout(this.timer);
+          this.timer = null
         }
+        this.timer = setTimeout(()=>{
+          //弹窗模式
+          if(this.style === '3') {
+            if(this.isPreview) {
+              this.getContent();
+            }
+            else {
+              if(!storage.get(this.containerId)) this.getContent()
+            }
+          }
 
-
+          //非弹窗模式
+          else {
+            this.getContent()
+          }
+        }, delay)
       },
 
       onJfbUpdate(data) {
@@ -333,26 +395,94 @@
 
   .jfb-base-notice {
     &__body{
+      &-line {
+        height: 0px;
+        overflow: hidden;
+        width: 100%;
+      }
       &-scroll {
         &-content {
           font-size: unit(20, rpx);
         }
+
+        & .upAndDown {
+          display: flex;
+          height: unit(70, rpx);
+          line-height: unit(70, rpx);
+          justify-content: space-between;
+
+
+
+          & > view:first-child,& > view:last-child {
+            width: unit(70, rpx);
+            height: unit(70, rpx);
+            flex-shrink: 0;
+          }
+          & > view:nth-child(2) {
+            flex: 1;
+            padding: 0 unit(10, rpx);
+            height: 100%;
+
+            &.one {
+              display: flex;
+              align-items: center;
+            }
+          }
+
+          &-swiper {
+            height: 100%;
+            width: 100%;
+            font-size: unit(26, rpx);
+
+          }
+        }
       }
       &-pop {
-        min-height: 60rpx;
+        min-height: 30rpx;
         text-align: center;
-        line-height: 60rpx;
+        line-height: 30rpx;
         color: #666;
         font-size: unit(24, rpx);
         padding:unit(20, rpx);
       }
       &-title {
         border-bottom: 1px solid #fff;
+        line-height: 2rem;
       }
 
       &-content {
         padding: unit(8, rpx) unit(10, rpx);
       }
     }
+
+    .upAndDown-swiper-all {
+      padding: unit(40, rpx) unit(30, rpx) unit(40, rpx);
+
+      &-list{
+        padding-bottom: unit(40, rpx);
+        &:last-child {
+          padding-bottom: 0;
+        }
+
+        & >view:first-child {
+          font-size: unit(32, rpx);
+          font-weight: 700;
+          padding-bottom: 0.5rem;
+        }
+
+        &>view:nth-child(2) {
+          font-size: unit(26, rpx);
+          line-height: unit(36, rpx);
+          color: #666;
+        }
+      }
+
+      & > view:first-child {
+        padding-bottom: unit(30, rpx);
+        max-height: 50vh;
+        overflow-y: auto;
+        margin: unit(40, rpx) unit(10, rpx) unit(20, rpx);
+      }
+    }
   }
 </style>

package/src/components/JfbBaseNotice/JfbBaseNoticeLess.less

@@ -15,7 +15,7 @@
 .jfb-base-notice {
   border: 1px dashed rgba(0, 0, 0, 0);
   box-sizing: border-box;
-  min-height: unit(100, rpx);
+  min-height: unit(50, rpx);
 
   &__body{
       position: relative;