@10yun/cv-mobile-ui 0.5.18 → 0.5.20

package/uni-ui/lib/uni-indexed-list/style.scss

@@ -0,0 +1,83 @@
+
+.uni-indexed-list {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+}
+
+.uni-indexed-list__scroll {
+  flex: 1;
+}
+
+.uni-indexed-list__menu {
+  width: 24px;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+}
+
+.uni-indexed-list__menu-item {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+}
+
+.uni-indexed-list__menu-text {
+  font-size: 12px;
+  text-align: center;
+  color: #aaa;
+}
+
+.uni-indexed-list__menu--active {
+  // background-color: rgb(200, 200, 200);
+}
+
+.uni-indexed-list__menu--active {
+}
+
+.uni-indexed-list__menu-text--active {
+  border-radius: 16px;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  background-color: #007aff;
+  color: #fff;
+}
+
+.uni-indexed-list__alert-wrapper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.uni-indexed-list__alert {
+  width: 80px;
+  height: 80px;
+  border-radius: 80px;
+  text-align: center;
+  line-height: 80px;
+  font-size: 35px;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.5);
+}

package/uni-ui/lib/uni-indexed-list/uni-indexed-list-item.vue

@@ -0,0 +1 @@
+<template>
  <view>
    <view v-if="loaded || list.itemIndex < 15" class="uni-indexed-list__title-wrapper">
      <text v-if="list.items && list.items.length > 0" class="uni-indexed-list__title">{{ list.key }}</text>
    </view>
    <view v-if="(loaded || list.itemIndex < 15) && list.items && list.items.length > 0" class="uni-indexed-list__list">
      <view
        v-for="(item, index) in list.items"
        :key="index"
        class="uni-indexed-list__item"
        hover-class="uni-indexed-list__item--hover"
      >
        <view class="uni-indexed-list__item-container" @click="onClick(idx, index)">
          <view
            class="uni-indexed-list__item-border"
            :class="{ 'uni-indexed-list__item-border--last': index === list.items.length - 1 }"
          >
            <view v-if="showSelect" style="margin-right: 20rpx">
              <uni-icons
                :type="item.checked ? 'checkbox-filled' : 'circle'"
                :color="item.checked ? '#007aff' : '#C0C0C0'"
                size="24"
              />
            </view>
            <text class="uni-indexed-list__item-content">{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
  name: 'UniIndexedList',
  emits: ['itemClick'],
  props: {
    loaded: {
      type: Boolean,
      default: false
    },
    idx: {
      type: Number,
      default: 0
    },
    list: {
      type: Object,
      default() {
        return {};
      }
    },
    showSelect: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onClick(idx, index) {
      this.$emit('itemClick', {
        idx,
        index
      });
    }
  }

package/uni-ui/lib/uni-indexed-list/uni-indexed-list.vue

@@ -0,0 +1 @@
+<template>
  <view class="uni-indexed-list" ref="list" id="list">
    <!-- #ifdef APP-NVUE -->
    <list class="uni-indexed-list__scroll" scrollable="true" show-scrollbar="false">
      <cell v-for="(list, idx) in lists" :key="idx" :ref="'uni-indexed-list-' + idx">
        <!-- #endif -->
        <!-- #ifndef APP-NVUE -->
        <scroll-view :scroll-into-view="scrollViewId" class="uni-indexed-list__scroll" scroll-y>
          <view v-for="(list, idx) in lists" :key="idx" :id="'uni-indexed-list-' + idx">
            <!-- #endif -->
            <indexed-list-item
              :list="list"
              :loaded="loaded"
              :idx="idx"
              :showSelect="showSelect"
              @itemClick="onClick"
            ></indexed-list-item>
            <!-- #ifndef APP-NVUE -->
          </view>
        </scroll-view>
        <!-- #endif -->
        <!-- #ifdef APP-NVUE -->
      </cell>
    </list>
    <!-- #endif -->
    <view
      class="uni-indexed-list__menu"
      @touchstart="touchStart"
      @touchmove.stop.prevent="touchMove"
      @touchend="touchEnd"
      @mousedown.stop="mousedown"
      @mousemove.stop.prevent="mousemove"
      @mouseleave.stop="mouseleave"
    >
      <view
        v-for="(list, key) in lists"
        :key="key"
        class="uni-indexed-list__menu-item"
        :class="touchmoveIndex == key ? 'uni-indexed-list__menu--active' : ''"
      >
        <text class="uni-indexed-list__menu-text" :class="touchmoveIndex == key ? 'uni-indexed-list__menu-text--active' : ''">
          {{ list.key }}
        </text>
      </view>
    </view>
    <view v-if="touchmove" class="uni-indexed-list__alert-wrapper">
      <text class="uni-indexed-list__alert">{{ lists[touchmoveIndex].key }}</text>
    </view>
  </view>
  var prev = Date.now();
  return function () {
    var context = this;
    var args = arguments;
    var now = Date.now();
    if (now - prev >= delay) {
      func.apply(context, args);
      prev = Date.now();
    }
  };
  let pageY = e.touches[0].pageY;
  let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight);
  if (this.touchmoveIndex === index) {
    return false;
  }
  let item = this.lists[index];
  if (item) {
    // #ifndef APP-NVUE
    this.scrollViewId = 'uni-indexed-list-' + index;
    this.touchmoveIndex = index;
    // #endif
    // #ifdef APP-NVUE
    dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
      animated: false
    });
    this.touchmoveIndex = index;
    // #endif
  }
 * IndexedList 索引列表
 * @description 用于展示索引列表
 * @tutorial https://ext.dcloud.net.cn/plugin?id=375
 * @property {Boolean} showSelect = [true|false] 展示模式
 * 	@value true 展示模式
 * 	@value false 选择模式
 * @property {Object} options 索引列表需要的数据对象
 * @event {Function} click 点击列表事件 ，返回当前选择项的事件对象
 * @example <uni-indexed-list options="" showSelect="false" @click=""></uni-indexed-list>
 */
  name: 'UniIndexedList',
  components: {
    indexedListItem
  },
  emits: ['click'],
  props: {
    options: {
      type: Array,
      default() {
        return [];
      }
    },
    showSelect: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      lists: [],
      winHeight: 0,
      itemHeight: 0,
      winOffsetY: 0,
      touchmove: false,
      touchmoveIndex: -1,
      scrollViewId: '',
      touchmovable: true,
      loaded: false,
      isPC: false
    };
  },
  watch: {
    options: {
      handler: function () {
        this.setList();
      },
      deep: true
    }
  },
  mounted() {
    // #ifdef H5
    this.isPC = this.IsPC();
    // #endif
    setTimeout(() => {
      this.setList();
    }, 50);
    setTimeout(() => {
      this.loaded = true;
    }, 300);
  },
  methods: {
    setList() {
      let index = 0;
      this.lists = [];
      this.options.forEach((value) => {
        if (value.data.length === 0) {
          return;
        }
        let indexBefore = index;
        let items = value.data.map((item) => {
          let obj = {};
          obj['key'] = value.letter;
          obj['name'] = item;
          obj['itemIndex'] = index;
          index++;
          obj.checked = item.checked ? item.checked : false;
          return obj;
        });
        this.lists.push({
          title: value.letter,
          key: value.letter,
          items: items,
          itemIndex: indexBefore
        });
      });
      // #ifndef APP-NVUE
      uni
        .createSelectorQuery()
        .in(this)
        .select('#list')
        .boundingClientRect()
        .exec((ret) => {
          this.winOffsetY = ret[0].top;
          this.winHeight = ret[0].height;
          this.itemHeight = this.winHeight / this.lists.length;
        });
      // #endif
      // #ifdef APP-NVUE
      dom.getComponentRect(this.$refs['list'], (res) => {
        this.winOffsetY = res.size.top;
        this.winHeight = res.size.height;
        this.itemHeight = this.winHeight / this.lists.length;
      });
      // #endif
    },
    touchStart(e) {
      this.touchmove = true;
      let pageY = this.isPC ? e.pageY : e.touches[0].pageY;
      let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight);
      let item = this.lists[index];
      if (item) {
        this.scrollViewId = 'uni-indexed-list-' + index;
        this.touchmoveIndex = index;
        // #ifdef APP-NVUE
        dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
          animated: false
        });
        // #endif
      }
    },
    touchMove(e) {
      // #ifndef APP-PLUS
      let pageY = this.isPC ? e.pageY : e.touches[0].pageY;
      let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight);
      if (this.touchmoveIndex === index) {
        return false;
      }
      let item = this.lists[index];
      if (item) {
        this.scrollViewId = 'uni-indexed-list-' + index;
        this.touchmoveIndex = index;
      }
      // #endif
      // #ifdef APP-PLUS
      throttleTouchMove.call(this, e);
      // #endif
    },
    touchEnd() {
      this.touchmove = false;
      // this.touchmoveIndex = -1
    },
    /**
     * 兼容 PC @tian
     */
    mousedown(e) {
      if (!this.isPC) return;
      this.touchStart(e);
    },
    mousemove(e) {
      if (!this.isPC) return;
      this.touchMove(e);
    },
    mouseleave(e) {
      if (!this.isPC) return;
      this.touchEnd(e);
    },
    // #ifdef H5
    IsPC() {
      var userAgentInfo = navigator.userAgent;
      var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
      var flag = true;
      for (let v = 0; v < Agents.length - 1; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    },
    // #endif
    onClick(e) {
      let { idx, index } = e;
      let obj = {};
      for (let key in this.lists[idx].items[index]) {
        obj[key] = this.lists[idx].items[index][key];
      }
      let select = [];
      if (this.showSelect) {
        this.lists[idx].items[index].checked = !this.lists[idx].items[index].checked;
        this.lists.forEach((value, idx) => {
          value.items.forEach((item, index) => {
            if (item.checked) {
              let obj = {};
              for (let key in this.lists[idx].items[index]) {
                obj[key] = this.lists[idx].items[index][key];
              }
              select.push(obj);
            }
          });
        });
      }
      this.$emit('click', {
        item: obj,
        select: select
      });
    }
  }

package/uni-ui/lib/uni-link/uni-link.vue

@@ -0,0 +1,140 @@
+<template>
+  <a
+    v-if="isShowA"
+    class="uni-link"
+    :href="href"
+    :class="{ 'uni-link--withline': showUnderLine === true || showUnderLine === 'true' }"
+    :style="{ color, fontSize: fontSize + 'px' }"
+    :download="download"
+  >
+    <slot>{{ text }}</slot>
+  </a>
+  <!-- #ifndef APP-NVUE -->
+  <text
+    v-else
+    class="uni-link"
+    :class="{ 'uni-link--withline': showUnderLine === true || showUnderLine === 'true' }"
+    :style="{ color, fontSize: fontSize + 'px' }"
+    @click="openURL"
+  >
+    <slot>{{ text }}</slot>
+  </text>
+  <!-- #endif -->
+  <!-- #ifdef APP-NVUE -->
+  <text
+    v-else
+    class="uni-link"
+    :class="{ 'uni-link--withline': showUnderLine === true || showUnderLine === 'true' }"
+    :style="{ color, fontSize: fontSize + 'px' }"
+    @click="openURL"
+  >
+    {{ text }}
+  </text>
+  <!-- #endif -->
+</template>
+<script>
+/**
+ * Link 外部网页超链接组件
+ * @description uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=1182
+ * @property {String} href 点击后打开的外部网页url
+ * @property {String} text 显示的文字
+ * @property {String} downlaod H5平台下载文件名
+ * @property {Boolean} showUnderLine 是否显示下划线
+ * @property {String} copyTips 在小程序端复制链接时显示的提示语
+ * @property {String} color 链接文字颜色
+ * @property {String} fontSize 链接文字大小
+ * @example * <uni-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn"></uni-link>
+ */
+export default {
+  name: 'uniLink',
+  props: {
+    href: {
+      type: String,
+      default: ''
+    },
+    text: {
+      type: String,
+      default: ''
+    },
+    download: {
+      type: String,
+      default: ''
+    },
+    showUnderLine: {
+      type: [Boolean, String],
+      default: true
+    },
+    copyTips: {
+      type: String,
+      default: '已自动复制网址，请在手机浏览器里粘贴该网址'
+    },
+    color: {
+      type: String,
+      default: '#999999'
+    },
+    fontSize: {
+      type: [Number, String],
+      default: 14
+    }
+  },
+  computed: {
+    isShowA() {
+      // #ifdef H5
+      this._isH5 = true;
+      // #endif
+      if ((this.isMail() || this.isTel()) && this._isH5 === true) {
+        return true;
+      }
+      return false;
+    }
+  },
+  created() {
+    this._isH5 = null;
+  },
+  methods: {
+    isMail() {
+      return this.href.startsWith('mailto:');
+    },
+    isTel() {
+      return this.href.startsWith('tel:');
+    },
+    openURL() {
+      // #ifdef APP-PLUS
+      if (this.isTel()) {
+        this.makePhoneCall(this.href.replace('tel:', ''));
+      } else {
+        plus.runtime.openURL(this.href);
+      }
+      // #endif
+      // #ifdef H5
+      window.open(this.href);
+      // #endif
+      // #ifdef MP
+      uni.setClipboardData({
+        data: this.href
+      });
+      uni.showModal({
+        content: this.copyTips,
+        showCancel: false
+      });
+      // #endif
+    },
+    makePhoneCall(phoneNumber) {
+      uni.makePhoneCall({
+        phoneNumber
+      });
+    }
+  }
+};
+</script>
+<style>
+/* #ifndef APP-NVUE */
+.uni-link {
+  cursor: pointer;
+}
+/* #endif */
+.uni-link--withline {
+  text-decoration: underline;
+}
+</style>

package/uni-ui/lib/uni-list/style.css

@@ -0,0 +1,43 @@
+.uni-list {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  background-color: #ffffff;
+  position: relative;
+  flex-direction: column;
+}
+.uni-list--border {
+  position: relative;
+  /* #ifdef APP-NVUE */
+  border-top-color: #e5e5e5;
+  border-top-style: solid;
+  border-top-width: 0.5px;
+  border-bottom-color: #e5e5e5;
+  border-bottom-style: solid;
+  border-bottom-width: 0.5px;
+  /* #endif */
+  z-index: -1;
+}
+/* #ifndef APP-NVUE */
+.uni-list--border-top {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 1px;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+  background-color: #e5e5e5;
+  z-index: 1;
+}
+.uni-list--border-bottom {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  height: 1px;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+  background-color: #e5e5e5;
+}
+/* #endif */

package/uni-ui/lib/uni-list/style.scss

@@ -0,0 +1,52 @@
+
+$uni-bg-color: #ffffff;
+$uni-border-color: #e5e5e5;
+
+.uni-list {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  background-color: $uni-bg-color;
+  position: relative;
+  flex-direction: column;
+}
+
+.uni-list--border {
+  position: relative;
+  /* #ifdef APP-NVUE */
+  border-top-color: $uni-border-color;
+  border-top-style: solid;
+  border-top-width: 0.5px;
+  border-bottom-color: $uni-border-color;
+  border-bottom-style: solid;
+  border-bottom-width: 0.5px;
+  /* #endif */
+  z-index: -1;
+}
+
+/* #ifndef APP-NVUE */
+
+.uni-list--border-top {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 1px;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+  background-color: $uni-border-color;
+  z-index: 1;
+}
+
+.uni-list--border-bottom {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  height: 1px;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+  background-color: $uni-border-color;
+}
+
+/* #endif */