feat: 增加loading组件

animation.scss

@@ -248,3 +248,13 @@
     transform: translateX(100%);
   }
 }
+
+@keyframes circle {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

components/pi-loading/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <view v-if="show" class="pi-loading" :class="{ vertical: vertical }" :style="{ color: color }">
+    <view v-if="type === 'circle'" class="loading-circle" :style="[cricleStyle]" />
+    <view v-if="type === 'spinner'" class="loading-spinner" :style="[cricleStyle]">
+      <view v-for="line of 12" :key="line" />
+    </view>
+    <view v-if="$slots.default" class="slot"><slot /></view>
+  </view>
+</template>
+
+<script>
+import { getConfig } from '../../config'
+const TAG = 'PiLoading'
+const { loading } = getConfig()
+
+export default {
+  name: TAG,
+  props: {
+    // 是否显示loading
+    show: {
+      type: Boolean,
+      default: false
+    },
+    // 颜色
+    color: {
+      type: String,
+      default: loading.color
+    },
+    // 类型： spinner 菊花 circular 圆环
+    type: {
+      type: String,
+      default: loading.type,
+      validator: function(value) {
+        return ['spinner', 'circular'].includes(value)
+      }
+    },
+    // 尺寸，默认38rpx
+    size: {
+      type: [String, Number],
+      default: loading.size
+    },
+    // 是否垂直排列
+    vertical: {
+      type: Boolean,
+      default: loading.vertical
+    },
+    // 尺寸，默认38rpx
+    textSize: {
+      type: [String, Number],
+      default: loading.textSize
+    },
+    // 文字样式
+    textStyle: {
+      type: Object,
+      default() {
+        return loading.textStyle
+      }
+    },
+    // 整个loading自定义样式
+    customStyle: {
+      type: Object,
+      default() {
+        return loading.customStyle
+      }
+    }
+  },
+  computed: {
+    getSize() {
+      return this.$piTools.common.addUnit(this.size)
+    },
+    getTextSize() {
+      return this.$piTools.common.addUnit(this.textSize)
+    },
+    // 加载中圆圈动画的样式
+    cricleStyle() {
+      const style = {
+        width: this.getSize,
+        height: this.getSize
+      }
+      if (this.type == 'circle')
+        style.borderColor = `#e4e4e4 #e4e4e4 #e4e4e4 ${this.color ? this.color : '#c7c7c7'}`
+      return style
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pi-loading {
+  display: inline-block;
+  .slot {
+    display: inline-block;
+    margin-left: 12rpx;
+  }
+  &.vertical {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    .slot {
+      margin-top: 12rpx;
+    }
+  }
+}
+.loading-circle {
+  display: inline-block;
+  width: 28rpx;
+  height: 28rpx;
+  vertical-align: middle;
+  background: 0 0;
+  border: 2px solid;
+  border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
+  border-radius: 50%;
+  animation: circle 1s linear infinite;
+}
+
+.loading-spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+  animation: circle 1s steps(12) infinite;
+  view {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    &::before {
+      display: block;
+      width: 2px;
+      height: 25%;
+      margin: 0 auto;
+      content: ' ';
+      background-color: currentColor;
+    }
+  }
+
+  @for $i from 1 through 12 {
+    view:nth-of-type(#{$i}) {
+      opacity: 1 - (0.75 / 12) * ($i - 1);
+      transform: rotate($i * 30deg);
+    }
+  }
+}
+</style>

components/pi-search/index.vue

@@ -178,12 +178,15 @@ export default {
     }
   },
   computed: {
+    getHeight() {
+      return this.$piTools.common.addUnit(this.height)
+    },
     mergeInputStyle() {
       return {
         textAlign: this.inputAlign,
         color: this.color,
         background: this.background,
-        height: `${this.height}rpx`,
+        height: this.getHeight,
         ...this.inputStyle
       }
     },

config/loading.js

@@ -0,0 +1,9 @@
+export default {
+  color: '#c1c1c1', // j颜色
+  type: 'spinner', // 类型： spinner 菊花 circular 圆环
+  size: 38, // 尺寸，默认38rpx
+  vertical: false, // 是否垂直排列
+  textSize: '28rpx', // 文字尺寸，默认28rpx
+  textStyle: {}, // 文字样式
+  customStyle: {} // 整个loading自定义样式
+}

tools/common.js

@@ -1,3 +1,4 @@
+import { isNumber } from './validate'
 /**
  * 动态import文件
  * 默认取export default对象，如果export default对象不存在的情况下，取本身的export
@@ -27,10 +28,15 @@ export const dynamicImport = (context, excludeIndex = true) => {
  * @return {number}    如果原始版本大于目标版本，则返回大于0的数值, 如果原始小于目标版本则返回小于0的数值。0当然是两个版本都相等拉。
  */
 
-export function compareVersion(v1, v2) {
+export const compareVersion = (v1, v2) => {
   var _v1 = v1.split('.'),
     _v2 = v2.split('.'),
     _r = _v1[0] - _v2[0]
 
   return _r == 0 && v1 != v2 ? compareVersion(_v1.splice(1).join('.'), _v2.splice(1).join('.')) : _r
 }
+
+// 添加单位，如果非数值类型，直接返回，否则加上rpx单位结尾
+export const addUnit = (value = 'auto', unit = 'rpx') => {
+  return isNumber(String(value)) ? `${value}${unit}` : value
+}

tools/validate.js

@@ -0,0 +1,146 @@
+/**
+ * 验证电子邮箱格式
+ */
+export const isEmail = value => {
+  return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value)
+}
+
+/**
+ * 验证手机格式
+ */
+export const isMobile = value => {
+  return /^1[23456789]\d{9}$/.test(value)
+}
+
+/**
+ * 验证URL格式
+ */
+export const isUrl = value => {
+  return /^((https|http|ftp|rtsp|mms):\/\/)(([0-9a-zA-Z_!~*'().&=+$%-]+: )?[0-9a-zA-Z_!~*'().&=+$%-]+@)?(([0-9]{1,3}.){3}[0-9]{1,3}|([0-9a-zA-Z_!~*'()-]+.)*([0-9a-zA-Z][0-9a-zA-Z-]{0,61})?[0-9a-zA-Z].[a-zA-Z]{2,6})(:[0-9]{1,4})?((\/?)|(\/[0-9a-zA-Z_!~*'().;?:@&=+$,%#-]+)+\/?)$/.test(
+    value
+  )
+}
+
+/**
+ * 验证日期格式
+ */
+export const isDate = value => {
+  return !/Invalid|NaN/.test(new Date(value).toString())
+}
+
+/**
+ * 验证ISO类型的日期格式
+ */
+export const isDateISO = value => {
+  return /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test(value)
+}
+
+/**
+ * 验证十进制数字
+ */
+export const isNumber = value => {
+  return /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value)
+}
+
+/**
+ * 验证整数
+ */
+export const isDigits = value => {
+  return /^\d+$/.test(value)
+}
+
+/**
+ * 验证身份证号码
+ */
+export const isIdCard = value => {
+  return /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)
+}
+
+/**
+ * 是否车牌号
+ */
+export const isCarNo = value => {
+  // 新能源车牌
+  const xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/
+  // 旧车牌
+  const creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/
+  if (value.length === 7) {
+    return creg.test(value)
+  } else if (value.length === 8) {
+    return xreg.test(value)
+  } else {
+    return false
+  }
+}
+
+/**
+ * 金额,只允许2位小数
+ */
+export const isAmount = value => {
+  // 金额，只允许保留两位小数
+  return /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(value)
+}
+
+/**
+ * 中文
+ */
+export const isChinese = value => {
+  let reg = /^[\u4e00-\u9fa5]+$/gi
+  return reg.test(value)
+}
+
+/**
+ * 只能输入字母
+ */
+export const letter = value => {
+  return /^[a-zA-Z]*$/.test(value)
+}
+
+/**
+ * 只能是字母或者数字
+ */
+export const isEnOrNum = value => {
+  // 英文或者数字
+  let reg = /^[0-9a-zA-Z]*$/g
+  return reg.test(value)
+}
+
+/**
+ * 验证一个值范围[min, max]
+ */
+export const range = (value, param) => {
+  return value >= param[0] && value <= param[1]
+}
+
+/**
+ * 验证一个长度范围[min, max]
+ */
+export const rangeLength = (value, param) => {
+  return value.length >= param[0] && value.length <= param[1]
+}
+
+/**
+ * 判断是否为空
+ */
+export const isEmpty = 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 (0 === value || isNaN(value)) return true
+      break
+    case 'object':
+      if (null === value || value.length === 0) return true
+      for (var i in value) {
+        return false
+      }
+      return true
+  }
+  return false
+}