jufubao-base 1.0.169-beta2 → 1.0.169-beta20

package/src/components/JfbBaseTfkCardLogin/XdNotice.vue

@@ -0,0 +1,550 @@
+<template>
+  <view class="jfb-notice__body">
+    <view class="jfb-notice__body-line"></view>
+    <view>
+      <template v-if="style === '3' && isPreview">
+        <!-- <view class="jfb-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-notice__body-pop" :style="{backgroundColor:backgroundColor, color:warningColor}">接口无数返回，请检查是否配置成功!</view>
+        </template>
+        <view v-else class="jfb-notice__body-scroll">
+          <view
+            class="upAndDown"
+            :style="{
+              backgroundColor:bgc,
+              color: textColor,
+              margin: marginUi,
+              padding: paddingUi,
+              borderRadius: contRadius,
+              fontSize: fontSize + 'rpx',
+            }"
+          >
+            <view class="icon_wrap">
+              <xd-font-icon icon="icontongzhi" :size="fontSize"></xd-font-icon>
+            </view>
+            <view class="notice_main" :class="[{one:!getScrollType }]">
+              <swiper
+                v-if="getScrollType"
+                class="upAndDown-swiper"
+                circular
+                vertical
+                :interval="2500"
+                autoplay
+              >
+                <swiper-item v-for="(item, i) in contentList" :key="item.content_id">
+                  <view class="content-list" :style="{
+                    fontSize: fontSize + 'rpx',
+                  }">
+                    {{item.title}}
+                  </view>
+                </swiper-item>
+              </swiper>
+              <xd-notice-bar
+                :class="{isMp:isMp}"
+                v-else
+                :key="speedKey"
+                :color="textColor"
+                scrollable
+                :fontSize="fontSize"
+                :speed="speed"
+                background-color="rgba(0,0,0,0)"
+                :is-no-bgc="false"
+              >
+                <xd-content-xss
+                  v-for="(item, i) in contentList"
+                  :key="item.content_id"
+                  :html="item.content"
+                  :font-sizes="fontSize"
+                  style="display: flex;align-items: center;"
+                ></xd-content-xss>
+              </xd-notice-bar>
+            </view>
+            <view class="more_wrap"
+              style="display: flex;"
+              :style="{
+                fontSize: moreFontSize + 'rpx',
+                color: moreTextColor,
+              }"
+              @click="handleShow(true)"
+            >
+              更多
+              <xd-font-icon icon="iconxiangyou_xian" :size="20"></xd-font-icon>
+            </view>
+          </view>
+
+        </view>
+      </template>
+      <template v-if="style === '1'">
+        <template v-if="!content && isPreview">
+          <view
+            class="jfb-notice__body-pop"
+            :style="{backgroundColor:backgroundColor, color:warningColor}"
+          >接口无数返回，请检查是否配置成功!</view>
+        </template>
+        <template v-else>
+          <view :style="{margin:marginUi}">
+            <view
+              class="jfb-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-notice__body-content"
+              :style="{
+                background: bgc,
+                color:textColor,
+                borderRadius: contRadius,
+                padding: paddingUi,
+                lineHeight: '50rpx',
+                display: 'flex',
+                alignItem: 'center',
+              }"
+              v-if="content"
+            >
+              <view class="xd-xss_wrap">
+                <xd-content-xss
+                  :key="contentKey"
+                  :html="content"
+                  :font-sizes="fontSize"
+                  style="display: flex;align-items: center;"
+                ></xd-content-xss>
+              </view>
+              <view style="display: flex;"
+                :style="{
+                  fontSize: moreFontSize + 'rpx',
+                  color: moreTextColor,
+                }"
+                @click="handleShow(true)"
+              >
+                更多
+                <xd-font-icon icon="iconxiangyou_xian" :size="moreFontSize"></xd-font-icon>
+              </view>
+            </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>
+    <xd-dialog :show.sync="showDialog" :title="title" :is-close="true">
+      <xd-content-xss
+        :key="content"
+        :html="content"
+        :font-sizes="fontSize"
+        style="display: flex;align-items: center;"
+      ></xd-content-xss>
+      <view slot="btn">
+      </view>
+    </xd-dialog>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdDialog from "@/components/XdDailog/XdDailog"
+  import XdContentXss from '@/components/XdContentXss/XdContentXss';
+  import XdNoticeBar from "@/components/XdNoticeBar/XdNoticeBar";
+  import XdButton from "@/components/XdButton/XdButton.vue";
+  import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer.vue";
+  import storage from "@/common/storage";
+
+  export default{
+    name: "XdNotice",
+    components: {
+      XdFontIcon,
+      XdContentXss,
+      XdNoticeBar,
+      XdButton,
+      XdDownDrawer,
+      XdDialog
+    },
+    props: {
+      panelSetting: {
+        type: Object,
+      },
+      apiGetContent: {
+        type: Function
+      }
+    },
+    data(){
+      return {
+        showUp: false,
+        showDialog: false,
+        isTitle: '', //是否显示标题
+        title: '', //标题
+        textAlign: 'left', //标题对其方式
+        noData: false,
+        style: '1', //显示内容（静态/弹窗/滚动）
+
+        bgc: '', //背景颜色
+        textColor: '', //文字颜色
+        content : '', //内容
+        contentKey: 'contentKey',
+        borderTitleColor: '#fff',
+        warningColor: "",
+        containerId: '',
+
+        moreTextColor: '',
+        moreFontSize: "",
+
+        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,
+
+        interval: null,
+
+        //滚动
+        speed: 30, //滚动速度
+        speedKey: 'speedKey',
+        num: 1, //滚动记录数量
+        timer: false,
+        contentList: [],
+        scrollMargin:{},
+
+        backgroundColor: '',
+        is_hide_dailog:'N',
+        isMp:false,
+      }
+    },
+    watch: {
+      panelSetting: {
+        handler(n, o){
+          console.log("watch 面板设置", n, o);
+          this.setDataBySetting();
+          this.onJfbLoad();
+          if(this.style == 3 && n.is_hide_dailog === 'N'){
+            this.showDialog = true;
+          }else{
+            this.showDialog = false;
+          }
+        },
+        deep: true
+      },
+      num(){
+        if (this.isPreview) this.onJfbLoad()
+      },
+      style() {
+        if(this.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.setDataBySetting();
+      this.isPreview = this.$configProject['isPreview'];
+      this.onJfbLoad();
+      //#ifdef MP-WEIXIN
+      this.isMp = true;
+      //#endif
+    },
+    methods: {
+      onJfbLoad() {
+        if(this.timer){
+          clearTimeout(this.timer);
+          this.timer = null
+        }
+
+        //弹窗模式
+        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()
+        }
+      },
+      handlePop(){
+        console.log('this.time', this.time * 60 + '分钟');
+        storage.set(this.containerId, 1, this.time);
+        this.showDialog = true;
+      },
+      getContent(){
+        if(this.interval) clearTimeout(this.interval);
+
+        this.interval = setTimeout(() => {
+          this.apiGetContent({page_size: this.num}).then(res => {
+            console.log("getContent", res)
+            this.contentList = res.list;
+
+            //弹窗显示
+            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.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;
+            }
+          })
+        }, 50)
+      },
+      handleShow(type){
+        this.showUp = type;
+      },
+      setDataBySetting(){
+        for(let key in this.panelSetting){
+          if(this.panelSetting[key] !== undefined){
+            this.$set(this, key, this.panelSetting[key])
+          }
+        }
+      },
+      checkValue(value, dValue = 0){
+        if(value === undefined || value === '' || value === null) return dValue;
+        return Number(value || 0);
+      },
+    }
+  }
+</script>
+<style scoped lang="less">
+
+  .jfb-notice {
+    &__body{
+      .xd-xss_wrap{
+        display:flex;
+        flex:1;
+        align-items: center;
+        width: 500rpx;
+        overflow: hidden;
+        white-space: nowrap;
+        padding-right: 20rpx;
+        ::v-deep .xd-content-xss{
+          width: 100%;
+          & > p{
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+      .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;
+
+          .more_wrap{
+            height: unit(70, rpx);
+            flex-shrink: 0;
+          }
+          .icon_wrap{
+            width: unit(70, rpx);
+            height: unit(70, rpx);
+            flex-shrink: 0;
+          }
+          .notice_main{
+            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>