jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseNotice/JfbBaseNotice.vue

@@ -0,0 +1,560 @@
+<template>
+  <view
+    class="jfb-base-notice"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-notice__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-notice__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <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="{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="{backgroundColor:backgroundColor, color:warningColor}">接口无数返回，请检查是否配置成功!</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>
+                <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 class="content-list">
+                      {{item.title}}
+                      <text v-if="contentList&&contentList.length>0">{{contentList.length}}个</text>
+                    </view>
+                  </swiper-item>
+                </swiper>
+                <xd-notice-bar
+                  :class="{isMp:isMp}"
+                  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 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 :style="{margin:marginUi}">
+              <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>
+              </view>
+            </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>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdContentXss from '@/components/XdContentXss/XdContentXss';
+  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";
+  const color = require('color');
+  export default {
+    name: "JfbBaseNotice",
+    components: {
+      XdFontIcon,
+      XdContentXss,
+      XdNoticeBar,
+      XdDownDrawer,
+      XdButton
+    },
+    mixins: [componentsMixins,extsMixins,JfbBaseNoticeMixin],
+    data() {
+      return {
+        selfMask: true,
+        showUp: false,
+        isTitle: '', //是否显示标题
+        title: '', //标题
+        textAlign: 'left', //标题对其方式
+        noData: false,
+        style: '1', //显示内容（静态/弹窗/滚动）
+
+        bgc: '', //背景颜色
+        textColor: '', //文字颜色
+        content : '', //内容
+        contentKey: 'contentKey',
+        borderTitleColor: '#fff',
+
+        margin: {
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0
+        },
+        padding: {
+          top: 8,
+          left: 10,
+          bottom: 8,
+          right: 10
+        },
+        radius: 0, //圆角
+        fontSize: 20,
+        titleFontSize: 26,
+        time: 3, //小时
+        isPreview: false,
+
+        //滚动
+        speed: 30, //滚动速度
+        speedKey: 'speedKey',
+        num: 1, //滚动记录数量
+        timer: false,
+        contentList: [],
+        scrollMargin:{},
+
+        backgroundColor: '',
+        is_hide_dailog:'N',
+
+        isMp:false,
+
+        btnConfirmWidth: "",
+        btnConfirmBgColor: "",
+        btnConfirmTextColor: "",
+      }
+    },
+    watch: {
+      container(value,oldValue) {
+        if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) {
+          this.init(value) ;
+          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:{
+      marginUi() {
+        let str = `${this.checkValue(this.margin.top, 20)}rpx`;
+        str = `${str} ${this.checkValue(this.margin.right, 20)}rpx`;
+        str = `${str} ${this.checkValue(this.margin.bottom, 20)}rpx`;
+        str = `${str} ${this.checkValue(this.margin.left, 20)}rpx`;
+        return str
+      },
+      paddingUi() {
+        let str = `${this.checkValue(this.padding.top, 20)}rpx`;
+        str = `${str} ${this.checkValue(this.padding.right, 20)}rpx`;
+        str = `${str} ${this.checkValue(this.padding.bottom, 20)}rpx`;
+        str = `${str} ${this.checkValue(this.padding.left, 20)}rpx`;
+        return str
+      },
+
+      scrollMarginUi(){
+        let str = `${this.checkValue(this.scrollMargin.top, 0)}rpx`;
+        str = `${str} ${this.checkValue(this.scrollMargin.right, 0)}rpx`;
+        str = `${str} ${this.checkValue(this.scrollMargin.bottom, 0)}rpx`;
+        str = `${str} ${this.checkValue(this.scrollMargin.left, 0)}rpx`;
+        return str
+      },
+
+
+      titlePadding() {
+        let str = `${this.checkValue(this.padding.top, 20)}rpx`;
+        str = `${str} ${this.checkValue(this.padding.right, 20)}rpx`;
+        str = `${str} ${this.checkValue(this.padding.bottom, 20)}rpx`;
+        str = `${str} ${this.checkValue(this.padding.left, 20)}rpx`;
+        return str
+      },
+      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
+      },
+
+    },
+    created() {
+      this.backgroundColor = Color(this.warningColor).alpha(0.2).toString();
+      this.isPreview = this.$configProject['isPreview'];
+      this.init(this.container);
+      //#ifdef MP-WEIXIN
+      this.isMp = true;
+      //#endif
+    },
+    methods: {
+
+      handleShow(type){
+        this.showUp = type;
+      },
+
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      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.borderTitleColor = color(this.bgc).lighten(.15).hex();
+        this.margin = getContainerPropsValue(container, 'content.margin', {top: 0, left: 0, bottom: 0, right: 0});
+        this.padding = getContainerPropsValue(container, 'content.padding', {top: 8, left: 10, bottom: 8, right: 10});
+        this.scrollMargin =  getContainerPropsValue(container, 'content.scrollMargin', {});
+        this.radius = getContainerPropsValue(container, 'content.radius', 0);
+        this.fontSize = Number(getContainerPropsValue(container, 'content.fontSize', '20'));
+        this.btnConfirmWidth = getContainerPropsValue(container, 'content.btnConfirmWidth', '');
+        this.btnConfirmBgColor = getContainerPropsValue(container, 'content.btnConfirmBgColor', '');
+        this.btnConfirmTextColor = getContainerPropsValue(container, 'content.btnConfirmTextColor', '');
+        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);
+
+        console.log("this.btnConfirmTextColor", this.btnConfirmTextColor);
+
+        if(this.style === '2') {
+          this.num = getContainerPropsValue(container, 'content.num', 1);
+          //#ifdef H5
+          this.speed = Number(getContainerPropsValue(container, 'content.speed', 30));
+          //#endif
+          //#ifdef MP-WEIXIN
+          this.speed = Number(getContainerPropsValue(container, 'content.speed', 30))/2.5;
+          //#endif
+        }
+        else this.num = 1;
+        this.is_hide_dailog = getContainerPropsValue(container, 'content.is_hide_dailog', 'N');
+      },
+
+      handlePop(){
+        console.log('this.time', this.time * 60 + '分钟');
+        storage.set(this.containerId, 1, this.time);
+        this.$xdConfirm({
+          styles: this.styles,
+          title: this.title || this.ajaxTitle,
+          content: this.content,
+          isHtml: true,
+          zIndex: 2000,
+          cancel: false,
+          btnConfirmWidth: this.btnConfirmWidth,
+          btnConfirmBgColor: this.btnConfirmBgColor,
+          btnConfirmTextColor: this.btnConfirmTextColor,
+        });
+      },
+
+      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 //可以不传
+          },
+        })
+          .then(res => {
+            //弹窗显示
+            if (this.style === '3') {
+              if (res.list.length > 0) {
+                this.content = res.list[0].content;
+                this.title = res.list[0].title;
+                this.handlePop()
+              }
+            }
+
+            else if(this.style === '2') {
+              if(res.list.length > 0) {
+                this.contentList = res.list;
+                this.speedKey = Date.now()
+              }
+
+            }
+
+            //静态显示
+            else {
+              if (res.list.length > 0) {
+                this.content = res.list[0].content;
+                this.contentKey = Date.now();
+                this.title = res.list[0].title;
+              }
+              this.noData = res.list.length > 0;
+            }
+
+          })
+          .catch(error => {
+            console.error(error)
+          })
+      },
+
+      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()
+            }
+          }
+
+          //非弹窗模式
+          else {
+            this.getContent()
+          }
+        }, 500)
+      },
+
+      onJfbUpdate(data) {
+        storage.remove(this.containerId);
+        this.getContent()
+      }
+
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbBaseNoticeLess.less";
+
+  .jfb-base-notice {
+    position: relative;
+    z-index: 100;
+
+    &__body{
+      .content-list {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      &-line {
+        height: 1px;
+        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;
+        text-align: center;
+        line-height: 60rpx;
+        color: #666;
+        font-size: unit(24, rpx);
+        padding:unit(20, rpx);
+      }
+      &-title {
+        border-bottom: 1px solid #fff;
+        line-height: 1.5rem;
+      }
+
+      &-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);
+      }
+
+    }
+  }
+  .isMp {
+    width: 100%;
+  }
+</style>

package/src/components/JfbBaseNotice/JfbBaseNoticeLess.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-notice {
+  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-notice {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/

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

package/src/components/JfbBaseNotice/Mock.js

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