1.03

README.md

@@ -13,8 +13,13 @@
  1.公共请求框架自动识别当前项目的提示方式$toast、$message。
  2.接口配置信息增加responseType属性。
  3.公共请求框架识别2814错误码 进行重新登录。
- 4.$config、$interfaces、$http、$reqState 可自动装配。
+ 4.$config、$interfaces、$http、$reqState 可自动装配到vue原型链。
  ```
  import 'submodule/utils/config/init'
  import 'submodule/utils/api/web/init'
-```
+```
+
+1.03
+ 增加功能：
+ 1.公共样式 submodule/utils/style
+ 2.公共自定义指令 submodule/utils/directives

config/index.js

@@ -1,5 +1,13 @@
 import interfaces from './interfaces'
 export default {
+  vers: {
+    加气支付极速版: 'jqjs-20250401',
+    物流充值: 'wlcz-20250617',
+    物流入住: 'wlrz-20250919',
+    get cur() {
+      return this.物流入住
+    }
+  },
   enums: {
     request: {
       // 请求前
@@ -22,13 +30,6 @@ export default {
     }
   },
   interfaces,
-  vers: {
-    加气支付极速版: 'jqjs-20250401',
-    物流充值: 'wlcz-20250617',
-    get cur() {
-      return this.物流充值
-    }
-  },
   // 资金流水类型
   get fundFlowType() {
     return [

config/interfaces/index.js

@@ -17,5 +17,17 @@ export default {
       responseType: 'blob'
     }
 
+  },
+  /** 用户中心 */
+  user: {
+    /** 新增驾驶员 */
+    add_drivers: {
+      realUrl: 'user/driver_white_list/add_drivers'
+    },
+    /** 导入用户 */
+    import_user: {
+      realUrl: 'user/import/import_user'
+    }
+
   }
 }

directives/index.js

@@ -0,0 +1,34 @@
+// 当目标变量为空时显示空文案
+const emptyChange = (el, binding, vnode) => {
+  // binding.value为文本 配合v-html 使用
+  if (typeof binding.value === 'string') {
+    if (!vnode.data.domProps.innerHTML.trim()) {
+      el.classList.add('gray-color')
+      el.innerHTML = binding.value
+    } else {
+      el.classList.remove('gray-color')
+    }
+    return
+  }
+  // binding.value为对象{open:true,text:'空文案'} 配合v-model 使用
+  let isEmpty = false
+  if (binding.value.open) {
+    if (!vnode.data.model.value) {
+      isEmpty = true
+    }
+  }
+  if (isEmpty) {
+    el.classList.add('hide-child', 'gray-color')
+    el.appendChild(document.createTextNode(binding.value.text))
+  } else {
+    if (el.classList.contains('hide-child')) {
+      el.classList.remove('hide-child', 'gray-color')
+      el.removeChild(el.lastChild)
+    }
+  }
+}
+const empty = {
+  bind: emptyChange,
+  update: emptyChange
+}
+export { empty }

style/index.scss

@@ -0,0 +1,639 @@
+@import 'variables';
+
+.section {
+  position: relative;
+  padding-left: $p-spacd2;
+  margin: $p-spac 0;
+
+  &.s-fz,
+  &.ss-fz {
+    padding-left: calc($p-spac / 1.5);
+    margin-top: calc($p-spac / 1.5);
+    margin-bottom: calc($p-spac / 1.5);
+  }
+
+  // &.b-fz {
+  //   padding-left: $p-spac;
+  // }
+
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    width: 4px;
+    margin: auto;
+    content: '';
+    background-color: $p-color;
+    border-radius: 2px;
+  }
+}
+
+%center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+%chunk-base {
+  position: relative;
+  box-sizing: border-box;
+  padding: $p-spac;
+  margin-bottom: $p-spac;
+  overflow: hidden;
+
+  &.m0 {
+    margin: 0;
+  }
+}
+
+.chunk {
+  @extend %chunk-base;
+  @extend %box-shadow;
+  border: 1px solid $border-color;
+  border-radius: $p-spacd2;
+  line-height: normal;
+  // &:last-child {
+  //   margin-bottom: 0;
+  // }
+
+  &.checked {
+    border-color: $p-color;
+  }
+
+  &.checked-full {
+    color: $p-color;
+    background-color: rgba($p-color, .2);
+    border-color: $p-color;
+  }
+}
+
+// 第一层子元素 左对齐
+%childs-fc-mbd2 {
+  font-size: $s-fz;
+
+  >div,
+  >view {
+    @apply flex;
+    justify-content: start;
+
+    >div:first-child,
+    >view:first-child,
+    >span:first-child,
+    >label:first-child {
+      // margin-right: $p-spac;
+      // white-space: nowrap;
+    }
+
+    // >div:nth-child(2),
+    // >view:nth-child(2),
+    // >span:nth-child(2),
+    // >label:nth-child(2) {
+    //   flex: 1;
+    // }
+  }
+
+  >div,
+  >view,
+  >span,
+  >label {
+    margin-bottom: $p-spacd2;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  >span,
+  >label {
+    display: inline-block;
+  }
+}
+
+.childs-fc-mbd2 {
+  @extend %childs-fc-mbd2
+}
+
+// 第一层子元素 两端对齐
+.childs-fcjb-mbd2 {
+  @extend .childs-fc-mbd2;
+
+  >div,
+  >view {
+    @extend %center;
+    @extend .justify-between;
+    // align-items: start;
+    flex-wrap: wrap;
+  }
+}
+
+.chunk1 {
+  @extend %chunk-base;
+  @extend %childs-fc-mbd2;
+  border-bottom: solid $border-color 1px;
+
+}
+
+.chunk2 {
+  @extend %chunk-base;
+  @extend .childs-fcjb-mbd2;
+  padding-top: 0;
+  border-bottom: solid $border-color 1px;
+
+  >div,
+  >view {
+    >div:nth-child(2) {
+      flex: 1;
+      text-align: right;
+      margin-left: $p-spac;
+    }
+  }
+}
+
+.chunk3 {
+  @extend %chunk-base;
+  padding-top: 0;
+  display: flex;
+  align-items: center;
+  border-bottom: solid $border-color 1px;
+}
+
+.chunk4 {
+  @extend %chunk-base;
+  margin-bottom: 0;
+
+  >div {
+    margin-top: $p-spacd2;
+  }
+}
+
+.chunk,
+.chunk1,
+.chunk2 {
+
+  >div,
+  >view {
+
+    >span:first-child,
+    >label:first-child {
+      color: $gray-color;
+    }
+  }
+}
+
+
+// 间距对象
+$spac-map: (
+  0: (0: 't',
+    1: 'top',
+  ),
+  1: (0: 'b',
+    1: 'bottom',
+  ),
+  2: (0: 'l',
+    1: 'left',
+  ),
+  3: (0: 'r',
+    1: 'right',
+  ),
+);
+
+
+// 循环 $p-spac $j
+@for $j from 1 to 5 {
+  // 除以 $j
+  $suffix: if($j ==1, '', 'd' + $j);
+  // 乘以 $j
+  $suffixm: if($j ==1, '', 'm' + $j);
+
+  // margin $p-spac除数
+  #{$container}.m-spac#{$suffix} {
+    margin: ($p-spac / $j);
+  }
+
+  // margin $p-spac倍数
+  #{$container}.m-spac#{$suffixm} {
+    margin: $p-spac * $j;
+  }
+
+  // margin $p-spac除数 负值
+  #{$container}.nm-spac#{$suffix} {
+    margin: ($p-spac / -$j);
+  }
+
+  // padding $p-spac除数
+  #{$container}.p-spac#{$suffix} {
+    padding: ($p-spac / $j);
+  }
+
+  // padding $p-spac倍数
+  #{$container}.p-spac#{$suffixm} {
+    padding: $p-spac * $j;
+  }
+}
+
+// 循环 $p-spac $j
+@for $j from 1 to 5 {
+  // 除以 $j
+  $suffix: if($j ==1, '', 'd' + $j);
+  // 乘以 $j
+  $suffixm: if($j ==1, '', 'm' + $j);
+
+  //循环$spac-map
+  @for $i from 0 to 4 {
+    $t: map-get($spac-map, $i);
+
+    // 4方向 $p-spac除数
+    #{$container}.#{map-get($t,0)}-spac#{ $suffix} {
+      #{map-get($t,1)}: ($p-spac / $j);
+    }
+
+    // margin 4方向 $p-spac倍数
+    #{$container}.m#{map-get($t,0)}-spac#{ $suffixm} {
+      margin-#{map-get($t,1)}: $p-spac * $j;
+    }
+
+    // margin 4方向 $p-spac除数 
+    @if($j>1) {
+      #{$container}.m#{map-get($t,0)}-spac#{ $suffix} {
+        margin-#{map-get($t,1)}: ($p-spac / $j);
+      }
+    }
+
+    // margin 4方向 $p-spac除数 负值
+    #{$container}.nm#{map-get($t,0)}-spac#{ $suffix} {
+      margin-#{map-get($t,1)}: ($p-spac / -$j);
+    }
+
+    // padding 4方向 $p-spac倍数
+    #{$container}.p#{map-get($t,0)}-spac#{ $suffixm} {
+      padding-#{map-get($t,1)}: $p-spac * $j;
+    }
+
+    // padding 4方向 $p-spac除数
+    #{$container}.p#{map-get($t,0)}-spac#{ $suffix} {
+      padding-#{map-get($t,1)}: ($p-spac / $j);
+    }
+
+
+  }
+}
+
+// 单行省略，优先使用 unocss: text-ellipsis
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// 两行省略
+.ellipsis-2 {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+// 三行省略
+.ellipsis-3 {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+
+body {
+  .order-pull-refresh .van-list__finished-text {
+    margin-top: 5px;
+    background-color: transparent;
+  }
+
+  .fixed-bottom {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 10;
+    box-sizing: border-box;
+    width: 100%;
+    padding: $p-spac;
+    background-color: $bg-color;
+  }
+
+  .btns {
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 10;
+    box-sizing: border-box;
+    width: 100%;
+    padding: $p-spac;
+    background-color: $bg-color;
+
+    button {
+      margin-right: $p-spac;
+      // background-color: $bg-color;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    // 指定type的按钮
+    button[type="submit"] {
+      flex: 1;
+    }
+
+  }
+
+  .bbb {
+    border-bottom: solid $b-color 1px;
+  }
+
+  .bbt {
+    border-top: solid $b-color 1px;
+  }
+
+  .pcbb {
+    border-bottom: solid $p-color 1px;
+  }
+
+  .defb {
+    border: solid $border-color 1px;
+  }
+
+  .defbb {
+    border-bottom: solid $border-color 1px;
+  }
+
+  .defbt {
+    border-top: solid $border-color 1px;
+  }
+
+  .defbrd4 {
+    border-radius: $p-spacd4;
+  }
+
+  .relative {
+    position: relative;
+  }
+
+  .absolute {
+    position: absolute;
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .flex-column {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .flex1 {
+    flex: 1;
+  }
+
+  .flex-start {
+    justify-content: start;
+  }
+
+  .flex-items-start {
+    align-items: start;
+  }
+
+  .flex-baseline {
+    align-items: baseline;
+  }
+
+  .center {
+    @extend %center
+  }
+
+  .justify-between {
+    justify-content: space-between;
+  }
+
+  .vh100 {
+    height: 100vh;
+  }
+
+  .min-vh100 {
+    min-height: 100vh;
+  }
+
+  .w0 {
+    width: 0;
+  }
+
+  .w100 {
+    width: 100%;
+  }
+
+  .w30 {
+    width: 30%;
+  }
+
+  .m-t-0 {
+    margin-top: 0;
+  }
+
+  .m-b-0 {
+    margin-bottom: 0;
+  }
+
+  .p-t-0 {
+    padding-top: 0;
+  }
+
+  .p-lr-0 {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .p-b-0 {
+    padding-bottom: 0;
+  }
+
+  .font-bold {
+    font-weight: bold;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .text-left {
+    text-align: left;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+
+  .inline-block {
+    display: inline-block;
+  }
+
+  .inline {
+    display: inline;
+  }
+
+  .gradient {
+    opacity: 1;
+    // transition: opacity 0.5s ease;
+    transition-duration: 0.5s;
+  }
+
+  .hide {
+
+    display: none;
+
+    &.gradient {
+      display: none;
+      opacity: 0;
+      // visibility: hidden;
+      // transform: rotateX(90deg);
+      height: 0;
+      padding: 0;
+    }
+  }
+
+  .s-fz {
+    font-size: $s-fz;
+  }
+
+  .ss-fz {
+    font-size: $ss-fz;
+  }
+
+  .p-fz {
+    font-size: $p-fz;
+  }
+
+  .bs-fz {
+    font-size: $bs-fz;
+  }
+
+  .b-fz {
+    font-size: $b-fz;
+  }
+
+  .lh16 {
+    line-height: 16px;
+  }
+
+  .p-color {
+    color: $p-color;
+  }
+
+  .p-wcolor {
+    color: $p-wcolor;
+  }
+
+  .p-dcolor {
+    color: $p-dcolor;
+  }
+
+  .price-color {
+    color: $p-price-color;
+  }
+
+  .gray-color {
+    color: $gray-color;
+  }
+
+  .money-bg {
+    background-color: rgba($p-price-color, 0.1);
+  }
+
+  .bg-color {
+    background-color: $bg-color;
+  }
+
+  .border-box {
+    box-sizing: border-box;
+  }
+
+
+  .green-color {
+    color: $green-color;
+  }
+
+  .nowrap {
+    white-space: nowrap;
+  }
+
+  .flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .space-around {
+    justify-content: space-around;
+  }
+
+  .com-btn-add {
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    position: fixed;
+    right: 10px;
+    background: rgba(25, 137, 250, .8);
+    border-radius: 50%;
+    color: #fff;
+    font-size: 30px;
+    bottom: 20px;
+    z-index: 1;
+  }
+
+  .checked {
+    color: $p-color;
+    border-color: rgba($p-color, 0.4);
+    background-color: rgba($p-color, 0.1);
+  }
+
+  .sticky {
+    top: 0;
+    position: sticky;
+    z-index: 1;
+    background: $bg-color;
+  }
+
+  .pre-line {
+    white-space: pre-line;
+  }
+
+  .required::before {
+    content: '*';
+    color: #F56C6C;
+    margin-right: 4px;
+  }
+
+  .hide-child {
+    * {
+      display: none;
+    }
+  }
+
+  .pointer {
+    cursor: pointer;
+  }
+}
+
+.container {
+  background-color: $bg-color;
+  padding: $p-spac;
+  min-height: 100vh;
+  box-sizing: border-box;
+  text-align: left;
+}

style/variables.scss

@@ -0,0 +1,50 @@
+// 统一颜色
+$defaultColorBlue: #007DFF;
+$container: 'body ';
+// 主题色
+// $p-color: #f40018;
+$p-color: #0084f4;
+// 文字反色颜色
+$p-recolor: #fff;
+// 黄色-警告
+$p-wcolor: #F59A23;
+// 红色-警告
+$p-dcolor: #EC808D;
+// 黑色
+$b-color: #000;
+// 大字体大小
+$b-fz: 20px;
+// 大二字体大小
+
+$bs-fz: 16px;
+// 主字体大小
+$p-fz: 14px;
+// 次要字体大小
+$s-fz: 12px;
+// 次次要字体大小
+$ss-fz: 10px;
+// 主间距
+$p-spac: 12px;
+// 主间距/2
+$p-spacd2: 6px;
+// 主间距/4
+$p-spacd4: 3px;
+// 主间距*2
+$p-spacm2: 24px;
+// 价格颜色
+$p-price-color: #ec808d; //#f46d00;
+$gray-color: #868b9a;
+$disabled: #ccc;
+// 边框颜色
+$border-color: #ccc;
+// 绿色
+$green-color: #00ad65;
+// 黄色-警告
+$yellow-color: #b8741a;
+
+
+$bg-color: #fff;
+
+%box-shadow {
+    box-shadow: 0 0 1rpx 0 hsla(210, 34%, 80%, 0.4);
+}

tools.js

@@ -0,0 +1,51 @@
+import store from '@/store'
+
+// 请求头文件
+export function axiosRequestParams(_this) {
+  return {
+    timeout: 20000,
+    baseURL: process.env.VUE_APP_BASE_URL,
+    headers: {
+      Authorization: 'Bearer ' + store.getters.woptoken,
+      Identifier: store.getters.wopidntf
+    }
+  }
+}
+// 自定义按钮
+export function custFormBtnList(type = 3) {
+  const bottonList = {
+    iShow: true,
+    list: []
+  }
+  const btnList = []
+
+  if ((type & 1) == 1) {
+    btnList.push({ bType: 'info', icon: 'el-icon-close', type: 'cancel', label: '取消' })
+  }
+
+  if ((type & 2) == 2) {
+    btnList.push({ bType: 'primary', icon: 'el-icon-check', type: 'ok', label: '确认' })
+  }
+
+  bottonList.list = btnList
+
+  return bottonList
+}
+// form表单按钮 type:5 使用默认保存功能
+export function custFormBtnListNew(type = 4) {
+  const rv = custFormBtnList()
+  if (type === 4) {
+    rv.list[0].type = 'close'
+    rv.list[1].type = 'submit'
+  }
+  return rv
+}
+/** 装饰数据行，装饰后可使用nt-from表单默认保存功能 */
+export function decorateSaveRow(row, ext) {
+  row._btn = custFormBtnListNew(4)
+  row._axios = axiosRequestParams()
+  row._url = ext.url
+  row._method = 'post'
+  row._oldData = Object.assign({}, row)
+  return row
+}