@10yun/cv-mobile-ui 0.5.27 → 0.5.30

package/ui-fireui/fui-datetime/fui-datetime.vue

@@ -0,0 +1,570 @@
+<template>
+  <view class="fui-datetime-picker">
+    <view
+      class="fui-mask"
+      :class="{ 'fui-mask-show': isShow }"
+      @touchmove.stop.prevent="stop"
+      catchtouchmove="stop"
+      @tap="hide"
+    ></view>
+    <view class="fui-header" :class="{ 'fui-show': isShow }">
+      <view class="fui-picker-header" :class="{ 'fui-date-radius': radius }" @touchmove.stop.prevent="stop" catchtouchmove="stop">
+        <view class="fui-btn-picker" :style="{ color: cancelColor }" hover-class="fui-opacity" :hover-stay-time="150" @tap="hide">
+          取消
+        </view>
+        <view class="fui-btn-picker" :style="{ color: color }" hover-class="fui-opacity" :hover-stay-time="150" @tap="btnFix">
+          确定
+        </view>
+      </view>
+      <view class="fui-date-header" v-if="unitTop">
+        <view class="fui-date-unit" v-if="type < 4 || type == 7">年</view>
+        <view class="fui-date-unit" v-if="type < 4 || type == 7">月</view>
+        <view class="fui-date-unit" v-if="type == 1 || type == 2 || type == 7">日</view>
+        <view class="fui-date-unit" v-if="type == 1 || type == 4 || type == 5 || type == 7">时</view>
+        <view class="fui-date-unit" v-if="type == 1 || type > 3">分</view>
+        <view class="fui-date-unit" v-if="type > 4">秒</view>
+      </view>
+      <view class="fui-picker-body">
+        <picker-view :value="value" @change="change" class="fui-picker-view">
+          <picker-view-column v-if="!reset && (type < 4 || type == 7)">
+            <view
+              class="fui-column-item"
+              :class="{ 'fui-font-size_32': !unitTop && type == 7 }"
+              v-for="(item, index) in years"
+              :key="index"
+            >
+              {{ item }}
+              <text class="fui-unit-text" v-if="!unitTop">年</text>
+            </view>
+          </picker-view-column>
+          <picker-view-column v-if="!reset && (type < 4 || type == 7)">
+            <view
+              class="fui-column-item"
+              :class="{ 'fui-font-size_32': !unitTop && type == 7 }"
+              v-for="(item, index) in months"
+              :key="index"
+            >
+              {{ formatNum(item) }}
+              <text class="fui-unit-text" v-if="!unitTop">月</text>
+            </view>
+          </picker-view-column>
+          <picker-view-column v-if="!reset && (type == 1 || type == 2 || type == 7)">
+            <view
+              class="fui-column-item"
+              :class="{ 'fui-font-size_32': !unitTop && type == 7 }"
+              v-for="(item, index) in days"
+              :key="index"
+            >
+              {{ formatNum(item) }}
+              <text class="fui-unit-text" v-if="!unitTop">日</text>
+            </view>
+          </picker-view-column>
+          <picker-view-column v-if="!reset && (type == 1 || type == 4 || type == 5 || type == 7)">
+            <view
+              class="fui-column-item"
+              :class="{ 'fui-font-size_32': !unitTop && type == 7 }"
+              v-for="(item, index) in hours"
+              :key="index"
+            >
+              {{ formatNum(item) }}
+              <text class="fui-unit-text" v-if="!unitTop">时</text>
+            </view>
+          </picker-view-column>
+          <picker-view-column v-if="!reset && (type == 1 || type > 3)">
+            <view
+              class="fui-column-item"
+              :class="{ 'fui-font-size_32': !unitTop && type == 7 }"
+              v-for="(item, index) in minutes"
+              :key="index"
+            >
+              {{ formatNum(item) }}
+              <text class="fui-unit-text" v-if="!unitTop">分</text>
+            </view>
+          </picker-view-column>
+          <picker-view-column v-if="!reset && type > 4">
+            <view
+              class="fui-column-item"
+              :class="{ 'fui-font-size_32': !unitTop && type == 7 }"
+              v-for="(item, index) in seconds"
+              :key="index"
+            >
+              {{ formatNum(item) }}
+              <text class="fui-unit-text" v-if="!unitTop">秒</text>
+            </view>
+          </picker-view-column>
+        </picker-view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiDatetime',
+  props: {
+    //1-日期+时间（年月日+时分） 2-日期(年月日) 3-日期(年月) 4-时间（时分） 5-时分秒 6-分秒 7-年月日 时分秒
+    type: {
+      type: Number,
+      default: 1
+    },
+    //年份区间
+    startYear: {
+      type: Number,
+      default: 1980
+    },
+    //年份区间
+    endYear: {
+      type: Number,
+      default: 2050
+    },
+    //"取消"字体颜色
+    cancelColor: {
+      type: String,
+      default: '#888'
+    },
+    //"确定"字体颜色
+    color: {
+      type: String,
+      default: '#5677fc'
+    },
+    //设置默认显示日期 2019-08-01 || 2019-08-01 17:01 || 2019/08/01
+    setDateTime: {
+      type: String,
+      default: ''
+    },
+    //单位置顶
+    unitTop: {
+      type: Boolean,
+      default: false
+    },
+    //圆角设置
+    radius: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isShow: false,
+      years: [],
+      months: [],
+      days: [],
+      hours: [],
+      minutes: [],
+      seconds: [],
+      year: 0,
+      month: 0,
+      day: 0,
+      hour: 0,
+      minute: 0,
+      second: 0,
+      startDate: '',
+      endDate: '',
+      value: [0, 0, 0, 0, 0, 0],
+      reset: false
+    };
+  },
+  mounted() {
+    this.initData();
+  },
+  computed: {
+    yearOrMonth() {
+      return `${this.year}-${this.month}`;
+    },
+    propsChange() {
+      return `${this.setDateTime}-${this.type}-${this.startYear}-${this.endYear}`;
+    }
+  },
+  watch: {
+    yearOrMonth() {
+      this.setDays();
+    },
+    propsChange() {
+      this.reset = true;
+      setTimeout(() => {
+        this.initData();
+      }, 10);
+    }
+  },
+  methods: {
+    stop() {},
+    formatNum(num) {
+      return num < 10 ? '0' + num : num + '';
+    },
+    generateArray(start, end) {
+      return Array.from(new Array(end + 1).keys()).slice(start);
+    },
+    getIndex(arr, val) {
+      let index = arr.indexOf(val);
+      return ~index ? index : 0;
+    },
+    //日期时间处理
+    initSelectValue() {
+      let fdate = this.setDateTime.replace(/\-/g, '/');
+      fdate = fdate && fdate.indexOf('/') == -1 ? `2020/01/01 ${fdate}` : fdate;
+      let time = null;
+      if (fdate) time = new Date(fdate);
+      else time = new Date();
+      this.year = time.getFullYear();
+      this.month = time.getMonth() + 1;
+      this.day = time.getDate();
+      this.hour = time.getHours();
+      this.minute = time.getMinutes();
+      this.second = time.getSeconds();
+    },
+    initData() {
+      this.initSelectValue();
+      this.reset = false;
+      switch (this.type) {
+        case 1:
+          this.value = [0, 0, 0, 0, 0];
+          this.setYears();
+          this.setMonths();
+          this.setDays();
+          this.setHours();
+          this.setMinutes();
+          break;
+        case 2:
+          this.value = [0, 0, 0];
+          this.setYears();
+          this.setMonths();
+          this.setDays();
+          break;
+        case 3:
+          this.value = [0, 0];
+          this.setYears();
+          this.setMonths();
+          break;
+        case 4:
+          this.value = [0, 0];
+          this.setHours();
+          this.setMinutes();
+          break;
+        case 5:
+          this.value = [0, 0, 0];
+          this.setHours();
+          this.setMinutes();
+          this.setSeconds();
+          break;
+        case 6:
+          this.value = [0, 0];
+          this.setMinutes();
+          this.setSeconds();
+          break;
+        case 7:
+          this.value = [0, 0, 0, 0, 0, 0];
+          this.setYears();
+          this.setMonths();
+          this.setDays();
+          this.setHours();
+          this.setMinutes();
+          this.setSeconds();
+          break;
+        default:
+          break;
+      }
+    },
+    setYears() {
+      this.years = this.generateArray(this.startYear, this.endYear);
+      setTimeout(() => {
+        this.value[0] = this.getIndex(this.years, this.year);
+      }, 8);
+    },
+    setMonths() {
+      this.months = this.generateArray(1, 12);
+      setTimeout(() => {
+        this.value[1] = this.getIndex(this.months, this.month);
+      }, 8);
+    },
+    setDays() {
+      if (this.type == 3 || this.type == 4) return;
+      let totalDays = new Date(this.year, this.month, 0).getDate();
+      this.days = this.generateArray(1, totalDays);
+      setTimeout(() => {
+        this.value[2] = this.getIndex(this.days, this.day);
+      }, 8);
+    },
+    setHours() {
+      this.hours = this.generateArray(0, 23);
+      setTimeout(() => {
+        let index = this.type == 5 || this.type == 7 ? this.value.length - 3 : this.value.length - 2;
+        this.value[index] = this.getIndex(this.hours, this.hour);
+      }, 8);
+    },
+    setMinutes() {
+      this.minutes = this.generateArray(0, 59);
+      setTimeout(() => {
+        let index = this.type > 4 ? this.value.length - 2 : this.value.length - 1;
+        this.value[index] = this.getIndex(this.minutes, this.minute);
+      }, 8);
+    },
+    setSeconds() {
+      this.seconds = this.generateArray(0, 59);
+      setTimeout(() => {
+        this.value[this.value.length - 1] = this.getIndex(this.seconds, this.second);
+      }, 8);
+    },
+    show() {
+      setTimeout(() => {
+        this.isShow = true;
+      }, 50);
+    },
+    hide() {
+      this.isShow = false;
+    },
+    change(e) {
+      this.value = e.detail.value;
+      switch (this.type) {
+        case 1:
+          this.year = this.years[this.value[0]];
+          this.month = this.months[this.value[1]];
+          this.day = this.days[this.value[2]];
+          this.hour = this.hours[this.value[3]];
+          this.minute = this.minutes[this.value[4]];
+          break;
+        case 2:
+          this.year = this.years[this.value[0]];
+          this.month = this.months[this.value[1]];
+          this.day = this.days[this.value[2]];
+          break;
+        case 3:
+          this.year = this.years[this.value[0]];
+          this.month = this.months[this.value[1]];
+          break;
+        case 4:
+          this.hour = this.hours[this.value[0]];
+          this.minute = this.minutes[this.value[1]];
+          break;
+        case 5:
+          this.hour = this.hours[this.value[0]];
+          this.minute = this.minutes[this.value[1]];
+          this.second = this.seconds[this.value[2]];
+          break;
+        case 6:
+          this.minute = this.minutes[this.value[0]];
+          this.second = this.seconds[this.value[1]];
+          break;
+        case 7:
+          this.year = this.years[this.value[0]];
+          this.month = this.months[this.value[1]];
+          this.day = this.days[this.value[2]];
+          this.hour = this.hours[this.value[3]];
+          this.minute = this.minutes[this.value[4]];
+          this.second = this.seconds[this.value[5]];
+          break;
+        default:
+          break;
+      }
+    },
+    btnFix() {
+      setTimeout(() => {
+        let result = {};
+        let year = this.year;
+        let month = this.formatNum(this.month || 0);
+        let day = this.formatNum(this.day || 0);
+        let hour = this.formatNum(this.hour || 0);
+        let minute = this.formatNum(this.minute || 0);
+        let second = this.formatNum(this.second || 0);
+        switch (this.type) {
+          case 1:
+            result = {
+              year: year,
+              month: month,
+              day: day,
+              hour: hour,
+              minute: minute,
+              result: `${year}-${month}-${day} ${hour}:${minute}`
+            };
+            break;
+          case 2:
+            result = {
+              year: year,
+              month: month,
+              day: day,
+              result: `${year}-${month}-${day}`
+            };
+            break;
+          case 3:
+            result = {
+              year: year,
+              month: month,
+              result: `${year}-${month}`
+            };
+            break;
+          case 4:
+            result = {
+              hour: hour,
+              minute: minute,
+              result: `${hour}:${minute}`
+            };
+            break;
+          case 5:
+            result = {
+              hour: hour,
+              minute: minute,
+              second: second,
+              result: `${hour}:${minute}:${second}`
+            };
+            break;
+          case 6:
+            result = {
+              minute: minute,
+              second: second,
+              result: `${minute}:${second}`
+            };
+            break;
+          case 7:
+            result = {
+              year: year,
+              month: month,
+              day: day,
+              hour: hour,
+              minute: minute,
+              second: second,
+              result: `${year}-${month}-${day} ${hour}:${minute}:${second}`
+            };
+            break;
+          default:
+            break;
+        }
+        this.$emit('confirm', result);
+        this.hide();
+      }, 80);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-datetime-picker {
+  position: relative;
+  z-index: 999;
+}
+
+.fui-picker-view {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.fui-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  visibility: hidden;
+  opacity: 0;
+  transition: all 0.3s ease-in-out;
+}
+
+.fui-mask-show {
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+.fui-header {
+  z-index: 9999;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  transition: all 0.3s ease-in-out;
+  transform: translateY(100%);
+}
+
+.fui-date-header {
+  width: 100%;
+  height: 52rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #fff;
+  font-size: 26rpx;
+  line-height: 26rpx;
+  color: #555;
+  /* #ifdef MP */
+  box-shadow: 0 15rpx 10rpx -15rpx #efefef;
+  /* #endif */
+  /* #ifndef MP */
+  box-shadow: 0 15rpx 10rpx -15rpx #888;
+  /* #endif */
+  position: relative;
+  z-index: 2;
+}
+
+.fui-date-unit {
+  flex: 1;
+  text-align: center;
+}
+
+.fui-show {
+  transform: translateY(0);
+}
+
+.fui-picker-header {
+  width: 100%;
+  height: 90rpx;
+  padding: 0 40rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  font-size: 32rpx;
+  background-color: #fff;
+  position: relative;
+}
+
+.fui-date-radius {
+  border-top-left-radius: 20rpx;
+  border-top-right-radius: 20rpx;
+  overflow: hidden;
+}
+
+.fui-picker-header::after {
+  content: '';
+  position: absolute;
+  border-bottom: 1rpx solid #eaeef1;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+
+.fui-picker-body {
+  width: 100%;
+  height: 520rpx;
+  overflow: hidden;
+  background-color: #fff;
+}
+
+.fui-column-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 36rpx;
+  color: #333;
+}
+
+.fui-font-size_32 {
+  font-size: 32rpx !important;
+}
+
+.fui-unit-text {
+  font-size: 24rpx !important;
+  padding-left: 8rpx;
+}
+
+.fui-btn-picker {
+  padding: 16rpx;
+  box-sizing: border-box;
+  text-align: center;
+  text-decoration: none;
+}
+
+.fui-opacity {
+  opacity: 0.5;
+}
+</style>

package/ui-fireui/fui-divider/fui-divider.vue

@@ -0,0 +1,118 @@
+<template>
+  <view class="fui-divider" :style="{ height: height + 'rpx' }">
+    <view class="fui-divider-line" :style="{ width: width, background: getBgColor(gradual, gradualColor, dividerColor) }"></view>
+    <view
+      class="fui-divider-text"
+      :style="{
+        color: color,
+        fontSize: size + 'rpx',
+        lineHeight: size + 'rpx',
+        backgroundColor: backgroundColor,
+        fontWeight: bold ? 'bold' : 'normal'
+      }"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiDivider',
+  props: {
+    //divider占据高度
+    height: {
+      type: Number,
+      default: 100
+    },
+    //divider宽度，可填写具体长度，如400rpx
+    width: {
+      type: String,
+      default: '100%'
+    },
+    //divider颜色，如果为渐变线条，此属性失效
+    dividerColor: {
+      type: String,
+      default: '#e5e5e5'
+    },
+    //文字颜色
+    color: {
+      type: String,
+      default: '#999'
+    },
+    //文字大小 rpx
+    size: {
+      type: Number,
+      default: 24
+    },
+    bold: {
+      type: Boolean,
+      default: false
+    },
+    //背景颜色，和当前页面背景色保持一致
+    backgroundColor: {
+      type: String,
+      default: '#fafafa'
+    },
+    //是否为渐变线条，为true，divideColor失效
+    gradual: {
+      type: Boolean,
+      default: false
+    },
+    //渐变色值，to right ，提供两个色值即可，由浅至深
+    gradualColor: {
+      type: Array,
+      default: () => {
+        return ['#eee', '#ccc'];
+      }
+    }
+  },
+  methods: {
+    getBgColor(gradual, gradualColor, dividerColor) {
+      let bgColor = dividerColor;
+      if (gradual) {
+        bgColor =
+          'linear-gradient(to right,' +
+          gradualColor[0] +
+          ',' +
+          gradualColor[1] +
+          ',' +
+          gradualColor[1] +
+          ',' +
+          gradualColor[0] +
+          ')';
+      }
+      return bgColor;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-divider {
+  width: 100%;
+  position: relative;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.fui-divider-line {
+  position: absolute;
+  height: 1rpx;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: scaleY(0.5) translateX(-50%) translateZ(0);
+  transform: scaleY(0.5) translateX(-50%) translateZ(0);
+}
+
+.fui-divider-text {
+  position: relative;
+  text-align: center;
+  padding: 0 18rpx;
+  z-index: 1;
+}
+</style>