@10yun/cv-mobile-ui 0.3.26 → 0.4.2

package/ui-cv/cv-notice-bar/cv-notice-bar.vue

@@ -0,0 +1,453 @@
+<template>
+  <view v-if="show" class="uni-noticebar" :style="{ backgroundColor: backgroundColor }" @click="onClick">
+    <!-- #ifdef MP-ALIPAY -->
+    <view v-if="showClose === true || showClose === 'true'" class="uni-noticebar-close uni-cursor-point" @click="close">
+      <cv-icon2 type="closeempty" :color="color" size="12" />
+    </view>
+    <view v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon">
+      <cv-icon2 type="sound" :color="color" size="14" />
+    </view>
+    <!-- #endif -->
+    <!-- #ifndef MP-ALIPAY -->
+    <cv-icon2
+      v-if="showClose === true || showClose === 'true'"
+      class="uni-noticebar-close uni-cursor-point"
+      type="closeempty"
+      :color="color"
+      size="12"
+      @click="close"
+    />
+    <cv-icon2 v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon" type="sound" :color="color" size="14" />
+    <!-- #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)
+        }"
+      >
+        <text
+          :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: color,
+            width: wrapWidth + 'px',
+            animationDuration: animationDuration,
+            '-webkit-animationDuration': animationDuration,
+            animationPlayState: webviewHide ? 'paused' : animationPlayState,
+            '-webkit-animationPlayState': webviewHide ? 'paused' : animationPlayState,
+            animationDelay: animationDelay,
+            '-webkit-animationDelay': animationDelay
+          }"
+        >
+          {{ text }}
+        </text>
+      </view>
+    </view>
+    <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>
+      <cv-icon2 type="arrowright" :color="moreColor" size="14" />
+    </view>
+  </view>
+</template>
+
+<script>
+// #ifdef APP-NVUE
+const dom = weex.requireModule('dom');
+const animation = weex.requireModule('animation');
+// #endif
+
+/**
+ * NoticeBar 自定义导航栏
+ * @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: 'UniNoticeBar',
+  emits: ['click', 'getmore', 'close'],
+  props: {
+    text: {
+      type: String,
+      default: ''
+    },
+    moreText: {
+      type: String,
+      default: ''
+    },
+    backgroundColor: {
+      type: String,
+      default: '#fffbe8'
+    },
+    speed: {
+      // 默认1s滚动100px
+      type: Number,
+      default: 100
+    },
+    color: {
+      type: String,
+      default: '#de8c17'
+    },
+    moreColor: {
+      type: String,
+      default: '#999999'
+    },
+    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
+    }
+  },
+  data() {
+    const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`;
+    const elIdBox = `Uni_${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'
+    };
+  },
+  mounted() {
+    // #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
+    this.$nextTick(() => {
+      this.initSize();
+    });
+  },
+  // #ifdef APP-NVUE
+  beforeDestroy() {
+    this.stopAnimation = true;
+  },
+  // #endif
+  methods: {
+    initSize() {
+      if (this.scrollable) {
+        // #ifndef APP-NVUE
+        let query = [],
+          boxWidth = 0,
+          textWidth = 0;
+        let textQuery = new Promise((resolve, reject) => {
+          uni
+            .createSelectorQuery()
+            // #ifndef MP-ALIPAY
+            .in(this)
+            // #endif
+            .select(`#${this.elId}`)
+            .boundingClientRect()
+            .exec((ret) => {
+              this.textWidth = ret[0].width;
+              resolve();
+            });
+        });
+        let boxQuery = new Promise((resolve, reject) => {
+          uni
+            .createSelectorQuery()
+            // #ifndef MP-ALIPAY
+            .in(this)
+            // #endif
+            .select(`#${this.elIdBox}`)
+            .boundingClientRect()
+            .exec((ret) => {
+              this.boxWidth = ret[0].width;
+              resolve();
+            });
+        });
+        query.push(textQuery);
+        query.push(boxQuery);
+        Promise.all(query).then(() => {
+          this.animationDuration = `${this.textWidth / this.speed}s`;
+          this.animationDelay = `-${this.boxWidth / this.speed}s`;
+          setTimeout(() => {
+            this.animationPlayState = 'running';
+          }, 1000);
+        });
+        // #endif
+        // #ifdef APP-NVUE
+        dom.getComponentRect(this.$refs['animationEle'], (res) => {
+          let winWidth = uni.getSystemInfoSync().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 scoped>
+.uni-noticebar {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  padding: 6px 12px;
+  margin-bottom: 10px;
+}
+
+.uni-cursor-point {
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+}
+
+.uni-noticebar-close {
+  margin-right: 5px;
+}
+
+.uni-noticebar-icon {
+  margin-right: 5px;
+}
+
+.uni-noticebar__content-wrapper {
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.uni-noticebar__content-wrapper--single {
+  /* #ifndef APP-NVUE */
+  line-height: 18px;
+  /* #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: 18px;
+}
+
+/* #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: 14px;
+  line-height: 18px;
+  /* #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: 750rpx;
+  /* #endif */
+  /* #ifndef APP-NVUE */
+  position: absolute;
+  display: block;
+  height: 18px;
+  line-height: 18px;
+  white-space: nowrap;
+  padding-left: 100%;
+  animation: notice 10s 0s linear infinite both;
+  animation-play-state: paused;
+  /* #endif */
+}
+
+.uni-noticebar__more {
+  /* #ifndef APP-NVUE */
+  display: inline-flex;
+  /* #endif */
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  padding-left: 5px;
+}
+
+.uni-noticebar__more-text {
+  font-size: 14px;
+}
+
+@keyframes notice {
+  100% {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+</style>

package/ui-cv/cv-number-box/cv-number-box.vue

@@ -0,0 +1,223 @@
+<template>
+  <view class="uni-numbox">
+    <view @click="_calcValue('minus')" class="uni-numbox__minus uni-cursor-point">
+      <text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }">-</text>
+    </view>
+    <input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" type="number" v-model="inputValue" />
+    <view @click="_calcValue('plus')" class="uni-numbox__plus uni-cursor-point">
+      <text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }">+</text>
+    </view>
+  </view>
+</template>
+<script>
+/**
+ * NumberBox 数字输入框
+ * @description 带加减按钮的数字输入框
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=31
+ * @property {Number} value 输入框当前值
+ * @property {Number} min 最小值
+ * @property {Number} max 最大值
+ * @property {Number} step 每次点击改变的间隔大小
+ * @property {Boolean} disabled = [true|false] 是否为禁用状态
+ * @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value
+ */
+
+export default {
+  name: 'cvNumberBox',
+  emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'],
+  props: {
+    value: {
+      type: [Number, String],
+      default: 1
+    },
+    modelValue: {
+      type: [Number, String],
+      default: 1
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      inputValue: 0
+    };
+  },
+  watch: {
+    value(val) {
+      this.inputValue = +val;
+    },
+    modelValue(val) {
+      this.inputValue = +val;
+    }
+  },
+  created() {
+    if (this.value === 1) {
+      this.inputValue = +this.modelValue;
+    }
+    if (this.modelValue === 1) {
+      this.inputValue = +this.value;
+    }
+  },
+  methods: {
+    _calcValue(type) {
+      if (this.disabled) {
+        return;
+      }
+      const scale = this._getDecimalScale();
+      let value = this.inputValue * scale;
+      let step = this.step * scale;
+      if (type === 'minus') {
+        value -= step;
+        if (value < this.min * scale) {
+          return;
+        }
+        if (value > this.max * scale) {
+          value = this.max * scale;
+        }
+      }
+
+      if (type === 'plus') {
+        value += step;
+        if (value > this.max * scale) {
+          return;
+        }
+        if (value < this.min * scale) {
+          value = this.min * scale;
+        }
+      }
+
+      this.inputValue = (value / scale).toFixed(String(scale).length - 1);
+      this.$emit('change', +this.inputValue);
+      // TODO vue2 兼容
+      this.$emit('input', +this.inputValue);
+      // TODO vue3 兼容
+      this.$emit('update:modelValue', +this.inputValue);
+    },
+    _getDecimalScale() {
+      let scale = 1;
+      // 浮点型
+      if (~~this.step !== this.step) {
+        scale = Math.pow(10, String(this.step).split('.')[1].length);
+      }
+      return scale;
+    },
+    _onBlur(event) {
+      this.$emit('blur', event);
+      let value = event.detail.value;
+      if (!value) {
+        // this.inputValue = 0;
+        return;
+      }
+      value = +value;
+      if (value > this.max) {
+        value = this.max;
+      } else if (value < this.min) {
+        value = this.min;
+      }
+      const scale = this._getDecimalScale();
+      this.inputValue = value.toFixed(String(scale).length - 1);
+      this.$emit('change', +this.inputValue);
+      this.$emit('input', +this.inputValue);
+    },
+    _onFocus(event) {
+      this.$emit('focus', event);
+    }
+  }
+};
+</script>
+<style scoped>
+/* #ifdef APP-NVUE */
+/* #endif */
+.uni-numbox {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  height: 35px;
+  line-height: 35px;
+  width: 120px;
+}
+
+.uni-cursor-point {
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+}
+
+.uni-numbox__value {
+  background-color: #ffffff;
+  width: 50px;
+  height: 35px;
+  text-align: center;
+  font-size: 16px;
+  border-width: 1rpx;
+  border-style: solid;
+  border-color: #e5e5e5;
+  border-left-width: 0;
+  border-right-width: 0;
+}
+
+.uni-numbox__minus {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 35px;
+  height: 35px;
+  font-size: 20px;
+  color: #333;
+  background-color: #f8f8f8;
+  border-width: 1rpx;
+  border-style: solid;
+  border-color: #e5e5e5;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+  border-right-width: 0;
+}
+
+.uni-numbox__plus {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 35px;
+  height: 35px;
+  border-width: 1rpx;
+  border-style: solid;
+  border-color: #e5e5e5;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  background-color: #f8f8f8;
+  border-left-width: 0;
+}
+
+.uni-numbox--text {
+  font-size: 20px;
+  color: #333;
+}
+
+.uni-numbox--disabled {
+  color: #c0c0c0;
+  /* #ifdef H5 */
+  cursor: not-allowed;
+  /* #endif */
+}
+</style>