feat(design,utils):新增工具函数和样式

src/App.vue

@@ -22,6 +22,7 @@
 
 <style lang="scss">
   @import 'uview-ui/index.scss';
+  @import 'design/index.scss';
   @import url('design/common.css');
 
   page {

src/design/common.css

@@ -112,7 +112,7 @@
      外边距
  ==================== */
 
- .margin-0 {
+.margin-0 {
   margin: 0;
 }
 
@@ -274,7 +274,7 @@
      内边距
  ==================== */
 
- .padding-0 {
+.padding-0 {
   padding: 0;
 }
 
@@ -432,12 +432,11 @@
   padding-bottom: 50upx;
 }
 
-
 /* ==================
      文字
  ==================== */
 
- .text-xs {
+.text-xs {
   font-size: 20upx;
 }
 
@@ -610,15 +609,3 @@
 .lines-white {
   color: #ffffff;
 }
-
-/* ==================
-     公共
- ==================== */
-
- /* 省略号*/
-.apostrophe {
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}

src/design/index.scss

@@ -0,0 +1,119 @@
+/*==================================================================
+                    定义代码显示的行数，超出使用...代替
+  =================================================================*/
+@for $i from 1 through 10 {
+  // text-cut-1 限制1行显示...
+  // text-cut-2 限制2行显示...
+  .text-cut-#{$i} {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: $i;
+    -webkit-box-orient: vertical;
+  }
+}
+
+
+/*==================================================================
+                         设置字体大小的样式
+  =================================================================*/
+  @for $i from 0 to 100 {
+    .f-s-#{$i} {
+      font-size: $i + rpx;
+    }
+  }
+
+
+/*==================================================================
+                         设置边框圆角class
+  =================================================================*/
+
+@for $i from 0 to 100 {
+  //边框圆角 u-br-10 得出：border-radius : 10rpx;
+  .u-br-#{$i} {
+    border-radius: $i + rpx !important;
+  }
+  //左上边框圆角 u-br-t-l-10 得出：border-top-left-radius : 10rpx;
+  .u-br-t-l-#{$i} {
+    border-top-left-radius: $i + rpx;
+  }
+  //右上边框圆角 u-br-t-r-10 得出：border-top-right-radius : 10rpx;
+  .u-br-t-r-#{$i} {
+    border-top-right-radius: $i + rpx;
+  }
+  //左下边框圆角 u-br-b-l-10 得出：border-bottom-left-radius : 10rpx;
+  .u-br-b-l-#{$i} {
+    border-bottom-left-radius: $i + rpx;
+  }
+  //右下边框圆角 u-br-b-r-10 得出：border-bottom-right-radius : 10rpx;
+  .u-br-b-r-#{$i} {
+    border-bottom-right-radius: $i + rpx;
+  }
+}
+
+/*==================================================================
+                  定义内外边距class，历遍 1-100
+  =================================================================*/
+
+@for $i from 0 through 200 {
+  // 只要双数和能被5除尽的数
+  @if $i % 2 == 0 or $i % 5 == 0 {
+    // 定义字体(rpx)单位，大于或等于10的都为rpx单位字体
+    // u-font-10 得出：font-size : 10rpx;
+    .u-font-#{$i} {
+      font-size: $i + rpx !important;
+    }
+    // u-m-10 得出：margin : 10rpx;
+    .u-m-#{$i} {
+      margin: $i + rpx !important;
+    }
+    // u-p-10 得出：padding : 10rpx;
+    .u-p-#{$i} {
+      padding: $i + rpx !important;
+    }
+    // Jane：@each 指令的格式是 $var in <list>, $var 可以是任何变量名， <list> 是一连串的值，也就是值列表。
+    @each $short, $long in (t top, r right, b bottom, l left) {
+      /**
+       * 定义外边距
+       * u-m-t-10 得出：margin-top : 10rpx;
+       * u-m-r-10 得出：margin-right : 10rpx;
+       * u-m-b-10 得出：margin-bottom : 10rpx;
+       * u-m-l-10 得出：margin-left : 10rpx;
+       */
+      .u-m-#{$short}-#{$i} {
+        margin-#{$long}: $i + rpx !important;
+      }
+      /**
+       * 定义内边距
+       * u-p-t-10 得出：padding-top : 10rpx;
+       * u-p-r-10 得出：padding-right : 10rpx;
+       * u-p-b-10 得出：padding-bottom : 10rpx;
+       * u-p-l-10 得出：padding-left : 10rpx;
+       */
+      .u-p-#{$short}-#{$i} {
+        padding-#{$long}: $i + rpx !important;
+      }
+    }
+    @each $short, $long, $short1, $long1 in (t top b bottom, l left r right) {
+      /**
+       * 定义外边距
+       * u-m-t-b-10 得出：margin-top : 10rpx; margin-bottom : 10rpx;
+       * u-m-l-r-10 得出：margin-left : 10rpx; margin-right : 10rpx;
+       */
+      .u-m-#{$short}-#{$short1}-#{$i} {
+        margin-#{$long}: $i + rpx !important;
+        margin-#{$long1}: $i + rpx !important;
+      }
+      /**
+       * 定义内边距
+       * u-p-t-b-10 得出：padding-top : 10rpx; padding-bottom : 10rpx;
+       * u-p-l-r-10 得出：padding-left : 10rpx; padding-right : 10rpx;
+       */
+      .u-p-#{$short}-#{$short1}-#{$i} {
+        padding-#{$long}: $i + rpx !important;
+        padding-#{$long1}: $i + rpx !important;
+      }
+    }
+  }
+}
+

src/pages/client/clientPackage/message/benefits/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="benefits">
-    <view class="list chelvc-flex" v-for="item in 10">
+    <view class="list chelvc-flex" v-for="(item, index) in 10" :key="index">
       <view class="img">
         <image src="/static/logo.png" mode="scaleToFill" />
       </view>
@@ -95,4 +95,11 @@ export default {};
     }
   }
 }
+
+.apostrophe {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
 </style>

src/pages/client/clientPackage/message/evaluateNotice/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="evaluateNotice">
-    <view class="list" v-for="item in 6">
+    <view class="list" v-for="(item, index) in 6" :key="index">
       <view class="chelvc-flex-item">
         <view class="chelvc-flex">
           <image

src/pages/client/clientPackage/message/orderNotice/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="orderNotice">
-    <view class="order-list" v-for="item in 5">
+    <view class="order-list" v-for="(item,index) in 5" :key="index">
       <view class="chelvc-flex-item order-top">
         <view class="chelvc-flex chelvc-chelvc-align-center">
           <image src="/static/logo.png" mode="scaleToFill" />
@@ -36,6 +36,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+.apostrophe {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
 .orderNotice {
   min-height: 100vh;
   padding: 20rpx;

src/utils/tools.js

@@ -1,25 +1,24 @@
 /**
  * @description  tree的处理
- * @param {Array} data 
- * @returns 
+ * @param {Array} data
+ * @returns
  */
 
 export function buildTree(data) {
   const tree = {};
-
   data.forEach(item => {
     const code = item.type.code;
     const node = {
       icon: item.icon,
       id: item.id,
-      name: item.name
+      name: item.name,
     };
 
     if (!tree[code]) {
       tree[code] = {
         code: code,
         description: item.type.description,
-        children: [node]
+        children: [node],
       };
     } else {
       tree[code].children.push(node);
@@ -29,4 +28,26 @@ export function buildTree(data) {
   return Object.values(tree);
 }
 
+/**
+ * @description 电话号码加密   18285564342 转化为 182****4342
+ * @param {String} phone
+ * @returns
+ */
+
+export function phoneEncryption(phone) {
+  return phone.replace(/^(\d{3})\d{4}(\d+)/, '$1****$2');
+}
+
+/**
+ * @description 身份证号码加密
+ * @param {*} idCard 
+ * @returns 
+ */
 
+export function idCardEncryption(idCard) {
+  	if (!idCard) return ""
+  	let reg = /^(.{6})(?:\d+)(.{4})$/
+    // 身份证号脱敏，将中间8位替换为“*”
+  	let result = idCard.replace(reg, '\$1******\$2') 
+  	return result
+  }