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

package/ui-cv/cv-combox/cv-combox.vue

@@ -0,0 +1,250 @@
+<template>
+  <view class="uni-combox">
+    <view v-if="label" class="uni-combox__label" :style="labelStyle">
+      <text>{{ label }}</text>
+    </view>
+    <view class="uni-combox__input-box">
+      <input
+        class="uni-combox__input"
+        type="text"
+        :placeholder="placeholder"
+        v-model="inputVal"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+      <cv-icon2 class="uni-combox__input-arrow" type="arrowdown" size="14" @click="toggleSelector"></cv-icon2>
+      <view class="uni-combox__selector" v-if="showSelector">
+        <scroll-view scroll-y="true" class="uni-combox__selector-scroll">
+          <view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
+            <text>{{ emptyTips }}</text>
+          </view>
+          <view
+            class="uni-combox__selector-item"
+            v-for="(item, index) in filterCandidates"
+            :key="index"
+            @click="onSelectorClick(index)"
+          >
+            <text>{{ item }}</text>
+          </view>
+        </scroll-view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+/**
+ * Combox 组合输入框
+ * @description 组合输入框一般用于既可以输入也可以选择的场景
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=1261
+ * @property {String} label 左侧文字
+ * @property {String} labelWidth 左侧内容宽度
+ * @property {String} placeholder 输入框占位符
+ * @property {Array} candidates 候选项列表
+ * @property {String} emptyTips 筛选结果为空时显示的文字
+ * @property {String} value 组合框的值
+ */
+export default {
+  name: 'cvCombox',
+  emits: ['input', 'update:modelValue'],
+  props: {
+    label: {
+      type: String,
+      default: ''
+    },
+    labelWidth: {
+      type: String,
+      default: 'auto'
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    candidates: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    emptyTips: {
+      type: String,
+      default: '无匹配项'
+    },
+    // #ifndef VUE3
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    // #endif
+    // #ifdef VUE3
+    modelValue: {
+      type: [String, Number],
+      default: ''
+    }
+    // #endif
+  },
+  data() {
+    return {
+      showSelector: false,
+      inputVal: ''
+    };
+  },
+  computed: {
+    labelStyle() {
+      if (this.labelWidth === 'auto') {
+        return {};
+      }
+      return {
+        width: this.labelWidth
+      };
+    },
+    filterCandidates() {
+      return this.candidates.filter((item) => {
+        return item.toString().indexOf(this.inputVal) > -1;
+      });
+    },
+    filterCandidatesLength() {
+      return this.filterCandidates.length;
+    }
+  },
+  watch: {
+    // #ifndef VUE3
+    value: {
+      handler(newVal) {
+        this.inputVal = newVal;
+      },
+      immediate: true
+    },
+    // #endif
+    // #ifdef VUE3
+    modelValue: {
+      handler(newVal) {
+        this.inputVal = newVal;
+      },
+      immediate: true
+    }
+    // #endif
+  },
+  methods: {
+    toggleSelector() {
+      this.showSelector = !this.showSelector;
+    },
+    onFocus() {
+      this.showSelector = true;
+    },
+    onBlur() {
+      setTimeout(() => {
+        this.showSelector = false;
+      }, 153);
+    },
+    onSelectorClick(index) {
+      this.inputVal = this.filterCandidates[index];
+      this.showSelector = false;
+      this.$emit('input', this.inputVal);
+      this.$emit('update:modelValue', this.inputVal);
+    },
+    onInput() {
+      setTimeout(() => {
+        this.$emit('input', this.inputVal);
+        this.$emit('update:modelValue', this.inputVal);
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.uni-combox {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  height: 40px;
+  flex-direction: row;
+  align-items: center;
+}
+
+.uni-combox__label {
+  font-size: 16px;
+  line-height: 22px;
+  padding-right: 10px;
+  color: #999999;
+}
+
+.uni-combox__input-box {
+  position: relative;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex: 1;
+  flex-direction: row;
+  align-items: center;
+}
+
+.uni-combox__input {
+  flex: 1;
+  font-size: 16px;
+  height: 22px;
+  line-height: 22px;
+}
+
+.uni-combox__input-arrow {
+  padding: 10px;
+}
+
+.uni-combox__selector {
+  /* #ifndef APP-NVUE */
+  box-sizing: border-box;
+  /* #endif */
+  position: absolute;
+  top: 42px;
+  left: 0;
+  width: 100%;
+  background-color: #ffffff;
+  border-radius: 6px;
+  box-shadow: #dddddd 4px 4px 8px, #dddddd -4px -4px 8px;
+  z-index: 2;
+}
+
+.uni-combox__selector-scroll {
+  /* #ifndef APP-NVUE */
+  max-height: 200px;
+  box-sizing: border-box;
+  /* #endif */
+}
+
+.uni-combox__selector::before {
+  /* #ifndef APP-NVUE */
+  content: '';
+  /* #endif */
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-bottom: solid 6px #ffffff;
+  border-right: solid 6px transparent;
+  border-left: solid 6px transparent;
+  left: 50%;
+  top: -6px;
+  margin-left: -6px;
+}
+
+.uni-combox__selector-empty,
+.uni-combox__selector-item {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  cursor: pointer;
+  /* #endif */
+  line-height: 36px;
+  font-size: 14px;
+  text-align: center;
+  border-bottom: solid 1px #dddddd;
+  margin: 0px 10px;
+}
+
+.uni-combox__selector-empty:last-child,
+.uni-combox__selector-item:last-child {
+  /* #ifndef APP-NVUE */
+  border-bottom: none;
+  /* #endif */
+}
+</style>

package/ui-cv/cv-countdown/cv-countdown.vue

@@ -0,0 +1,245 @@
+<template>
+  <view class="uni-countdown">
+    <text
+      v-if="showDay"
+      :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }"
+      class="uni-countdown__number"
+    >
+      {{ d }}
+    </text>
+    <text v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">天</text>
+    <text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">
+      {{ h }}
+    </text>
+    <text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</text>
+    <text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">
+      {{ i }}
+    </text>
+    <text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</text>
+    <text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">
+      {{ s }}
+    </text>
+    <text v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">秒</text>
+  </view>
+</template>
+<script>
+/**
+ * Countdown 倒计时
+ * @description 倒计时组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=25
+ * @property {String} backgroundColor 背景色
+ * @property {String} color 文字颜色
+ * @property {Number} day 天数
+ * @property {Number} hour 小时
+ * @property {Number} minute 分钟
+ * @property {Number} second 秒
+ * @property {Number} timestamp 时间戳
+ * @property {Boolean} showDay = [true|false] 是否显示天数
+ * @property {Boolean} showColon = [true|false] 是否以冒号为分隔符
+ * @property {String} splitorColor 分割符号颜色
+ * @event {Function} timeup 倒计时时间到触发事件
+ * @example <cv-countdown :day="1" :hour="1" :minute="12" :second="40"></cv-countdown>
+ */
+export default {
+  name: 'cvCountdown',
+  emits: ['timeup'],
+  props: {
+    showDay: {
+      type: Boolean,
+      default: true
+    },
+    showColon: {
+      type: Boolean,
+      default: true
+    },
+    start: {
+      type: Boolean,
+      default: true
+    },
+    backgroundColor: {
+      type: String,
+      default: '#FFFFFF'
+    },
+    borderColor: {
+      type: String,
+      default: '#000000'
+    },
+    color: {
+      type: String,
+      default: '#000000'
+    },
+    splitorColor: {
+      type: String,
+      default: '#000000'
+    },
+    day: {
+      type: Number,
+      default: 0
+    },
+    hour: {
+      type: Number,
+      default: 0
+    },
+    minute: {
+      type: Number,
+      default: 0
+    },
+    second: {
+      type: Number,
+      default: 0
+    },
+    timestamp: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      timer: null,
+      syncFlag: false,
+      d: '00',
+      h: '00',
+      i: '00',
+      s: '00',
+      leftTime: 0,
+      seconds: 0
+    };
+  },
+  watch: {
+    day(val) {
+      this.changeFlag();
+    },
+    hour(val) {
+      this.changeFlag();
+    },
+    minute(val) {
+      this.changeFlag();
+    },
+    second(val) {
+      this.changeFlag();
+    },
+    start: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (newVal) {
+          this.startData();
+        } else {
+          if (!oldVal) return;
+          clearInterval(this.timer);
+        }
+      }
+    }
+  },
+  created: function (e) {
+    this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second);
+    this.countDown();
+  },
+  // #ifndef VUE3
+  destroyed() {
+    clearInterval(this.timer);
+  },
+  // #endif
+  // #ifdef VUE3
+  unmounted() {
+    clearInterval(this.timer);
+  },
+  // #endif
+  methods: {
+    toSeconds(timestamp, day, hours, minutes, seconds) {
+      if (timestamp) {
+        return timestamp - parseInt(new Date().getTime() / 1000, 10);
+      }
+      return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds;
+    },
+    timeUp() {
+      clearInterval(this.timer);
+      this.$emit('timeup');
+    },
+    countDown() {
+      let seconds = this.seconds;
+      let [day, hour, minute, second] = [0, 0, 0, 0];
+      if (seconds > 0) {
+        day = Math.floor(seconds / (60 * 60 * 24));
+        hour = Math.floor(seconds / (60 * 60)) - day * 24;
+        minute = Math.floor(seconds / 60) - day * 24 * 60 - hour * 60;
+        second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
+      } else {
+        this.timeUp();
+      }
+      if (day < 10) {
+        day = '0' + day;
+      }
+      if (hour < 10) {
+        hour = '0' + hour;
+      }
+      if (minute < 10) {
+        minute = '0' + minute;
+      }
+      if (second < 10) {
+        second = '0' + second;
+      }
+      this.d = day;
+      this.h = hour;
+      this.i = minute;
+      this.s = second;
+    },
+    startData() {
+      this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second);
+      if (this.seconds <= 0) {
+        return;
+      }
+      clearInterval(this.timer);
+      this.countDown();
+      this.timer = setInterval(() => {
+        this.seconds--;
+        if (this.seconds < 0) {
+          this.timeUp();
+          return;
+        }
+        this.countDown();
+      }, 1000);
+    },
+    changeFlag() {
+      if (!this.syncFlag) {
+        this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second);
+        this.startData();
+        this.syncFlag = true;
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+.uni-countdown {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  justify-content: flex-start;
+  padding: 2rpx 0;
+}
+
+.uni-countdown__splitor {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  justify-content: center;
+  line-height: 48rpx;
+  padding: 5rpx;
+  font-size: 12px;
+}
+
+.uni-countdown__number {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  justify-content: center;
+  align-items: center;
+  width: 52rpx;
+  height: 48rpx;
+  line-height: 48rpx;
+  margin: 5rpx;
+  text-align: center;
+  font-size: 12px;
+}
+</style>