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

package/uview-plus/components/u-waterfall/u-waterfall.vue

@@ -1,3 +1,221 @@
-<template>
  <view class="u-waterfall">
    <view ref="u-left-column" id="u-left-column" class="u-column">
      <slot name="left" :leftList="leftList"></slot>
    </view>
    <view ref="u-right-column" id="u-right-column" class="u-column">
      <slot name="right" :rightList="rightList"></slot>
    </view>
  </view>
 * waterfall 瀑布流
 * @description 这是一个瀑布流形式的组件，内容分为左右两列，结合uview的懒加载组件效果更佳。相较于某些只是奇偶数左右分别，或者没有利用vue作用域插槽的做法，uview的瀑布流实现了真正的 组件化，搭配LazyLoad 懒加载和loadMore 加载更多组件，让您开箱即用，眼前一亮。
 * @tutorial https://uview-plus.jiangruyi.com/components/waterfall.html
 * @property {Array} flow-list 用于渲染的数据
 * @property {String Number} add-time 单条数据添加到队列的时间间隔，单位ms，见上方注意事项说明（默认200）
 * @example <u-waterfall :flowList="flowList"></u-waterfall>
 */
  name: 'u-waterfall',
  props: {
    // #ifdef VUE2
    value: {
      // 瀑布流数据
      type: Array,
      required: true,
      default: function () {
        return [];
      }
    },
    // #endif
    // #ifdef VUE3
    modelValue: {
      // 瀑布流数据
      type: Array,
      required: true,
      default: function () {
        return [];
      }
    },
    // #endif
    // 每次向结构插入数据的时间间隔，间隔越长，越能保证两列高度相近，但是对用户体验越不好
    // 单位ms
    addTime: {
      type: [Number, String],
      default: 200
    },
    // id值，用于清除某一条数据时，根据此idKey名称找到并移除，如数据为{idx: 22, name: 'lisa'}
    // 那么该把idKey设置为idx
    idKey: {
      type: String,
      default: 'id'
    }
  },
  mixins: [mpMixin, mixin],
  data() {
    return {
      leftList: [],
      rightList: [],
      tempList: [],
      children: []
    };
  },
  watch: {
    copyFlowList(nVal, oVal) {
      if (!nVal || nVal.length == 0) {
        this.clear(false);
        // console.log('clear');
      } else {
        // 取差值，即这一次数组变化新增的部分
        let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
        // 拼接上原有数据
        this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
        this.splitData();
      }
    }
  },
  mounted() {
    this.tempList = this.cloneData(this.copyFlowList);
    this.splitData();
  },
  computed: {
    // 破坏flowList变量的引用，否则watch的结果新旧值是一样的
    copyFlowList() {
      // #ifdef VUE3
      if (!this.modelValue || this.modelValue.length == 0) {
        this.clear(false);
        // console.log('clear');
        return [];
      } else {
        return this.cloneData(this.modelValue);
      }
      // #endif
      // #ifdef VUE2
      return this.cloneData(this.value);
      // #endif
    }
  },
  emits: ['update:modelValue'],
  methods: {
    async splitData() {
      if (!this.tempList.length) return;
      let leftRect = await this.$uGetRect('#u-left-column');
      let rightRect = await this.$uGetRect('#u-right-column');
      // 如果左边小于或等于右边，就添加到左边，否则添加到右边
      let item = this.tempList[0];
      // 解决多次快速上拉后，可能数据会乱的问题，因为经过上面的两个await节点查询阻塞一定时间，加上后面的定时器干扰
      // 数组可能变成[]，导致此item值可能为undefined
      if (!item) return;
      if (leftRect.height < rightRect.height) {
        this.leftList.push(item);
      } else if (leftRect.height > rightRect.height) {
        this.rightList.push(item);
      } else {
        // 这里是为了保证第一和第二张添加时，左右都能有内容
        // 因为添加第一张，实际队列的高度可能还是0，这时需要根据队列元素长度判断下一个该放哪边
        if (this.leftList.length <= this.rightList.length) {
          this.leftList.push(item);
        } else {
          this.rightList.push(item);
        }
      }
      // 移除临时列表的第一项
      this.tempList.splice(0, 1);
      // 如果临时数组还有数据，继续循环
      if (this.tempList.length) {
        setTimeout(() => {
          this.splitData();
        }, this.addTime);
      }
    },
    // 复制而不是引用对象和数组
    cloneData(data) {
      return JSON.parse(JSON.stringify(data));
    },
    // 清空数据列表
    clear(bak = true) {
      this.leftList = [];
      this.rightList = [];
      // 同时清除父组件列表中的数据
      if (bak) {
        // #ifdef VUE2
        this.$emit('input', []);
        // #endif
        // #ifdef VUE3
        this.$emit('update:modelValue', []);
        // #endif
      }
      this.tempList = [];
    },
    // 清除某一条指定的数据，根据id实现
    remove(id) {
      // 如果findIndex找不到合适的条件，就会返回-1
      let index = -1;
      index = this.leftList.findIndex((val) => val[this.idKey] == id);
      if (index != -1) {
        // 如果index不等于-1，说明已经找到了要找的id，根据index索引删除这一条数据
        this.leftList.splice(index, 1);
      } else {
        // 同理于上方面的方法
        index = this.rightList.findIndex((val) => val[this.idKey] == id);
        if (index != -1) this.rightList.splice(index, 1);
      }
      // 同时清除父组件的数据中的对应id的条目
      // #ifdef VUE2
      index = this.value.findIndex((val) => val[this.idKey] == id);
      if (index != -1) this.$emit('input', this.value.splice(index, 1));
      // #endif
      // #ifdef VUE3
      index = this.modelValue.findIndex((val) => val[this.idKey] == id);
      if (index != -1) this.$emit('update:modelValue', this.modelValue.splice(index, 1));
      // #endif
    },
    // 修改某条数据的某个属性
    modify(id, key, value) {
      // 如果findIndex找不到合适的条件，就会返回-1
      let index = -1;
      index = this.leftList.findIndex((val) => val[this.idKey] == id);
      if (index != -1) {
        // 如果index不等于-1，说明已经找到了要找的id，修改对应key的值
        this.leftList[index][key] = value;
      } else {
        // 同理于上方面的方法
        index = this.rightList.findIndex((val) => val[this.idKey] == id);
        if (index != -1) this.rightList[index][key] = value;
      }
      // 修改父组件的数据中的对应id的条目
      // #ifdef VUE2
      index = this.value.findIndex((val) => val[this.idKey] == id);
      // #endif
      // #ifdef VUE3
      index = this.modelValue.findIndex((val) => val[this.idKey] == id);
      // #endif
      if (index != -1) {
        // 首先复制一份value的数据
        // #ifdef VUE2
        let data = this.cloneData(this.value);
        // #endif
        // #ifdef VUE3
        let data = this.cloneData(this.modelValue);
        // #endif
        // 修改对应索引的key属性的值为value
        data[index][key] = value;
        // 修改父组件通过v-model绑定的变量的值
        // #ifdef VUE2
        this.$emit('input', data);
        // #endif
        // #ifdef VUE3
        this.$emit('update:modelValue', data);
        // #endif
      }
    }
  }
-@import './style.css';
-</style>
+<template>
+  <view class="u-waterfall">
+    <view ref="u-left-column" id="u-left-column" class="u-column">
+      <slot name="left" :leftList="leftList"></slot>
+    </view>
+    <view ref="u-right-column" id="u-right-column" class="u-column">
+      <slot name="right" :rightList="rightList"></slot>
+    </view>
+  </view>
+</template>
+<script>
+/**
+ * waterfall 瀑布流
+ * @description 这是一个瀑布流形式的组件，内容分为左右两列，结合uview的懒加载组件效果更佳。相较于某些只是奇偶数左右分别，或者没有利用vue作用域插槽的做法，uview的瀑布流实现了真正的 组件化，搭配LazyLoad 懒加载和loadMore 加载更多组件，让您开箱即用，眼前一亮。
+ * @tutorial https://uview-plus.jiangruyi.com/components/waterfall.html
+ * @property {Array} flow-list 用于渲染的数据
+ * @property {String Number} add-time 单条数据添加到队列的时间间隔，单位ms，见上方注意事项说明（默认200）
+ * @example <up-waterfall :flowList="flowList"></up-waterfall>
+ */
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+export default {
+  name: 'u-waterfall',
+  props: {
+    // #ifdef VUE2
+    value: {
+      // 瀑布流数据
+      type: Array,
+      required: true,
+      default: function () {
+        return [];
+      }
+    },
+    // #endif
+    // #ifdef VUE3
+    modelValue: {
+      // 瀑布流数据
+      type: Array,
+      required: true,
+      default: function () {
+        return [];
+      }
+    },
+    // #endif
+    // 每次向结构插入数据的时间间隔，间隔越长，越能保证两列高度相近，但是对用户体验越不好
+    // 单位ms
+    addTime: {
+      type: [Number, String],
+      default: 200
+    },
+    // id值，用于清除某一条数据时，根据此idKey名称找到并移除，如数据为{idx: 22, name: 'lisa'}
+    // 那么该把idKey设置为idx
+    idKey: {
+      type: String,
+      default: 'id'
+    }
+  },
+  mixins: [mpMixin, mixin],
+  data() {
+    return {
+      leftList: [],
+      rightList: [],
+      tempList: [],
+      children: []
+    };
+  },
+  watch: {
+    copyFlowList(nVal, oVal) {
+      if (!nVal || nVal.length == 0) {
+        this.clear(false);
+        // console.log('clear');
+      } else {
+        // 取差值，即这一次数组变化新增的部分
+        let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
+        // 拼接上原有数据
+        this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
+        this.splitData();
+      }
+    }
+  },
+  mounted() {
+    this.tempList = this.cloneData(this.copyFlowList);
+    this.splitData();
+  },
+  computed: {
+    // 破坏flowList变量的引用，否则watch的结果新旧值是一样的
+    copyFlowList() {
+      // #ifdef VUE3
+      if (!this.modelValue || this.modelValue.length == 0) {
+        this.clear(false);
+        // console.log('clear');
+        return [];
+      } else {
+        return this.cloneData(this.modelValue);
+      }
+      // #endif
+      // #ifdef VUE2
+      return this.cloneData(this.value);
+      // #endif
+    }
+  },
+  emits: ['update:modelValue'],
+  methods: {
+    async splitData() {
+      if (!this.tempList.length) return;
+      let leftRect = await this.$uGetRect('#u-left-column');
+      let rightRect = await this.$uGetRect('#u-right-column');
+      // 如果左边小于或等于右边，就添加到左边，否则添加到右边
+      let item = this.tempList[0];
+      // 解决多次快速上拉后，可能数据会乱的问题，因为经过上面的两个await节点查询阻塞一定时间，加上后面的定时器干扰
+      // 数组可能变成[]，导致此item值可能为undefined
+      if (!item) return;
+      if (leftRect.height < rightRect.height) {
+        this.leftList.push(item);
+      } else if (leftRect.height > rightRect.height) {
+        this.rightList.push(item);
+      } else {
+        // 这里是为了保证第一和第二张添加时，左右都能有内容
+        // 因为添加第一张，实际队列的高度可能还是0，这时需要根据队列元素长度判断下一个该放哪边
+        if (this.leftList.length <= this.rightList.length) {
+          this.leftList.push(item);
+        } else {
+          this.rightList.push(item);
+        }
+      }
+      // 移除临时列表的第一项
+      this.tempList.splice(0, 1);
+      // 如果临时数组还有数据，继续循环
+      if (this.tempList.length) {
+        setTimeout(() => {
+          this.splitData();
+        }, this.addTime);
+      }
+    },
+    // 复制而不是引用对象和数组
+    cloneData(data) {
+      return JSON.parse(JSON.stringify(data));
+    },
+    // 清空数据列表
+    clear(bak = true) {
+      this.leftList = [];
+      this.rightList = [];
+      // 同时清除父组件列表中的数据
+      if (bak) {
+        // #ifdef VUE2
+        this.$emit('input', []);
+        // #endif
+        // #ifdef VUE3
+        this.$emit('update:modelValue', []);
+        // #endif
+      }
+      this.tempList = [];
+    },
+    // 清除某一条指定的数据，根据id实现
+    remove(id) {
+      // 如果findIndex找不到合适的条件，就会返回-1
+      let index = -1;
+      index = this.leftList.findIndex((val) => val[this.idKey] == id);
+      if (index != -1) {
+        // 如果index不等于-1，说明已经找到了要找的id，根据index索引删除这一条数据
+        this.leftList.splice(index, 1);
+      } else {
+        // 同理于上方面的方法
+        index = this.rightList.findIndex((val) => val[this.idKey] == id);
+        if (index != -1) this.rightList.splice(index, 1);
+      }
+      // 同时清除父组件的数据中的对应id的条目
+      // #ifdef VUE2
+      index = this.value.findIndex((val) => val[this.idKey] == id);
+      if (index != -1) this.$emit('input', this.value.splice(index, 1));
+      // #endif
+      // #ifdef VUE3
+      index = this.modelValue.findIndex((val) => val[this.idKey] == id);
+      if (index != -1) this.$emit('update:modelValue', this.modelValue.splice(index, 1));
+      // #endif
+    },
+    // 修改某条数据的某个属性
+    modify(id, key, value) {
+      // 如果findIndex找不到合适的条件，就会返回-1
+      let index = -1;
+      index = this.leftList.findIndex((val) => val[this.idKey] == id);
+      if (index != -1) {
+        // 如果index不等于-1，说明已经找到了要找的id，修改对应key的值
+        this.leftList[index][key] = value;
+      } else {
+        // 同理于上方面的方法
+        index = this.rightList.findIndex((val) => val[this.idKey] == id);
+        if (index != -1) this.rightList[index][key] = value;
+      }
+      // 修改父组件的数据中的对应id的条目
+      // #ifdef VUE2
+      index = this.value.findIndex((val) => val[this.idKey] == id);
+      // #endif
+      // #ifdef VUE3
+      index = this.modelValue.findIndex((val) => val[this.idKey] == id);
+      // #endif
+      if (index != -1) {
+        // 首先复制一份value的数据
+        // #ifdef VUE2
+        let data = this.cloneData(this.value);
+        // #endif
+        // #ifdef VUE3
+        let data = this.cloneData(this.modelValue);
+        // #endif
+        // 修改对应索引的key属性的值为value
+        data[index][key] = value;
+        // 修改父组件通过v-model绑定的变量的值
+        // #ifdef VUE2
+        this.$emit('input', data);
+        // #endif
+        // #ifdef VUE3
+        this.$emit('update:modelValue', data);
+        // #endif
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/index.js

@@ -50,7 +50,7 @@ export * from './libs/function/colorGradient.js';
 /**
  * 自定义方法
  */
-import cc from './libs/function/cc.js';
+import * as ctocode from './libs/ctocode/index.js';
 
 /**
  * @description 修改uView内置属性值
@@ -88,7 +88,7 @@ const $u = {
   ...index,
   color,
   platform,
-  ...cc
+  ...ctocode
 };
 
 export const mount$u = function () {
@@ -149,10 +149,12 @@ const install = (Vue, upuiParams = '') => {
   // 同时挂载到uni和Vue.prototype中
   // $u挂载到uni对象上
   uni.$u = $u;
+  uni.$up = $u;
 
   // #ifndef APP-NVUE
   // 只有vue，挂载到Vue.prototype才有意义，因为nvue中全局Vue.prototype和Vue.mixin是无效的
   Vue.config.globalProperties.$u = $u;
+  Vue.config.globalProperties.$up = $u;
   Vue.mixin(mixin);
   // #endif
 };

package/uview-plus/libs/ctocode/image.js

@@ -0,0 +1,17 @@
+/**
+ * @action 检测图片协议，主要用于检测海报图片协议。
+ * @param {String} imgPath 图片地址。
+ */
+export function checkImgHttp(imgPath) {
+  let newPath = '';
+  let pathArr = imgPath.split('://');
+  // #ifdef H5
+  let ishttps = 'https:' == window.location.protocol ? true : false;
+  ishttps ? (pathArr[0] = 'https') : (pathArr[0] = 'http');
+  // #endif
+  // #ifdef MP-WEIXIN
+  pathArr[0] = 'https';
+  // #endif
+  newPath = pathArr.join('://');
+  return newPath;
+}

package/uview-plus/libs/ctocode/index.js

@@ -0,0 +1,150 @@
+import { toast } from '../function/index.js';
+import { colorToRgba } from '../function/colorGradient.js';
+export function cc_toast(title, duration = 1600) {
+  toast(title, duration);
+}
+/**
+ * 判断是否为空
+ */
+export function isAllEmpty(value) {
+  switch (typeof value) {
+    case 'undefined':
+      return true;
+    case 'string':
+      if (value.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0) return true;
+      break;
+    case 'boolean':
+      if (!value) return true;
+      break;
+    case 'number':
+      if (value === 0 || isNaN(value)) return true;
+      break;
+    case 'object':
+      if (value === null || value.length === 0) return true;
+      for (const i in value) {
+        return false;
+      }
+      return true;
+  }
+  return false;
+}
+
+async function copyToClipboard(text, callSucc, callError) {
+  try {
+    await navigator.clipboard.writeText(text);
+    console.log('文本已复制到剪贴板');
+    callSucc('复制成功');
+    return true;
+  } catch (err) {
+    console.error('无法复制文本: ', err);
+    callError('复制失败');
+    return false;
+  }
+}
+/**
+ * 拨打电话
+ * @param {Number} phone
+ */
+export function cc_call_phone(phone) {
+  let phoneStr = phone.toString();
+  uni.makePhoneCall({
+    phoneNumber: phoneStr,
+    fail(err) {
+      console.log('makePhoneCall出错', err);
+    }
+  });
+}
+/**
+ * 复制
+ * @param {*} param0
+ */
+// export function cc_copy(content, callback) {
+export function cc_copy(data) {
+  if (typeof data == 'string') {
+    uni.setClipboardData({
+      data: data,
+      success: () => {
+        cc_toast('复制成功');
+      }
+    });
+  } else if (typeof data == 'object') {
+    let { content, success, error } = data;
+    console.log(content);
+    content = typeof content === 'string' ? content : content.toString(); // 复制内容，必须字符串，数字需要转换为字符串
+
+    /**
+     * 小程序端 和 app端的复制逻辑
+     */
+    //#ifndef H5
+    uni.setClipboardData({
+      data: content,
+      success: function () {
+        success && success('复制成功');
+        console.log('success');
+      },
+      fail: function () {
+        success && success('复制失败');
+      }
+    });
+    //#endif
+
+    /**
+     * H5端的复制逻辑
+     */
+    // #ifdef H5
+    copyToClipboard(content, success, error);
+    // #endif
+  }
+}
+
+/**
+ * px转rpx
+ */
+export function cc_pxToRpx() {
+  let scale = uni.upx2px(100) / 100;
+  return px / scale;
+}
+/**
+ *
+ * @param {*} rgba
+ * @returns
+ */
+export function cc_rgbaToRgb(rgba) {
+  if (rgba && rgba.startsWith('rgba')) {
+    // 检查输入是否为合法的RGBA格式
+    const rgbaValues = rgba.substring(rgba.indexOf('(') + 1, rgba.lastIndexOf(')')).split(',');
+    const rgbValues = rgbaValues.slice(0, 3); // 获取红色、绿色和蓝色通道的值
+    return `rgb(${rgbValues.join(',')})`; // 将三个通道的值合并为RGB颜色值
+  } else {
+    return rgba; // 如果输入的不是合法的RGBA格式，直接返回原值
+  }
+}
+export function cc_colorParseRgba(color, alpha) {
+  let color_rba = cc_rgbaToRgb(color);
+  return colorToRgba(color_rba, alpha);
+}
+
+/**
+ * 处理富文本里的图片宽度自适应
+ * 1.去掉img标签里的style、width、height属性
+ * 2.img标签添加style属性：max-width:100%;height:auto
+ * 3.修改所有style里的width属性为max-width:100%
+ * 4.去掉<br/>标签
+ * @param html
+ * @returns {void|string|*}
+ */
+export function cc_formatRichText(html) {
+  let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
+    match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
+    match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
+    match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
+    return match;
+  });
+  newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
+    match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi, 'width:100%;');
+    return match;
+  });
+  newContent = newContent.replace(/<br[^>]*\/>/gi, '');
+  newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:10px 0;"');
+  return newContent;
+}

package/uview-plus/libs/ctocode/map.js

@@ -0,0 +1,38 @@
+/**
+ * @action 坐标转换，腾讯地图转换成百度地图坐标
+ * @param {String} lng 腾讯经度（pointy）
+ * @param {String} lat 腾讯纬度（pointx）
+ * @return {Array} 经度,纬度
+ */
+export function qqMapToBdMap(lng, lat) {
+  if (lng == null || lng == '' || lat == null || lat == '') return [lng, lat];
+
+  var x_pi = 3.14159265358979324;
+  var x = parseFloat(lng);
+  var y = parseFloat(lat);
+  var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
+  var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
+  var lng = (z * Math.cos(theta) + 0.0065).toFixed(5);
+  var lat = (z * Math.sin(theta) + 0.006).toFixed(5);
+  return [lng, lat];
+}
+
+/**
+ * @action 坐标转换，百度地图坐标转换成腾讯地图坐标
+ * @param {String} lng 腾讯经度（pointy）
+ * @param {String} lat 腾讯纬度（pointx）
+ * @return {Array} 经度,纬度
+ */
+export function bdMapToQQMap(lng, lat) {
+  if (lng == null || lng == '' || lat == null || lat == '') return [lng, lat];
+
+  var x_pi = 3.14159265358979324;
+  var x = parseFloat(lng) - 0.0065;
+  var y = parseFloat(lat) - 0.006;
+  var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
+  var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
+  var lng = (z * Math.cos(theta)).toFixed(7);
+  var lat = (z * Math.sin(theta)).toFixed(7);
+
+  return [lng, lat];
+}