jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseNotice/XdNoticeBar.vue

@@ -0,0 +1,535 @@
+<template>
+  <view
+    v-if="show"
+    class="uni-noticebar"
+    @click="onClick"
+    :class="{isMp:isMp}"
+  >
+    <!-- #ifdef MP-ALIPAY -->
+    <view
+      v-if="showClose === true || showClose === 'true'"
+      class="uni-noticebar-close uni-cursor-point"
+      @click="close"
+    >
+      <xd-font-icon
+        :color="uiColor"
+        size="20"
+        icon="iconguanbi2"
+        width="30"
+        height="30"
+      ></xd-font-icon>
+    </view>
+    <view
+      v-if="showIcon === true || showIcon === 'true'"
+      class="uni-noticebar-icon"
+    >
+      <xd-font-icon
+        icon="icontongzhi"
+        :color="uiColor"
+        size="30"
+        width="30"
+        height="30"
+      ></xd-font-icon>
+    </view>
+    <!-- #endif -->
+    <!-- #ifndef MP-ALIPAY -->
+    <xd-font-icon
+      class="uni-noticebar-icon"
+      v-if="showIcon === true || showIcon === 'true'"
+      icon="icontongzhi"
+      :color="uiColor"
+      size="30"
+      width="30"
+      height="30"
+    ></xd-font-icon>
+    <!-- #endif -->
+    <view
+      ref="textBox"
+      class="uni-noticebar__content-wrapper"
+      :class="{
+        'uni-noticebar__content-wrapper--scrollable':scrollable,
+        'uni-noticebar__content-wrapper--single':!scrollable && (single || moreText)
+      }">
+      <view
+        :id="elIdBox"
+        class="uni-noticebar__content"
+        :class="{
+          'uni-noticebar__content--scrollable':scrollable,
+          'uni-noticebar__content--single':!scrollable && (single || moreText)
+        }">
+        <view
+          :id="elId" ref="animationEle"
+          class="uni-noticebar__content-text"
+          :class="{
+            'uni-noticebar__content-text--scrollable':scrollable,
+            'uni-noticebar__content-text--single':!scrollable && (single || moreText)
+          }"
+          :style="{
+            color:uiColor,
+            width:wrapWidth+'px',
+            'animationDuration': animationDuration,
+            '-webkit-animationDuration': animationDuration ,
+            animationPlayState: webviewHide?'paused':animationPlayState,
+            '-webkit-animationPlayState':webviewHide?'paused':animationPlayState,
+            animationDelay: '1s',
+            '-webkit-animationDelay':'1s'
+          }">
+          <slot>
+            <view>1. 本插件需要申请的系统权限列表：</view>
+            <view>2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：</view>
+            <view>3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：</view>
+          </slot>
+        </view>
+      </view>
+    </view>
+    <xd-font-icon
+      v-if="showClose === true || showClose === 'true'"
+      :color="uiColor"
+      size="20"
+      icon="iconguanbi2"
+      @click="close"
+      width="30"
+      height="30"
+    ></xd-font-icon>
+    <view
+      v-if="showGetMore === true || showGetMore === 'true'"
+      class="uni-noticebar__more uni-cursor-point"
+      @click="clickMore"
+    >
+      <text v-if="moreText" :style="{ color: moreColor }" class="uni-noticebar__more-text">{{ moreText }}</text>
+      <xd-font-icon
+        :color="uiColor"
+        size="20"
+        icon="iconjiantou"
+        width="30"
+        height="30"
+      ></xd-font-icon>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import {
+    getParentsStyle, //获取页面风格单个键值值
+  } from '@/utils/xd.base';
+  const Color = require('color');
+
+  // #ifdef APP-NVUE
+  const dom = weex.requireModule('dom');
+  const animation = weex.requireModule('animation');
+  // #endif
+
+  /**
+   * XdNoticeBar 自定义导航栏
+   * @description 通告栏组件
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=30
+   * @property {Number} speed 文字滚动的速度，默认100px/秒
+   * @property {String} text 显示文字
+   * @property {String} backgroundColor 背景颜色
+   * @property {String} color 文字颜色
+   * @property {String} moreColor 查看更多文字的颜色
+   * @property {String} moreText 设置“查看更多”的文本
+   * @property {Boolean} single = [true|false] 是否单行
+   * @property {Boolean} scrollable = [true|false] 是否滚动，为true时，NoticeBar为单行
+   * @property {Boolean} showIcon = [true|false] 是否显示左侧喇叭图标
+   * @property {Boolean} showClose = [true|false] 是否显示左侧关闭按钮
+   * @property {Boolean} showGetMore = [true|false] 是否显示右侧查看更多图标，为true时，NoticeBar为单行
+   * @event {Function} click 点击 NoticeBar 触发事件
+   * @event {Function} close 关闭 NoticeBar 触发事件
+   * @event {Function} getmore 点击”查看更多“时触发事件
+   */
+
+  export default {
+    name: 'XdNoticeBar',
+    components: {
+      XdFontIcon
+    },
+    props: {
+      text: {
+        type: String,
+        default: ''
+      },
+      moreText: {
+        type: String,
+        default: ''
+      },
+      backgroundColor: {
+        type: String,
+        default: '#fffbe8'
+      },
+      speed: {
+        // 默认1s滚动100px
+        type: Number,
+        default: 50
+      },
+      color: {
+        type: String,
+        default: '#de8c17'
+      },
+      moreColor: {
+        type: String,
+        default: '#999999'
+      },
+      isNoBgc:{
+        // 是否单行
+        type: Boolean,
+        default: true
+      },
+      single: {
+        // 是否单行
+        type: [Boolean, String],
+        default: false
+      },
+      scrollable: {
+        // 是否滚动，添加后控制单行效果取消
+        type: [Boolean, String],
+        default: false
+      },
+      showIcon: {
+        // 是否显示左侧icon
+        type: [Boolean, String],
+        default: false
+      },
+      showGetMore: {
+        // 是否显示右侧查看更多
+        type: [Boolean, String],
+        default: false
+      },
+      showClose: {
+        // 是否显示左侧关闭按钮
+        type: [Boolean, String],
+        default: false
+      },
+      fontSize: {
+        type: [Number, String],
+        default: 20
+      }
+    },
+    data() {
+      const elId = `Uni_text_${Math.ceil(Math.random() * 10e5).toString(36)}`
+      const elIdBox = `Uni_box_${Math.ceil(Math.random() * 10e5).toString(36)}`
+      return {
+        textWidth: 0,
+        boxWidth: 0,
+        wrapWidth: '',
+        webviewHide: false,
+        // #ifdef APP-NVUE
+        stopAnimation: false,
+        // #endif
+        elId: elId,
+        elIdBox: elIdBox,
+        show: true,
+        animationDuration: 'none',
+        animationPlayState: 'paused',
+        animationDelay: '0s',
+
+
+        uiColor: '', //文字颜色
+        uiBackgroundColor: '', //背景颜色
+
+        isMp: false,
+      }
+    },
+
+    async created() {
+      // #ifdef APP-PLUS
+      var pages = getCurrentPages();
+      var page = pages[pages.length - 1];
+      var currentWebview = page.$getAppWebview();
+      currentWebview.addEventListener('hide', () => {
+        this.webviewHide = true
+      })
+      currentWebview.addEventListener('show', () => {
+        this.webviewHide = false
+      })
+      // #endif
+
+      //#ifdef MP-WEIXIN
+      this.isMp = true;
+      //#endif
+
+      this.$nextTick(() => {
+        this.initSize()
+      })
+    },
+    // #ifdef APP-NVUE
+    beforeDestroy() {
+      this.stopAnimation = true
+    },
+    // #endif
+    methods: {
+      getEleDone(ele){
+        let el = (e, callback)=>{
+          uni.createSelectorQuery()
+          // #ifndef MP-ALIPAY
+            .in(this)
+            // #endif
+            .select(e)
+            .boundingClientRect()
+            .exec((res) => {
+              if(res[0]['width']) {
+                res[0]['key'] = e.split('_')[1];
+                callback(res[0]);
+              }else{
+                setTimeout(()=>{
+                  el(e, callback)
+                },100)
+              }
+            });
+        };
+        return new Promise((resolve, reject) => {
+          el(ele,(res)=>{
+            resolve(res)
+          });
+        });
+
+      },
+      initSize() {
+        if (this.scrollable) {
+          // #ifndef APP-NVUE
+          let query = [];
+          let textQuery = this.getEleDone(`#${this.elId}`);
+          let boxQuery = this.getEleDone(`#${this.elIdBox}`);
+          query.push(textQuery);
+          query.push(boxQuery);
+          Promise.all(query).then((res) => {
+            console.log('Promise.all',res);
+            res.map((item)=>{
+              if(item.key === 'text') {
+                this.textWidth = item.width;
+                this.animationDuration = `${item.width / this.speed}s`
+              }
+              if(item.key === 'box') {
+
+                this.boxWidth = item.width;
+                this.animationDelay = `0.5s`
+              }
+            });
+            setTimeout(() => {
+              this.animationPlayState = 'running'
+            }, 10)
+          })
+
+
+          // #endif
+          // #ifdef APP-NVUE
+          dom.getComponentRect(this.$refs['animationEle'], (res) => {
+            let winWidth = getApp().globalData.$systemInfo.windowWidth
+            this.textWidth = res.size.width
+            animation.transition(this.$refs['animationEle'], {
+              styles: {
+                transform: `translateX(-${winWidth}px)`
+              },
+              duration: 0,
+              timingFunction: 'linear',
+              delay: 0
+            }, () => {
+              if (!this.stopAnimation) {
+                animation.transition(this.$refs['animationEle'], {
+                  styles: {
+                    transform: `translateX(-${this.textWidth}px)`
+                  },
+                  timingFunction: 'linear',
+                  duration: (this.textWidth - winWidth) / this.speed * 1000,
+                  delay: 1000
+                }, () => {
+                  if (!this.stopAnimation) {
+                    this.loopAnimation()
+                  }
+                });
+              }
+            });
+          })
+          // #endif
+        }
+        // #ifdef APP-NVUE
+        if (!this.scrollable && (this.single || this.moreText)) {
+          dom.getComponentRect(this.$refs['textBox'], (res) => {
+            this.wrapWidth = res.size.width
+          })
+        }
+        // #endif
+      },
+      loopAnimation() {
+        // #ifdef APP-NVUE
+        animation.transition(this.$refs['animationEle'], {
+          styles: {
+            transform: `translateX(0px)`
+          },
+          duration: 0
+        }, () => {
+          if (!this.stopAnimation) {
+            animation.transition(this.$refs['animationEle'], {
+              styles: {
+                transform: `translateX(-${this.textWidth}px)`
+              },
+              duration: this.textWidth / this.speed * 1000,
+              timingFunction: 'linear',
+              delay: 0
+            }, () => {
+              if (!this.stopAnimation) {
+                this.loopAnimation()
+              }
+            });
+          }
+        });
+        // #endif
+      },
+      clickMore() {
+        this.$emit('getmore')
+      },
+      close() {
+        this.show = false;
+        this.$emit('close')
+      },
+      onClick() {
+        this.$emit('click')
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+
+  .uni-noticebar {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+    /* #endif */
+    flex-direction: row;
+    align-items: center;
+    padding: unit(12, rxp) unit(24, rpx);
+  }
+
+  .uni-cursor-point {
+    /* #ifdef H5 */
+    cursor: pointer;
+    /* #endif */
+  }
+
+  .uni-noticebar-close {
+    margin-right: unit(10, rpx);
+  }
+
+  .uni-noticebar-icon {
+    margin-right: unit(10, rpx);
+  }
+
+  .uni-noticebar__content-wrapper {
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .uni-noticebar__content-wrapper--single {
+    /* #ifndef APP-NVUE */
+    line-height: unit(42, rpx);
+    /* #endif */
+  }
+
+  .uni-noticebar__content-wrapper--single,
+  .uni-noticebar__content-wrapper--scrollable {
+    flex-direction: row;
+  }
+
+  /* #ifndef APP-NVUE */
+  .uni-noticebar__content-wrapper--scrollable {
+    position: relative;
+    height: unit(42, rpx);
+  }
+
+  /* #endif */
+
+  .uni-noticebar__content--scrollable {
+    /* #ifdef APP-NVUE */
+    flex: 0;
+    /* #endif */
+    /* #ifndef APP-NVUE */
+    flex: 1;
+    display: block;
+    overflow: hidden;
+    /* #endif */
+  }
+
+  .uni-noticebar__content--single {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    flex: none;
+    width: 100%;
+    justify-content: center;
+    /* #endif */
+  }
+
+  .uni-noticebar__content-text {
+    font-size: unit(28, rpx);
+    line-height: unit(42, rpx);
+    /* #ifndef APP-NVUE */
+    word-break: break-all;
+    /* #endif */
+
+  }
+
+  .uni-noticebar__content-text--single {
+    /* #ifdef APP-NVUE */
+    lines: 1;
+    /* #endif */
+    /* #ifndef APP-NVUE */
+    display: block;
+    width: 100%;
+    white-space: nowrap;
+    /* #endif */
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .uni-noticebar__content-text--scrollable {
+    /* #ifdef APP-NVUE */
+    lines: 1;
+    padding-left: unit(750, rpx);
+    /* #endif */
+    /* #ifndef APP-NVUE */
+    position: absolute;
+    height: unit(42, rpx);
+    line-height: unit(42, rpx);
+    white-space: nowrap;
+    padding-left: 100%;
+    animation: notice 10s 0s linear infinite both;
+    animation-play-state: paused;
+    /* #endif */
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-flow: nowrap;
+
+
+    /deep/ & > view {
+      padding-right: unit(30, rpx);
+    }
+  }
+
+  .uni-noticebar__more {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    padding-left: unit(10, rpx);
+  }
+
+  .uni-noticebar__more-text {
+    font-size: unit(28, rpx);
+  }
+
+  @keyframes notice {
+    100% {
+      transform: translate3d(-100%, 0, 0);
+    }
+  }
+
+  .isMp {
+    width: 100%;
+  }
+</style>

package/src/components/JfbBaseNoticeBottom/Api.js

@@ -0,0 +1,60 @@
+'use strict';
+
+/**
+ * @description API模型
+ * 建议：Ffff=>模块  Xxxx=>自定义名字
+ * 获取单记录(getByIdFfffXxxx)
+ * 获取列表记录(getByListFfffXxxx)
+ * 添加列表记录(addFfffXxxxx)
+ * 删除列表记录(removeFfffXxxxx|deleteFfffXxxx)
+ * 更新列表记录(updateFfffXxxxx)
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    mapFnName: 'getByIdFilmSquate', //自定义方法名字（必选）
+    title: '获取电影广场列表',
+    path: '/api/account/film/list-film-square',
+    isRule: false,
+    params: {
+      last_key: ['当前页', 'Number', '必选'],
+      page_size: ['每页数量', 'Number', '必选'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    mapFnName: 'updateFilmPaiqiDate', //自定义方法名字（必选）
+    title: '更新排期',
+    path: '/api/account/film/paiqi-date',
+    isRule: false,
+    params: {
+      film_id: ['电影id', 'Number', '必选'],
+      cinema_id: ['影院id', 'Number', '必选'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    mapFnName: 'removeFilmAddress', //自定义方法名字（必选）
+    title: '删除我的配送地址',
+    path: '/api/account/film/paiqi-date',
+    isRule: false,
+    params: {
+      film_id: ['电影id', 'Number', '必选'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    mapFnName: 'addFilmcart',  //自定义方法名字（必选）
+    title: '添加购物车',
+    path: '/api/account/film/paiqi-date',
+    isRule: false,
+    params: {
+      film_id: ['电影id', 'Number', '必选'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+];

package/src/components/JfbBaseNoticeBottom/Attr.js

@@ -0,0 +1,106 @@
+'use strict';
+
+/**
+ * @description 当表单组件中有联动操作时候，使用方法进行返回
+ */
+export default {
+  style: [],
+  content: (data) => {
+    return [
+      {
+        label: '背景颜色:', //label
+        ele: 'xd-color', //package 名称
+        valueKey: 'bgcolor', //form[valueKey]
+        value: data.bgcolor || '', //v-model
+        placeholder: '请输入占位框背景颜色',
+        classNmae: 'input80', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
+        rules: [
+          {
+            required: true,
+            message: '请输入占位框背景颜色',
+            trigger: 'blur'
+          },
+        ]
+      },
+      {
+        label: '选中路径:', //label
+        ele: 'xd-select-pages-path', //package 名称
+        valueKey: 'select-pages-path', //form[valueKey]
+        value: data['select-pages-path'] || {},
+        setting: {
+          router: XdBus.getParentApi('getPagesTree')
+        },
+        inline: false,
+      },
+      data.bgcolor && {
+        label: '高度:', //label
+        ele: 'el-input', //package 名称
+        type: 'number',
+        valueKey: 'height', //form[valueKey]
+        value: data.height || 100, //v-model
+        placeholder: '请输入占位框高度，单位像素，默认：10px',
+        className: 'input80', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
+        rules: [
+          {
+            required: true,
+            message: '请输入占位框高度',
+            trigger: 'blur'
+          },
+        ]
+      },
+      {
+        label: '', //label
+        ele: 'slot', //package 名称
+        slot: 'is_reference',
+      },
+    ].filter(i=>i)
+  },
+  advanced: [
+    {
+      label: '背景颜色:', //label
+      ele: 'xd-color', //package 名称
+      valueKey: 'bgcolor', //form[valueKey]
+      value: '', //v-model
+      placeholder: '请输入占位框背景颜色',
+      classNmae: 'input80', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
+      rules: [
+        {
+          required: true,
+          message: '请输入占位框背景颜色',
+          trigger: 'blur'
+        },
+      ]
+    },
+    {
+      label: '选中路径:', //label
+      ele: 'xd-select-pages-path', //package 名称
+      valueKey: 'select-pages-path', //form[valueKey]
+      value: null,
+      setting: {
+        router: XdBus.getParentApi('getPagesTree')
+      },
+      inline: false,
+    },
+    {
+      label: '高度:', //label
+      ele: 'el-input', //package 名称
+      type: 'number',
+      valueKey: 'height', //form[valueKey]
+      value: null, //v-model
+      placeholder: '请输入占位框高度，单位像素，默认：10px',
+      classNmae: 'input80', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
+      rules: [
+        {
+          required: true,
+          message: '请输入占位框高度',
+          trigger: 'blur'
+        },
+      ]
+    },
+    {
+      label: '', //label
+      ele: 'slot', //package 名称
+      slot: 'is_reference',
+    },
+  ],
+};