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

package/ui-cv/cv-data-indexed-list/cv-data-indexed-list-item.vue

@@ -0,0 +1,154 @@
+<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.title }}</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">
+              <cv-icon2
+                :type="item.checked ? 'checkbox-filled' : 'circle'"
+                :color="item.checked ? '#007aff' : '#aaa'"
+                size="24"
+              />
+            </view>
+            <text class="uni-indexed-list__item-content">{{ item.text }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import cvIcon2 from '../cv-icon2/cv-icon2.vue';
+export default {
+  name: 'cvIndexedList',
+  components: {
+    cvIcon2
+  },
+  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
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.uni-indexed-list__list {
+  background-color: #ffffff;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-top-color: #e5e5e5;
+}
+
+.uni-indexed-list__item {
+  font-size: 16px;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.uni-indexed-list__item-container {
+  padding-left: 15px;
+  flex: 1;
+  position: relative;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  box-sizing: border-box;
+  /* #endif */
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.uni-indexed-list__item-border {
+  flex: 1;
+  position: relative;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  box-sizing: border-box;
+  /* #endif */
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 50px;
+  padding: 15px;
+  padding-left: 0;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: #e5e5e5;
+}
+
+.uni-indexed-list__item-border--last {
+  border-bottom-width: 0px;
+}
+
+.uni-indexed-list__item-content {
+  flex: 1;
+  font-size: 14px;
+}
+
+.uni-indexed-list {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+}
+
+.uni-indexed-list__title-wrapper {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  width: 100%;
+  /* #endif */
+  background-color: #f7f7f7;
+}
+
+.uni-indexed-list__title {
+  padding: 6px 12px;
+  line-height: 24px;
+  font-size: 12px;
+}
+</style>

package/ui-cv/cv-data-indexed-list/cv-data-indexed-list.vue

@@ -0,0 +1,376 @@
+<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 -->
+            <cv-indexed-list-item
+              :list="list"
+              :loaded="loaded"
+              :idx="idx"
+              :showSelect="showSelect"
+              @itemClick="onClick"
+            ></cv-indexed-list-item>
+            <!-- #ifndef APP-NVUE -->
+          </view>
+        </scroll-view>
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+      </cell>
+    </list>
+    <!-- #endif -->
+    <view
+      :class="touchmove ? 'uni-indexed-list__menu--active' : ''"
+      @touchstart="touchStart"
+      @touchmove.stop.prevent="touchMove"
+      @touchend="touchEnd"
+      class="uni-indexed-list__menu"
+    >
+      <view v-for="(list, key) in lists" :key="key" class="uni-indexed-list__menu-item">
+        <text class="uni-indexed-list__menu-text" :class="touchmoveIndex == key ? 'uni-indexed-list__menu-text--active' : ''">
+          {{ list.value }}
+        </text>
+      </view>
+    </view>
+    <view v-if="touchmove" class="uni-indexed-list__alert-wrapper">
+      <text class="uni-indexed-list__alert">{{ lists[touchmoveIndex] }}</text>
+    </view>
+  </view>
+</template>
+<script>
+import cvIcon2 from '../cv-icon2/cv-icon2.vue';
+import uniIndexedListItem from './cv-data-indexed-list-item.vue';
+import clientdb from './clientdb.js';
+// #ifdef APP-NVUE
+const dom = weex.requireModule('dom');
+// #endif
+// #ifdef APP-PLUS
+function throttle(func, delay) {
+  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();
+    }
+  };
+}
+
+function touchMove(e) {
+  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
+  }
+}
+const throttleTouchMove = throttle(touchMove, 40);
+// #endif
+
+/**
+ * IndexedList 索引列表
+ * @description 用于展示索引列表
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=375
+ * @property {Boolean} showSelect = [true|false] 展示模式
+ * 	@value true 展示模式
+ * 	@value false 选择模式
+ * @property {Object} options 索引列表需要的数据对象
+ * @property {String|DBCollectionString} collection 表名
+ * @property {String|ClientDBActionString} action 云端执行数据库查询的前或后，触发某个action函数操作，进行预处理或后处理
+ * @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
+ * @property {String} orderby 排序字段及正序倒叙设置
+ * @property {String|JQLString} where 查询条件
+ * @event {Function} click 点击列表事件 ，返回当前选择项的事件对象
+ * @example <cv-indexed-list options="" showSelect="false" @click=""></cv-indexed-list>
+ */
+export default {
+  name: 'cvDataIndexedList',
+  mixins: [clientdb],
+  components: {
+    cvIcon2,
+    uniIndexedListItem
+  },
+  props: {
+    options: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    localdata: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    showSelect: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      lists: [],
+      winHeight: 0,
+      itemHeight: 0,
+      winOffsetY: 0,
+      touchmove: false,
+      touchmoveIndex: -1,
+      scrollViewId: '',
+      touchmoveTimeout: '',
+      loaded: false
+    };
+  },
+  watch: {
+    options: {
+      handler: function () {
+        this.setList();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    if (this.localdata.length || this.options.length) {
+      setTimeout(() => {
+        this.setList();
+      }, 50);
+      setTimeout(() => {
+        this.loaded = true;
+      }, 300);
+    } else if (this.collection) {
+      if (!this.manual) {
+        this._execLoadData((data) => {
+          this.lists = this.groupData(data);
+        });
+      }
+    }
+  },
+  methods: {
+    groupData(data) {
+      let groups = {};
+      for (let i = 0; i < data.length; i++) {
+        let item = data[i];
+        let group = item.group;
+        if (!groups[group]) {
+          groups[group] = {
+            title: group,
+            value: group,
+            itemIndex: i,
+            items: []
+          };
+        }
+        groups[group].items.push(item);
+      }
+      let result = [];
+      for (let g in groups) {
+        let group = groups[g];
+        let items = group.items;
+        for (let j = 0; j < items.length; j++) {
+          items[j].itemIndex = j;
+        }
+        result.push(group);
+      }
+      return result;
+    },
+    setList(data) {
+      let index = 0;
+      this.lists = [];
+      this.options.forEach((value, index) => {
+        if (value.data.length === 0) {
+          return;
+        }
+        let indexBefore = index;
+        let items = value.data.map((item) => {
+          let obj = {};
+          obj['value'] = value.letter;
+          obj['text'] = item;
+          obj['itemIndex'] = index;
+          index++;
+          obj.checked = item.checked ? item.checked : false;
+          return obj;
+        });
+        this.lists.push({
+          title: value.letter,
+          value: 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 = 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 = 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;
+    },
+    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
+      });
+    }
+  }
+};
+</script>
+<style scoped>
+.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;
+  background-color: lightgrey;
+  /* #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;
+}
+
+.uni-indexed-list__menu-text {
+  line-height: 20px;
+  font-size: 12px;
+  text-align: center;
+  color: #aaa;
+}
+
+.uni-indexed-list__menu--active {
+  background-color: #c8c8c8;
+}
+
+.uni-indexed-list__menu-text--active {
+  color: #007aff;
+}
+
+.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);
+}
+</style>