task#，kpi添加月份选择，优化代码

.gitignore

@@ -6,7 +6,8 @@ node_modules
 # local env files
 .env.local
 .env.*.local
-
+src/http.js
+http.js
 # Log files
 npm-debug.log*
 yarn-debug.log*

jenkins/Jenkinsfile

@@ -48,14 +48,14 @@ node {
     }
 
     stage('scp') {
-         sh 'tar zcvf rescue-h5.zip ./dist/'
+         sh 'tar zcvf supplier-dispatch-h5.zip ./dist/'
 
           for (String ip : "${params.targetIps}".split(",")) {
                  echo "ssh deploy ${ip}"
-                 sh "ssh root@${ip} 'bash -s' < '${workspace}/jenkins/file_exist.sh' rescue-h5"
+                 sh "ssh root@${ip} 'bash -s' < '${workspace}/jenkins/file_exist.sh' supplier-dispatch-h5"
 
-                 sh "scp rescue-h5.zip root@${ip}:/zd/rescue-h5/"
+                 sh "scp supplier-dispatch-h5.zip root@${ip}:/zd/supplier-dispatch-h5/"
-                 sh "ssh root@${ip} 'sudo rm -rf /zd/rescue-h5/dist && sudo tar -zxvf /zd/rescue-h5/rescue-h5.zip  -C  /zd/rescue-h5/ '"
+                 sh "ssh root@${ip} 'sudo rm -rf /zd/supplier-dispatch-h5/dist && sudo tar -zxvf /zd/supplier-dispatch-h5/supplier-dispatch-h5.zip  -C  /zd/supplier-dispatch-h5/ '"
                  sh "ssh root@${ip} 'sudo bash -s' < '${workspace}/jenkins/docker-compose-restart.sh'"
           }
     }

jenkins/Jenkinsfile_prod

@@ -48,14 +48,14 @@ node {
     }
 
     stage('scp') {
-         sh 'tar zcvf rescue-h5.zip ./dist/'
+         sh 'tar zcvf supplier-dispatch-h5.zip ./dist/'
 
           for (String ip : "${params.targetIps}".split(",")) {
                  echo "ssh deploy ${ip}"
-                 sh "ssh sasys@${ip} 'bash -s' < '${workspace}/jenkins/file_exist.sh' rescue-h5"
+                 sh "ssh sasys@${ip} 'bash -s' < '${workspace}/jenkins/file_exist.sh' supplier-dispatch-h5"
 
-                 sh "scp rescue-h5.zip sasys@${ip}:/zd/rescue-h5/"
+                 sh "scp supplier-dispatch-h5.zip sasys@${ip}:/zd/supplier-dispatch-h5/"
-                 sh "ssh sasys@${ip} 'sudo rm -rf /zd/rescue-h5/dist && sudo tar -zxvf /zd/rescue-h5/rescue-h5.zip  -C  /zd/rescue-h5/ '"
+                 sh "ssh sasys@${ip} 'sudo rm -rf /zd/supplier-dispatch-h5/dist && sudo tar -zxvf /zd/supplier-dispatch-h5/supplier-dispatch-h5.zip  -C  /zd/supplier-dispatch-h5/ '"
                  sh "ssh sasys@${ip} 'sudo bash -s' < '${workspace}/jenkins/docker-compose-restart.sh'"
           }
     }

package-lock.json

@@ -1713,9 +1713,9 @@
       }
     },
     "@vant/icons": {
-      "version": "1.8.0",
+      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.8.0.tgz",
+      "resolved": "https://registry.npmjs.org/@vant/icons/-/icons-3.0.2.tgz",
-      "integrity": "sha512-sKfEUo2/CkQFuERxvkuF6mGQZDKu3IQdj5rV9Fm0weJXtchDSSQ+zt8qPCNUEhh9Y8shy5PzxbvAfOOkCwlCXg=="
+      "integrity": "sha512-4OlRVMd0uiDtD9hgSISZW8hB95vU0fFtc41tQchRIyiXkR0tS+DydZOLb8/bQkithrNWhW7Uud38MbKjlJ9lJw=="
     },
     "@vant/popperjs": {
       "version": "1.3.0",
@@ -2030,6 +2030,49 @@
         "webpack-merge": "^5.7.3",
         "webpack-virtual-modules": "^0.4.2",
         "whatwg-fetch": "^3.6.2"
+      },
+      "dependencies": {
+        "@vue/vue-loader-v15": {
+          "version": "npm:vue-loader@15.11.1",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.11.1.tgz",
+          "integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
+          "dev": true,
+          "requires": {
+            "@vue/component-compiler-utils": "^3.1.0",
+            "hash-sum": "^1.0.2",
+            "loader-utils": "^1.1.0",
+            "vue-hot-reload-api": "^2.3.0",
+            "vue-style-loader": "^4.1.0"
+          },
+          "dependencies": {
+            "hash-sum": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+              "dev": true
+            }
+          }
+        },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -2194,47 +2237,6 @@
         }
       }
     },
-    "@vue/vue-loader-v15": {
-      "version": "npm:vue-loader@15.10.1",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.1.tgz",
-      "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
-      "dev": true,
-      "requires": {
-        "@vue/component-compiler-utils": "^3.1.0",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "vue-hot-reload-api": "^2.3.0",
-        "vue-style-loader": "^4.1.0"
-      },
-      "dependencies": {
-        "hash-sum": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
-          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-          "dev": true
-        },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
-      }
-    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
@@ -2581,6 +2583,14 @@
         "lodash": "^4.17.14"
       }
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -2616,6 +2626,11 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "babel-loader": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.3.0.tgz",
@@ -2667,6 +2682,27 @@
         "@babel/helper-define-polyfill-provider": "^0.4.2"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3508,6 +3544,11 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -3540,8 +3581,7 @@
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
-      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
+      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
-      "dev": true
     },
     "default-gateway": {
       "version": "6.0.3",
@@ -3794,6 +3834,22 @@
       "integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
       "dev": true
     },
+    "echarts": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.5.0.tgz",
+      "integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.5.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -3806,6 +3862,19 @@
       "integrity": "sha512-6s7NVJz+sATdYnIwhdshx/N/9O6rvMxmhVoDSDFdj6iA45gHR8EQje70+RYsF4GeB+k0IeNSBnP7yG9ZXJFr7A==",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.15.14",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.14.tgz",
+      "integrity": "sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -6025,6 +6094,11 @@
       "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -7067,6 +7141,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.22.4",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz",
@@ -7783,6 +7862,11 @@
         }
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+    },
     "thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
@@ -7951,12 +8035,12 @@
       }
     },
     "vant": {
-      "version": "2.12.54",
+      "version": "2.13.2",
-      "resolved": "https://registry.npmjs.org/vant/-/vant-2.12.54.tgz",
+      "resolved": "https://registry.npmjs.org/vant/-/vant-2.13.2.tgz",
-      "integrity": "sha512-t7DCiLxNosDrg0Jm5EY9p0A5cAMo5OadmizbYtPEc0ru+OJKEa3kcfxtKIK5on7ZPqoOkyYJt8e6BQ1VDMPsrg==",
+      "integrity": "sha512-anZbbLqXCq+rUJk10D67mn+V/1/i9tfOTdoR+64B0e+0BzV3KFgpHBF76noLa+yX9i/L+8DeL560WMk0GEN38g==",
       "requires": {
         "@babel/runtime": "7.x",
-        "@vant/icons": "^1.7.1",
+        "@vant/icons": "^3.0.2",
         "@vant/popperjs": "^1.1.0",
         "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
         "vue-lazyload": "1.2.3"
@@ -8716,6 +8800,21 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.5.0.tgz",
+      "integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }

package.json

@@ -12,15 +12,18 @@
     "amfe-flexible": "^2.2.1",
     "axios": "^1.4.0",
     "core-js": "^3.8.3",
+    "echarts": "^5.2.2",
     "less": "^4.1.3",
     "less-loader": "^11.1.3",
     "qs": "^6.11.2",
     "sass": "^1.65.1",
     "sass-loader": "^13.3.2",
-    "vant": "^2.12.54",
+    "vant": "^2.13.2",
     "vue": "^2.6.14",
     "vue-router": "^3.0.7",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "element-ui": "^2.15.9",
+    "dayjs": "^1.8.14"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -48,7 +51,10 @@
     "parserOptions": {
       "parser": "@babel/eslint-parser"
     },
-    "rules": {}
+    "rules": {},
+    "globals": {
+      "AMap": "true"
+    }
   },
   "browserslist": [
     "> 1%",

public/index.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
+<!--      <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover,user-scalable=no">
     <meta name="format-detection" content="telephone=yes"/>
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
@@ -24,11 +25,44 @@
     <!-- 开启底部安全区适配 -->
     <van-number-keyboard safe-area-inset-bottom />
     <script type="text/javascript">
-      window._AMapSecurityConfig = {
+        window._AMapSecurityConfig = {
-        // serviceHost:'https://api.sinoassist.com/_AMapService',
+            serviceHost: 'https://api.sinoassist.com/_AMapService',
-        securityJsCode:'91ab1ebc492d5479a68b11527bd73dc9',
+        }
-      }
     </script>
-    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=2560bbf04daef66c810c5e6a97e8c508&plugin=AMap.AutoComplete,AMap.PlaceSearch,AMap.Geolocation,AMap.Geocoder,AMap.Marker,AMap.Driving"></script>
+    <script src="https://webapi.amap.com/maps?v=1.4.15&key=2560bbf04daef66c810c5e6a97e8c508&plugin=AMap.Polyline"></script>
+<!--    <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>-->
+    <script>
+        // VConsole 默认会挂载到 `window.VConsole` 上
+        // let vConsole = new window.VConsole();
+        (function (doc, win) {
+            console.log("==window.location.pathname===",window.location.pathname)
+            let docEl = doc.documentElement
+            let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
+            recalc = function () {
+                var clientWidth = docEl.clientWidth;
+                if (!clientWidth) return;
+                if (clientWidth < 400) {
+                    clientWidth = 400;
+                }
+                docEl.style.fontSize = 18 * (clientWidth / 650) + 'px';
+            };
+            if (!doc.addEventListener) return;
+            var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+            if (isMobile) {// 是移动端不变
+                // console.log("是移动端不变")
+            }else{
+                if(window.location.pathname=='/h5/supplier/dispatch/kpiIndex'){
+                    // console.log("执行了执行了")
+                    win.addEventListener(resizeEvt, recalc, false);
+                    doc.addEventListener('DOMContentLoaded', recalc, false);
+                }
+                /*else{
+                    console.log("走着了这种饿 ")
+                }*/
+            }
+        })(document, window);
+
+    </script>
+
   </body>
 </html>

src/api/kpi.js

@@ -0,0 +1,76 @@
+import request from '@/utils/http'
+// 首页服务商接口
+export function getStatisticsKpiByMonth(data){
+  return request({
+    url: '/supplier/supplierKPI/querySupplierStatisticsKpiByMonth',
+    method:'POST',
+    // contentType: 'application/json',
+    data
+  })
+}
+//服务商kpi
+export function getStatisticsKpi(data){
+  return request({
+    url: '/supplier/supplierKPI/querySupplierStatisticsKpi',
+    method:'POST',
+    // contentType: 'application/json',
+    data
+  })
+}
+
+//  司机Kpi
+export function getDriverStatisticsKpi(data){
+  return request({
+    url: '/supplier/supplierKPI/querySupplierDriverStatisticsKpi',
+    method:'POST',
+    // contentType: 'application/json',
+    data
+  })
+}
+//   各种详情数据
+export function getKpiDetailsData(data){
+  return request({
+    url: '/supplier/supplierKPI/querySupplierKpiDetailsData',
+    method:'POST',
+    // contentType: 'application/json',
+    data
+  })
+}
+// 获取近12个月的服务商数据
+export function getRecentSupplierKpi(data){
+  return request({
+    url: '/supplier/supplierKPI/queryRecentSupplierStatisticsKpi',
+    method:'POST',
+    // contentType: 'application/json',
+    data
+  })
+}
+// 司机分数详情
+export function driverScoreDetail(data){
+  return request({
+    url: '/supplier/supplierKPI/querySupplierDriverStatisticsScore',
+    method:'POST',
+    // contentType: 'application/json',
+    data
+  })
+}
+// 关键词搜索服务商名称
+export function getSupplierId(key) {
+  return request({
+    url: '/supplier/select/supplier',
+    method: 'GET',
+    params: {
+      key: key ,
+    }
+  });
+}
+// supplier/select/driver 关键词搜索司机名称
+export function getDriverName(key) {
+  return request({
+    url: '/supplier/select/driver',
+    method: 'GET',
+    params: {
+      key: key ,
+    }
+  });
+}

src/api/maintenance.js

@@ -0,0 +1,46 @@
+import request from '@/utils/http'
+
+// 调度APP-维保数量
+export function vehicleMaintenanceCount() {
+    return request({
+        url: '/supplierAppV2/dispatchApp/maintenance/vehicleMaintenanceCount',
+        method:'POST',
+    })
+}
+
+//维保列表
+export function vehicleMaintenanceList(data) {
+    return request({
+        url: '/supplierAppV2/dispatchApp/maintenance/vehicleMaintenanceList',
+        method:'POST',
+        contentType: 'application/json',
+        data
+    })
+}
+// 获取维保记录详情
+export function getVehicleMaintenanceDetail(data) {
+    return request({
+        url: '/supplierAppV2/dispatchApp/maintenance/getVehicleMaintenanceDetail',
+        method:'POST',
+        contentType: 'application/json',
+        data
+    })
+}
+// 维保终止
+export function vehicleMaintenanceStop(data) {
+    return request({
+        url: '/supplierAppV2/dispatchApp/maintenance/vehicleMaintenanceStop',
+        method:'POST',
+        contentType: 'application/json',
+        data
+    })
+}
+// 维保审批
+export function vehicleMaintenanceApproval(data) {
+    return request({
+        url: '/supplierAppV2/dispatchApp/maintenance/vehicleMaintenanceApproval',
+        method:'POST',
+        contentType: 'application/json',
+        data
+    })
+}

src/api/mine.js

@@ -132,7 +132,7 @@ export function deleteImage(data){
     })
 }
 //新增记账图片 form-data
-export function insertRecordPicture(data){
+/*export function insertRecordPicture(data){
     return request({
         url:'/supplierAppV2/dispatchApp/accountRecord/insertRecordPicture',
         method:'POST',
@@ -142,30 +142,167 @@ export function insertRecordPicture(data){
         //     'Content-Type': 'multipart/form-data',
         // },
     })
-}
+}*/
 
 //开票通知列表
 export function notifyInvoiceList(data){
     return request({
-        url:'/supplierAppV2/dispatchApp/accountRecord/notifyInvoiceList',
+        url:'/order/taskInvoiceBatch/selectPageList',
         method:'POST',
-        contentType:'application/json',
         data
     })
 }
+// contentType:'application/json',
 //开票通知详情
 export function notifyInvoiceDetail(data){
     return request({
-        url:'/supplierAppV2/dispatchApp/accountRecord/notifyInvoiceDetail',
+        url:'/order/taskInvoiceBatch/selectById',
         method:'POST',
-        contentType:'application/json',
         data
     })
 }
-// /supplier/supplierTrainingMaterials/pageList 获取培训材料列表
+// 关联案件
+export function getOrderListByInvoice(data) {
+    return request({
+        url:'/order/taskOrderCostHisRecord/selectPageList',
+        method:'POST',
+        data
+    })
+}
+
+//  调度app获取新签列表
 export function pageList(data){
     return request({
-        url:'/supplier/supplierTrainingMaterials/pageList',
+        url:'/supplierAppV2/dispatchApp/user/supplierTrainingMaterialsPageList',
+        method:'POST',
+        contentType:'application/json',
+        data
+    })
+}
+//  司机app获取新签列表
+export function driverTrainList(key){
+    return request({
+        url:'/supplier/supplierTraining/trainingTask',
+        method:'GET',
+        params:key
+    })
+}
+
+//获取普通材料
+export function getNormalList(key) {
+    return request({
+        url: '/supplier/supplierTraining/normalList',
+        method: 'GET',
+        params:key
+    });
+}
+//获取培训材料
+export function getTrainingList(key) {
+    return request({
+        url: '/supplier/supplierTraining/trainingList',
+        method: 'GET',
+        params:key
+    });
+}
+//用户操作权限
+export function userOperationPermissions(){
+    return request({
+        url:'/supplierAppV2/dispatchApp/user/userOperationPermissions',
+        method:'POST',
+    })
+}
+
+// 上传图片
+export function uploadImage(data){
+    return request({
+        url:'/order/uploadImage',
+        method:'POST',
+        contentType:'multipart/form-data',
+        data
+    })
+}
+
+// 发票上传
+export function uploadInvoice(data){
+    return request({
+        url:'/order/taskInvoiceBatch/saveInvoiceImagesAndIdentify',
+        method:'POST',
+        contentType:'multipart/form-data',
+        data
+    })
+}
+
+// 删除发票
+export function deleteInvoice(data) {
+    return request({
+        url:'/order/taskInvoiceBatch/deleteInfo',
+        method:'POST',
+        contentType:'multipart/form-data',
+        data
+    })
+}
+
+// 生成财务批次
+export function createBatch(data) {
+    return request({
+        url:'/order/taskInvoiceBatch/supplierCreateFinanceBatch',
+        method:'POST',
+        contentType:'application/x-www-form-urlencoded',
+        data,
+        testFlag: true
+    })
+}
+
+// 开票信息列表
+export function getFinanceBatchList(data) {
+    return request({
+        url:'/order/taskInvoiceFinanceBatch/selectFinanceBatchPageList',
+        method:'POST',
+        data,
+    })
+}
+
+// 批次对应发票信息列表
+export function financeInvoiceList(data) {
+    return request({
+        url:'/order/taskInvoiceBatch/selectInvoicePageList',
+        method:'POST',
+        data,
+    })
+}
+
+// 查看发票
+export function selectInvoiceDetailInfo(data) {
+    return request({
+        url:'/order/taskInvoiceBatch/selectInvoiceDetailInfo',
+        method:'POST',
+        data,
+    })
+}
+
+// 填写快递
+export function saveBatchCourierNumber(data) {
+    return request({
+        url:'/order/taskInvoiceBatch/supplierSaveBatchCourierNumber',
+        method:'POST',
+        data,
+    })
+}
+
+// 获取服务商发票信息
+export function getBillingInfo(url, data) {
+    return request({
+          url: url,
+          method:'POST',
+          contentType:'multipart/form-data',
+          data
+    })
+}
+
+// ocr 识别
+export function ocrHandler(data){
+    return request({
+        url:'/agg-api/tencent-ocr/unifiedOCR',
         method:'POST',
         contentType:'application/json',
         data

src/api/order.js

@@ -7,6 +7,13 @@ export function getToDoList() {
     method:'POST',
   })
 }
+// 调度APP待办事项列表New
+export function toDoListNew() {
+  return request({
+    url: '/supplierAppV2/dispatchApp/toDoMessage/toDoListNew',
+    method:'POST',
+  })
+}
 // 代办事项审核
 export function toDoAudit(data){
   return request({
@@ -25,6 +32,15 @@ export function getOrderDetail(data){
     data
   })
 }
+// 工单司机位置
+export function showVehiclePositionInfo(data){
+  return request({
+    url:'/supplierAppV2/dispatchApp/order/showVehiclePositionInfo',
+    method:'POST',
+    contentType:'application/json',
+    data
+  })
+}
 // 工单报备
 export  function orderReporting(data){
   return request({
@@ -34,6 +50,15 @@ export  function orderReporting(data){
     data
   })
 }
+// 查看报备列表
+export  function  orderReportingList(data){
+  return request({
+    url:'/supplierAppV2/dispatchApp/order/orderReportingList',
+    method:'POST',
+    contentType:'application/json',
+    data
+  })
+}
 // 获取订单结算单信息
 export function getOrderSettlement(data){
   return request({
@@ -52,3 +77,21 @@ export function updateOrderSettlement(data){
     data
   })
 }
+// 电瓶数量列表
+export function batteryCountList(){
+  return request({
+    url:'/supplierAppV2/dispatchApp/battery/batteryCountList',
+    method:'POST',
+    contentType:'application/json',
+    // data
+  })
+}
+// 电瓶详情
+export function batteryDetailList (data){
+  return request({
+    url:'/supplierAppV2/dispatchApp/battery/batteryDetailList',
+    method:'POST',
+    contentType:'application/json',
+    data
+  })
+}

src/api/reimbursementBatch.js

@@ -0,0 +1,90 @@
+import request from '@/utils/http'
+//司机app待报销月份
+export function waitReimburseMonth(data) {
+    return request({
+        url: '/driverApp/reimburse/waitReimburseMonth',
+        method:'POST',
+        contentType: 'application/json',
+        data
+    })
+}
+//司机app待报销列表
+export function waitReimburseList(data) {
+    return request({
+        url: '/driverApp/reimburse/waitReimburseList',
+        method:'POST',
+        contentType: 'application/json',
+        data
+    })
+}
+// 司机app提交报销批次
+export function submitReimburseBatch(data) {
+    return request({
+        url: '/driverApp/reimburse/submitReimburseBatch',
+        method:'POST',
+        contentType: 'application/json',
+        data
+    })
+}
+// 司机app已报销/报销失败列表
+export function reimbursedList(data) {
+    return request({
+        url: '/driverApp/reimburse/reimbursedList',
+        method:'POST',
+        contentType: 'application/json',
+        data
+    })
+}
+//调度App-报销批次数量
+export function reimburseBatchCount() {
+    return request({
+        url: '/supplierAppV2/dispatchApp/reimburse/reimburseBatchCount',
+        method:'POST',
+        // contentType: 'application/x-www-form-urlencoded',
+    })
+}
+// 调度App-报销批次审核
+export function reimburseBatchList(data) {
+    return request({
+        url: '/supplierAppV2/dispatchApp/reimburse/reimburseBatchList',
+        method:'POST',
+        contentType: 'application/json',
+        data
+    })
+}
+//调度App-报销批次订单数量
+export function reimburseBatchOrderCount(data) {
+    return request({
+        url: '/supplierAppV2/dispatchApp/reimburse/reimburseBatchOrderCount',
+        method:'POST',
+        contentType: 'application/json',
+        data
+    })
+}
+//调度App-报销批次订单列表
+export function reimburseBatchOrderList(data) {
+    return request({
+        url: '/supplierAppV2/dispatchApp/reimburse/reimburseBatchOrderList',
+        method:'POST',
+        contentType: 'application/json',
+        data
+    })
+}
+//调度App-报销订单详情
+export function reimburseOrderDetail(data) {
+    return request({
+        url: '/supplierAppV2/dispatchApp/reimburse/reimburseOrderDetail',
+        method:'POST',
+        contentType: 'application/json',
+        data
+    })
+}
+//调度App-报销订单审核
+export function reimburseOrderAudit(data) {
+    return request({
+        url: '/supplierAppV2/dispatchApp/reimburse/reimburseOrderAudit ',
+        method:'POST',
+        contentType: 'application/json',
+        data
+    })
+}

src/components/cellGroup.vue

@@ -5,6 +5,7 @@
         :label="label"
         :placeholder="placeholder"
         required
+        :disabled="disabled"
         @input="$emit('input', $event)"
         @blur="$emit('blurIn')"
         input-align="right"
@@ -24,11 +25,15 @@ export default {
       type:String,
       default: ''
     },
-    value: [String, Number]
+    value: [String, Number],
+    disabled:{
+      type:Boolean,
+      default:false
+    }
   },
   data(){
     return{
-        name:''
+        name:'',
     }
   },
   mounted() {

src/components/twoBtnCommon.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="btn">
-    <button class="cancel" @click="noMultipleClicks(cancelClick)">{{ title1 }}</button>
+    <button :class=" { 'loading1': loading1, 'cancel' : title1 == '取消', 'submit' : title1 != '取消' } "  @click="noMultipleClicks( title1 == '提交' ? submitClick1 :cancelClick )">{{ title1 }}</button>
-    <button class="submit" @click="noMultipleClicks(submitClick)">{{ title2}}</button>
+    <button  class="submit" @click="noMultipleClicks(submitClick)" :class="{'loading': loading}">{{ title2}}</button>
   </div>
 </template>
 
@@ -12,7 +12,9 @@ export default {
   mixins:[myMixins],
   data(){
     return{
-      noClick:true
+      noClick:true,
+      loading: false,
+      loading1: false
     }
   },
   props:{
@@ -30,7 +32,32 @@ export default {
       this.$emit('cancelClick')
     },
     submitClick(){
-      this.$emit('submitClick')
+      // 设置 loading 状态
+      this.loading = true;
+
+      // 模拟异步请求
+      setTimeout(() => {
+        // 处理请求结果
+        // ...
+        this.$emit('submitClick')
+        // 重置 loading 状态
+        this.loading = false;
+      }, 2000);
+
+    },
+    submitClick1(){
+      // 设置 loading1状态
+      this.loading1 = true;
+
+      // 模拟异步请求
+      setTimeout(() => {
+        // 处理请求结果
+        // ...
+        this.$emit('submitClick1')
+        // 重置 loading1 状态
+        this.loading1 = false;
+      }, 2000);
+
     }
   }
 }
@@ -39,6 +66,32 @@ export default {
 <style scoped lang="scss">
 @import "@/styles/mixin.scss";
 @import "@/styles/common.scss";
+.loading,.loading1 {
+  position: relative;
+}
+
+.loading::after,.loading1::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 20px;
+  height: 20px;
+  border: 2px solid #000;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
 .btn{
   @include flexColBet;
   button{
@@ -54,4 +107,5 @@ export default {
     background-color: #354D93;
   }
 }
+
 </style>

src/main.js

@@ -2,12 +2,17 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import Vant from 'vant';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
 import 'vant/lib/index.css';
 import "lib-flexible/flexible";
 import "@/utils/rem.js"
 import store from './store'
+
 Vue.config.productionTip = false
+
 Vue.use(Vant);
+Vue.use(ElementUI);
 new Vue({
   store,
   router,

src/router/index.js

@@ -1,7 +1,8 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 Vue.use(VueRouter);
-
+import kpiRouter from './kpi-router'
+import invoiceRouter from "@/router/invoice-router";
 const routes = [
     {
       path: '/',
@@ -23,6 +24,14 @@ const routes = [
         title: '报备'
       }
     },
+    {
+        path: "/reportingList",
+        name: 'reportingList',
+        component: () => import('@/views/index/reportingList.vue'),
+        meta: {
+            title: '查看报备'
+        }
+    },
     {
       path: "/workOrderDetail",
       name: 'workOrderDetail',
@@ -62,22 +71,62 @@ const routes = [
         meta: {
             title: '审核完成-详情'
         }
-
+    },
+    {
+        path: "/settlementDetail",
+        name: 'settlementDetail',
+        component: () => import('@/views/workOrder/settlementDetail.vue'),
+        meta: {
+            title: '结算单详情'
+        }
     },
     {
       path: "/invoicingNotify",
       name: 'invoicingNotify',
       component: () => import('@/views/index/invoicingNotify.vue'),
       meta: {
-        title: '开票通知'
+        title: '工单批次'
       }
     },
+    {
+        path: "/invoiceListInfo",
+        name: 'invoiceListInfo',
+        component: () => import('@/views/index/invoiceListInfo.vue'),
+        meta: {
+            title: '开票信息'
+        }
+    },
+    {
+        path: "/invoiceInfo",
+        name: 'invoiceInfo',
+        component: () => import('@/views/index/invoiceInfo.vue'),
+        meta: {
+            title: '开票信息'
+        }
+    },
     {
         path: "/invoicingDetail",
         name: 'invoicingDetail',
         component: () => import('@/views/index/invoicingDetail'),
         meta: {
-            title: '开票通知详情'
+            title: '工单批次详情'
+        }
+    },
+    {
+        path: "/uploadInvoice",
+        name: 'uploadInvoice',
+        component: () => import('@/views/index/uploadInvoice.vue'),
+        meta: {
+            title: '上传发票',
+            cache: true
+        }
+    },
+    {
+        path: "/showInvoice",
+        name: 'showInvoice',
+        component: () => import('@/views/index/showInvoice.vue'),
+        meta: {
+            title: '查看发票'
         }
     },
     {
@@ -116,6 +165,14 @@ const routes = [
         path: '/trainDocment',
         name: 'trainDocment',
         component:()=>import('@/views/documentView/trainDocment.vue'),
+        meta: {
+            title:'培训文档',
+        }
+    },
+    {
+        path: '/diverTrainDocment',
+        name: 'diverTrainDocment',
+        component:()=>import('@/views/documentView/diverTrainDocment.vue'),
         meta: {
             title:'培训文档'
         }
@@ -127,7 +184,89 @@ const routes = [
         meta: {
             title:'文档资料'
         }
-    }
+    },
+    {
+        path: '/caseList',
+        name: 'caseList',
+        component:()=>import('@/views/caseList/caseList.vue'),
+        meta: {
+            title:'案件列表'
+        }
+    },
+    {
+        path: '/driverCaseList',
+        name: 'driverCaseList',
+        component:()=>import('@/views/driverCaseList/driverCaseList.vue'),
+        meta: {
+            title:'司机app案件列表'
+        }
+    },
+    {
+        path: '/caseAuditList',
+        name: 'caseAuditList',
+        component:()=>import('@/views/caseList/caseAuditList.vue'),
+        meta: {
+            title:'案件审核列表'
+        }
+    },
+    {
+        path: '/caseDetail',
+        name: 'caseDetail',
+        component:()=>import('@/views/caseList/caseDetail.vue'),
+        meta: {
+            title:'案件详情'
+        }
+    },
+    {
+        path: '/newTrainingList',
+        name: 'newTrainingList',
+        component:()=>import('@/views/newcomerTraining/newTrainingList.vue'),
+        meta: {
+            title:'新服务商培训'
+        }
+    },
+    {
+        path: '/driverTrainingList',
+        name: 'driverTrainingList',
+        component:()=>import('@/views/newcomerTraining/driverTrainingList.vue'),
+        meta: {
+            title:'新师傅培训'
+        }
+    },
+    {
+        path: '/maintenanceList',
+        name: 'vehicleMaintenanceList',
+        component:()=>import('@/views/vehicle-maintenance/vehicle-maintenance-list.vue'),
+        meta: {
+            title:'车辆维保'
+        }
+    },
+    {
+        path: '/maintenanceApplication',
+        name: 'maintenanceApplication',
+        component:()=>import('@/views/vehicle-maintenance/maintenance-application.vue'),
+        meta: {
+            title:'维保申请'
+        }
+    },
+    {
+        path: '/batteryList',
+        name: 'batteryList',
+        component:()=>import('@/views/battery/batteryList.vue'),
+        meta: {
+            title:'电瓶进销存'
+        }
+    },
+    {
+        path: '/batteryDetail',
+        name: 'batteryDetail',
+        component:()=>import('@/views/battery/batteryDetail.vue'),
+        meta: {
+            title:'电瓶详情'
+        }
+    },
+    ...kpiRouter,
+    ...invoiceRouter,
   ]
 
 const router = new VueRouter({

src/router/invoice-router.js

@@ -0,0 +1,11 @@
+const invoiceRouter = [
+    {
+        path: '/invoiceIndex',
+        name: 'invoiceIndex',
+        component: () => import('@/views/invoice/invoiceIndex'),
+        meta:{
+            title: '道路救援',
+        }
+    },
+]
+export default invoiceRouter

src/router/kpi-router.js

@@ -0,0 +1,11 @@
+const kpiRouter = [
+    {
+        path: '/kpiIndex',
+        name: 'kpiIndex',
+        component: () => import('@/views/kpi/kpiIndex'),
+        meta:{
+            title: 'kpi首页',
+        }
+    },
+]
+export default kpiRouter

src/styles/approval.scss

@@ -0,0 +1,116 @@
+@import "@/styles/mixin.scss";
+.refresh{
+  min-height: 100%;
+  //background-color: #F4F5F7;
+}
+.wrap{
+  @include wh(100%,100%);
+  box-sizing: border-box;
+  background-color: #F4F5F7;
+}
+.tab_wrap {
+  @include fontWeightSize(500, 14px);
+  @include flexColAround();
+  padding: 2px 0 10px 0;
+  background: #2C395F;
+  div {
+    padding-top: 8px;
+    color: #FFFFFF;
+  }
+  .alpha{
+    opacity: 0.5;
+  }
+  .numTip{
+    display: inline-block;
+    @include wh(15px,15px);
+    @include bgcolorOpa(#F95B45,0.9);
+    border-radius: 4px;
+    text-align: center;
+    line-height: 15px;
+    margin-left: 5px;
+    opacity: 1; /* 保持透明度为1 */
+  }
+  .active {
+    position: relative;
+    opacity: 1;
+  }
+  .active:after {
+    content: '';
+    display: block;
+    @include wh(18px,2px);
+    opacity: .8;
+    background: #FFFFFF;
+    position: absolute;
+    border-radius: 2px;
+    margin-top: 3px;
+    left: 50%;
+    opacity: 1;
+    transform: translateX(-50%);
+  }
+}
+::v-deep .van-pull-refresh{
+  height: calc(100% - 86px) ;
+}
+.listWrap{
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  .listItem{
+    width: 100%;
+    box-sizing: border-box;
+    padding: 14px 25px 13px 29px;
+    background-color: #FFFFFF;
+    margin-bottom: 10px;
+    .line1{
+      @include flexColBet();
+      .viewBtn{
+        @include wh(48px,18px);
+        text-align: center;
+        line-height: 18px;
+        background: #354D93;
+        border-radius: 3px;
+        color: #FFFFFF;
+      }
+    }
+
+  }
+}
+.bgEmptyImg{
+  @include flexTwoCenter;
+  height: 90% ;
+  background-color: #FAFAFA;
+  img{
+    width: 100%;
+  }
+}
+.greColor{
+  color:#38AD00 ;
+  font-weight: 500;
+}
+.redColor{
+  color:#FF5D2E ;
+  font-weight: 500;
+}
+.commonImg{
+  @include widHeiMar(13px,13px,4px);
+}
+.rightArrImg{
+  @include wh(6px,9px);
+  margin-left: 6px;
+}
+.yelColor{
+  color: #E69B0B;
+  font-weight: 600;
+}
+.greColor{
+  color: #56B628;
+  font-weight: 600;
+}
+.oraColor{
+  color: #FF5D2E;
+  font-weight: 600;
+}
+.garyColor{
+  color: #9C9C9C;
+  font-weight: 600;
+}

src/styles/common.scss

@@ -8,9 +8,6 @@ select{
   background-color: transparent; /* 设置透明背景色 */
   border: none;              /* 取消边框 */
   outline: none;
-    /* 右侧添加箭头的背景图  自行调整位置 */
-    //background: url('@/assets/copy.png') 20px center no-repeat #fff;
-
 }
 .van-toast--html, .van-toast--text {
   z-index: 100000000002 !important;

src/styles/docment.scss

@@ -0,0 +1,89 @@
+@import "@/styles/mixin.scss";
+
+.wrap{
+  @include wh(100%,100%);
+  background-color: #F4F5F7;
+
+}
+.navBar{
+  margin-bottom: 46px;
+}
+.rightWrap {
+  @include flexCenter;
+  .img2 {
+    @include wh(17px, 17px);
+  }
+}
+.tab_wrap {
+  @include fontWeightSize(bold, 12px);
+  display: flex;
+  justify-content: space-around;
+  padding: 5px 0 5px 0;
+  @include colorOpa(#737373,0.7);
+  div {
+    padding-top: 8px;
+  }
+  .active {
+    color: #3678FF;
+    position: relative;
+  }
+  .active:after {
+    content: '';
+    display: block;
+    @include wh(50px,2px);
+    background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);
+    border-radius: 2px;
+    position: absolute;
+    margin-top: 3px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+.contentWrap{
+  @include sizingPadding(0,8px);
+  overflow-y: auto;
+  width: 100%;
+  height: calc(100% - 100px);
+  margin-top: 10px;
+  .itemWrap{
+    margin-bottom: 16px;
+    width: 100%;
+    //@include wh(100%, 300px);
+    background: #FFFFFF;
+    box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
+    @include sizingPadRadius(6px ,0,6px);
+    @include flexAround;
+    @include fontWeightSize(400, 12px);
+    .flexBetween{
+      @include flexColBet;
+    }
+    .common{
+      margin: 0 15px ;
+    }
+    .time{
+      color: rgba(0,0,0,0.7);
+      margin-top: 5px;
+    }
+    .imgWrap{
+      @include wh(100%,200px);
+      position: relative;
+      margin: 6px 0;
+      img{
+        @include wh(100%,100%);
+      }
+    }
+    .left{
+      color: red;
+      @include fontWeightSize(bold,15px);
+    }
+  }
+
+}
+.empty{
+  @include flexTwoCenter;
+  height:calc(100% - 86px);
+  background-color: #FAFAFA;
+  img{
+    width: 100%;
+  }
+}

src/styles/driverDocment.scss

@@ -0,0 +1,103 @@
+@import "@/styles/mixin.scss";
+::v-deep .van-nav-bar__content{
+  background-color: #3A3A3A !important;
+}
+.wrap{
+  @include wh(100%,100%);
+  background-color: #F4F5F7;
+
+}
+.navBar{
+  margin-bottom: 46px;
+}
+.search{
+  color: #AAADB3  !important;
+  font-weight: bolder;
+  margin-right: 10px;
+}
+.navLeft{
+  display: flex;
+  flex-direction: column;
+  color: #9C9C9C;
+  font-size: 8px;
+  .icon{
+    font-size: 10px;
+    font-weight: bold;
+    margin-right: 5px;
+    margin-top: 5px;
+  }
+}
+.statisticContainer{
+  box-sizing: border-box;
+  padding: 8px;
+}
+.statisticWrap{
+  @include wh(100%,100px);
+  background: #FFFFFF;
+  box-sizing: border-box;
+  padding: 8px 8px 15px;
+  border-radius: 8px;
+  border: 1px solid #c7c1c1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .line1{
+    display: flex;
+    justify-content: space-between;
+    span:first-child{
+      font-weight: bolder;
+    }
+    span:last-child{
+      opacity: .7;
+      //font-size: 12px;
+    }
+  }
+  .numWrap{
+    display: flex;
+    justify-content: space-around;
+    div{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-size: 14px;
+      font-weight: 500;
+      span:first-child{
+        margin-bottom: 3px;
+        font-size: 18px;
+      }
+    }
+  }
+}
+.rightWrap {
+  @include flexCenter;
+  .img2 {
+    @include wh(17px, 17px);
+  }
+}
+.driver_tab_wrap {
+  font-size: 12px;
+  display: flex;
+  justify-content: space-around;
+  padding: 5px 0 5px 0;
+  div {
+    padding-top: 8px;
+  }
+  .active {
+    position: relative;
+  }
+  .active:after {
+    content: '';
+    display: block;
+    @include wh(100px,2px);
+    background-color: #E8A524;
+    border-radius: 2px;
+    position: absolute;
+    margin-top: 3px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+.empty{
+  margin-top: 14px;
+
+}

src/styles/mixin.scss

@@ -2,6 +2,11 @@
     font-size: $size;
     font-weight: $weight;
 }
+@mixin sizeWeightCol($size,$weight,$col){
+    font-size: $size;
+    font-weight: $weight;
+    color: $col;
+}
 @mixin bgFontColor($color,$bgcolor){
     color:$color;
     background: $bgcolor;
@@ -23,6 +28,14 @@
     width: $w;
     height: $h;
 }
+@mixin whMarLe($w,$h,$l){
+    @include wh($w,$h);
+    margin-left: $l;
+}
+@mixin whBg($w,$h,$bg){
+    @include wh($w,$h);
+    background: $bg;
+}
 @mixin flexColumn{
     display: flex;
     flex-direction: column;
@@ -31,11 +44,64 @@
     @include flexColumn;
     justify-content: space-between;
 }
+@mixin flexAround(){
+    @include flexColumn;
+    justify-content: space-around;
+}
+@mixin flexColCen(){
+    @include flexColumn;
+    align-items: center;
+}
 @mixin flexColBet(){
     display: flex;
     justify-content: space-between;
 }
+@mixin flexColAround(){
+    display: flex;
+    justify-content: space-around;
+}
 @mixin flexCenter(){
     display: flex;
     align-items: center;
 }
+@mixin flexBetCen{
+    @include flexColBet;
+    align-items: center;
+}
+@mixin flexTwoCenter(){
+    @include flexCenter;
+    justify-content: center;
+}
+@mixin colorOpa($col,$alpha){
+    color: $col;
+    opacity: $alpha;
+}
+@mixin bgcolorOpa($col,$alpha){
+    background: $col;
+    opacity: $alpha;
+}
+@mixin radiusSizing($rad){
+    border-radius: $rad;
+    box-sizing: border-box;
+}
+@mixin sizingPadding($tb,$lr){
+    box-sizing: border-box;
+    padding: $tb $lr;
+}
+@mixin sizingPadRadius( $tb,$lr,$rad){
+    box-sizing: border-box;
+    padding: $tb $lr;
+    border-radius: $rad;
+}
+@mixin sizing4Padding($t,$r,$b,$l){
+    box-sizing: border-box;
+    padding: $t $r $b $l;
+}
+@mixin sizing4Radius($t,$r,$b,$l,$radius){
+    @include sizing4Padding($t,$r,$b,$l);
+    border-radius: $radius;
+}
+@mixin colHeight($col,$hei){
+    color: $col;
+    line-height: $hei;
+}

src/utils/approval.js

@@ -0,0 +1,42 @@
+
+const getStatus=(i)=>{
+  switch (i){
+    case 0://待提交
+    case 1://待审核
+      return require('@/assets/waitSubmit.png')
+    case 2://审核通过
+    case 7://已打款
+      return require('@/assets/dakuan.png')
+    case 3://审核不通过
+      return require('@/assets/unpass.png')
+    case 4://报销失败
+      return require('@/assets/unSubmit.png')
+    case 6://代打款
+      return require('@/assets/waitDakuan.png')
+    default:
+      return require('@/assets/waitSubmit.png')
+  }
+}
+const getStatusColor=(i)=>{
+  switch (i){
+    case 0://待提交
+    case 1://待审核
+      return 'yelColor'
+    case 2://审核通过
+    case 6://代打款
+    case 7://已打款
+      return 'greColor'
+    case 3://审核不通过
+      return 'oraColor'
+    case 4://报销失败
+      return 'garyColor'
+    default:
+      return 'yelColor'
+  }
+}
+
+module.exports = {
+  getStatus,
+  getStatusColor
+}
+

src/utils/common.js

@@ -5,7 +5,14 @@ const formatDate = date => {
   const day = tempDate.getDate()
   return `${[year, month, day].map(formatNumber).join('-')}`
 }
-
+const formatDate1 = date => {
+  let value=date.replace(/\./g, '/')
+  let tempDate = new Date(value)
+  const year = tempDate.getFullYear()
+  const month = tempDate.getMonth() + 1
+  const day = tempDate.getDate()
+  return `${[year, month, day].map(formatNumber).join('/')}`
+}
 const formatNumber = n => {
   n = n.toString()
   return n[1] ? n : `0${n}`
@@ -40,5 +47,6 @@ module.exports = {
   formatNumber,
   formatDate,
   leftCopy,
-  timeFormat
+  timeFormat,
+  formatDate1
 }

src/utils/http.js

@@ -15,13 +15,27 @@ let token = urlParams.get('token') ;
 localStorage.setItem('token', token);
 service.interceptors.request.use(
     config => {
+      // let reqUrl=config.url
+        // console.log("reqUrl",reqUrl)
       config.data = config.contentType ? config.data : qs.stringify(config.data)
-      config.headers['Content-Type'] = config.contentType || 'application/x-www-form-urlencoded'
+      if (config.testFlag) {
-        const token = localStorage.getItem('token');
+        config.data = qs.stringify(config.data, {arrayFormat: 'indices', allowDots: true})
-      // const urlParams = new URLSearchParams(window.location.search);
+      }
-      // const token = urlParams.get('token') ;
+        config.headers['Content-Type'] = config.contentType || 'application/x-www-form-urlencoded'
-      // let token='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJzemwiLCJhdWQiOlsic3VwcGxpZXItYXBwIl0sIm5iZiI6MTY5Mjc3MzMxMSwidXNlcl9pbmZvIjp7InVzZXJJZCI6NTQ1ODUsInBob25lIjoiMTc2MzAwMzU2NTgiLCJuYW1lIjoi5bCP5a6LIiwic3VwcGxpZXJOYW1lIjoi5LiK5rW35a6J55WFQSIsInN1cHBsaWVySWQiOjExMjgsInN1cHBsaWVyVHlwZSI6MSwidXNlcm5hbWUiOiJzemwiLCJ1c2VyVHlwZSI6IkFQUCIsImF1dGhvcml0aWVzIjpbXX0sInNjb3BlIjpbImFsbCJdLCJpc3MiOiJodHRwczovL3Npbm9hc3Npc3QuY29tIiwiZXhwIjoxNjkyODU5NzExLCJpYXQiOjE2OTI3NzMzMTF9.bFTJlX73vYl06ncE6Ge5_qtbEwRNFZwXhzNjMXzikkE'
+      let token = localStorage.getItem('token');
+      // let token='4099761587129c46b03c9316c9e866c9'
+      // let token='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJzb25nIiwiYXVkIjpbInN1cHBsaWVyLWFwcCJdLCJuYmYiOjE3MTI0NTQ5NTMsInVzZXJfaW5mbyI6eyJ1c2VySWQiOjU0NjU0LCJwaG9uZSI6IjE3NjMwMDM1NjU4IiwibmFtZSI6InNvbmciLCJzdXBwbGllck5hbWUiOiJDLeS4iua1t-a1i-ivleacjeWKoeWVhiIsInN1cHBsaWVySWQiOjMzMDQxLCJzdXBwbGllclR5cGUiOjIsInVzZXJuYW1lIjoic29uZyIsInVzZXJUeXBlIjoicmVzY3VlQXBwIiwiZGV2aWNlSWQiOiIyMmI0OWNhMjBmOWI4MzMwZDk4NzIxNzNmMzllYTY4YmMiLCJhdXRob3JpdGllcyI6W119LCJzY29wZSI6WyJhbGwiXSwiaXNzIjoiaHR0cHM6Ly9zaW5vYXNzaXN0LmNvbSIsImV4cCI6MTcxMjU0MTM1MywiaWF0IjoxNzEyNDU0OTUzfQ.sPU9_OD_TOWcTwqmlawEGyo4mCPrEaRYw2R02gnvYJw'
+      config.headers['token'] = `${token}`;
       config.headers['Authorization'] = `${token}`;
+      /*if (reqUrl.includes("/driverApp")) {
+          //  console.log("司机app")
+          config.headers['token'] = `${token}`;
+      } else if(reqUrl.includes("/supplierApp") || reqUrl.includes("/supplierKPI") || reqUrl.includes('/supplier/select') || reqUrl.includes('/order') || reqUrl.includes('/order/taskInvoiceBatch') || reqUrl.includes('/supplier') ){
+          // console.log("调度app，服务商kpi")
+          config.headers['Authorization'] = `${token}`;
+      }else{
+          config.headers['token'] = `${token}`;
+      }*/
       return config
     },
     error => {
@@ -41,7 +55,7 @@ service.interceptors.response.use(
       // }
       if ( res.code === 401 || res.code === 400  || res.code == 500) {
           Toast(res.msg || 'Error')
-          return Promise.reject(new Error(res.msg || 'Error'))
+          return Promise.reject(res.msg)
       } else {
           return res
         // if( res.code === 200 ) {

src/utils/myMixins.js

@@ -34,6 +34,28 @@ export const myMixins = {
         window.android.sendMessage("goBack");
       }
     },
+    goH5Detail(item,type){//h5传参到app文档资料，培训文档
+      // console.log("type",type)
+      let data = {
+        "action": "goTraining",
+        "params": {
+          "id":type == '培训文档' ? Number(1000000+item.id) : item.id,
+        }
+      };
+
+      let u = navigator.userAgent;
+      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+      if(isiOS){
+        // console.log("data",data)
+        window.webkit.messageHandlers.nativeObject.postMessage(data);
+      }else {
+        if(type == '培训文档'){
+          window.android.sendMessage("articleId=" +'q'+ item.id);
+        }else{
+          window.android.sendMessage("articleId=" + item.id);
+        }
+      }
+    },
     h5GoBack(){
       this.$router.back();
     },

src/views/battery/batteryDetail.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="wrap" >
+    <div class="navBar">
+      <van-nav-bar
+          title="已售电瓶"
+          left-arrow
+          left-arrow-color="#FFFFFF"
+          :border="false"
+          :fixed="true"
+          :safe-area-inset-top="true"
+          @click-left="h5GoBack"
+      > </van-nav-bar>
+    </div>
+    <div class="container" v-if="batteryDetailList && batteryDetailList.length>0">
+      <div class="itemWrap" v-for="(item,index) in batteryDetailList" :key="index">
+        <div>
+          <span class="halfOpci">设备号</span>
+          <span class="allOpci">{{ item.productNo }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">品牌</span>
+          <span class="allOpci">{{ item.brand }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">型号</span>
+          <span class="allOpci">{{ item.model }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">售卖人员</span>
+          <span class="allOpci">{{ item.saleName }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">售卖时间</span>
+          <span class="allOpci">{{ item.createTime }}</span>
+        </div>
+      </div></div>
+  </div>
+</template>
+
+<script>
+
+import {myMixins} from "@/utils/myMixins"
+import {batteryDetailList} from  "@/api/order"
+export default {
+  name: "batteryDetail",
+  mixins:[myMixins],
+  data(){
+    return{
+      batteryDetailList:[],
+      isLoading: false,
+      loading: false,
+      brand: '',
+      model:'',
+    }
+  },
+  async mounted() {
+    this.brand = this.$route.params.brand;
+    this.model = this.$route.params.model;
+    await this.getDetailList()
+  },
+  methods:{
+    async getDetailList(){
+      let res = await batteryDetailList({
+        brand:this.brand,
+        model:this.model,
+      })
+      this.batteryDetailList=res.data.reverse();
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/mixin.scss';
+@import "@/styles/common.scss";
+
+.wrap {
+  background: #F4F5F7;
+  @include wh(100%, 100%);
+}
+.navBar{
+  margin-bottom: 46px;
+  .rightWrap{
+    @include wh(50px,20px);
+    border-radius: 10px;
+    opacity: 0.7;
+    border: 1px solid #FFFFFF;
+    @include flexTwoCenter;
+    img{
+      @include widHeiMar(9px,8px,4px);
+    }
+    .addTxt{
+      @include fontWeightSize(bolder,11px);
+      @include colorOpa( #FFFFFF,0.7);
+    }
+  }
+}
+.container{
+  @include wh(100%, calc(100% - 56px));
+  overflow-y: auto;
+  @include sizingPadding(13px,13px);
+}
+.itemWrap {
+  @include wh(100%, 104px);
+  @include radiusSizing(6px);
+  @include fontWeightSize(400, 12px);
+  @include flexBetween;
+  background: #FFFFFF;
+  box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
+  margin-bottom: 10px;
+  padding: 11px 13px 9px 15px;
+  position: relative;
+  .halfOpci {
+    display: inline-block;
+    width: 60px;
+    opacity: .5;
+    margin-right: 5px;
+  }
+  .allOpci {
+    opacity: 1;
+  }
+  .statusNo {
+    color: #FF0000;
+  }
+  .statusYes {
+    color: #09B820
+  }
+  .img{
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    right: 10px;
+    top: 35%;
+    cursor: pointer;
+  }
+}
+
+</style>

src/views/battery/batteryList.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="wrap" >
+    <div class="navBar">
+      <van-nav-bar
+          title="电瓶进销存"
+          left-arrow
+          left-arrow-color="#FFFFFF"
+          :border="false"
+          :fixed="true"
+          :safe-area-inset-top="true"
+          @click-left="goBack"
+      >
+      </van-nav-bar>
+    </div>
+    <van-field class="input" right-icon="search" v-model="keyword" placeholder="请输入品牌或型号"   @input="filterBatteryList"/>
+    <div class="container" v-if="batteryList && batteryList.length>0">
+      <div class="itemWrap" v-for="(item,index) in batteryList" :key="index">
+        <div>
+          <span class="halfOpci">品牌</span>
+          <span class="allOpci">{{ item.brand }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">型号</span>
+          <span class="allOpci">{{ item.model }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">总量</span>
+          <span class="allOpci">{{ item.totalNum }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">库存数量</span>
+          <span class="allOpci">{{ item.stockNum }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">已售数量</span>
+          <span class="allOpci">{{ item.sellNum }}</span>
+        </div>
+        <img @click="goBatteryDetail(item)" class="img" src="@/assets/arrow_rht.png" />
+      </div>
+    </div>
+    <div class="bgEmptyImg" v-show="show" >
+      <img  src="@/assets/empty.png" />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import {myMixins} from "@/utils/myMixins"
+import {batteryCountList} from  "@/api/order"
+export default {
+  name: "batteryList",
+  mixins:[myMixins],
+  data(){
+    return{
+      batteryList:[],
+      isLoading: false,
+      keyword:'',
+    }
+  },
+  computed:{
+    show() {
+      return (this.batteryList.length < 0 || this.batteryList.length == 0); // 判断数组长度是否大于 0
+    },
+  },
+  mounted() {
+    this.getList()
+  },
+  methods:{
+    async filterBatteryList(){
+      await this.getList()
+      this.batteryList = this.batteryList.filter(item =>
+          item.brand.includes(this.keyword) || item.model.includes(this.keyword)
+      );
+    },
+    goBatteryDetail(item){//电瓶详情
+      this.$router.push({
+        name: "batteryDetail",
+        params: {
+          brand: item.brand,
+          model: item.model,
+        }
+      })
+    },
+    async getList(){
+      let res = await batteryCountList()
+      this.batteryList=res.data
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/mixin.scss';
+@import "@/styles/common.scss";
+
+.wrap {
+  background: #F4F5F7;
+  @include wh(100%, 100%);
+}
+.navBar{
+  margin-bottom: 46px;
+  .rightWrap{
+    @include wh(50px,20px);
+    border-radius: 10px;
+    opacity: 0.7;
+    border: 1px solid #FFFFFF;
+    @include flexTwoCenter;
+    img{
+      @include widHeiMar(9px,8px,4px);
+    }
+    .addTxt{
+      @include fontWeightSize(bolder,11px);
+      @include colorOpa( #FFFFFF,0.7);
+    }
+  }
+}
+.input{
+  //@include sizingPadding(13px,13px);
+  //margin: 13px 0;
+}
+.container{
+  @include sizingPadding(13px,13px);
+  overflow-y: auto;
+  @include wh(100%, calc(100% - 96px));
+}
+
+.itemWrap {
+  @include wh(100%, 104px);
+  @include radiusSizing(6px);
+  @include fontWeightSize(400, 12px);
+  @include flexBetween;
+  background: #FFFFFF;
+  box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
+  margin-bottom: 10px;
+  padding: 11px 13px 9px 15px;
+  position: relative;
+  //margin-top: 10px;
+  .halfOpci {
+    display: inline-block;
+    width: 60px;
+    opacity: .5;
+    margin-right: 5px;
+  }
+  .allOpci {
+    opacity: 1;
+  }
+  .statusNo {
+    color: #FF0000;
+  }
+  .statusYes {
+    color: #09B820
+  }
+  .img{
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    right: 10px;
+    top: 35%;
+    cursor: pointer;
+  }
+}
+.bgEmptyImg{
+  @include flexTwoCenter;
+  height: 90% ;
+  background-color: #FAFAFA;
+  img{
+    width: 100%;
+  }
+}
+</style>

src/views/caseList/caseAuditList.vue

@@ -0,0 +1,351 @@
+<template>
+  <div class="wrap">
+    <div class="navBar">
+      <van-nav-bar
+          title="案件审核列表"
+          :left-arrow="isShowBackBtn ? true : false"
+          left-arrow-color="#FFFFFF"
+          :border="false"
+          :fixed="true"
+          :safe-area-inset-top="true"
+          @click-left="goPrePage"
+      />
+    </div>
+    <div class="tab_wrap">
+      <div v-for="(item, index) in tabArr" :key="index"
+           @click="changeTab(index)">
+        <span :class="{'active' : activeIndex == index , 'alpha' :true}"> {{ item.name }}</span>
+        <span class="numTip" style="opacity: 1 !important;">{{item.num}}</span>
+      </div>
+    </div>
+    <van-pull-refresh class="refresh" v-model="isLoading" @refresh="onRefresh" v-show="!show">
+      <div class="listWrap">
+        <div class="listItem" v-for="(item,index) in pageList" :key="index" @click="noMultipleClicks(goPageDetail,item.id)">
+          <div class="line1">
+            <div><span>案件编号:</span><span>{{ item.userOrderCode }}</span></div>
+            <div class="right">
+              <img class="commonImg" :src="getStatus(item.state.code)">
+              <div :class="getStatusColor(item.state.code)">{{item.state.label}}</div>
+              <img class="rightArrImg"  src="@/assets/list_rightArrow.png">
+            </div>
+          </div>
+          <div><span>报销金额:</span><span>{{ item.reimburseAmount }}元</span></div>
+          <div v-show="activeIndex == 2"><span>审核备注:</span><span style="color: #FF5D2E">{{ item.auditRemark }}</span></div>
+        </div>
+      </div>
+
+    </van-pull-refresh>
+    <div class="bgEmptyImg" v-show="show" >
+      <img  src="@/assets/empty.png" />
+    </div>
+  </div>
+
+</template>
+
+<script>
+import {myMixins} from "@/utils/myMixins";
+import {reimburseBatchOrderCount,reimburseBatchOrderList } from "@/api/reimbursementBatch";
+export default {
+  name: "caseAuditList",
+  mixins: [myMixins],
+  data(){
+    return{
+      tabArr: [ {name: '审核通过', status: 2,num:0},{name: '审核不通过', status: 2,num:0},],
+      activeIndex: 0,
+      pageList:[],
+      pageNum:1,
+      pageSize:10,
+      id:'',//批次id
+      isLoading:"",
+      isShowBackBtn:true,
+      backBtn:false,
+      type:'',//用于判断是已审核还是待审核,已审核只有两个tab切
+      noClick:true,
+      getUrlId:'',
+    }
+  },
+  computed:{
+    show() {
+      return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
+    },
+  },
+  created() {
+
+  },
+  async mounted() {
+    // 获取当前 URL
+    const urlParams = new URLSearchParams(window.location.search);
+    if(urlParams.get('id')){//后台进入此页面没有返回按钮
+      this.isShowBackBtn=false
+    }else{
+      this.isShowBackBtn=true
+    }
+    this.backBtn=this.$route.params.isShowBtn
+    if(this.backBtn){
+      this.isShowBackBtn=false
+    }
+    // console.log(" this.backBtn", this.backBtn)
+    this.getUrlId=urlParams.get('id')
+    this.id = urlParams.get('id') || this.$route.params.id  || this.$route.params.batchCode;
+    this.activeIndex=this.$route.params?.activeIndex || 0
+    this.type=this.$route.params?.type
+    // console.log("urlParams.get('status')",urlParams.get('status'))
+    if (urlParams.get('status')){
+      this.type=urlParams.get('status')
+    }
+    if (this.type==1 || (urlParams.get('status') && urlParams.get('status') == 1)) {
+      this.tabArr.unshift({name: '待审核', status: 1,num:0},);
+    }
+    await this.batchOrderCount();
+    await this.getList()
+  },
+  methods:{
+    goPrePage(){
+      this.$router.push({
+        name: 'caseList',
+        params: {
+          type: this.type
+        }
+      });
+    },
+    onRefresh() {
+      this.getList()
+      setTimeout(() => {
+        this.$toast('刷新成功');
+        this.isLoading = false;
+      }, 1000);
+    },
+    async changeTab(index) {
+      this.activeIndex = index
+      this.pageNum = 1
+      this.pageList = [];
+      await this.getList()
+    },
+    async getList(){
+      let res=await reimburseBatchOrderList ({
+        pageNum:this.pageNum,
+        pageSize:this.pageSize,
+        batchCode:this.id,
+        type:this.tabArr.length==3 ? this.activeIndex+1 : this.activeIndex+2
+      })
+      this.pageList=res.data
+    },
+    async batchOrderCount(){
+      let res  =await reimburseBatchOrderCount({
+        batchCode:this.id
+      })
+      this.tabArr.forEach(tab => {
+        if (tab.name === '待审核') {
+          tab.num = res.data.waitAuditCount;
+        } else if (tab.name === '审核通过') {
+          tab.num = res.data.auditSuccessCount;
+        }else{
+          tab.num = res.data.auditFailCount;
+        }
+      });
+    },
+    goPageDetail(id){
+      this.$router.push({
+        name: 'caseDetail',  // 目标路由的名称
+        params: {
+          id:id,
+          index:this.activeIndex,
+          batchCode:this.id,
+          getUrlId:this.getUrlId,
+          type:this.type,}
+      });
+
+    },
+    getStatus(i){
+      switch (i){
+        case 0://待提交
+        case 1://待审核
+          return require('@/assets/waitSubmit.png')
+        case 2://审核通过
+        case 7://已打款
+          return require('@/assets/dakuan.png')
+        case 3://审核不通过
+          return require('@/assets/unpass.png')
+        case 4://报销失败
+          return require('@/assets/unSubmit.png')
+        case 6://代打款
+          return require('@/assets/waitDakuan.png')
+        default:
+          return require('@/assets/waitSubmit.png')
+      }
+    },
+    getStatusColor(i){
+      switch (i){
+        case 0://待提交
+        case 1://待审核
+          return 'yelColor'
+        case 2://审核通过
+        case 6://代打款
+        case 7://已打款
+          return 'greColor'
+        case 3://审核不通过
+          return 'oraColor'
+        case 4://报销失败
+          return 'garyColor'
+        default:
+          return 'yelColor'
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+@import "@/styles/common.scss";
+@import "@/styles/approval.scss";
+.navBar{
+  margin-bottom: 46px;
+}
+.listItem{
+  padding: 14px 25px 13px 29px;
+  div{
+    line-height: 27px;
+    span:first-child{
+      display: inline-block;
+      width: 60px;
+      opacity: 0.5;
+    }
+    .right{
+      @include flexCenter();
+    }
+  }
+}
+/*.refresh{
+  min-height: 100%;
+  background-color: #F4F5F7;
+}
+.wrap{
+  @include wh(100%,100%);
+  box-sizing: border-box;
+}
+.navBar{
+  margin-bottom: 46px;
+}
+!*::v-deep .van-nav-bar__content{
+  background-color: #354683 !important;
+}*!
+.tab_wrap {
+  @include fontWeightSize(500, 14px);
+  @include flexColAround();
+  padding: 2px 0 10px 0;
+  background: #2C395F;
+  div {
+    padding-top: 8px;
+    color: #FFFFFF;
+  }
+  .alpha{
+    opacity: 0.5;
+  }
+  .numTip{
+    display: inline-block;
+    @include wh(15px,15px);
+    @include bgcolorOpa(#F95B45,0.9);
+    border-radius: 4px;
+    text-align: center;
+    line-height: 15px;
+    margin-left: 5px;
+    opacity: 1; !* 保持透明度为1 *!
+  }
+  .active {
+    position: relative;
+    opacity: 1;
+  }
+  .active:after {
+    content: '';
+    display: block;
+    @include wh(18px,2px);
+    opacity: .8;
+    background: #FFFFFF;
+    position: absolute;
+    border-radius: 2px;
+    margin-top: 3px;
+    left: 50%;
+    opacity: 1;
+    transform: translateX(-50%);
+  }
+}
+::v-deep .van-pull-refresh{
+  height: calc(100% - 86px) ;
+}
+.listWrap{
+  width: 100%;
+  //height: calc(100% - 86px);
+  height: 100%;
+  overflow-y: auto;
+
+  .listItem{
+    width: 100%;
+    box-sizing: border-box;
+    padding: 14px 25px 13px 29px;
+    background-color: #FFFFFF;
+    margin-bottom: 10px;
+    .line1{
+      @include flexColBet();
+      .viewBtn{
+        @include wh(48px,18px);
+        text-align: center;
+        line-height: 18px;
+        background: #354D93;
+        border-radius: 3px;
+        color: #FFFFFF;
+      }
+    }
+    div{
+      line-height: 27px;
+      span:first-child{
+        display: inline-block;
+        width: 60px;
+        opacity: 0.5;
+      }
+      .right{
+        @include flexCenter();
+      }
+    }
+  }
+}
+.bgEmptyImg{
+  @include flexTwoCenter;
+  height: 90% ;
+  background-color: #FAFAFA;
+  img{
+    width: 100%;
+  }
+}
+.greColor{
+  color:#38AD00 ;
+  font-weight: 500;
+}
+.redColor{
+  color:#FF5D2E ;
+  font-weight: 500;
+}
+.commonImg{
+  @include widHeiMar(13px,13px,4px);
+}
+.rightArrImg{
+  @include wh(6px,9px);
+  margin-left: 6px;
+}
+.yelColor{
+  color: #E69B0B;
+  font-weight: 600;
+}
+.greColor{
+  color: #56B628;
+  font-weight: 600;
+}
+.oraColor{
+  color: #FF5D2E;
+  font-weight: 600;
+}
+.garyColor{
+  color: #9C9C9C;
+  font-weight: 600;
+}*/
+</style>

src/views/caseList/caseDetail.vue

@@ -0,0 +1,624 @@
+<template>
+  <div class="wrap">
+    <div class="navBar">
+      <van-nav-bar
+          title="案件详情"
+          left-arrow
+          left-arrow-color="#FFFFFF"
+          :border="false"
+          :fixed="true"
+          :safe-area-inset-top="true"
+          @click-left="goPrePage"
+      />
+    </div>
+<!--    h5GoBack-->
+    <div class="listWrap">
+     <div class="mapWrap">
+       <div>{{ detailInfo.userOrderCode }}</div>
+       <div class="map">
+         <div class="title">
+           <div><span>司机姓名:</span><span>{{ detailInfo.driverName }}</span></div>
+           <div><span>车牌号:</span><span>{{ detailInfo.plateNumber }}</span></div>
+         </div>
+         <div class="mapContainer"    id="container"></div>
+       </div>
+       <div class="wiadgeWrap">
+          <div class="lineWrap">
+            <div class="left">
+              <img class="commonImg" :src="detailInfo.bridgeAbUrl">
+              <span class="free">AB(出发段)路桥费</span>
+              <span>{{detailInfo.settleMileageAb}}公里</span>
+            </div>
+            <div class="right">
+              <span>{{detailInfo.bridgeAmountAb}}</span>
+              <span>元</span>
+            </div>
+          </div>
+          <div class="line"></div>
+         <div class="lineWrap">
+           <div class="left">
+             <img class="commonImg" :src="detailInfo.bridgeBcUrl">
+             <span class="free">BC(出发段)路桥费</span>
+             <span>{{detailInfo.settleMileageBc}}公里</span>
+           </div>
+           <div class="right">
+             <span>{{detailInfo.bridgeAmountBc}}</span>
+             <span>元</span>
+           </div>
+         </div>
+         <div class="line"></div>
+         <div class="lineWrap">
+           <div class="left">
+             <img class="commonImg" :src="detailInfo.bridgeCaUrl">
+             <span class="free">CA(出发段)路桥费</span>
+             <span>{{detailInfo.settleMileageCa}}公里</span>
+           </div>
+           <div class="right">
+             <span>{{detailInfo.bridgeAmountCa}}</span>
+             <span>元</span>
+           </div>
+         </div>
+         <div class="line"></div>
+         <div class="totalFree">
+           <span>总金额</span>
+           <span>{{ detailInfo.bridgeAmountAb+detailInfo.bridgeAmountBc+detailInfo.bridgeAmountCa }}</span>
+           <span>元</span>
+         </div>
+       </div>
+     </div>
+      <template  v-if="detailInfo.state.code == 1">
+        <div class="aduit">
+          <div  :class="{itemWrap : true,aduitResult: detailInfo.secondAudit}">
+            <div>
+              <span class="star">*</span>
+              <span>{{detailInfo.secondAudit ? '二次审核结果' : '审核结果'}}</span>
+            </div>
+            <div class="isJoin">
+              <van-radio-group v-model="states" @change="isUse"  class="joinWrap">
+                <van-radio :name="2" style="margin-right: 26px" class="item">
+                  通过
+                  <img
+                      slot="icon"
+                      slot-scope="props"
+                      :src="props.checked ? activeIcon : inactiveIcon"
+                  >
+                </van-radio>
+                <template v-if="detailInfo.secondAudit">
+                  <van-radio  :name="4"  class="item">报销失败
+                    <img
+                        slot="icon"
+                        slot-scope="props"
+                        :src="props.checked ? activeIcon : inactiveIcon"
+                    >
+                  </van-radio>
+                </template>
+                <template v-else>
+                  <van-radio  :name="3"  class="item">
+                    不通过
+                    <img
+                        slot="icon"
+                        slot-scope="props"
+                        :src="props.checked ? activeIcon : inactiveIcon"
+                    >
+                  </van-radio>
+                </template>
+              </van-radio-group>
+            </div>
+          </div>
+          <div class="itemWrap"  v-if="states == 3 || states == 4">
+            <div>
+              <div>
+                <span class="star">*</span>
+                <span>不通过原因</span>
+              </div>
+            </div>
+            <van-dropdown-menu active-color="#354683" direction="up">
+                <van-dropdown-item v-model="other" :options="option"   @change="changeOption">
+                  <template #title>
+                    <span v-if="!other">请选择</span>
+                    <span v-else>{{ other }}</span>
+                  </template>
+                </van-dropdown-item>
+            </van-dropdown-menu>
+          </div>
+          <div v-show="other == '其他'">
+            <div>其他原因</div>
+            <textarea v-model="otherReason" class="multipleTxt" placeholder="描述"></textarea>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+       <div class="aduit" style="line-height: 20px">
+         <div  class="itemWrap" >
+           <div> {{ result }}</div>
+           <div class="gary">{{detailInfo.state.label}}
+         </div>
+         </div>
+         <div class="itemWrap"  v-if="detailInfo.state.code == 3 || detailInfo.state.code == 4">
+           <div>不通过原因 </div>
+           <div class="gary">{{detailInfo.auditRemark.includes('/') ? detailInfo.auditRemark.substring(0,2) : detailInfo.auditRemark}}</div>
+         </div>
+         <div class="itemWrap" v-show="detailInfo.auditRemark.substring(0,2) == '其他'">
+           <div>其他原因</div>
+           <div class="gary" style="flex: 1;width: 75%;text-align: end">{{detailInfo.auditRemark}}</div>
+         </div>
+       </div>
+     </template>
+     <div  v-if="detailInfo.state.code == 1" class="submitBtn" @click="noMultipleClicks(submitHandle)">提交</div>
+   </div>
+  </div>
+
+</template>
+
+<script>
+import {myMixins} from "@/utils/myMixins";
+import {reimburseOrderDetail,reimburseOrderAudit} from  "@/api/reimbursementBatch"
+import minePosition from "@/assets/realApoint.png";
+import vehiclePosition from "@/assets/realBpoint.png";
+import desitationPosition from "@/assets/realCpoint.png";
+export default {
+  name: "caseDetail",
+  mixins: [myMixins],
+  data(){
+    return{
+      states:'',
+      activeIcon: require('@/assets/check.png'),
+      inactiveIcon: require('@/assets/uncheck.png'),
+      otherReason:'',
+      other:'',
+      firstSubmit:2,
+      id:'',
+      detailInfo:{},
+      noClick:true,
+      state:'',//审核状态
+      map: '',
+      abPath:[],
+      bcPath:[],
+      activeIndex:'',
+      batchCode:'',
+      isShowBtn:false,
+      type:'',
+      option: [
+        { text: '缺失凭证照片', value: '缺失凭证照片' },
+        { text: '申请金额与凭证不一致', value: '申请金额与凭证不一致' },
+        { text: '非正常产生路桥费', value: '非正常产生路桥费' },
+        { text: '其他', value: '其他' },
+
+      ],
+    }
+  },
+  created() {
+    this.id = this.$route.params.id;
+    // this.id=29
+    this.activeIndex=this.$route.params.index;
+    this.batchCode=this.$route.params.batchCode
+    this.isShowBtn=this.$route.params.getUrlId
+    this.type=this.$route.params?.type
+    console.log("created",this.type)
+    console.log(" this.isShowBackBtn",this.isShowBackBtn)
+  },
+  async mounted(){
+    await this.getOrderDetail()
+    this.$nextTick(() => {
+      this.initMap();
+    });
+  },
+  computed:{
+    result() {
+      if (this.detailInfo.secondAudit) {
+        if(this.detailInfo.state.code != 3){
+          return '二次审核结果';
+        }else{
+          return '审核结果';
+        }
+      } else {
+        return '审核结果';
+      }
+    },
+  },
+  methods:{
+    changeOption(){
+      console.log("99999",this.other)
+    },
+    goPrePage(){
+      this.$router.push({
+        name: 'caseAuditList',  // 目标路由的名称
+        params: {
+          activeIndex:this.activeIndex,
+          batchCode:this.batchCode,
+          isShowBtn:this.isShowBtn,
+          type:this.type
+        }
+      });
+    },
+    initMap() {
+      this.map = new AMap.Map('container',{
+        zoom:14,//级别(缩放比例 3-20 )
+        center: [this.detailInfo.apointLongtitude,this.detailInfo.apointLatitude],//中心点坐标
+        viewMode:'2D',//使用3D视图
+      })
+      this.map.on('complete', () => {
+        this.mapMarkers();
+      });
+    },
+    mapMarkers(){
+      let ABpolyline=''
+      let BCpolyline=''
+      if(this.abPath && this.abPath.length>0){
+        ABpolyline = new AMap.Polyline({
+          path: [...this.abPath],
+          strokeColor: '#005DC7', // 路径线颜色
+          strokeWeight: 5 ,// 路径线宽度
+          showDir: true // 显示箭头
+        });
+        this.map.add(ABpolyline);
+      }
+      if(this.bcPath && this.bcPath.length>0){
+        BCpolyline = new AMap.Polyline({
+          path: [...this.bcPath],
+          strokeColor: '#005DC7 ', // 路径线颜色
+          strokeWeight: 5 ,// 路径线宽度
+          showDir: true // 显示箭头
+        });
+        this.map.add(BCpolyline);
+      }
+      // 车辆位置，a点
+      let marker = new AMap.Marker({
+        position: [this.detailInfo?.apointLongtitude,this.detailInfo?.apointLatitude],
+        icon: new AMap.Icon({
+          image: minePosition, // 图片的相对路径
+          size: new AMap.Size(43, 43),  // 图标的尺寸
+          imageSize: new AMap.Size(43, 43)  // 图片的实际尺寸
+        }),
+      });
+      this.setLabel(marker,this.detailInfo.apointAddress)
+      this.map.add(marker);
+      // 事发地，b点
+      let marker1 = new AMap.Marker({
+        position: [this.detailInfo?.bpointLongtitude,this.detailInfo?.bpointLatitude],
+        icon: new AMap.Icon({
+          image: vehiclePosition, // 图片的相对路径
+          size: new AMap.Size(43, 43),  // 图标的尺寸
+          imageSize: new AMap.Size(43, 43)  // 图片的实际尺寸
+        })
+      });
+      this.setLabel(marker1,this.detailInfo.bpointAddress)
+      this.map.add(marker1);
+      let marker2=''
+      if(this.detailInfo.cpointLongtitude && this.detailInfo.cpointLatitude){
+          marker2 = new AMap.Marker({
+               position: [this.detailInfo?.cpointLongtitude,this.detailInfo?.cpointLatitude],
+               icon: new AMap.Icon({
+                 image: desitationPosition, // 图片的相对路径
+                 size: new AMap.Size(28, 28),  // 图标的尺寸
+                 imageSize: new AMap.Size(28, 28)  // 图片的实际尺寸
+               })
+             });
+        this.setLabel(marker2,this.detailInfo.cpointAddress)
+        this.map.add(marker2);
+      }
+      if(this.detailInfo.cpointLongtitude && this.detailInfo.cpointLatitude){
+        this.map.setFitView([marker,marker1,marker2])
+      }else{
+        this.map.setFitView([marker,marker1])
+      }
+    },
+    setLabel(markerPoint,address){
+      markerPoint.setLabel({
+        offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量
+        content: address, //设置文本标注内容
+        direction: 'top'
+      });
+    },
+    async submitHandle(){
+      if(!this.states){
+          this.$toast('审核结果必选')
+          return
+      }
+      if(this.states != 2  && !this.other){
+        this.$toast('审核不通过原因必填')
+        return
+      }
+      if(this.other == '其他'  && !this.otherReason){
+        this.$toast('审核不通过原因为其他时审核原因必填')
+        return
+      }
+      let res=''
+      try {
+        res = await reimburseOrderAudit({
+          id: this.id,
+          state: this.state,
+          auditRemark: this.other == '其他' ? this.other + '/' + this.otherReason : this.other,
+        })
+      } catch (e) {
+        // this.$toast(e.error)
+      }
+      if(res.code == 200){
+        this.$toast("提交成功")
+        setTimeout(()=>{
+          this.goPrePage()
+        },1500)
+      }else{
+        this.$toast(res.msg)
+      }
+    },
+    isUse(e){
+      this.state=e
+    },
+    async getOrderDetail(){
+      let res=await reimburseOrderDetail({
+        id:this.id
+      })
+      this.detailInfo=res.data
+      if(this.detailInfo.gpsTrackQOsAB && this.detailInfo.gpsTrackQOsAB .length > 0){
+        this.detailInfo?.gpsTrackQOsAB.forEach((item)=>{
+          this.abPath.push([item.lon,item.lat])
+        })
+      }
+      if(this.detailInfo.gpsTrackQOsBC && this.detailInfo.gpsTrackQOsBC .length > 0){
+        this.detailInfo?.gpsTrackQOsBC.forEach((item)=>{
+          this.bcPath.push([item.lon,item.lat])
+        })
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+@import "@/styles/common.scss";
+.wrap{
+  @include wh(100%,100%);
+  box-sizing: border-box;
+}
+::v-deep .van-dropdown-menu__bar {
+  background-color: #FFFFFF !important; /* 去掉边框 */
+  box-shadow: none !important; /* 去掉阴影（如果有的话）*/
+}
+/*.mySelect{
+  @include fontWeightSize(bold,13px);
+  color: #323643;
+  appearance: none;
+  padding-right: 16px;
+  background: url('@/assets/arrow_bot.png') no-repeat right center / 15px 14px;
+  text-align: right; !* 将下拉列表的文本右对齐 *!
+}
+.mySelect {
+  -webkit-appearance: none; !* 移除默认的样式 *!
+  -moz-appearance: none;
+  appearance: none;
+  position: relative;
+  z-index: 1;
+}
+
+.mySelect::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  pointer-events: none;
+  border-style: solid;
+  border-width: 6px 6px 0 6px;
+  border-color: #000 transparent transparent transparent;
+}*/
+.navBar{
+  margin-bottom: 46px;
+}
+::v-deep .van-nav-bar__content{
+  background-color: #354683 !important;
+}
+.listWrap{
+  width: 100%;
+  height: calc(100% - 46px);
+  overflow-y: auto;
+  background-color: #F4F5F7;
+  box-sizing: border-box;
+  padding: 10px 8px;
+  position: relative;
+  .mapWrap{
+    @include wh(100%,407px);
+    background-color: #FFFFFF;
+    border-radius: 6px;
+    margin-bottom: 15px;
+    box-sizing: border-box;
+    padding: 9px 8px 0;
+    .map{
+      @include wh(100%,204px);
+      border-radius: 4px;
+      border: 1px solid #F0F0F0;
+      margin-top: 7px;
+      margin-bottom: 13px;
+      .title{
+        @include wh(100%,31px);
+        line-height: 31px;
+        background: #F9FCFF;
+        border-radius: 0px 0px 6px 6px;
+        display: flex;
+        div{
+          width: 50%;
+          margin-left: 17px;
+          font-size: 12px;
+          span:first-child{
+            display: inline-block;
+            color: #555A68;
+            margin-right: 3px;
+          }
+          span:last-child{
+            color: #3A3A3A;
+          }
+        }
+      }
+      .mapContainer{
+        @include wh(100%,173px)
+      }
+    }
+  }
+  .wiadgeWrap{
+    box-sizing: border-box;
+    padding: 0 6px;
+    .lineWrap{
+      @include flexBetCen();
+      line-height: 32px;
+      .left{
+        @include flexCenter();
+        img{
+          @include wh( 48px,31px);
+        }
+        .free{
+          margin: 0 11px;
+          @include fontWeightSize(bold,13px);
+          @include colorOpa(#000000,0.9);
+        }
+        span:last-child{
+          font-size: 12px;
+          color: #555A68;
+        }
+      }
+      .right{
+        span:first-child{
+          @include fontWeightSize(bold,18px);
+          @include colorOpa(#000000,0.75);
+        }
+        span:last-child{
+          @include fontWeightSize(bold,10px);
+          @include colorOpa(#000000,0.8);
+          margin-left: 4px;
+        }
+      }
+    }
+    .line{
+      width: 100%;
+      border-bottom: 1px solid #E9E9EA;
+      opacity: 0.6;
+      margin-top: 2px;
+    }
+    .totalFree{
+      width: 100%;
+      line-height: 42px;
+      @include flexCenter();
+      justify-content: flex-end;
+      span:first-child{
+        @include fontWeightSize(bold,13px);
+        @include colorOpa(#000000,0.9);
+      }
+      span:nth-child(2){
+        @include fontWeightSize(600,22px);
+        color: #FF5D2E;
+        margin: 0 3px 0 9px;
+      }
+      span:last-child{
+        @include fontWeightSize(bold,10px);
+        @include colorOpa(#000000,0.8);
+      }
+    }
+  }
+  .aduit{
+    width: 100%;
+    background-color: #FFFFFF;
+    //height: 201px;
+    line-height: 37px;
+    border-radius: 6px;
+    margin-bottom: 15px;
+    box-sizing: border-box;
+    padding: 17px 21px 19px 16px;
+    @include flexBetween();
+    .itemWrap{
+      display: flex;
+      justify-content: space-between;
+      .gary{
+        opacity: 0.5;
+      }
+    }
+    .star{
+      color:  #FF0808;
+      @include fontWeightSize(bold,13px);
+    }
+    .isJoin{
+      display: flex;
+      position: relative;
+      z-index: 10;
+      .joinWrap, .item{
+        @include flexCenter;
+      }
+      img{
+        @include widHeiMar(16px,16px,6px)
+      }
+    }
+    .multipleTxt{
+      @include wh(100%,87px);
+      background: #FAFAFA;
+      @include sizingPadRadius(8px,8px,3px);
+      border: 1px solid #E6E6E6;
+      backdrop-filter: blur(10px);
+      margin-top: 3px;
+    }
+    .aduitResult:after{
+      content: '该案件为二次提交，审核不通过后司机无法再次申请报销。';
+      color: red;
+      position: absolute;
+      z-index: 1;
+      line-height: 70px;
+      font-size: 10px;
+    }
+  }
+  .submitBtn{
+    //position: absolute;
+    //bottom: 30px;
+    margin:20px 0 10px 6%;
+    border-radius: 5px;
+    text-align: center;
+    @include bgFontColor(#FFFFFF,#354D93);
+    @include fontWeightSize(bold,15px);
+    @include whLin(88%,48px);
+  }
+}
+.greColor{
+  color:#38AD00 ;
+  font-weight: 500;
+}
+.redColor{
+  color:#FF5D2E ;
+  font-weight: 500;
+}
+.commonImg{
+  @include widHeiMar(13px,13px,4px);
+}
+.rightArrImg{
+  @include wh(6px,9px);
+  margin-left: 6px;
+}
+.yelColor{
+  color: #E69B0B;
+  font-weight: 600;
+}
+.greColor{
+  color: #56B628;
+  font-weight: 600;
+}
+.oraColor{
+  color: #FF5D2E;
+  font-weight: 600;
+}
+.garyColor{
+  color: #9C9C9C;
+  font-weight: 600;
+}
+::v-deep .amap-copyright{
+  display: none !important;
+}
+::v-deep .amap-logo{
+  display: none !important;
+}
+::v-deep .amap-marker-label{
+  border: none;
+  padding: 0 8px;
+  @include all-height(25px);
+  @include fontWeightSize(12px,400);
+  color: #3A3A3A;
+  @include bgcolorOpa(#FFFFFF,0.98);
+  box-shadow: 0px 1px 4px 0px rgba(164,162,162,0.69);
+  border-radius: 17px;
+}
+</style>

src/views/caseList/caseList.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="wrap">
+    <div class="navBar">
+      <van-nav-bar
+          title="报销批次"
+          left-arrow
+          left-arrow-color="#FFFFFF"
+          :border="false"
+          :fixed="true"
+          :safe-area-inset-top="true"
+          @click-left="goBack"
+      />
+    </div>
+    <div style="height: 42px">
+      <div class="tab_wrap">
+        <div v-for="(item, index) in tabArr" :key="index"
+             @click="changeTab(index)">
+          <span :class="{'active' : activeIndex == index , 'alpha' :true}"> {{ item.name }}</span>
+          <span class="numTip" style="opacity: 1 !important;">{{item.num}}</span>
+        </div>
+      </div>
+    </div>
+
+    <van-pull-refresh class="refresh" v-model="isLoading" @refresh="onRefresh" v-show="!show">
+      <van-list
+          v-model="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
+      >
+        <div class="listWrap">
+          <div class="listItem" v-for="(item,index) in pageList" :key="index" @click="noMultipleClicks(goPageDetail,item.batchCode)">
+            <div class="line1">
+              <div><span>审核批次:</span><span>{{item.batchCode}}</span></div>
+              <div class="viewBtn">查看</div>
+            </div>
+            <div><span>报销金额:</span><span class="redColor">{{item.totalAmount}}元</span><span class="greColor">/{{item.auditSuccessAmount}}元</span></div>
+            <div><span>案件数量:</span><span>{{item.orderCount}}</span><span class="greColor">/{{item.auditSuccessCount}}</span></div>
+            <div><span>提交人员:</span><span>{{ item.createUser }}</span></div>
+            <div><span>提交时间:</span><span>{{ item.createTime }}</span></div>
+          </div>
+        </div>
+
+      </van-list>
+    </van-pull-refresh>
+    <div class="bgEmptyImg" v-show="show" >
+      <img  src="@/assets/empty.png" />
+    </div>
+   </div>
+
+</template>
+
+<script>
+import {myMixins} from "@/utils/myMixins";
+import {reimburseBatchCount, reimburseBatchList} from "@/api/reimbursementBatch"
+export default {
+  name: "caseList",
+  mixins: [myMixins],
+  data(){
+    return{
+      tabArr: [ {name: '待审核', status: 1,num:0},{name: '已审核', status: 2,num:0},],
+      activeIndex: 0,
+      pageList:[],
+      pageNum:1,
+      pageSize:10,
+      total:'',
+      isLoading:"",
+      loading: false,
+      finished: false,
+      noClick:true
+    }
+  },
+   async mounted() {
+     this.activeIndex = (this.$route.params.type - 1) || this.activeIndex
+     await this.getCount();
+     await this.getList()
+  },
+  computed:{
+    show() {
+      return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
+    },
+  },
+  methods:{
+    async onLoad(){
+      // console.log('00000000000000000000')
+      this.pageNum++;
+      await this.getList()
+      // 加载状态结束
+      this.loading = false;
+
+      // 数据全部加载完成
+      if (this.pageList.length >= this.total) {
+        this.finished = true;
+      }
+    },
+    async changeTab(index) {
+      this.activeIndex = index
+      this.pageNum = 1
+      this.pageList = [];
+      this.total=0
+      this.loading=false
+      this.finished=false
+      await this.getCount()
+      await this.getList()
+      // await this.onLoad()
+    },
+    onRefresh() {
+      this.pageNum=1
+      // this.getList()
+      setTimeout(() => {
+        this.$toast('刷新成功');
+        this.isLoading = false;
+      }, 1000);
+    },
+    async getList(){
+     let res=await reimburseBatchList({
+        pageNum:this.pageNum,
+        pageSize:this.pageSize,
+        type:this.activeIndex == 0 ? 1 : 2
+      })
+      this.total=res.total
+      if(this.pageNum == 1){// 第一页直接赋值
+        this.pageList=res.data
+      }else{// 第二页数据拼接
+        console.log("第二页数据拼接")
+        let preList = this.pageList;
+        console.log("preList",preList)
+        let arr = res.data;
+        console.log("arr",arr)
+        this.pageList = preList.concat(arr)
+        console.log("this.pageList",this.pageList)
+      }
+
+    },
+    async getCount(){
+      let res=await reimburseBatchCount()
+      this.tabArr.forEach(tab => {
+        if (tab.name === '待审核') {
+          tab.num = res.data.waitAuditCount;
+        } else if (tab.name === '已审核') {
+          tab.num = res.data.auditSuccessCount;
+        }
+      });
+    },
+    goPageDetail(id){
+      this.$router.push({
+        name: 'caseAuditList',  // 目标路由的名称
+        params: {
+          id: id,                  // 参数对象的属性
+          type: this.activeIndex+1,
+          page1Index:this.activeIndex
+        }
+      });
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+@import "@/styles/common.scss";
+.wrap{
+  @include wh(100%,100%);
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+.navBar{
+  margin-bottom: 46px;
+}
+.bgEmptyImg{
+  @include flexTwoCenter;
+  height: 90% ;
+  background-color: #FAFAFA;
+  img{
+    width: 100%;
+  }
+}
+::v-deep .van-list__finished-text{
+  background-color: #F4F5F7 !important;
+  padding-bottom: 10px;
+}
+::v-deep .van-pull-refresh{
+  height: calc(100% - 86px) ;
+  overflow-y: auto;
+  background-color: #F4F5F7;
+}
+.tab_wrap {
+  @include fontWeightSize(500, 14px);
+  @include flexColAround();
+  padding: 2px 0 10px 0;
+  background: #2C395F;
+  position: fixed;
+  z-index: 11;
+  width: 100%;
+  div {
+    padding-top: 8px;
+    color: #FFFFFF;
+  }
+  .alpha{
+    opacity: 0.5;
+  }
+  .numTip{
+    display: inline-block;
+    min-width: 15px;
+    @include all-height(15px);
+    @include bgcolorOpa(#F95B45,0.9);
+    border-radius: 4px;
+    text-align: center;
+    margin-left: 5px;
+    opacity: 1; /* 保持透明度为1 */
+  }
+  .active {
+    position: relative;
+    opacity: 1;
+  }
+  .active:after {
+    content: '';
+    display: block;
+    @include wh(18px,2px);
+    opacity: .8;
+    background: #FFFFFF;
+    position: absolute;
+    border-radius: 2px;
+    margin-top: 3px;
+    left: 50%;
+    opacity: 1;
+    transform: translateX(-50%);
+  }
+}
+.listWrap{
+  width: 100%;
+  height: calc(100% - 86px);
+  //height: 100%;
+  overflow-y: auto;
+  background-color: #F4F5F7;
+  .listItem{
+    width: 100%;
+    box-sizing: border-box;
+    padding: 14px 25px 13px 29px;
+    background-color: #FFFFFF;
+    margin-bottom: 10px;
+    .line1{
+      @include flexColBet();
+      .viewBtn{
+        @include wh(48px,18px);
+        text-align: center;
+        line-height: 18px;
+        background: #354D93;
+        border-radius: 3px;
+        color: #FFFFFF;
+      }
+    }
+    div{
+      line-height: 27px;
+      span:first-child{
+        display: inline-block;
+        width: 60px;
+        opacity: 0.5;
+      }
+    }
+  }
+}
+.greColor{
+  color:#38AD00 ;
+  font-weight: bold;
+}
+.redColor{
+
+  color:#FF5D2E ;
+  font-weight: bold;
+}
+</style>

src/views/documentView/diverTrainDocment.vue

@@ -0,0 +1,175 @@
+<template>
+<div class="wrap">
+  <div class="navBar">
+    <van-nav-bar
+        :border="false"
+        :fixed="true"
+        :safe-area-inset-top="true"
+    >
+      <template slot="title">
+        <van-field
+            v-model="keyword"
+            placeholder="名称/关键词/简介"
+        >
+        </van-field>
+      </template>
+      <template slot="left">
+        <div class="navLeft" @click="goBack">
+          <van-icon class="icon" name="arrow-left" />
+          <div>返回</div>
+        </div>
+      </template>
+      <template slot="right">
+          <van-icon class="search" name="search" size="20"  @click="getTrainingList"/>
+      </template>
+    </van-nav-bar>
+  </div>
+  <div class="statisticContainer">
+    <div class="statisticWrap">
+      <div class="line1">
+        <span>培训统计</span>
+        <span>更新时间：{{time}}</span>
+      </div>
+      <div class="numWrap">
+        <div>
+          <span>{{ numInfo?.totalNum }}</span>
+          <span>文章总数</span>
+        </div>
+        <div>
+          <span>{{ numInfo?.readNum }}</span><span>已培训数量</span>
+        </div>
+        <div>
+          <span>{{ numInfo?.notReadNum }}</span> <span>未培训数量</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="driver_tab_wrap">
+    <div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
+         @click="changeTab(index)">
+      {{ item.name }}
+    </div>
+  </div>
+  <div class="contentWrap" v-show="!showEmpty">
+    <van-pull-refresh v-model="isLoading" @refresh="onRefresh"  style="min-height:85vh">
+      <div class="itemWrap" v-for="(item,index) in  pageList" :key="index" @click="goH5Detail(item,'培训文档')">
+        <div class="info flexBetween common">
+          <div class="title">{{ item.name }}<span v-if="item.mustRead===1" class="read">必读</span></div>
+        </div>
+        <div class="imgWrap">
+          <img :src="item.themePicture">
+        </div>
+        <div class="num common">{{ item.synopsis }}</div>
+        <div  class="info flexBetween common" >
+          <div class="time">{{ item.pushTime		 }}</div>
+          <span style="color: red;font-size: 14px;margin-right: 8px" :class="item.alreadyRead===1 ? 'alRead' : ''">{{ item.alreadyRead===1 ? '已处理' :  '未处理' }}</span>
+        </div>
+      </div>
+    </van-pull-refresh>
+</div>
+  <div class="empty" v-show="showEmpty">
+    <img src="@/assets/empty.png" />
+  </div>
+</div>
+</template>
+
+<script>
+import {myMixins} from "@/utils/myMixins"
+import {getTrainingList} from  "@/api/mine"
+import {timeFormat} from "@/utils/common";
+export default {
+  name: "diverTrainDocment",
+  computed: {
+  },
+  mixins:[myMixins],
+  data(){
+    return{
+      tabArr: [{name: '车型技术参数', status: 1}, {name: '中道服务规范', status:2},{name: '中道小课堂', status: 3}],
+      activeIndex: 0,
+      pageList:[],
+      totalList:[],
+      numInfo:'',
+      keyword:'',
+      show:false,
+      showEmpty:false,
+      isLoading:false,
+      driverId:'',
+      time:'',
+    }
+  },
+  mounted() {
+    const urlParams = new URLSearchParams(window.location.search);
+    this.driverId = urlParams.get('driverId');
+    this.time=timeFormat(Date.now())
+    this.getTrainingList();
+    document.addEventListener('visibilitychange', async (  ) => {
+      let state = document.visibilityState
+      if (state == 'hidden') {  // 用户离开了
+      }
+      if (state == 'visible') {
+        this.getTrainingList();
+      }
+    });
+  },
+  methods:{
+    onRefresh() {
+      this.getTrainingList()
+      setTimeout(() => {
+        this.$toast('刷新成功');
+        this.isLoading = false;
+      }, 1000);
+    },
+    async changeTab(index) {
+      this.activeIndex = index
+      await this.getTrainingList()
+    },
+    async getTrainingList(){
+      let res= await getTrainingList({
+        type:1,
+        id:this.driverId,
+        text:this.keyword || '',
+      })
+      this.totalList=[]
+      this.pageList=[]
+      this.numInfo=res.data
+      this.totalList=res.data.list
+      let result=[]
+      if(this.activeIndex === 0){
+        result=this.totalList?.filter(q => q.title === '车型技术参数');
+      }else if(this.activeIndex === 1){
+        result=this.totalList?.filter(q => q.title === '中道服务规范');
+      }else if(this.activeIndex === 2){
+        result=this.totalList?.filter(q => q.title === '中道小课堂');
+      }
+      if(result){
+        this.pageList=result[0].materials
+        this.time=timeFormat(Date.now())
+      }
+      if(this.pageList?.length === 0){
+        this.showEmpty  = true
+      }else {
+        this.showEmpty = false
+      }
+    },
+  }
+}
+</script>
+<style scoped lang="scss">
+@import "@/styles/common.scss";
+@import "@/styles/mixin.scss";
+@import "@/styles/docment.scss";
+@import "@/styles/driverDocment.scss";
+.read{
+  padding: 2px 8px;
+  border-radius: 5px;
+  border: 1px solid red;
+  color: red;
+  font-size: 8px;
+}
+.alRead{
+  color: #cccccc !important;
+}
+.contentWrap{
+  height: calc(100% - 180px) !important;
+}
+</style>

src/views/documentView/docmentList.vue

@@ -1,69 +1,156 @@
 <template>
 <div class="wrap">
-  <div class="navBar">
+  <template v-if="supplierId">
-    <van-nav-bar
+    <div class="navBar">
-        title="文档资料"
+      <van-nav-bar
-        left-arrow
+          left-arrow
-        left-arrow-color="#FFFFFF"
+          left-arrow-color="#FFFFFF"
-        :border="false"
+          class="supplier"
-        :fixed="true"
+          :border="false"
-        :safe-area-inset-top="true"
+          :fixed="true"
-        @click-left="goBack"
+          :safe-area-inset-top="true"
-    >
+          @click-left="goBack"
-      <template slot="right">
+      >
-        <div class="rightWrap">
+        <template slot="title">
-          <img src="@/assets/serach.png" class="img2"/>
+          <div v-show="!show">文档资料</div>
-        </div>
+          <van-field v-model="keyword" placeholder="请输入关键词" v-show="show"   @input="getNormalList"/>
-      </template>
+        </template>
-    </van-nav-bar>
+        <template slot="right">
-  </div>
+          <div class="rightWrap" @click="show = !show">
-  <div class="tab_wrap">
+            <img src="@/assets/serach.png" class="img2" v-show="!show"/>
+            <img src="@/assets/delKey.png" class="img2" v-show="show" @click="initShow"/>
+          </div>
+        </template>
+      </van-nav-bar>
+    </div>
+  </template>
+  <template v-if="driverId">
+    <div class="navBar">
+      <van-nav-bar
+          :border="false"
+          :fixed="true"
+          :safe-area-inset-top="true"
+      >
+        <template slot="title">
+          <van-field
+              v-model="keyword"
+              placeholder="名称/关键词/简介"
+          >
+            <!--          <template #button>
+                        <van-icon class="search" name="search" size="20"  @click="getTrainingList"/>
+                      </template>-->
+          </van-field>
+        </template>
+        <template slot="left">
+          <div class="navLeft" @click="goBack">
+            <van-icon class="icon" name="arrow-left" />
+            <div>返回</div>
+          </div>
+        </template>
+        <template slot="right">
+          <van-icon class="search" name="search" size="20"  @click="getNormalList"/>
+        </template>
+      </van-nav-bar>
+    </div>
+  </template>
+ <div :class="supplierId ? 'tab_wrap' : 'driver_tab_wrap'">
     <div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
          @click="changeTab(index)">
       {{ item.name }}
     </div>
   </div>
-  <div class="contentWrap">
+  <div class="contentWrap" v-show="!showEmpty">
-        <div class="itemWrap">
+    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="min-height:85vh">
-            <div class="info flexBetween common">
+      <div class="itemWrap" v-for="(item,index) in  pageList" :key="index" @click="goH5Detail(item,'文档资料')">
-              <div class="title">会记回家和</div>
+        <div class="info flexBetween common">
-              <div class="time">2023-08-24 13:14:00</div>
+          <div class="title">{{ item.name }}</div>
-            </div>
-           <div class="imgWrap">
-             <img src="@/assets/empty.png">
-           </div>
-           <div class="num common">111</div>
-            <div class="doc flexBetween common">
-              <div class="left">培训材料</div>
-              <div class="right">
-                <span style="color: red;font-size: 14px;margin-right: 8px">未处理</span>
-                <span style="opacity: .9;color: #ccc">阅读8</span>
-              </div>
-            </div>
         </div>
+        <div class="imgWrap">
+          <img :src="item.themePicture">
+        </div>
+        <div class="num common">{{ item.synopsis }}</div>
+        <div class="time common">{{ item.pushTime		 }}</div>
+      </div>
+    </van-pull-refresh>
+ </div>
+  <div class="empty"  v-show="showEmpty">
+    <img src="@/assets/empty.png"  />
   </div>
 </div>
 </template>
 
 <script>
 import {myMixins} from "@/utils/myMixins"
+import {getNormalList} from "@/api/mine";
 export default {
-  name: "trainDocment",
+  name: "docmentList",
   mixins:[myMixins],
   data(){
     return{
-      tabArr: [{name: '中道制度', status: 1}, {name: '技术参数', status: 2},],
+      tabArr: [{name: '车型技术参数', status: 1}, {name: '中道服务规范', status:2},{name: '中道小课堂', status: 3}, {name: '新手入列', status: 4},],
       activeIndex: 0,
-      orderList: [],
+      pageList:[],
+      totalList:[],
+      keyword:'',
+      isLoading:false,
+      show:false,
+      showEmpty:false,
+      supplierId:'',
+      driverId:'',
     }
   },
-  methods:{
+  mounted() {
-   changeTab(index) {
+    const urlParams = new URLSearchParams(window.location.search);
-    this.activeIndex = index
+    this.supplierId = urlParams.get('supplierId');
-    // this.total = 0;
+    this.driverId = urlParams.get('driverId');
-    this.pageNum = 1
+    this.getNormalList()
-    this.orderList = [];
   },
+  methods:{
+    onRefresh() {
+      this.getNormalList()
+      setTimeout(() => {
+        this.$toast('刷新成功');
+        this.isLoading = false;
+      }, 1000);
+    },
+   async changeTab(index) {
+    this.activeIndex = index
+    await this.getNormalList()
+  },
+    async getNormalList(){
+      let res= await getNormalList({
+        type:this.supplierId ? 2 : 1,
+        // type:2,
+        id: this.supplierId ? this.supplierId : this.driverId,
+        // id:this.supplierId,//33041,
+        text:this.keyword || '',
+      })
+      this.totalList=[]
+      this.pageList=[]
+      this.totalList=res.data.list
+      let result=[]
+      if(this.activeIndex === 0){
+        result=this.totalList?.filter(q => q.title === '车型技术参数');
+      }else if(this.activeIndex === 1){
+        result=this.totalList?.filter(q => q.title === '中道服务规范');
+      }else if(this.activeIndex === 2){
+        result=this.totalList?.filter(q => q.title === '中道小课堂');
+      }else if(this.activeIndex === 3){
+        result=this.totalList?.filter(q => q.title === '新手入列');
+      }
+      if(result){
+        this.pageList=result[0].materials
+      }
+      if(this.pageList?.length === 0){
+        this.showEmpty  = true
+      }else {
+        this.showEmpty = false
+      }
+    },
+    initShow(){
+      this.keyword= '',
+      this.getNormalList()
+    }
 }
 }
 </script>
@@ -71,86 +158,9 @@ export default {
 <style scoped lang="scss">
 @import "@/styles/common.scss";
 @import "@/styles/mixin.scss";
-.wrap{
+@import "@/styles/docment.scss";
-  width: 100%;
+@import "@/styles/driverDocment.scss";
-  height: 100%;
+.supplier ::v-deep .van-nav-bar__content{
-  background-color: #F4F5F7;
+  background-color: #2C395F !important;
-  overflow-y: auto;
-}
-.navBar{
-  margin-bottom: 46px;
-}
-.rightWrap {
-  @include flexCenter;
-  .img2 {
-    @include wh(17px, 17px)
-  }
-}
-.tab_wrap {
-  @include fontWeightSize(bolder, 15px);
-  display: flex;
-  justify-content: space-around;
-  padding: 5px 0 5px 0;
-  color: #737373;
-  opacity: .7;
-  div {
-    padding-top: 8px;
-  }
-  .active {
-    color: #3678FF;
-    position: relative;
-  }
-
-  .active:after {
-    content: '';
-    display: block;
-    width: 50px;
-    height: 3px;
-    background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);
-    border-radius: 2px;
-    position: absolute;
-    margin-top: 3px;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-}
-
-.contentWrap{
-  padding: 0 8px;
-  width: 100%;
-  box-sizing: border-box;
-  .itemWrap{
-    margin-top: 16px;
-    @include wh(100%, 300px);
-    background: #FFFFFF;
-    box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
-    border-radius: 3px;
-    box-sizing: border-box;
-    @include flexColumn;
-    justify-content: space-around;
-    padding: 6px 0;
-    @include fontWeightSize(400, 12px);
-    .flexBetween{
-      @include flexColBet;
-    }
-    .common{
-      margin: 0 15px ;
-    }
-    .imgWrap{
-      width: 100%;
-      height: 200px;
-      //background-color: #6C81CD;
-      img{
-        width: 100%;
-        height: 200px;
-      }
-    }
-    .left{
-      color: red;
-      font-size: 15px;
-      font-weight: 500;
-    }
-  }
-
 }
 </style>

src/views/documentView/trainDocment.vue

@@ -2,7 +2,6 @@
 <div class="wrap">
   <div class="navBar">
     <van-nav-bar
-        title="培训文档 "
         left-arrow
         left-arrow-color="#FFFFFF"
         :border="false"
@@ -10,119 +9,141 @@
         :safe-area-inset-top="true"
         @click-left="goBack"
     >
+      <template slot="title">
+         <div v-show="!show">培训文档</div>
+         <van-field v-model="keyword" placeholder="请输入关键词" v-show="show"   @input="getTrainingList"/>
+      </template>
       <template slot="right">
-        <div class="rightWrap">
+        <div class="rightWrap" @click="show = !show">
-          <img src="@/assets/serach.png" class="img2"/>
+          <img src="@/assets/serach.png" class="img2" v-show="!show"/>
+          <img src="@/assets/delKey.png" class="img2" v-show="show" @click="initShow"/>
         </div>
       </template>
     </van-nav-bar>
   </div>
-  <div class="contentWrap">
+  <div class="tab_wrap">
-        <div class="itemWrap">
+    <div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
-            <div class="info flexBetween common">
+         @click="changeTab(index)">
-              <div class="title">会记回家和</div>
+      {{ item.name }}
-              <div class="time">2023-08-24 13:14:00</div>
+    </div>
-            </div>
+  </div>
-           <div class="imgWrap">
+  <div class="contentWrap" v-show="!showEmpty">
-             <img src="@/assets/empty.png">
+    <van-pull-refresh v-model="isLoading" @refresh="onRefresh"  style="min-height:85vh">
-           </div>
+      <div class="itemWrap" v-for="(item,index) in  pageList" :key="index" @click="goH5Detail(item,'培训文档')">
-           <div class="num common">111</div>
+        <div class="info flexBetween common">
-            <div class="doc flexBetween common">
+          <div class="title">{{ item.name }}<span v-if="item.mustRead===1" class="read">必读</span></div>
-              <div class="left">培训材料</div>
+<!--          <div class="time">{{ item.pushTime		 }}</div>-->
-              <div class="right">
-                <span style="color: red;font-size: 14px;margin-right: 8px">未处理</span>
-                <span style="opacity: .9;color: #ccc">阅读8</span>
-              </div>
-            </div>
         </div>
+        <div class="imgWrap">
+          <img :src="item.themePicture">
+        </div>
+        <div class="num common">{{ item.synopsis }}</div>
+        <div  class="info flexBetween common" >
+          <div class="time">{{ item.pushTime		 }}</div>
+          <span style="color: red;font-size: 14px;margin-right: 8px" :class="item.alreadyRead===1 ? 'alRead' : ''">{{ item.alreadyRead===1 ? '已处理' :  '未处理' }}</span>
+        </div>
+      </div>
+    </van-pull-refresh>
+</div>
+  <div class="empty" v-show="showEmpty">
+    <img src="@/assets/empty.png" />
   </div>
 </div>
 </template>
 
 <script>
 import {myMixins} from "@/utils/myMixins"
-import {pageList} from  "@/api/mine"
+import {getTrainingList} from  "@/api/mine"
 export default {
   name: "trainDocment",
+  computed: {
+  },
   mixins:[myMixins],
   data(){
     return{
+      tabArr: [{name: '车型技术参数', status: 1}, {name: '中道服务规范', status:2},{name: '中道小课堂', status: 3}],
+      activeIndex: 0,
       pageNum:1,
-      pageSize:10
+      pageSize:10,
+      pageList:[],
+      totalList:[],
+      keyword:'',
+      show:false,
+      showEmpty:false,
+      isLoading:false,
+      supplierId:'',
     }
   },
   mounted() {
-    this.getList()
+    const urlParams = new URLSearchParams(window.location.search);
+    this.supplierId = urlParams.get('supplierId');
+    this.getTrainingList();
+    document.addEventListener('visibilitychange', async (  ) => {
+      let state = document.visibilityState
+      if (state == 'hidden') {  // 用户离开了
+      }
+      if (state == 'visible') {
+        this.getTrainingList();
+      }
+    });
   },
   methods:{
-    async getList(){
+    onRefresh() {
-      let res= await pageList({
+      this.getTrainingList()
-        pageNum:this.pageNum,
+      setTimeout(() => {
-        pageSize:this.pageSize,
+        this.$toast('刷新成功');
-        userId:54585,
+        this.isLoading = false;
-        docType:2
+      }, 1000);
+    },
+    async changeTab(index) {
+      this.activeIndex = index
+      await this.getTrainingList()
+    },
+    async getTrainingList(){
+      let res= await getTrainingList({
+        type:2,
+        id: this.supplierId,
+        text:this.keyword || '',
       })
-      console.log(res)
+      this.totalList=[]
-
+      this.pageList=[]
+      this.totalList=res.data.list
+      let result=[]
+      if(this.activeIndex === 0){
+        result=this.totalList?.filter(q => q.title === '车型技术参数');
+      }else if(this.activeIndex === 1){
+        result=this.totalList?.filter(q => q.title === '中道服务规范');
+      }else if(this.activeIndex === 2){
+        result=this.totalList?.filter(q => q.title === '中道小课堂');
+      }
+      if(result){
+        this.pageList=result[0].materials
+      }
+      if(this.pageList?.length === 0){
+        this.showEmpty  = true
+      }else {
+        this.showEmpty = false
+      }
+    },
+    initShow(){
+      this.keyword= '',
+      this.getTrainingList()
     }
   }
 }
 </script>
-
 <style scoped lang="scss">
 @import "@/styles/common.scss";
 @import "@/styles/mixin.scss";
-.wrap{
+@import "@/styles/docment.scss";
-  width: 100%;
+.read{
-  height: 100%;
+  padding: 2px 8px;
-  background-color: #F4F5F7;
+  border-radius: 5px;
-  overflow-y: auto;
+  border: 1px solid red;
+  color: red;
+  font-size: 8px;
 }
-.navBar{
+.alRead{
-  margin-bottom: 46px;
+  color: #cccccc !important;
-}
-.rightWrap {
-  @include flexCenter;
-  .img2 {
-    @include wh(17px, 17px)
-  }
-}
-.contentWrap{
-  padding: 0 8px;
-  width: 100%;
-  box-sizing: border-box;
-  .itemWrap{
-    margin-top: 56px;
-    @include wh(100%, 300px);
-    background: #FFFFFF;
-    box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
-    border-radius: 3px;
-    box-sizing: border-box;
-    @include flexColumn;
-    justify-content: space-around;
-    padding: 6px 0;
-    @include fontWeightSize(400, 12px);
-    .flexBetween{
-      @include flexColBet;
-    }
-    .common{
-      margin: 0 15px ;
-    }
-    .imgWrap{
-      width: 100%;
-      height: 200px;
-      //background-color: #6C81CD;
-      img{
-        width: 100%;
-        height: 200px;
-      }
-    }
-    .left{
-      color: red;
-      font-size: 15px;
-      font-weight: 500;
-    }
-  }
-
 }
 </style>

src/views/driverCaseList/driverCaseList.vue

@@ -0,0 +1,429 @@
+<template>
+  <div class="wrap">
+    <div class="navBar">
+      <van-nav-bar
+          title="路桥费报销"
+          left-arrow
+          left-arrow-color="#FFFFFF"
+          :border="false"
+          :fixed="true"
+          :safe-area-inset-top="true"
+          @click-left="goBack"
+      />
+    </div>
+    <div :style="{ 'height': activeIndex == 0 ? '83px' : '42px' }">
+      <div class="tab_wrap">
+        <div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
+             @click="changeTab(index)">
+          {{ item.name }}
+        </div>
+      </div>
+
+    </div>
+    <div class="monthSearch" v-show="activeIndex == 0">
+      <span v-for="(item,index) in monthList" :class="monthIndex === index ? 'active' : ''" :key="index" @click="clickHandle(index)">{{item}}</span>
+    </div>
+    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" v-show="!show" :class="activeIndex==0 ? 'firstpullRefresh' : 'secondpullRefresh'">
+      <van-list
+          v-model="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
+      >
+        <div class="listWrap" :style="{ 'padding-top': activeIndex == 0 ? '0px' : '10px' }">
+          <div class="itemWrap" v-for="(item,index) in pageList" :key="index" :style="{ 'padding-left': activeIndex == 0 ? '34px' : '11px' }">
+            <div class="contentWrap" @click="noMultipleClicks(goDetail,item.taskOrderId)">
+              <div class="line1">
+                <div><span>订单编号:</span><span>{{item.userOrderCode}}</span></div>
+                <div class="right">
+                  <img class="commonImg" :src="getStatus(item.state)">
+                  <div :class="getStatusColor(item.state)">{{item.stateStr}}</div>
+                  <img class="rightArrImg"  src="@/assets/list_rightArrow.png">
+                </div>
+              </div>
+              <div><span>报销金额:</span><span>{{item.reimburseAmount}}元</span></div>
+              <div v-show="activeIndex == 2 || item.state == 3"><span>审核备注:</span><span style="color: #FF5D2E">{{item.auditRemark}}</span></div>
+              <div v-show="(activeIndex != 0 && item.state != 1) || (activeIndex == 0 && item.state == 3)"><span>审核人员:</span><span>{{item.auditUser}}</span></div>
+              <div v-show="(activeIndex != 0 && item.state != 1) || (activeIndex == 0 && item.state == 3)"><span>审核时间:</span><span>{{item.auditTime}}</span></div>
+            </div>
+            <img v-show="activeIndex == 0" class="checkImg" @click="toggleSelection(item)" :src="item.isSelected ? require('@/assets/baoxiao_check.png') : require('@/assets/baoxiao_uncheck.png')">
+          </div>
+        </div>
+
+      </van-list>
+    </van-pull-refresh>
+    <div v-show="activeIndex == 0" class="submitBtnWrap">
+      <div   class="submitBtn" @click="noMultipleClicks(submitHandle)">提交</div>
+    </div>
+
+    <div class="bgEmptyImg" v-show="show" >
+      <img  src="@/assets/empty.png" />
+    </div>
+  </div>
+
+</template>
+
+<script>
+import {myMixins} from "@/utils/myMixins";
+import { waitReimburseList ,reimbursedList,waitReimburseMonth,submitReimburseBatch} from '@/api/reimbursementBatch'
+//
+export default {
+  name: "driverCaseList",
+  mixins: [myMixins],
+
+  data(){
+    return{
+      tabArr: [{name: '待报销', status: 1}, {name: '已报销', status: 2},{name: '报销失败', status: 3},],
+      activeIndex: 0,
+      pageList:[],
+      pageNum:1,
+      pageSize:10,
+      total: 0,
+      isCheck:false,
+      driverId: '',//
+      submitData:[],
+      noClick:true,
+      loading:false,
+      isLoading: false,
+      finished: false,
+      monthList:[],
+      monthIndex:0,
+    }
+  },
+  computed:{
+    show() {
+      return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
+    },
+  },
+  async mounted() {
+    const urlParams = new URLSearchParams(window.location.search);
+    this.driverId = urlParams.get('driverId');
+    // this.driverId = 78948;
+    await this.getMonth();
+    await this.getList()
+  },
+  methods:{
+    async onLoad(){
+      console.log('onLoadonLoadonLoadonLoadonLoad')
+      if (this.pageList.length >= this.total) {
+        this.finished = true;
+        return
+      }
+      this.pageNum++;
+      await this.getList()
+      this.loading = false;
+
+    },
+    async clickHandle(index){
+      // console.log("index",index)
+      this.monthIndex=index
+      this.pageNum=1
+      this.total=0
+      this.pageList=[]
+      this.monthIndex=index
+      // console.log("this.monthIndex",this.monthIndex)
+      await this.getList()
+      this.submitData=[]
+    },
+    onRefresh() {
+      this.pageNum=1;
+      setTimeout(() => {
+        this.$toast('刷新成功');
+        this.isLoading = false;
+      }, 1000);
+    },
+    toggleSelection(item) {
+      item.isSelected = !item.isSelected; // 切换 isSelected 属性的值
+    },
+    async submitHandle(){
+      this.pageList.forEach((item)=>{
+        if(item.isSelected){
+          this.submitData.push({...item})
+        }
+      })
+      // console.log("this.submitData",this.submitData)
+      if(this.submitData && this.submitData.length>0){
+        const uniqueArr = this.submitData.filter(
+            (item, index, self) =>
+                index === self.findIndex((t) => t.userOrderCode === item.userOrderCode)
+        );
+        // console.log("uniqueArr",uniqueArr)
+        let res = await submitReimburseBatch({
+          driverId: this.driverId,
+          orderList: [...uniqueArr]
+        })
+        if(res.code === 200){
+          this.$toast(res.msg)
+        }
+      }else{
+        this.$toast("请勾选要报销的订单")
+      }
+      await this.getList()
+    },
+    async changeTab(index) {
+      this.activeIndex = index
+      this.pageNum = 1
+      this.pageList = [];
+      this.total=0
+      this.loading=false
+      this.finished=false
+      await this.getList()
+    },
+    goDetail(id){
+      window.android.sendMessage("taskId=" + id);
+    },
+    async getList(){
+      let res=[]
+      if(this.activeIndex==0){
+        res=await waitReimburseList({
+          pageNum:this.pageNum,
+          pageSize:this.pageSize,
+          driverId:this.driverId,
+          type: this.activeIndex+1,
+          periodMonth:this.monthList[this.monthIndex]
+        })
+      }else{
+        res=await reimbursedList({
+          pageNum:this.pageNum,
+          pageSize:this.pageSize,
+          driverId:this.driverId,
+          type: this.activeIndex+1
+        })
+      }
+      // this.pageList=res.data
+      this.total=res.total
+      if(this.pageNum == 1){// 第一页直接赋值
+        this.pageList=res.data
+      }else{// 第二页数据拼接
+        let preList = this.pageList;
+        let arr = res.data;
+        this.pageList = preList.concat(arr)
+      }
+      if(this.activeIndex==0){
+        this.pageList.forEach(item => {
+          this.$set(item,'isSelected',false)
+        });
+      }
+    },
+   async getMonth(){
+      let res = await waitReimburseMonth({
+        driverId:this.driverId,
+      })
+      this.monthList=res.data
+    },
+    getStatus(i){
+      switch (i){
+        case 0://待提交
+        case 1://待审核
+          return require('@/assets/waitSubmit.png')
+        case 2://审核通过
+        case 7://已打款
+          return require('@/assets/dakuan.png')
+        case 3://审核不通过
+          return require('@/assets/unpass.png')
+        case 4://报销失败
+          return require('@/assets/unSubmit.png')
+        case 6://代打款
+          return require('@/assets/waitDakuan.png')
+        default:
+          return require('@/assets/waitSubmit.png')
+      }
+    },
+    getStatusColor(i){
+      switch (i){
+        case 0://待提交
+        case 1://待审核
+          return 'yelColor'
+        case 2://审核通过
+        case 6://代打款
+        case 7://已打款
+          return 'greColor'
+        case 3://审核不通过
+          return 'oraColor'
+        case 4://报销失败
+          return 'garyColor'
+        default:
+          return 'yelColor'
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+@import "@/styles/common.scss";
+.wrap{
+  @include wh(100%,100%);
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+.navBar{
+  margin-bottom: 46px;
+}
+::v-deep .van-nav-bar__content{
+  background-color: #000000 !important;
+}
+.tab_wrap {
+  @include fontWeightSize(500, 15px);
+  @include flexColAround();
+  padding: 2px 0 10px 0;
+  @include bgFontColor(#FFFFFF,#101011);
+  position: fixed;
+  width: 100%;
+  z-index: 111;
+  div {
+    padding-top: 8px;
+    @include colorOpa(#FFFFFF,0.5);
+  }
+  .active {
+    position: relative;
+    opacity: 1;
+  }
+  .active:after {
+    content: '';
+    display: block;
+    @include wh(18px,2px);
+    background: #FFFFFF;
+    position: absolute;
+    border-radius: 2px;
+    margin-top: 3px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+.monthSearch{
+  @include wh(100%,45px);
+  background: #F4F5F7 ;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  width: 100%;
+  z-index: 111;
+  top: 84px;
+  span{
+    display: inline-block;
+    @include wh(102px,25px);
+    box-shadow: 0px 1px 2px 0px rgba(236,236,236,0.5);
+    border-radius: 14px;
+    margin-right: 8px;
+    line-height: 25px;
+    text-align: center;
+    @include fontWeightSize(600,14px);
+    background: #FFFFFF;
+  }
+  .active{
+    background: #3687FF;
+    color: #FFFFFF;
+  }
+}
+::v-deep .van-pull-refresh{
+  //height: calc(100% - 140px);
+  overflow-y: auto;
+  background-color: #F4F5F7;
+}
+.firstpullRefresh{
+  height: calc(100% - 140px) ;
+}
+.secondpullRefresh{
+  height: calc(100% - 91px) ;
+}
+::v-deep .van-list__finished-text{
+  padding-bottom: 70px;
+  background-color: #F4F5F7;
+}
+.listWrap{
+  //@include wh(100%,100%);
+  width: 100%;
+  height: calc(100% - 50px);
+  box-sizing: border-box;
+  padding: 0px 7px 10px 8px;
+  overflow-y: auto;
+  position: relative;
+  background-color:#F4F5F7 ;
+  .itemWrap{
+    position: relative;
+    width: 100%;
+    @include flexColBet();
+    box-sizing: border-box;
+    padding: 14px 12px 11px 0;
+    box-shadow: 0px 0px 8px 0px rgba(98,107,128,0.07);
+    border-radius: 10px;
+    border: 1px solid #4C81F5;
+    margin-bottom: 10px;
+    background-color: #FFFFFF;
+    .contentWrap{
+      width: 100%;
+      @include fontWeightSize(400,12px);
+      line-height: 27px;
+      .line1{
+        @include flexColBet();
+      }
+      span:first-child{
+          display:inline-block;
+          width: 60px;
+          opacity: .5;
+        }
+      .right{
+        @include flexCenter();
+      }
+    }
+    .checkImg{
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      @include wh(25px,27px)
+    }
+  }
+}
+.submitBtnWrap{
+  background-color: #F4F5F7;
+  height: 50px;
+  width: 100%;
+  position: fixed;
+  bottom: 10px;
+  @include flexTwoCenter;
+}
+.submitBtn{
+  //position: absolute;
+  //position:;
+  //bottom: 15px;
+  //margin:20px 0 10px 6%;
+  border-radius: 4px;
+  text-align: center;
+  @include bgFontColor(#FFFFFF,#333333);
+  @include fontWeightSize(bold,15px);
+  @include whLin(88%,48px);
+}
+.commonImg{
+  @include widHeiMar(13px,13px,4px);
+}
+.rightArrImg{
+  @include wh(6px,9px);
+  margin-left: 6px;
+}
+.yelColor{
+  color: #E69B0B;
+}
+.greColor{
+  color: #56B628;
+}
+.oraColor{
+  color: #FF5D2E;
+}
+.garyColor{
+  color: #9C9C9C;
+}
+.bgEmptyImg{
+  @include flexTwoCenter;
+  height: 90% ;
+  background-color: #FAFAFA;
+  img{
+    width: 100%;
+  }
+}
+//::v-deep .van-pull-refresh__track{
+//  position: static !important;
+//}
+</style>

src/views/index/driverAdd.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="wrap">
+<div class="wrap driverAdd">
   <div class="navBar">
     <van-nav-bar
         :title="id ? '修改司机信息' : '添加司机'"
@@ -11,16 +11,100 @@
         @click-left="h5GoBack"
     />
   </div>
-  <cell-group label="司机姓名" placeholder="请输入司机姓名"  v-model="driverName"/>
+  <div class="itemContent">
-  <cell-group label="手机号码"  v-model="driverPhone"   placeholder="请输入手机号" />
+    <div class="titleType">
-  <p v-if="phoneNumberError" class="error-message">{{ phoneNumberErrorMessage }}</p>
+      <img class="startImg" src="@/assets/start.png" />
-  <cell-group label="身份证号" v-model="identityCardNumber"   placeholder="请输入身份证号"   />
+      <span>身份证正面</span>
+    </div>
+<!--    <van-image @click="handlePreview"   @remove="handleRemove" style="width: 54px;height: 54px;" class="camerImg" v-if="identityCardFront" :src="identityCardFront" />-->
+<!--    <el-upload-->
+<!--        v-else-->
+<!--        :action="baseURL + '/order/uploadImage'"-->
+<!--        :headers='authorization'-->
+<!--        accept=".png,.jpg,.jpeg,.zip,.rar,.xlsx,.xsavels,.pdf,.PDF,.doc,.docx"-->
+<!--        :on-success="changeHandle"-->
+<!--        :before-upload="checkImgType"-->
+<!--        class="upload-demo"-->
+<!--        :show-file-list="false"-->
+<!--    >-->
+<!--      <van-icon  slot="default" name="plus" style="font-size: 54px" />-->
+<!--    </el-upload>-->
+    <van-uploader
+        v-model="identityCardFrontList"
+        :after-read="identityCardFrontHandler"
+        :max-count="1"
+        :preview-size="54"
+        :max-size="5 * 1024 * 1024"
+        accept="image/*"
+    />
+  </div>
+  <div class="lineBot"></div>
+  <div class="itemContent">
+    <div class="titleType">
+      <img class="startImg" src="@/assets/start.png" />
+      <span>身份证反面</span>
+    </div>
+    <van-uploader
+      v-model="identityCardContraryList"
+      :after-read="identityCardBackHandler"
+      max-count="1"
+      :preview-size="54"
+      accept="image "
+    />
+  </div>
+  <div class="lineBot"></div>
+  <div class="itemContent">
+    <div class="titleType">
+      <img class="startImg" src="@/assets/start.png" />
+      <span>驾驶证主页</span>
+    </div>
+    <van-uploader
+      v-model="drivingLicenceFrontList"
+      :after-read="drivingLicenceFrontHandler"
+      max-count="1"
+      :max-size="5 * 1024 * 1024"
+      :preview-size="54"
+      accept="image "
+    />
+  </div>
+  <div class="lineBot"></div>
+  <div class="itemContent">
+    <div class="titleType">
+      <img class="startImg" src="@/assets/start.png" />
+      <span>驾驶证副页</span>
+    </div>
+    <van-uploader
+      v-model="drivingLicenceContraryList"
+      :after-read="drivingLicenceContraryHandler"
+      max-count="1"
+      :preview-size="54"
+      accept="image "
+    />
+  </div>
+  <div class="lineBot"></div>
+  <div class="itemContent">
+    <div class="titleType">
+      <span>头像</span>
+    </div>
+    <van-uploader
+      v-model="iconList"
+      :after-read="iconListHandler"
+      max-count="1"
+      :preview-size="54"
+      accept="image "
+    />
+  </div>
+  <div class="lineBot"></div>
+<!--  :disabled="supplierType ==1 ? true:false"-->
+  <cell-group label="司机姓名" placeholder="司机姓名"  v-model="driverName" disabled />
+  <cell-group label="手机号码"  v-model="driverPhone"   placeholder="手机号码" />
+  <cell-group label="身份证号" v-model="identityCardNumber"   placeholder="身份证号" disabled  />
   <div class="itemContent">
     <div class="titleType">
       <img class="startImg" src="@/assets/start.png" />
       <span>准驾车型</span>
     </div>
-    <select id="mySelect" v-model="drivingModel"  class="chosen-select" style="width: 44px">
+    <select id="mySelect" class="mySelect" v-model="drivingModel" disabled >
       <option value="A1">A1</option>
       <option value="A2">A2</option>
       <option value="A3">A3</option>
@@ -58,21 +142,25 @@
     </div>
   </div>
   <div class="lineBot"></div>
-  <two-common-btn class="btn" @cancelClick="cancelBtn" @submitClick="submitBtn" />
+  <two-common-btn class="btn" @cancelClick="h5GoBack" @submitClick="submitBtn" />
 </div>
 </template>
 
 <script>
 import {myMixins} from  "@/utils/myMixins"
-import {timeFormat} from "@/utils/common"
+import {saveDriver, uploadImage, ocrHandler} from "@/api/mine"
-import {saveDriver} from "@/api/mine"
 import TwoCommonBtn from "@/components/twoBtnCommon.vue"
 import CellGroup  from "@/components/cellGroup.vue"
+import {formatDate1} from "@/utils/common"
+// import {ImagePreview} from "vant";
+
 export default {
   name: "driverAdd",
   mixins:[myMixins],
   data(){
     return{
+      // baseURL:'',
+      // licenseOcrInfo:'',
       id:'',
       driverName:"",
       driverPhone:"",
@@ -81,67 +169,284 @@ export default {
       states:'',
       activeIcon: require('@/assets/check.png'),
       inactiveIcon: require('@/assets/uncheck.png'),
-      phoneNumberError: false,
+      supplierType:'',
-      phoneNumberErrorMessage: ''
+      createTime:'',
-    }
+      identityCardFront: '',           // 身份证正面
+      identityCardFrontList: [],       // 身份证正面 列表
+      identityCardContrary: '',        // 身份证反面
+      identityCardContraryList: [],    // 身份证反面 列表
+      drivingLicenceFront: '',         // 驾驶证正面
+      drivingLicenceFrontList: [],     // 驾驶证正面 列表
+      drivingLicenceContrary: '',      // 驾驶证反面
+      drivingLicenceContraryList: [],  // 驾驶证反面 列表
+      icon: '',
+      iconList: [],
+      driverInfo: {},
+      drivingLicenceName: '',
+      idCardAuthority:'',
+      idCardValidStartTime:'',
+      idCardValidEndTime:'',
+      // authorization:{Authorization: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJzb25nIiwiYXVkIjpbInN1cHBsaWVyLWFwcCJdLCJuYmYiOjE3MjY4MDk4MTQsInVzZXJfaW5mbyI6eyJ1c2VySWQiOjU0NjU0LCJwaG9uZSI6IjE3NjMwMDM1NjU4IiwibmFtZSI6InNvbmciLCJzdXBwbGllck5hbWUiOiLkuIrmtbfmtYvor5XkvpvlupTllYYiLCJzdXBwbGllcklkIjozMzA0MSwic3VwcGxpZXJUeXBlIjoyLCJ1c2VybmFtZSI6InNvbmciLCJ1c2VyVHlwZSI6InJlc2N1ZUFwcCIsImRldmljZUlkIjoiMTkwZTM1ZjdlMTRhYzdjMDAwNyIsImF1dGhvcml0aWVzIjpbXX0sInNjb3BlIjpbImFsbCJdLCJpc3MiOiJodHRwczovL3Npbm9hc3Npc3QuY29tIiwiZXhwIjoxNzI2ODk2MjE0LCJpYXQiOjE3MjY4MDk4MTR9.5KTAMXZf8ll6HS4Z49YJQ1HiRvHr79Q1goDAGEtsBmY'},
+      // authorization:{Authorization:''},
+      }
   },
   mounted() {
+  /*  if (window.location.href.includes('www.sinoassist.com')) {
+      this.baseURL = 'https://api.sinoassist.com'
+    } else if (window.location.href.includes('ccreview.sino-assist.com')) {
+      this.baseURL = 'https://api.sinoassist.com'
+    } else {
+      this.baseURL = 'https://api1.sino-assist.com'
+      // this.baseURL = 'http://localhost:8080'
+
+    }
+    let token=localStorage.getItem('token')
+    this.authorization.Authorization=token;*/
     this.id = this.$route.params?.id;
     this.driverName = this.$route.params?.name;
     this.driverPhone = this.$route.params?.phone;
     this.drivingModel = this.$route.params?.drivingModel;
     this.identityCardNumber = this.$route.params?.identityCardNumber;
     this.states = this.$route.params?.states;
-    console.log(this.driverName,this.driverPhone,this.drivingModel,this.identityCardNumber,this.states)
+    this.supplierType=this.$route.params?.supplierType;
-      const selectElement = document.getElementById('mySelect');
+    this.createTime=this.$route.params?.createTime;
-      selectElement.addEventListener('change', function() {
+    this.driverInfo.drivingBeginDate = this.$route.params?.drivingBeginDate;
-        const selectedValue = selectElement.value;
+    this.drivingLicenceContrary = this.$route.params?.drivingLicenceContrary;
-        this.drivingModel=selectedValue
+    this.drivingLicenceFront = this.$route.params?.drivingLicenceFront;
-      });
+    this.driverInfo.drivingLicenceValidityDate = this.$route.params?.drivingLicenceValidityDate;
+    this.icon = this.$route.params?.icon;
+    this.identityCardContrary = this.$route.params?.identityCardContrary;
+    this.identityCardFront = this.$route.params?.identityCardFront;
+    this.driverInfo.lssueDate = this.$route.params?.lssueDate;
+    this.drivingLicenceName =  this.$route.params?.drivingLicenceName;
+    if( this.identityCardFront ) {
+      this.identityCardFrontList = [{ url : this.identityCardFront }];
+    }
+    if( this.identityCardContrary ) {
+      this.identityCardContraryList = [{ url : this.identityCardContrary }];
+    }
+    if( this.drivingLicenceFront ) {
+      this.drivingLicenceFrontList = [{ url : this.drivingLicenceFront }];
+    }
+    if( this.drivingLicenceContrary ) {
+      this.drivingLicenceContraryList = [{ url : this.drivingLicenceContrary }];
+    }
+    if( this.icon ) {
+      this.iconList = [{ url : this.icon }];
+    }
+    const selectElement = document.getElementById('mySelect');
+    selectElement.addEventListener('change', function() {
+      const selectedValue = selectElement.value;
+      this.drivingModel=selectedValue
+    });
 
   },
   methods:{
     isUse(e){
       this.states=e
     },
-    async submitBtn(){
+    /* checkImgType(file) {
-      // if (this.driverName || this.driverPhone || this.identityCardNumber || this.drivingModel || this.states){
+      const FileExt = file.name.replace(/.+\./, "");
-      //   this.$toast('必填字段未填写')
+      const isLt5M = file.size / 1024 / 1024 < 5;
-      // }else{
+      const whiteList = ['png', 'jpeg', 'jpg'];
-         await saveDriver({
+      if (whiteList.indexOf(FileExt.toLowerCase()) === -1) {
-          driverId:this.id ? this.id : '',
+        this.$message.error("请上传正确的文件格式:" + whiteList.join('、'))
-          driverName:this.driverName ,
+        return false
-          driverPhone:this.driverPhone,
+      }
-          identityCardNumber:this.identityCardNumber,
+      if (!isLt5M) {
-          drivingModel:this.drivingModel,
+        this.$message.error('上传图片大小不能超过 5MB!');
-          states:Number(this.states),
+        return false
-          createTime:timeFormat(new Date())
+      }
-        })
+    },
-        if(this.id){
+   handleRemove() {
-          this.$toast('修改成功')
+      this.identityCardFront = ''
-
+    },
+    handlePreview() {
+      ImagePreview({
+        images: this.identityCardFront,
+        startPosition: 1,
+        closeable: true,
+      });
+    },
+    async changeHandle(response) {
+      if (response.success === true) {
+        this.$toast('上传成功')
+        // this.form.identityCardFront = response.data;
+        // await this.ocrFrontHandler()
+        this.identityCardFront = response.data;
+        console.log("this.identityCardFront",this.identityCardFront)
+        await this.idCardOcrHandler();
+      } else {
+        this.$toast('上传失败')
+      }
+    },*/
+    async identityCardFrontHandler(file) {    // 上传身份证正面照片
+      const formData = new FormData();
+      formData.append("file" , file.file);
+      let res = await uploadImage(formData)
+      this.identityCardFront = res.data;
+      await this.idCardOcrHandler();
+    },
+    async identityCardBackHandler(file) {  // 上传身份证反面照片
+      const formData = new FormData();
+      formData.append("file" , file.file);
+      let res = await uploadImage(formData)
+      this.identityCardContrary = res.data;
+      await this.idCardBackOcrHandler();
+    },
+    async drivingLicenceFrontHandler(file) {   // 上传驾驶证主页
+      const formData = new FormData();
+      formData.append("file" , file.file);
+      let res = await uploadImage(formData)
+      this.drivingLicenceFront = res.data;
+      await this.drivingLicenceOcrHandler();
+    },
+    async drivingLicenceContraryHandler(file) {   // 上传驾驶证副页
+      const formData = new FormData();
+      formData.append("file" , file.file);
+      let res = await uploadImage(formData)
+      this.drivingLicenceContrary = res.data;
+    },
+    async iconListHandler(file) {           // 上传头像
+      const formData = new FormData();
+      formData.append("file" , file.file);
+      let res = await uploadImage(formData)
+      this.icon = res.data;
+    },
+    async idCardOcrHandler() {    // 身份证正面 ocr识别
+      this.driverName = '';
+      this.identityCardNumber = '';
+      let res = await ocrHandler({
+        ocrType: 1,
+        imageUrl: this.identityCardFront,
+        cardSide: 'FRONT'
+      })
+      this.driverName = res?.data?.name;
+      this.identityCardNumber = res?.data?.idNum;
+      let aaa=''
+      if(this.drivingLicenceName){
+        aaa = this.drivingLicenceName.replace(/[^\u4e00-\u9fff]+/g, '');
+      }
+      let bbb=this.driverName.replace(/[^\u4e00-\u9fff]+/g, '');
+      if( this.drivingLicenceName && aaa != bbb ) {
+        this.$toast('身份证信息与驾驶证信息不匹配')
+      }
+    },
+    async idCardBackOcrHandler() {    // 身份证反面 ocr识别
+      let res = await ocrHandler({
+        ocrType: 1,
+        imageUrl: this.identityCardContrary,
+        cardSide: 'BACK'
+      });
+      this.idCardAuthority=res.data.authority
+      if(!res.data.validDate){
+        return
+      }
+      let date=res.data.validDate.split('-')
+      if(date[0]){
+        this.idCardValidStartTime=formatDate1(date[0]) +' '+ '00:00:00';
+      }
+      if(date[1]){
+        if(date[1] == '长期'){
+          this.idCardValidEndTime='2099/12/12' +' '+ '00:00:00';
         }else{
-          this.$toast('添加成功')
+          this.idCardValidEndTime=formatDate1(date[1]) +' '+ '00:00:00';
         }
+      }
+    },
+    async drivingLicenceOcrHandler() {      // 驾驶证正面 ocr识别
+      this.driverInfo.drivingLicenceValidityDate = '';
+      this.driverInfo.drivingBeginDate = '';
+      this.driverInfo.lssueDate = '';
+      this.drivingModel = '';
+      this.drivingLicenceName = '';
+      let res = await ocrHandler({
+        ocrType: 2,
+        imageUrl: this.drivingLicenceFront,
+        cardSide: 'FRONT'
+      });
+      if( res?.data ) {
+        this.driverInfo.drivingBeginDate = res?.data?.dateOfFirstIssue || '';
+        this.driverInfo.lssueDate = res?.data?.dateOfFirstIssue ? (res?.data?.dateOfFirstIssue + ' 00:00:00') : '';
+        if( res?.data?.endDate.indexOf('长期') != -1 ) {
+          this.driverInfo.drivingLicenceValidityDate = '2099-01-01';
+        } else {
+          this.driverInfo.drivingLicenceValidityDate = res?.data?.endDate;
+        }
+
+        this.drivingModel = res.data?.class_;
+        this.drivingLicenceName = res.data?.name
+        let aaa=''
+        if(this.driverName){
+           aaa = this.driverName.replace(/[^\u4e00-\u9fff]+/g, '');
+        }
+        let bbb = this.drivingLicenceName.replace(/[^\u4e00-\u9fff]+/g, '');
+        if( this.driverName && bbb != aaa ) {
+          this.$toast('身份证信息与驾驶证信息不匹配')
+        }
+      }
+    },
+    async submitBtn(){
+      if(!this.identityCardFront) {
+        this.$toast('身份证正面照未上传')
+        return
+      }
+      if(!this.identityCardContrary) {
+        this.$toast('身份证反面照未上传')
+        return
+      }
+      if(!this.drivingLicenceFront) {
+        this.$toast('驾驶证首页未上传')
+        return
+      }
+      if(!this.drivingLicenceContrary) {
+        this.$toast('驾驶证副页未上传')
+        return
+      }
+      let drivingLicenceName=this.drivingLicenceName.replace(/[^\u4e00-\u9fff]+/g, '');
+      let driverName=this.driverName.replace(/[^\u4e00-\u9fff]+/g, '');
+
+      if( drivingLicenceName != driverName ) {
+        this.$toast('身份证信息与驾驶证信息不匹配')
+        return
+      }
+      if( this.driverInfo.drivingLicenceValidityDate ) {
+        if(this.driverInfo.drivingLicenceValidityDate && new Date(this.driverInfo.drivingLicenceValidityDate).getTime() < new Date().getTime() ) {
+          this.$toast('驾驶证已过期')
+          return
+        }
+      } else {
+        this.$toast('驾驶证信息识别错误，请重新上传')
+        return
+      }
+       await saveDriver({
+         driverId:this.id ? this.id : '',
+         driverName:this.driverName ,
+         driverPhone:this.driverPhone,
+         identityCardNumber:this.identityCardNumber,
+         drivingModel:this.drivingModel,
+         states:Number(this.states),
+         createTime:this.createTime || '',
+         identityCardFront: this.identityCardFront,
+         identityCardContrary: this.identityCardContrary,
+         drivingLicenceFront: this.drivingLicenceFront,
+         drivingLicenceContrary: this.drivingLicenceContrary,
+         icon: this.icon,
+         drivingLicenceName: this.drivingLicenceName,
+         idCardAuthority:this.idCardAuthority,
+         idCardValidStartTime:this.idCardValidStartTime,
+         idCardValidEndTime:this.idCardValidEndTime,
+         ...this.driverInfo
+      })
+      if(this.id){
+        this.$toast('修改成功')
+      }else{
+        this.$toast('添加成功')
+      }
         setTimeout(()=>{
           this.$router.back();
         },2000)
-      // }
+      },
-    },
-    cancelBtn(){//取消
-     this.$router.back()
-    },
-    // @blurIn="validatePhoneNumber"
-    // validatePhoneNumber() {
-    //   const phoneNumberRegex = /^1[0-9]{10}$/;
-    //   if (!phoneNumberRegex.test(this.driverPhone)) {
-    //     this.phoneNumberError = true;
-    //     this.phoneNumberErrorMessage = '电话号码格式不正确，请输入有效的11位手机号码。';
-    //   } else {
-    //     this.phoneNumberError = false;
-    //     this.phoneNumberErrorMessage = '';
-    //   }
-    // }
   },
   components:{
     TwoCommonBtn,
@@ -149,20 +454,31 @@ export default {
   }
 }
 </script>
-
+<style>
+  .driverAdd .van-field__control:disabled {
+    color: #323643 !important;
+    -webkit-text-fill-color: #323643 !important;
+  }
+</style>
 <style scoped lang="scss">
 @import "@/styles/mixin.scss";
 @import "@/styles/common.scss";
-.error-message {
-  color: red;
-}
 .wrap{
   @include wh(100%,100%);
   box-sizing: border-box;
   padding-left: 16px;
+  padding-bottom: 100px;
+  overflow-y: auto;
+}
+.mySelect{
+  @include fontWeightSize(bold,13px);
+  width: 44px;
+  color: #323643;
+  appearance: none;
+  padding-right: 16px;
+  background: url('@/assets/arrow_bot.png') no-repeat right center / 15px 14px;
 }
 .navBar{
-  //height: 46px;
   margin-bottom: 46px;
 }
 .itemContent{

src/views/index/driverManage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="wrap"  @scroll="handleScroll">
+  <div class="wrap" >
     <div class="navBar">
       <van-nav-bar
           title="司机管理"
@@ -10,7 +10,7 @@
           :safe-area-inset-top="true"
           @click-left="goBack"
       >
-        <template slot="right">
+        <template slot="right" v-if="permissonList.includes('driverAddBtn')">
           <div class="rightWrap" @click="addDriver" >
             <img src="@/assets/addImg.png" />
             <span class="addTxt">添加</span>
@@ -19,34 +19,42 @@
       </van-nav-bar>
     </div>
     <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
-      <div class="itemWrap" v-for="(item,index) in driverList" :key="index">
+      <van-list
-        <div class="name-status">
+          v-model="loading"
-          <div class="namephone">{{ item.driverName }} / {{ item.driverPhone }}</div>
+          :finished="finished"
-          <div class="twoBtn">
+          finished-text="没有更多了"
-            <button class="del" @click="handleStatus(item)">{{ item.states?.label == '启用'  ? '停用' : '启用' }}</button>
+          @load="onLoad"
-            <button class="revise" @click="updateDriver(item)">修改</button>
+      >
+        <div class="itemWrap" v-for="(item,index) in driverList" :key="index">
+          <div class="name-status">
+            <div class="namephone">{{ item.driverName }} / {{ item.driverPhone }}</div>
+            <div class="twoBtn">
+              <button v-if="permissonList.includes('driverModifyBtn')" class="del" @click="handleStatus(item)">{{ item.states?.label == '启用'  ? '停用' : '启用' }}</button>
+              <button v-if="permissonList.includes('driverModifyBtn')" class="revise" @click="updateDriver(item)">修改</button>
+            </div>
+          </div>
+          <div class="" style="display: flex">
+            <div class="sex" style="margin-right: 40px">
+              <span class="halfOpci">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</span>
+              <span class="allOpci">{{item.sex?.label}}</span>
+            </div>
+            <div class="carType">
+              <span class="halfOpci">准驾车型:</span>
+              <span class="allOpci">{{item.drivingModel}}</span>
+            </div>
+          </div>
+          <div>
+            <span class="halfOpci">身份证号:</span>
+            <span class="allOpci">{{ item.identityCardNumber }}</span>
+          </div>
+          <div>
+            <span class="halfOpci">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态:</span>
+            <span :class="item.states?.code == 1 ? 'statusYes' : 'statusNo'">{{ item.states?.label }}</span>
           </div>
         </div>
-        <div class="" style="display: flex">
+
-          <div class="sex" style="margin-right: 40px">
+      </van-list>
-            <span class="halfOpci">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</span>
+  </van-pull-refresh>
-            <span class="allOpci">{{item.sex?.label}}</span>
-          </div>
-          <div class="carType">
-            <span class="halfOpci">准驾车型:</span>
-            <span class="allOpci">{{item.drivingModel}}</span>
-          </div>
-        </div>
-        <div>
-          <span class="halfOpci">身份证号:</span>
-          <span class="allOpci">{{ item.identityCardNumber }}</span>
-        </div>
-        <div>
-          <span class="halfOpci">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态:</span>
-          <span :class="item.states?.code == 1 ? 'statusYes' : 'statusNo'">{{ item.states?.label }}</span>
-        </div>
-      </div>
-    </van-pull-refresh>
 
   </div>
 </template>
@@ -54,7 +62,7 @@
 <script>
 
 import {myMixins} from "@/utils/myMixins"
-import {driverList,enableAction} from  "@/api/mine"
+import {driverList,enableAction,userOperationPermissions} from  "@/api/mine"
 export default {
   name: "driverManage",
   mixins:[myMixins],
@@ -68,16 +76,31 @@ export default {
       supplierType:'',
       count: 0,
       isLoading: false,
+      loading: false,
+      finished: false,
+      permissonList:[],
     }
   },
   mounted() {
     const urlParams = new URLSearchParams(window.location.search);
     this.supplierType = urlParams.get('supplierType');
-    this.getDriverList()
+    this.getPermissions();
+    // this.getDriverList()
   },
   methods:{
+    async onLoad(){
+      await this.getDriverList()
+      this.pageNum++;
+      // 加载状态结束
+      this.loading = false;
+      // 数据全部加载完成
+      if (this.driverList.length >= this.total) {
+        this.finished = true;
+      }
+    },
     onRefresh() {
-      this.getDriverList()
+      this.pageNum=1;
+      // this.getDriverList()
       setTimeout(() => {
         this.$toast('刷新成功');
         this.isLoading = false;
@@ -108,22 +131,24 @@ export default {
           }
         }
      },
+    async getPermissions(){
+      let res = await userOperationPermissions();
+      this.permissonList = res.data
+      // console.log("司机管理",this.permissonList.includes('driverAddBtn'))
+
+    },
     async handleStatus(item){
         if(item.states.code === 0){
             this.states = 1
         }else{
           this.states = 0
         }
-       let res = await enableAction({
+       await enableAction({
          driverId:item.driverId,
          states:this.states
        })
-
+      this.pageNum = 1;
       await this.getDriverList();
-        // setTimeout(()=>{
-        //   this.$toast('操作成功')
-        // },2000)
-        console.log("item",res)
     },
     updateDriver(item){
       // 在当前组件中进行路由跳转并传递参数对象
@@ -135,20 +160,21 @@ export default {
           phone:item.driverPhone,
           drivingModel:item.drivingModel,
           identityCardNumber:item.identityCardNumber,
-          states:item.states.code
+          states:item.states.code,
+          createTime:item.createTime,
+          supplierType:this.supplierType,
+          drivingBeginDate: item.drivingBeginDate,
+          drivingLicenceContrary: item.drivingLicenceContrary,
+          drivingLicenceFront: item.drivingLicenceFront,
+          drivingLicenceValidityDate: item.drivingLicenceValidityDate,
+          icon: item.icon,
+          identityCardContrary: item.identityCardContrary,
+          identityCardFront: item.identityCardFront,
+          lssueDate: item.lssueDate,
+          drivingLicenceName: item.drivingLicenceName
         }
       });
     },
-    async handleScroll(){
-      let num =  Math.ceil( this.total / 10)
-      if(num <= this.pageNum){
-        // console.log("不在加载数据")
-      }else{
-        this.pageNum++;
-        await this.getDriverList()
-      }
-    },
-
   }
 }
 </script>
@@ -159,67 +185,54 @@ export default {
 
 .wrap {
   background: #F4F5F7;
-  box-sizing: border-box;
+  @include sizingPadding(13px,13px);
-  padding: 13px;
   @include wh(100%, 100%);
   overflow-y: auto;
 }
 .navBar{
-  //height: 46px;
   margin-bottom: 46px;
   .rightWrap{
-    width: 50px;
+    @include wh(50px,20px);
-    height: 20px;
     border-radius: 10px;
     opacity: 0.7;
     border: 1px solid #FFFFFF;
-    @include flexCenter;
+    @include flexTwoCenter;
-    justify-content: center;
     img{
       @include widHeiMar(9px,8px,4px);
     }
     .addTxt{
       @include fontWeightSize(bolder,11px);
-      opacity: .7;
+      @include colorOpa( #FFFFFF,0.7);
-      color: #FFFFFF;
     }
   }
-
 }
 
 .itemWrap {
   @include wh(100%, 104px);
-  background: #FFFFFF;
+  @include radiusSizing(6px);
-  box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
-  border-radius: 6px;
-  margin-bottom: 10px;
-  box-sizing: border-box;
-  padding: 11px 13px 9px 15px;
   @include fontWeightSize(400, 12px);
   @include flexBetween;
-
+  background: #FFFFFF;
+  box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
+  margin-bottom: 10px;
+  padding: 11px 13px 9px 15px;
   .halfOpci {
     opacity: .5;
     margin-right: 5px;
   }
-
   .allOpci {
     opacity: 1;
   }
-
   .statusNo {
     color: #FF0000;
   }
-
   .statusYes {
     color: #09B820
   }
 }
 
 .name-status {
-  display: flex;
+  @include flexColBet;
-  justify-content: space-between;
-
   .namephone {
     @include fontWeightSize(bold, 14px)
   }
@@ -228,26 +241,19 @@ export default {
     display: flex;
     button {
       border: none;
-      //width: 48px;
-      //padding: 2px;
-      //@include all-height(20px);
       padding: 4px  8px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
       border-radius: 3px;
+      @include flexTwoCenter;
       @include fontWeightSize(bold, 12px)
     }
-
     .del {
       border: 1px solid #DDDDDD;
       background-color: #FFFFFF;
     }
 
     .revise {
-      color: #FFFFFF;
+      @include bgFontColor( #FFFFFF,#354D93);
       margin-left: 15px;
-      background: #354D93;
     }
   }
 

src/views/index/invoiceInfo.vue

@@ -0,0 +1,344 @@
+<template>
+  <div class="wrap">
+    <div class="navBar">
+      <van-nav-bar
+        title="开票信息"
+        left-arrow
+        left-arrow-color="#FFFFFF"
+        :border="false"
+        :fixed="true"
+        :safe-area-inset-top="true"
+        @click-left="h5GoBack"
+      />
+    </div>
+    <div class="contentWrap">
+      <div class="content_tab">
+        <div class="tab_title">批次信息</div>
+        <div class="tab_content">
+          <div class="item_wrap">
+            <div class="item_label">财务编号</div>
+            <div class="item_content">
+              <span id="copyText">{{invoiceInfo.financeBatchCode}}</span>
+              <img class="copyIcon" @click="copyHandler(invoiceInfo.financeBatchCode)" src="@/assets/copy.png" />
+            </div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_label">工单数量</div>
+            <div class="item_content">
+              {{invoiceInfo.orderNum}}
+            </div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_label">总金额</div>
+            <div class="item_content">
+              {{invoiceInfo.totalMoney}}
+            </div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_label">扣款</div>
+            <div class="item_content">
+              {{invoiceInfo.cutMoney || ''}}
+            </div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_label">税额扣款</div>
+            <div class="item_content">
+              {{invoiceInfo.taxCutMoney || ''}}
+            </div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_label">开票金额</div>
+            <div class="item_content">
+              {{invoiceInfo.invoiceMoney || ''}}
+            </div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_label">备注</div>
+            <div class="item_content">
+              {{invoiceInfo.remark || ''}}
+            </div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_label">失败原因</div>
+            <div class="item_content">
+              {{invoiceInfo.failRemark || ''}}
+            </div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_label">创建时间</div>
+            <div class="item_content">
+              {{invoiceInfo.createTime}}
+            </div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_label">对账状况</div>
+            <div class="item_content">
+              {{ statusStr(invoiceInfo.status, invoiceInfo.createTime) }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="content_tab mt10">
+        <div class="tab_title">发票信息</div>
+        <div class="itemWrap" v-for="(item,index) in invoiceList" :key="index">
+          <div class="item line1">
+            <div class="title own_title">{{item.accountName}}</div>
+            <div class="checkBtn" @click="goShowInvoice(item)">查看</div>
+          </div>
+          <div class="item">
+            <span class="title">发票号码:</span>
+            <span class="content">{{item.financeBatchCode}}</span>
+          </div>
+          <div class="item">
+            <span class="title">发票金额:</span>
+            <span class="content">￥{{item.invoiceMoney}}元</span>
+          </div>
+          <div class="item">
+            <span class="title">开票日期:</span>
+            <span class="content">{{ item.invoiceDate }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="content_tab mt10">
+        <div class="tab_title">快递信息</div>
+        <div class="itemWrap bg_cls pd_cls">
+          <div class="item mb10">
+            <span class="title width_cls">发票类型:</span>
+            <span class="content">
+              <van-radio-group v-model="invoiceType" disabled direction="horizontal">
+                <van-radio :name="1" icon-size="16px">电子发票</van-radio>
+                <van-radio :name="2" icon-size="16px">纸质发票</van-radio>
+              </van-radio-group>
+            </span>
+          </div>
+          <div class="item">
+            <span class="title width_cls">补录快递单号:</span>
+            <span class="content" style="flex: 1">
+              <van-field v-model="courierNumber" label="" />
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="invoice_btn_wrap">
+        <div class="btn" @click="saveHandler">保存</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {myMixins} from "@/utils/myMixins"
+  import { financeInvoiceList, selectInvoiceDetailInfo, saveBatchCourierNumber } from  "@/api/mine"
+  import {Dialog} from "vant";
+  export default {
+    name: "invoiceInfo",
+    mixins: [ myMixins ],
+    data() {
+      return {
+        invoiceInfo: {},
+        invoiceList: [],
+        invoiceType: '',
+        courierNumber: '',
+        id: ''
+      }
+    },
+    async mounted() {
+      let showItemInfo = localStorage.getItem('showItemInfo');
+      this.invoiceInfo = showItemInfo ? JSON.parse(showItemInfo) : {};
+      console.log('this.invoiceInfo', this.invoiceInfo)
+      this.invoiceType = this.invoiceInfo.invoiceType
+      this.id = this.$route.query.id;
+      await this.getInvoiceHandler()
+    },
+    methods: {
+      async saveHandler() {
+        await saveBatchCourierNumber({
+          invoiceBatchId: this.id,
+          courierNumber: this.courierNumber,
+        })
+        Dialog.alert({
+          title: '提示',
+          message: '操作成功!',
+        }).then(() => {
+          this.h5GoBack()
+        });
+      },
+      async goShowInvoice(item) {
+        let res = await selectInvoiceDetailInfo({
+          id: item.id
+        })
+        localStorage.setItem('invoiceDetail', JSON.stringify(res.data));
+        this.goPage('showInvoice')
+      },
+      statusStr(status,date) {
+        if(new Date('2024-01-01 00:00:00') > new Date(date)){
+          return ''
+        }
+        if( status == 1 ) {
+          return '待审核'
+        } else if( [2 ,3].includes(status)) {
+          return '审核通过'
+        } else if( status == 7 ) {
+          return '审核失败'
+        } else if( status == 4 ) {
+          return '已打款'
+        } else if( status == 8 ) {
+          return '打款中'
+        } else {
+          return ''
+        }
+      },
+      async getInvoiceHandler() {
+        let res = await financeInvoiceList({
+          current: 1,
+          pageSize: 1000,
+          total: 0,
+          pageNum: 1,
+          invoiceBatchId: this.id
+        });
+        this.invoiceList = res.data;
+        console.log('current', res)
+      },
+      copyHandler(copyText){
+        let inputNode = document.createElement('input')  // 创建input
+        inputNode.value = copyText // 赋值给 input 值
+        document.body.appendChild(inputNode) // 插入进去
+        inputNode.select() // 选择对象
+        document.execCommand('Copy') // 原生调用执行浏览器复制命令
+        inputNode.className = 'oInput'
+        inputNode.style.display = 'none' // 隐藏
+        this.$toast('复制成功')
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/mixin.scss";
+  @import "@/styles/common.scss";
+  .wrap{
+    @include wh(100%,100%);
+    background-color: #F4F5F7;
+    overflow-y: auto;
+    box-sizing: border-box;
+  }
+  .navBar{
+    margin-bottom: 46px;
+  }
+
+  .contentWrap{
+    .content_tab {
+      background-color: #fff;
+      width: 100%;
+      padding: 15px 15px;
+      box-sizing: border-box;
+      .tab_title {
+        font-size: 14px;
+        font-weight: bold;
+        margin-bottom: 5px;
+      }
+      .tab_content {
+        .item_wrap {
+          display: flex;
+          align-items: center;
+          line-height: 26px;
+          font-size: 12px;
+          .item_label {
+            color: rgba(0,0,0,0.5);
+            margin-right: 5px;
+            width: 60px;
+          }
+          .item_content {
+            display: flex;
+            align-items: center;
+          }
+        }
+      }
+    }
+  }
+  .copyIcon {
+    width: 35px;
+    height: 15px;
+    margin-left: 10px
+  }
+
+  .itemWrap{
+    /*background: #FFFFFF;*/
+    background-color: #EBF2F7;
+    padding: 10px 20px;
+    border: 1px solid #EBF2F7;
+    border-radius: 4px;
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    line-height: 26px;
+    @include flexBetween;
+    margin-bottom: 10px;
+    .line1{
+      width: 100%;
+      @include flexColBet;
+      .checkBtn{
+        @include bgFontColor(#FFFFFF,#354D93);
+        @include wh(48px,18px);
+        border-radius: 3px;
+        line-height: 18px;
+        text-align: center;
+      }
+    }
+  }
+  .item{
+    display: flex;
+    @include fontWeightSize(400,12px);
+    span{
+      display: inline-block;
+    }
+    .title{
+      opacity: 0.5;
+      margin-right: 5px;
+    }
+    .own_title {
+      font-weight: bold;
+      font-size: 14px;
+      opacity: 1;
+    }
+  }
+  .mt10 {
+    margin-top: 10px;
+  }
+  .bg_cls {
+    background-color: #fff;
+  }
+  .pd_cls {
+    padding-top: 15px;
+    padding-bottom: 15px;
+  }
+  ::v-deep .van-cell {
+    padding: 0;
+    border: 1px solid #EBF2F7;
+  }
+  .width_cls {
+    width: 80px;
+  }
+  .invoice_btn_wrap {
+    width: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+    background-color: #fff;
+    .btn {
+      width: 100%;
+      background-color: #2C395F;
+      color: #fff;
+      padding: 15px 0;
+      text-align: center;
+      border-radius: 6px;
+    }
+  }
+  .mb10 {
+    margin-bottom: 10px;
+  }
+  ::v-deep .van-radio__icon {
+    margin-right: 10px;
+  }
+</style>

src/views/index/invoiceListInfo.vue

@@ -0,0 +1,262 @@
+<template>
+  <div class="wrap">
+    <div class="navBar">
+      <van-nav-bar
+        title="开票信息"
+        left-arrow
+        left-arrow-color="#FFFFFF"
+        :border="false"
+        :fixed="true"
+        :safe-area-inset-top="true"
+        @click-left="goBack"
+      />
+    </div>
+    <div class="search_wrap">
+      <div class="search_left">
+        <el-select v-model="form.statusValue" size="mini" clearable placeholder="请选择审核状态">
+          <el-option
+            v-for="item in statusValueOptions"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="search_right">
+        <van-search
+          v-model="form.financeBatchCode"
+          show-action
+          placeholder="请输入搜索关键词"
+          @search="onSearch"
+        >
+          <template #action>
+            <div @click="onSearch">搜索</div>
+          </template>
+        </van-search>
+      </div>
+    </div>
+    <div class="contentWrap">
+      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+        <van-list
+          v-model="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="getMore"
+        >
+          <div class="itemWrap" v-for="(item,index) in invoiceList" :key="index">
+            <div class="item line1">
+              <div class="itemTime">
+                <span class="title">开票编号:</span>
+                <span class="content">{{ item.financeBatchCode }}</span>
+              </div>
+              <div class="checkBtn" @click="getInvoiceInfo(item)">查看</div>
+            </div>
+            <div class="item">
+              <span class="title">工单数量:</span>
+              <span class="content">{{ item.orderNum }}</span>
+            </div>
+            <div class="item">
+              <span class="title">开票金额:</span>
+              <span class="content">{{ item.invoiceMoney || 0 }}元</span>
+            </div>
+            <div class="item">
+              <span class="title">创建时间:</span>
+              <span class="content">{{ item.createTime }}</span>
+            </div>
+            <div class="item">
+              <span class="title">对账状态:</span>
+              <span class="content">{{ statusStr(item.status, item.createTime) }}</span>
+            </div>
+          </div>
+        </van-list>
+      </van-pull-refresh>
+
+    </div>
+  </div>
+</template>
+
+<script>
+  import { myMixins } from "@/utils/myMixins"
+  import { getFinanceBatchList } from  "@/api/mine"
+  export default {
+    name: "invoiceListInfo",
+    mixins: [ myMixins ],
+    data() {
+      return {
+        form: {
+          statusValue: '',
+          financeBatchCode: '',
+          statusList: [],
+        },
+        invoiceList: [],
+        isLoading: false,
+        loading: false,
+        finished: false,
+        page: {
+          current: 1,
+          pageSize: 10,
+          total: 0,
+          pageNum: 1,
+        },
+        supplierId: '',
+        statusValueOptions:[{name:'待审核',value:1},{name:'审核通过待打款',value: 2},{name:'审核失败',value: 3},{name:'打款中',value: 4},{name:'已打款',value: 5}],
+      }
+    },
+    watch:{
+      async 'form.statusValue' (){
+        if( this.form.statusValue == 1 ) {
+          this.form.statusList = [1]
+        } else if( this.form.statusValue == 2 ) {
+          this.form.statusList = [2, 3]
+        } else if( this.form.statusValue == 3 ) {
+          this.form.statusList = [7]
+        } else if( this.form.statusValue == 4 ) {
+          this.form.statusList = [8]
+        } else if( this.form.statusValue == 5 ) {
+          this.form.statusList = [4]
+        } else {
+          this.form.statusList = []
+        }
+      }
+    },
+    async mounted() {
+      this.supplierId = this.$route.query.supplierId;
+    },
+    methods: {
+      async onSearch() {
+        this.page.pageNum=1;
+        await this.getList()
+      },
+      onRefresh() {
+        this.page.pageNum=1;
+        this.getList();
+        setTimeout(() => {
+          this.$toast('刷新成功');
+          this.isLoading = false;
+        }, 1000);
+      },
+      async getMore(){
+        await this.getList()
+        this.page.pageNum++;
+        // 加载状态结束
+        this.loading = false;
+        // 数据全部加载完成
+        if (this.invoiceList.length >= this.page.total) {
+          this.finished = true;
+        }
+      },
+      async getList() {
+        let res = await getFinanceBatchList({
+          ...this.page,
+          ...this.form,
+          supplierId: this.supplierId
+        });
+        if(res.code == 200){
+          this.page.total = res.total;
+          if(this.page.pageNum == 1){
+            this.invoiceList = res.data;
+          }else{
+            let preList = this.invoiceList;
+            let arr = res.data;
+            this.invoiceList = preList.concat(arr)
+          }
+          if (this.invoiceList.length === 0) {
+            this.show=true
+          }else{
+            this.show=false
+          }
+        }
+      },
+      getInvoiceInfo(item) {
+        localStorage.setItem('showItemInfo', JSON.stringify(item));
+        this.goPage('invoiceInfo', {
+          id: item.id
+        })
+      },
+      statusStr(status,date) {
+        if(new Date('2024-01-01 00:00:00') > new Date(date)){
+          return ''
+        }
+        if( status == 1 ) {
+          return '待审核'
+        } else if( [2 ,3].includes(status)) {
+          return '审核通过'
+        } else if( status == 7 ) {
+          return '审核失败'
+        } else if( status == 4 ) {
+          return '已打款'
+        } else if( status == 8 ) {
+          return '打款中'
+        } else {
+          return ''
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/mixin.scss";
+  @import "@/styles/common.scss";
+  .wrap{
+    @include wh(100%,100%);
+    background-color: #F4F5F7;
+    overflow-y: auto;
+    box-sizing: border-box;
+  }
+  .navBar{
+    margin-bottom: 46px;
+  }
+  .contentWrap {
+    background-color: #F4F5F7;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .search_wrap {
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+    background-color: #fff;
+    .search_left {
+      width: 100px;
+      font-size: 12px;
+    }
+    .search_right {
+      flex: 1;
+    }
+  }
+
+  .itemWrap{
+    background: #FFFFFF;
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 15px;
+    border-radius: 6px;
+    line-height: 26px;
+    @include flexBetween;
+    margin-bottom: 10px;
+    .item{
+      @include fontWeightSize(400,12px);
+      span{
+        display: inline-block;
+      }
+      .title{
+        opacity: .5;
+        margin-right: 5px;
+      }
+    }
+    .line1{
+      width: 100%;
+      @include flexColBet;
+      .checkBtn{
+        @include bgFontColor(#FFFFFF,#354D93);
+        @include wh(48px,18px);
+        border-radius: 3px;
+        line-height: 18px;
+        text-align: center;
+      }
+    }
+  }
+</style>

src/views/index/invoicingDetail.vue

@@ -2,7 +2,7 @@
 <div class="wrap">
   <div class="navBar">
     <van-nav-bar
-        title="开票通知详情"
+        title="工单批次详情"
         left-arrow
         left-arrow-color="#FFFFFF"
         :border="false"
@@ -12,55 +12,143 @@
     />
   </div>
   <div class="contentWrap">
-      <div class="item" v-for="(item,index) in detailList" :key="index">
+    <div class="content_tab">
-        <div class="itemContent">
+      <div class="tab_title">批次详情</div>
-          <span> {{ item.orderCode }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <div class="tab_content">
-          <span>{{ item.serviceName }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+        <div class="item_wrap">
-          <span> {{item.settleAmount}}元</span>
+          <div class="item_label">批次编号</div>
-            </div>
+          <div class="item_content">
-        <div class="line"></div>
+            <span id="copyText">{{invoiceInfo.batchCode}}</span>
+            <img class="copyIcon" @click="copyHandler(invoiceInfo.batchCode)" src="@/assets/copy.png" />
+          </div>
+        </div>
+        <div class="item_wrap">
+          <div class="item_label">财务编号</div>
+          <div class="item_content">
+            <span id="copyText2">{{invoiceInfo.financeBatchCode}}</span>
+            <img class="copyIcon" @click="copyHandler(invoiceInfo.financeBatchCode)" src="@/assets/copy.png" />
+          </div>
+        </div>
+        <div class="item_wrap">
+          <div class="item_label">工单数量</div>
+          <div class="item_content">
+            {{invoiceInfo.orderNum}}
+          </div>
+        </div>
+        <div class="item_wrap">
+          <div class="item_label">总金额</div>
+          <div class="item_content">
+            {{invoiceInfo.orderNum}}
+          </div>
+        </div>
+        <div class="item_wrap">
+          <div class="item_label">扣款</div>
+          <div class="item_content">
+            {{invoiceInfo.cutMoney || ''}}
+          </div>
+        </div>
+        <div class="item_wrap">
+          <div class="item_label">税额扣款</div>
+          <div class="item_content">
+            {{invoiceInfo.taxCutMoney || ''}}
+          </div>
+        </div>
+        <div class="item_wrap">
+          <div class="item_label">开票金额</div>
+          <div class="item_content">
+            {{invoiceInfo.invoiceMoney || ''}}
+          </div>
+        </div>
+        <div class="item_wrap">
+          <div class="item_label">备注</div>
+          <div class="item_content">
+            {{invoiceInfo.remark || ''}}
+          </div>
+        </div>
+        <div class="item_wrap">
+          <div class="item_label">创建时间</div>
+          <div class="item_content">
+            {{invoiceInfo.createTime}}
+          </div>
+        </div>
+        <div class="item_wrap">
+          <div class="item_label">对账状况</div>
+          <div class="item_content">
+            {{invoiceInfo.statusString}}
+          </div>
+        </div>
       </div>
+    </div>
+    <div class="content_tab mt_cls">
+      <div class="tab_title">关联案件</div>
+      <table>
+        <tr>
+          <th class="text_left">案件编号</th>
+          <th>服务类型</th>
+          <th>结算类型</th>
+        </tr>
+        <tr v-for="(item, index) in orderList" :key="index">
+          <td class="text_left">
+            {{item.orderCode}}
+            <img class="copyIcon" @click="copyHandler(item.orderCode)" src="@/assets/copy.png" />
+          </td>
+          <td>{{item.serviceType || ''}}</td>
+          <td>{{item.settleAmount || ''}}</td>
+        </tr>
+      </table>
+    </div>
   </div>
 </div>
 </template>
 
 <script>
 import {myMixins} from "@/utils/myMixins"
-import {notifyInvoiceDetail} from "@/api/mine"
+import { notifyInvoiceDetail, getOrderListByInvoice } from  "@/api/mine"
 export default {
   name: "invoicingDetail",
   mixins:[myMixins],
   data(){
     return{
-      pageNum:1,
+      batchCode: '',
-      pageSize:10,
+      id: '',
-      detailList:[],
+      invoiceInfo: {},
-      form:{
+      orderList: [],
-        batchCode:'',
-        startTime:'',
-        overTime:'',
-      }
     }
   },
   async mounted() {
-    // console.log(this.$route.query?.id)
+    this.batchCode = this.$route.query?.batchCode;
-    this.form.batchCode=this.$route.query?.id;
+    this.id = this.$route.query?.id;
-    this.form.startTime=this.$route.query?.startTime;
-    this.form.overTime=this.$route.query?.overTime;
     await this.getDetail()
+    await this.getOrderList();
   },
   methods:{
-      async getDetail(){
+    copyHandler(copyText){
-        let res=await notifyInvoiceDetail({
+      let inputNode = document.createElement('input')  // 创建input
-          pageNum:this.pageNum,
+      inputNode.value = copyText // 赋值给 input 值
-          pageSize:this.pageSize,
+      document.body.appendChild(inputNode) // 插入进去
-         ...this.form,
+      inputNode.select() // 选择对象
-        })
+      document.execCommand('Copy') // 原生调用执行浏览器复制命令
-        // if(res.code=== 200){
+      inputNode.className = 'oInput'
-          this.detailList=res.data
+      inputNode.style.display = 'none' // 隐藏
-        // }
+      this.$toast('复制成功')
-        // console.log("resssss",res)
+    },
-      }
+    async getOrderList() {
+      let res = await getOrderListByInvoice({
+        batchCode: this.batchCode,
+        pageSize: 1000,
+        pageNum: 1,
+        createTime: this.invoiceInfo.startTime
+      })
+      this.orderList = res.data;
+      console.log('rerere', res);
+    },
+    async getDetail(){
+      let res = await notifyInvoiceDetail({
+        id: this.id
+      })
+      this.invoiceInfo = res.data
+      console.log('rerere', res)
+    }
   }
 }
 </script>
@@ -70,29 +158,62 @@ export default {
 @import "@/styles/common.scss";
 .wrap{
   @include wh(100%,100%);
+  background-color: #F4F5F7;
 }
 .navBar{
   height: 46px;
 }
 .contentWrap{
-  width: 100%;
+  .mt_cls {
-  height: 400px;
+    margin-top: 10px;
- margin-left: 27px;
+  }
-  .item{
+  .content_tab {
+    background-color: #fff;
     width: 100%;
-    @include all-height(47px);
+    padding: 15px 15px;
-    .itemContent{
+    box-sizing: border-box;
-      margin-left: 5px;
+    .tab_title {
-      @include fontWeightSize(400,13px);
+      font-size: 14px;
-      color: #323643;
+      font-weight: bold;
+      margin-bottom: 5px;
     }
-    .line{
+    .tab_content {
+      .item_wrap {
+        display: flex;
+        align-items: center;
+        line-height: 30px;
+        font-size: 12px;
+        .item_label {
+          color: rgba(0,0,0,0.5);
+          margin-right: 5px;
+          width: 60px;
+        }
+        .item_content {
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+    table {
+      line-height: 30px;
       width: 100%;
-      height: 1px;
+      .text_left {
-      background: #E9E9EA;
+        text-align: left;
-      opacity: 0.6;
+        width: 50%;
+      }
+      th {
+        color: rgba(0, 0, 0, 0.5);
+      }
+      td {
+        text-align: center;
+      }
     }
   }
 }
+  .copyIcon {
+    width: 35px;
+    height: 15px;
+    margin-left: 10px
+  }
 
 </style>

src/views/index/invoicingNotify.vue

@@ -2,7 +2,7 @@
 <div class="wrap">
   <div class="navBar">
     <van-nav-bar
-        title="开票通知"
+        title="工单批次"
         left-arrow
         left-arrow-color="#FFFFFF"
         :border="false"
@@ -11,39 +11,74 @@
         @click-left="goBack"
     />
   </div>
-<div class="itemWrap" v-for="(item,index) in notifyList" :key="index" >
+  <van-tabs v-model="active" sticky @click="changeTabHandler" background="#2C395F" color="#ffffff" title-active-color="#ffffff" title-inactive-color="#BDC1CD">
-  <div class="item line1">
+    <van-tab title="全部" name="1"></van-tab>
-    <div class="itemTime">
+    <van-tab title="未开票" name="2"></van-tab>
-      <span class="title">开票月份:</span>
+    <van-tab title="已开票" name="3"></van-tab>
-      <span class="content">{{ item.invoiceMonth }}</span>
+  </van-tabs>
+  <div class="content_wrap" :class="{ 'pd_cls': active == 2 }">
+    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="getMore"
+      >
+        <van-search
+          v-model="batchCode"
+          show-action
+          placeholder="请输入批次号或开票编号"
+        >
+          <template #action>
+            <div @click="onSearch">搜索</div>
+          </template>
+        </van-search>
+        <van-checkbox-group v-model="checkList">
+          <div class="itemWrap" v-for="(item,index) in notifyList" :key="index" @click="toggle(index)">
+            <div class="item line1">
+              <div class="itemTime">
+                <span class="title">批次号:</span>
+                <span class="content">{{ item.batchCode }}</span>
+              </div>
+              <div class="orderNum">
+                <span class="title">总案件数:</span>
+                <span class="content">{{ item?.orderNum || '' }}</span>
+              </div>
+              <div class="checkBtn" @click="goPage('invoicingDetail',{id:item.id, batchCode: item.batchCode})">查看</div>
+            </div>
+            <div class="item">
+              <span class="title">开票月份:</span>
+              <span class="content">{{ getMonth(item) }}</span>
+            </div>
+            <div class="item">
+              <span class="title">结算总金额:</span>
+              <span class="content">{{ item?.totalMoney ? item.totalMoney : 0 }}元</span>
+            </div>
+            <div class="item">
+              <span class="title">扣款金额:</span>
+              <span class="content">{{ item?.cutMoney || 0 }}元</span>
+            </div>
+            <div class="item">
+              <span class="title">扣款原因:</span>
+              <span class="content" style="color: #FF8F37;">{{ item.remark }}</span>
+            </div>
+            <div class="item">
+              <span class="title">最终开票金额:</span>
+              <span class="content">{{ item?.invoiceMoney || 0 }}元</span>
+            </div>
+            <van-checkbox class="checkbox_cls" v-if="active == 2" :name="item" ref="checkboxes" />
+          </div>
+        </van-checkbox-group>
+      </van-list>
+    </van-pull-refresh>
+  </div>
+  <div class="invoice_btn_wrap" v-if="active == 2 && totalCount > 0">
+    <div class="invoice_btn_info">
+      <span class="invoice_btn_title">开票总金额</span>
+      <span class="invoice_btn_money">￥{{totalCount}}</span>
     </div>
-    <div class="orderNum">
+    <div class="btn" @click="goUploadPage">去开票</div>
-      <span class="title">总案件数:</span>
-      <span class="content">{{ item.orderNum }}</span>
-    </div>
-    <div class="checkBtn" @click="goPage('invoicingDetail',{id:item.batchCode,startTime:item.startTime,overTime:item.overTime})">查看 </div>
   </div>
-  <div class="item">
-    <span class="title">批次号:</span>
-    <span class="content">{{ item.batchCode }}</span>
-  </div>
-  <div class="item">
-    <span class="title">结算总金额:</span>
-    <span class="content">{{ item.totalMoney + '元' }}</span>
-  </div>
-  <div class="item">
-    <span class="title">扣款金额:</span>
-    <span class="content">{{ item.cutMoney + '元'}}</span>
-  </div>
-  <div class="item">
-    <span class="title">扣款原因:</span>
-    <span class="content"  style="color: #FF8F37;">{{ item.remark }}</span>
-  </div>
-  <div class="item">
-    <span class="title">最终开票金额:</span>
-    <span class="content">{{ item.invoiceMoney+ '元' }}</span>
-  </div>
-</div>
   <div v-show="show" class="bgShow">
     <img src="@/assets/empty.png">
   </div>
@@ -61,28 +96,116 @@ export default {
       notifyList:[],
       pageNum:1,
       pageSize:10,
-      show:false
+      total: 0,
+      show:false,
+      isLoading: false,
+      loading: false,
+      active: 1,
+      status: '',
+      dispatchAppSearchInvoiced: '',
+      batchCode: '',
+      finished: false,
+      checkList: [],
+      supplierId: '',
     }
   },
+  computed: {
+    totalCount () {
+      let total = 0;
+      this.checkList.map(item => {
+        total += item.invoiceMoney
+      })
+      return total
+    },
+  },
   mounted() {
-      this.getNotifyList()
+    this.supplierId = this.$route.query?.supplierId;
   },
   methods:{
+    goUploadPage() {
+      localStorage.setItem('list', JSON.stringify(this.checkList));
+      this.goPage('uploadInvoice', { supplierId : this.supplierId })
+    },
+    async onSearch() {
+      this.pageNum=1
+      await this.getNotifyList()
+    },
+    async getMore(){
+      if ( this.active != 2 ) {
+        await this.getNotifyList()
+        this.pageNum++;
+        // 加载状态结束
+        this.loading = false;
+        // 数据全部加载完成
+        if (this.notifyList.length >= this.total) {
+          this.finished = true;
+        }
+      }
+    },
+    changeTabHandler() {
+      this.pageNum = 1;
+      this.notifyList = [];
+      this.checkList = [];
+      if (this.active == 1) {   // 全部， 需要分页
+        this.status = '';
+        this.dispatchAppSearchInvoiced = '';
+        this.pageSize = 10;
+      } else if(this.active == 2) {   // 未开票, 不需要分页
+        this.status = 2;
+        this.dispatchAppSearchInvoiced = '';
+        this.pageSize = 10000
+      } else if(this.active == 3) {   // 已开票，需要分页
+        this.status = '';
+        this.dispatchAppSearchInvoiced = 1;
+        this.pageSize = 10
+      }
+      this.getNotifyList()
+    },
+    getMonth(item) {
+      let str = '';
+      let startTime = new Date(item.createTime);
+      let endTime = new Date(item.overTime);
+      str = startTime.getFullYear() + '年' + (startTime.getMonth() + 1 ) + '月 - ' + endTime.getFullYear() + '年' + (endTime.getMonth() + 1) + '月'
+      return str
+    },
+    onRefresh() {
+      this.pageNum=1
+      this.getNotifyList()
+      setTimeout(() => {
+        this.$toast('刷新成功');
+        this.isLoading = false;
+      }, 1000);
+    },
     async getNotifyList(){
-      let res = await notifyInvoiceList({
+      let res =  await notifyInvoiceList({
-          pageNum:this.pageNum,
+        pageNum:this.pageNum,
-          pageSize:this.pageSize
+        pageSize:this.pageSize,
+        status: this.status,
+        dispatchAppSearchInvoiced: this.dispatchAppSearchInvoiced,
+        total: this.total,
+        batchCode: this.batchCode,
+        supplierId: this.supplierId,
+        current: 1,
       })
-      // if(res.code === 0){
+      if(res.code == 200){
-        this.notifyList=res.data;
+        this.total=res.total
-        console.log(this.notifyList)
+        if(this.pageNum == 1){
-        if(this.notifyList.length === 0){
+          this.notifyList=res.data;
-              this.show=true
+        }else{
+          let preList = this.notifyList;
+          let arr = res.data;
+          this.notifyList = preList.concat(arr)
+        }
+        if (this.notifyList.length === 0) {
+          this.show=true
         }else{
           this.show=false
         }
       }
-    // },
+    },
+    toggle(index) {
+      this.$refs.checkboxes[index].toggle();
+    },
   }
 }
 </script>
@@ -90,18 +213,24 @@ export default {
 <style scoped lang="scss">
 @import "@/styles/mixin.scss";
 @import "@/styles/common.scss";
+.van-checkbox {
+  position: absolute;
+  bottom: 20px;
+  right: 15px;
+}
 .wrap{
   @include wh(100%,100%);
   background-color: #F4F5F7;
   overflow-y: auto;
+  box-sizing: border-box;
+  padding-bottom: 30px;
 }
 .navBar{
-
-  //height: 46px;
   margin-bottom: 46px;
 }
 .itemWrap{
   background: #FFFFFF;
+  position: relative;
   @include wh(100%,194px);
   box-sizing: border-box;
   padding: 14px 25px 18px 29px;
@@ -114,27 +243,69 @@ export default {
     }
     .title{
       opacity: .5;
-      //width:55px;
+      margin-right: 5px;
     }
-    .content{}
   }
   .line1{
     width: 100%;
-    display: flex;
+    @include flexColBet;
-    justify-content: space-between;
     .checkBtn{
-      background: #354D93;
+      @include bgFontColor(#FFFFFF,#354D93);
-      border-radius: 3px;
       @include wh(48px,18px);
+      border-radius: 3px;
       line-height: 18px;
       text-align: center;
-      color: #FFFFFF;
     }
   }
 }
 .bgShow{
-  @include wh(100%,80%);
+  @include flexTwoCenter;
-  @include flexCenter;
+  /*height:calc(100% - 46px);*/
-  justify-content: center;
+  background-color: #FAFAFA;
+  img{
+    width: 100%;
+  }
 }
+.van-tabs {
+  position: fixed;
+  width: 100%;
+  background-color: #2c395f;
+  z-index: 1000000 !important;
+}
+  .content_wrap {
+    padding-top: 1.17333rem;
+  }
+  .invoice_btn_wrap {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+    background-color: #fff;
+    .invoice_btn_info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .invoice_btn_title {
+        font-size: 14px;
+        font-weight: bold;
+      }
+      .invoice_btn_money {
+        font-size: 26px;
+        color: red;
+      }
+    }
+    .btn {
+      width: 100%;
+      background-color: #2C395F;
+      color: #fff;
+      padding: 15px 0;
+      text-align: center;
+      border-radius: 6px;
+    }
+  }
+
+  .pd_cls {
+    padding-bottom: 40px;
+  }
 </style>

src/views/index/reporting.vue

@@ -3,32 +3,8 @@
     <div class="title">报备事项:</div>
     <div class="line"></div>
     <van-radio-group v-model="radio" @change="change">
-      <van-radio name="特殊情况绕路" class="item">
+      <van-radio v-for="(item,index) in reportingRadioList" :key="index" :name="item" class="item">
-        特殊情况绕路
+        {{ item }}
-        <img
-            slot="icon"
-            slot-scope="props"
-            :src="props.checked ? activeIcon : inactiveIcon"
-        >
-      </van-radio>
-      <van-radio name="事发地变更" class="item">
-        事发地变更
-        <img
-            slot="icon"
-            slot-scope="props"
-            :src="props.checked ? activeIcon : inactiveIcon"
-        >
-      </van-radio>
-      <van-radio name="目的地变更" class="item">
-        目的地变更
-        <img
-            slot="icon"
-            slot-scope="props"
-            :src="props.checked ? activeIcon : inactiveIcon"
-        >
-      </van-radio>
-      <van-radio name="其他报备" class="item">
-        其他报备
         <img
             slot="icon"
             slot-scope="props"
@@ -36,27 +12,32 @@
         >
       </van-radio>
     </van-radio-group>
-    <textarea class="multiple" id="text-input" rows="4" cols="50" placeholder="报备描述" v-model="decscripTxt"></textarea><br>
+    <textarea v-if="radio == '其他报备'" class="multiple" id="text-input" rows="4" cols="50" placeholder="报备描述"
-    <common-btn @submitClick="submit" />
+              v-model.trim="decscripTxt"></textarea><br>
+    <common-btn @submitClick="submit"/>
   </div>
 </template>
 
 <script>
 import {orderReporting} from "@/api/order"
-import {myMixins} from  "@/utils/myMixins"
+import {myMixins} from "@/utils/myMixins"
 import CommonBtn from "@/components/commonBtn.vue"
+
 export default {
   name: "reportingView",
-  mixins:[myMixins],
+  mixins: [myMixins],
-  data(){
+  data() {
-    return{
+    return {
-      decscripTxt:'',
+      decscripTxt: '',
       radio: '',
       activeIcon: require('@/assets/check.png'),
       inactiveIcon: require('@/assets/uncheck.png'),
-      queryType:'',
+      queryType: '',
-      userOrderId:'',
+      userOrderId: '',
-      orderCode:'',
+      orderCode: '',
+      reportingList: [],
+      reportingRadioList: ['目的地变更', '服务项目更改', '拖车实际在地库', '目的地没有门头照片', '联系不到客户', '车牌、车架号不符',
+        '第三方路段无法救援', '客户酒后代驾叫拖车', '车上有货物无法卸货', '客户无钥匙打不开车门', '事故车走故障救援', '电瓶检测仪显示优良客户要搭电', '客户车辆位于非正常路面', '其他报备']
     }
   },
   mounted() {
@@ -66,51 +47,56 @@ export default {
     this.orderCode = urlParams.get('orderCode')
     // this.$toast('queryType' + this.queryType)
   },
-  computed:{
+  computed: {
-    isRadio(){
+    isRadio() {
       return this.radio ? true : false
     },
-    isTxt(){
+    isTxt() {
       return this.decscripTxt ? true : false
     },
   },
-  methods:{
+  methods: {
-    submit(){
+    submit() {
       this.goReporting();
     },
-    change(e){
+    change(e) {
-      this.radio=e
+      this.radio = e
     },
-    async goReporting(){
+    async goReporting() {
-      if(this.isRadio && this.isTxt){
+      if (!this.isRadio) {
-        let result = await orderReporting({
+        this.$toast('报备事项必选')
-          queryType:Number(this.queryType),
+        return
-          userOrderId:this.userOrderId,
-          orderCode:this.orderCode,
-          reportingItem:this.radio ? this.radio : "",
-          reportingDesc:this.decscripTxt ? this.decscripTxt : ""
-        })
-        // if(result.code === 200){
-          this.$toast(result.msg)
-          setTimeout(()=>{
-            let data = {"action":"goBack","params":""}
-            var u = navigator.userAgent;
-            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
-            // var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
-            if(isiOS){
-              window.webkit.messageHandlers.nativeObject.postMessage(data);
-            }else {
-              window.android.sendMessage("goBack");
-            }
-
-          },2000)
-        // }
-      }else{
-        this.$toast("报备事项和报备描述必选")
       }
-    }
+      if (this.radio == '其他报备') {
+        if (!this.decscripTxt) {
+          this.$toast('报备描述必填')
+          return
+        }
+      }
+      let result = await orderReporting({
+        queryType: Number(this.queryType),
+        userOrderId: this.userOrderId,
+        orderCode: this.orderCode,
+        reportingConfirm: 1,
+        reportingItem: this.radio ? this.radio : "",
+        reportingDesc: this.decscripTxt ? this.decscripTxt : ""
+      })
+      // reportingConfirm: this.radio == '其他报备' ? 0 : 1,
+      this.$toast(result.msg)
+      setTimeout(() => {
+        let data = {"action": "goBack", "params": ""}
+        var u = navigator.userAgent;
+        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+        if (isiOS) {
+          window.webkit.messageHandlers.nativeObject.postMessage(data);
+        } else {
+          window.android.sendMessage("goBack");
+        }
+      }, 2000)
+
+    },
   },
-  components:{
+  components: {
     CommonBtn
   }
 }
@@ -119,35 +105,41 @@ export default {
 <style scoped lang="scss">
 @import "@/styles/mixin.scss";
 @import "@/styles/common.scss";
+
 .wrap {
   box-sizing: border-box;
   padding: 13px 24px 0;
   width: 100%;
   height: 100%;
+  overflow-y: auto;
 }
 
 .title {
-  @include fontWeightSize(bold,14px);
+  @include fontWeightSize(bold, 14px);
   color: #323643;
 
 }
-.item{
+
+.item {
   font-size: 14px;
   margin-bottom: 8px;
   @include flexCenter;
 }
+
 .line {
-  @include wh(100%,2px);
+  @include wh(100%, 2px);
   opacity: 0.16;
   border-top: 1px solid;
   margin-bottom: 10px;
   margin-top: 10px;
   border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
 }
-img{
+
-  @include widHeiMar(16px,16px,10px);
+img {
+  @include widHeiMar(16px, 16px, 10px);
 }
 
+
 .multiple {
   width: 100%;
   height: 125px;
@@ -157,8 +149,17 @@ img{
   backdrop-filter: blur(10px);
   padding: 10px;
   box-sizing: border-box;
-  margin-top: 20px;
+  //margin-top: 20px;
+  margin-bottom: 10px;
 }
 
+.btn {
+  box-sizing: border-box;
+  padding: 13px 24px 0;
+}
+
+.scrollWrap {
+
+}
 
 </style>

src/views/index/reportingList.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="wrap">
+    <div class="title">已报备列表:</div>
+    <div class="line"></div>
+    <div v-if="reportList">
+      <div style="margin: 7px 0" v-for="(item,index) in reportList" :key="index">{{item.createTime+','}}{{item.remark}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {orderReportingList} from "@/api/order"
+import {myMixins} from "@/utils/myMixins"
+
+export default {
+  name: "reportingList",
+  mixins: [myMixins],
+  data() {
+    return {
+      queryType: '',
+      userOrderId: '',
+      orderCode: '',
+      taskOrderId:'',
+      reportList:[]
+    }
+  },
+  async mounted() {
+    const urlParams = new URLSearchParams(window.location.search);
+    this.queryType = urlParams.get('queryType');
+    this.userOrderId = urlParams.get('userOrderId');
+    this.orderCode = urlParams.get('orderCode')
+    this.taskOrderId=urlParams.get('taskOrderId')
+    await this.getReportingList()
+  },
+  methods: {
+    async getReportingList(){
+      let res = await orderReportingList({
+        queryType:Number(this.queryType),
+        userOrderId:this.userOrderId,
+        orderCode: this.orderCode,
+        taskOrderId:this.taskOrderId
+      })
+      this.reportList=res.data
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+@import "@/styles/common.scss";
+
+.wrap {
+  box-sizing: border-box;
+  padding: 13px 24px 0;
+  width: 100%;
+  height: 100%;
+}
+
+.title {
+  @include fontWeightSize(bold, 14px);
+  color: #323643;
+
+}
+
+.item {
+  font-size: 14px;
+  margin-bottom: 8px;
+  @include flexCenter;
+}
+
+.line {
+  @include wh(100%, 2px);
+  opacity: 0.16;
+  border-top: 1px solid;
+  margin-bottom: 8px;
+  margin-top: 8px;
+  border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
+}
+
+
+
+</style>

src/views/index/showInvoice.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="wrap">
+    <div class="navBar">
+      <van-nav-bar
+        title="查看发票"
+        left-arrow
+        left-arrow-color="#FFFFFF"
+        :border="false"
+        :fixed="true"
+        :safe-area-inset-top="true"
+        @click-left="h5GoBack"
+      />
+    </div>
+    <div class="contentWrap">
+      <div class="content_tab">
+        <div class="tab_content">
+          <div class="item_wrap">
+            <div class="item_label">付款方</div>
+            <div class="item_content">中道汽车救援股份有限公司</div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_label">收款方</div>
+            <div class="item_content">{{invoiceInfo.accountName}}</div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_label">发票号码</div>
+            <div class="item_content">
+              {{invoiceInfo.invoiceNumber}}
+            </div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_label">发票金额</div>
+            <div class="item_content">￥{{invoiceInfo.invoiceMoney}}</div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_label">税率</div>
+            <div class="item_content">{{invoiceInfo.taxRate}}%</div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_label">税额</div>
+            <div class="item_content">{{invoiceInfo.taxAmount}}</div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_label">未税金额</div>
+            <div class="item_content">{{invoiceInfo.afterTaxAmount}}</div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_label">发票类型</div>
+            <div class="item_content">{{invoiceInfo.invoiceTypeCodeString}}</div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_label">开票日期</div>
+            <div class="item_content">{{invoiceInfo.invoiceDate}}</div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_label">发票影像</div>
+            <div class="item_content">
+              <div class="invoice_btn" @click="showInvoiceHandler(invoiceInfo.path)">查看发票</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { myMixins } from "@/utils/myMixins"
+  export default {
+    name: "showInvoice",
+    mixins:[ myMixins ],
+    data() {
+      return {
+        invoiceInfo: {},
+      }
+    },
+    mounted() {
+      let invoiceDetail = localStorage.getItem('invoiceDetail')
+      this.invoiceInfo = invoiceDetail ? JSON.parse(invoiceDetail) : {};
+      console.log('this.invoiceInfo', this.invoiceInfo)
+    },
+    methods: {
+      showInvoiceHandler(path) {
+        window.open(path)
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/mixin.scss";
+  @import "@/styles/common.scss";
+  .wrap{
+    @include wh(100%,100%);
+    background-color: #F4F5F7;
+  }
+  .navBar{
+    height: 46px;
+  }
+  .contentWrap{
+    .mt_cls {
+      margin-top: 10px;
+    }
+    .content_tab {
+      background-color: #fff;
+      width: 100%;
+      padding: 15px 15px;
+      .tab_title {
+        font-size: 14px;
+        font-weight: bold;
+        margin-bottom: 5px;
+      }
+      .tab_content {
+        .item_wrap {
+          display: flex;
+          align-items: center;
+          line-height: 30px;
+          font-size: 12px;
+          .item_label {
+            color: rgba(0,0,0,0.5);
+            margin-right: 5px;
+            width: 60px;
+          }
+          .item_content {
+            display: flex;
+            align-items: center;
+          }
+        }
+      }
+    }
+  }
+  .copyIcon {
+    width: 35px;
+    height: 15px;
+    margin-left: 10px
+  }
+  .invoice_btn {
+    padding: 0 15px;
+    background-color: #354D93;
+    border-radius: 4px;
+    height: 28px;
+    color: #fff;
+  }
+</style>

src/views/index/supplySettlement.vue

@@ -1,66 +1,70 @@
 <template>
   <div class="wrap">
-    <div class="kilometers  common">
+    <div class="kilometers  common" >
       <div class="title">公里数:</div>
       <div class="line"></div>
       <div class="metersWrap">
-        <div class="leftKiloMeters">
+        <div class="item"  v-show="supplierSettlementType != 1">
-          <div>AB段公里数</div>
+          <div class="leftKiloMeters">AB段公里数</div>
-          <div>BC段公里数</div>
+          <div class="rightInput"><input type="number" v-model="form.reportMileageAb"/>公里</div>
-          <div>CA段公里数</div>
         </div>
-        <div class="rightInputMeters">
+        <div class="item"  v-show="supplierSettlementType == 1 || supplierSettlementType == 2 || supplierSettlementType == 3 || supplierSettlementType == 4">
-          <div><input type="number" v-model="form.reportMileageAb"/>公里</div>
+          <div class="leftKiloMeters">BC段公里数</div>
-          <div><input type="number" v-model="form.reportMileageBc"/>公里</div>
+          <div class="rightInput"><input type="number" v-model="form.reportMileageBc"/>公里</div>
-          <div><input type="number" v-model="form.reportMileageCa"/>公里</div>
+        </div>
+        <div class="item"  v-show=" supplierSettlementType == 3 || supplierSettlementType == 4">
+          <div class="leftKiloMeters">CA段公里数</div>
+          <div class="rightInput"><input type="number" v-model="form.reportMileageCa"/>公里</div>
         </div>
       </div>
     </div>
-    <div class="roadBridgeFee common">
+    <div class="roadBridgeFee common" >
       <div class="title">路桥费:</div>
       <div class="line"></div>
       <div class="metersWrap">
-        <div class="leftKiloMeters">
+        <div class="item"  v-show="supplierSettlementType != 1">
-          <div>AB段路桥费</div>
+          <div class="leftKiloMeters">AB段路桥费</div>
-          <div>BC段路桥费</div>
+          <div class="rightInput"><input type="number" v-model="form.bridgeAmountAb"/>元</div>
-          <div>CA段路桥费</div>
         </div>
-        <div class="rightInputMeters">
+        <div class="item"  v-show="supplierSettlementType == 1 || supplierSettlementType == 2 || supplierSettlementType == 3 || supplierSettlementType == 4">
-          <div><input type="number" v-model="form.bridgeAmountAb"/>元</div>
+          <div class="leftKiloMeters">BC段路桥费</div>
-          <div><input type="number" v-model="form.bridgeAmountBc"/>元</div>
+          <div class="rightInput"><input type="number" v-model="form.bridgeAmountBc"/>元</div>
-          <div><input type="number" v-model="form.bridgeAmountCa"/>元</div>
+        </div>
+        <div class="item"  v-show=" supplierSettlementType == 3 || supplierSettlementType == 4">
+          <div class="leftKiloMeters">CA段路桥费</div>
+          <div class="rightInput"><input type="number" v-model="form.bridgeAmountCa"/>元</div>
         </div>
       </div>
-    </div>
+    </div >
     <div class="otherFee common">
       <div class="title">其他费用:</div>
       <div class="line"></div>
       <div class="metersWrap">
-        <div class="leftKiloMeters">
+        <div class="item"  >
-          <div>小轮个数</div>
+          <div class="leftKiloMeters">小轮个数</div>
-          <div>等候费</div>
+          <div class="rightInput"><input type="number" v-model="form.tyreNumber" @input="handleInput"/>个</div>
-          <div>困境费</div>
-          <div class="blueColor" style="font-weight: 500;font-size: 14px">已收取客户金额</div>
         </div>
-        <div class="rightInputMeters" style="opacity: 1">
+        <div class="item">
-          <div class="alignRight"><input type="number" v-model="form.tyreNumber"/>个</div>
+          <div class="leftKiloMeters">等候费</div>
-          <div  class="alignRight"><input type="number" v-model="form.waitAmount"/>元</div>
+          <div class="rightInput"><input type="number" v-model="form.waitAmount"/>元</div>
-          <div class="alignRight"><input type="number" v-model="form.dilemmaFee"/>元</div>
+        </div>
-          <div class="blueColor" style="font-weight: 500;font-size: 14px ;"><input  class="blueColor" type="number" v-model="form.customerAmount"/>元</div>
+        <div class="item"  >
+          <div class="leftKiloMeters">困境费</div>
+          <div class="rightInput"><input type="number" v-model="form.dilemmaFee"/>元</div>
+        </div>
+        <div class="item blueColor" >
+          <div class="leftKiloMeters">收取客户金额</div>
+          <div class="rightInput blueColor"><input class="blueColor" type="number" v-model="form.customerAmount"/>元</div>
         </div>
       </div>
     </div>
     <div class="btn">
-      <button>提交</button>
+      <button @click="submit">提交</button>
     </div>
-<!--    <div class="fixed-bottom">-->
-<!--      <common-btn class="btn" @submitClick="submit" />-->
-<!--    </div>-->
   </div>
 </template>
 
 <script>
-// import CommonBtn  from "@/components/commonBtn.vue"
 import {leftCopy} from  "@/utils/common"
 import {getOrderSettlement, updateOrderSettlement} from "@/api/order"
 export default {
@@ -70,6 +74,7 @@ export default {
       taskOrderId:'',
       userOrderId:'',
       orderCode:'',
+      supplierSettlementType:'',
       form:{
         reportMileageAb:'',
         reportMileageBc:'',
@@ -77,10 +82,11 @@ export default {
         bridgeAmountAb:'',
         bridgeAmountBc:'',
         bridgeAmountCa:'',
-        tyreNumber:'',
+        tyreNumber:0,
         waitAmount:'',
         dilemmaFee:'',
         customerAmount:'',
+        taskFlowId:''
       }
     }
   },
@@ -90,9 +96,17 @@ export default {
       this.userOrderId = urlParams.get('userOrderId');
       this.orderCode = urlParams.get('orderCode')
       await this.getDetail()
-
   },
   methods:{
+    handleInput(event) {
+      const newValue = parseInt(event.target.value, 10);
+      if (!isNaN(newValue) && newValue >= 0 && newValue <= 4) {
+        this.form.tyreNumber = newValue;
+      } else {
+        this.$toast('请输入0到4之间的数字')
+        this.form.tyreNumber = null; // 或者上一个有效值
+      }
+    },
     submit() {
       this.updatSettlement()
     },
@@ -102,7 +116,9 @@ export default {
         orderCode:  this.orderCode,
         taskOrderId: this.taskOrderId
       })
-      leftCopy(this.form,{...res.data})
+      leftCopy(this.form,{...res.data});
+      this.supplierSettlementType= res.data.supplierSettlementType?.code
+      // this.form.taskFlowId =1
     },
     async updatSettlement(){
       let result =await updateOrderSettlement({
@@ -129,9 +145,6 @@ export default {
       }
     }
   },
-  components:{
-    // CommonBtn
-  }
 }
 </script>
 
@@ -143,7 +156,7 @@ export default {
   overflow-y: scroll;
 }
 .common {
-  @include wh(100%, 161px);
+  width: 100%;
   background: #FFFFFF;
   backdrop-filter: blur(5.602678571428572px);
   box-sizing: border-box;
@@ -152,7 +165,6 @@ export default {
 }
 .otherFee {
   @include wh(100%, 198px);
-  //margin-bottom: 20px;
 }
 .title {
   @include fontWeightSize(bold, 14px);
@@ -168,24 +180,23 @@ export default {
   border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
 }
 .metersWrap {
-  display: flex;
+  @include flexBetween;
-  justify-content: space-between;
   line-height: 37px;
   .blueColor{
     color: #4682FE;
   }
-  .alignRight{
+  .item{
-    text-align: right;
+    width: 100%;
-    opacity: .5;
+    @include flexBetCen;
-  }
+    .rightInput{
-  .leftTitle {
+      @include fontWeightSize(bold, 13px);
-    @include fontWeightSize(400, 14px);
+      color: #323643;
-  }
+      opacity: .5;
-  .rightInputMeters {
+    }
-    margin-right: 13px;
+    .blueColor{
-    @include fontWeightSize(bold, 13px);
+      color: #4682FE;
-    color: #323643;
+      opacity:  1 !important;
-    opacity: .5;
+    }
     input {
       height: 30px;
       border: none;
@@ -194,14 +205,21 @@ export default {
       opacity: .8;
     }
   }
+  .leftTitle {
+    @include fontWeightSize(400, 14px);
+  }
 }
 .btn {
-margin-top: 20px;
+  //position:absolute;
+  position: absolute;
+  bottom: 20px;
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: 20px;
+  margin-top: 40px;
   margin-bottom: 20px;
+  //bottom: 20px;
   button {
     border: none;
     border-radius: 5px;

src/views/index/toDoList.vue

@@ -1,9 +1,31 @@
 <template>
-  <div v-if="show"
+  <div class="wrapCotainer">
-       style="width:100%;height:100%;background: #F1F5F9;;display: flex;align-items: center;justify-content: center">
+    <div class="navBar">
-    <img src="@/assets/empty.png" style="width:65%;">
+      <van-nav-bar
+          title="待办列表"
+          left-arrow
+          left-arrow-color="#FFFFFF"
+          :border="false"
+          :fixed="true"
+          :safe-area-inset-top="true"
+          @click-left="goBack"
+      />
+    </div>
+    <div class="empty" v-if="show">
+      <img src="@/assets/empty.png" >
+    </div>
+    <div class="wrap"  v-else>
+      <div class="itemWrap" @click="goApprovalList" v-for="(item,index) in todolist" :key="index">
+        <div class="left">
+          <div class="title">{{ item.toDoName }}<span class="num" v-if="item.toDoCount">{{item.toDoCount}}</span></div>
+          <img class="ritBtn" src="@/assets/todoRight.png">
+        </div>
+        <div class="time">{{ item.toDoTime }}</div>
+      </div>
+    </div>
   </div>
-  <div class="wrap" v-else>
+
+<!--  <div class="wrap" v-else>
     <ul id="dataList" class="dataList">
       <li class="item" v-for="(item,i) in todolist" :key="i">
         <div class="left">
@@ -13,40 +35,55 @@
           <div class="addressName">{{ item.address }}</div>
           <div class="time">{{ item.toDoTime }} &nbsp;&nbsp;{{ item.userName }}</div>
         </div>
-        <div class="right">
+        <div class="right" v-if="permissonList.includes('approve')">
           <button class="nopass" @click="todoAudit(item ,2)">不通过</button>
           <button class="pass" @click="todoAudit(item ,1)">通过</button>
         </div>
       </li>
     </ul>
-  </div>
+  </div>-->
 </template>
 
 <script>
-import {getToDoList, toDoAudit} from "@/api/order"
+//getToDoList,toDoAudit
+import {toDoListNew} from "@/api/order"
+import {userOperationPermissions} from "@/api/mine"
+import {myMixins} from  "@/utils/myMixins"
 
 export default {
   name: "toDoList",
+  mixins:[myMixins],
   data() {
     return {
       todolist: [],
-      show: false
+      show: false,
+      permissonList:[]
     }
   },
   mounted() {
+    this.getPermissions()
     this.getList()
   },
   methods: {
+    goApprovalList(){
+      this.$router.push({ name: 'vehicleMaintenanceList',})
+    },
     async getList() {
-      let result = await getToDoList();
+      // let result = await getToDoList();
+      let result=await toDoListNew();
       this.todolist = result.data;
+      console.log("this.todolist",this.todolist)
       if (this.todolist?.length === 0) {
         this.show = true
       } else {
         this.show = false
       }
     },
-    async todoAudit(item,type) {
+    async getPermissions(){
+      let res = await userOperationPermissions();
+      this.permissonList = res.data
+    },
+/*    async todoAudit(item,type) {
        await toDoAudit({
         toDoId: item.toDoId,
         toDoType: item.toDoType.code,
@@ -54,7 +91,7 @@ export default {
       })
       this.todolist=[]
       await this.getList();
-    },
+    },*/
   }
 }
 </script>
@@ -62,12 +99,53 @@ export default {
 <style scoped lang="scss">
 @import "@/styles/mixin.scss";
 @import "@/styles/common.scss";
-
+.wrapCotainer{
+  @include wh(100%,100%);
+  background-color: #F4F5F7;
+}
+.navBar{
+  height: 46px;
+}
+.empty{
+  @include wh(100%,100%);
+  background-color: #FAFAFA;
+  @include flexTwoCenter;
+  img{
+    width: 100%;
+  }
+}
 .wrap {
   @include wh(100%, 100%);
-  box-sizing: border-box;
+  @include sizing4Padding(13px,13px,0,13px);
-  padding: 13px 13px 0 13px;
+  .itemWrap{
-  background-color: #F4F5F7;
+    @include wh(349px, 68px);
+    background: #FFFFFF;
+    box-shadow: 0px 2px 10px 0px rgba(216,216,216,0.5);
+    @include sizing4Radius(11px,12px,16px,15px, 6px);
+    @include flexBetween;
+    margin-bottom: 10px;
+    .left{
+      @include flexColBet;
+    }
+    .ritBtn{
+      @include wh(6px, 9px);
+    }
+    .time{
+      opacity: .6;
+    }
+    .title{
+      @include flexCenter;
+    }
+    .num{
+      display: inline-block;
+      @include whLin(14px, 14px);
+      @include fontWeightSize(10px,bold);
+      @include bgFontColor(#FFFFFF,#F93D3D);
+      border-radius: 2px;
+      text-align: center;
+      margin-left: 8px;
+    }
+  }
 }
 
 .dataList {

src/views/index/uploadInvoice.vue

@@ -0,0 +1,589 @@
+<template>
+  <div class="wrap">
+    <div class="navBar">
+      <van-nav-bar
+        title="上传发票"
+        left-arrow
+        left-arrow-color="#FFFFFF"
+        :border="false"
+        :fixed="true"
+        :safe-area-inset-top="true"
+        @click-left="h5GoBack"
+      />
+    </div>
+    <div class="contentWrap">
+      <div class="content_top">
+        <div class="content_tip">【注】如结算金额确认无误后，请开具正规增值税专用发票（开票项为：施救费、救授费、拖车费、帝引费任选其一）。如有路桥费产生，请开在救援发票中。</div>
+        <div class="top_detail">
+          <div class="detail_title detail_color">
+            <div class="title"> <span class="squire"></span> 应开金额</div>
+            <div class="money">￥{{ invoiceTotal }}</div>
+          </div>
+          <div class="border"></div>
+          <div class="detail_content" v-for="(item, index) in list" :key="index + '_1'">
+            <div class="content_item">
+              {{item.batchCode}}
+              <span class="content_money">￥{{item.invoiceMoney}}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="content_top mt10">
+        <div class="detail_title detail_color2 pd_no">
+          <div class="title"> <span class="squire squire2"></span> 实开金额</div>
+          <div class="money">￥{{ invoiceMoney || 0 }}</div>
+        </div>
+        <div class="border"></div>
+        <div class="invoice_wrap mt10" v-for="(item, index) in tableData" :key="index" @click="goInvoiceDetail(item)">
+          <div class="invoice_title">
+            <div>{{item.accountName}}</div>
+            <div class="btn_del" @click.stop="deleteHandler(item)">删除</div>
+          </div>
+          <div class="border"></div>
+          <div class="invoice_content">
+            <div>
+              <span class="label">发票号码:</span>
+              <span>{{item.invoiceNumber}}</span>
+            </div>
+            <div>
+              <span  class="label">发票金额:</span>
+              <span class="invoice_money">￥{{item.invoiceMoney}}</span>
+            </div>
+            <div class="invoice_flex">
+              <div>
+                <span  class="label">开票日期:</span>
+                <span>{{item.invoiceDate}}</span>
+              </div>
+              <van-icon class="icon" name="arrow" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="upload_btn_wrap">
+      <div class="btn_save" @click="createInvoiceHandler">保存</div>
+      <van-uploader :before-read="beforeRead" :after-read="afterRead" accept=".png,.jpg,.jpeg,.pdf,.ofd">
+        <div class="btn_upload">
+          <img class="icon_upload" src="@/assets/icon_upload.png" alt="">
+          上传发票
+        </div>
+      </van-uploader>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { Dialog } from "vant";
+  import { myMixins } from "@/utils/myMixins"
+  import { uploadInvoice, getBillingInfo, deleteInvoice, createBatch } from "@/api/mine"
+  export default {
+    name: "uploadInvoice",
+    mixins:[ myMixins ],
+    data(){
+      return {
+        list: [],
+        invoiceMoneyTotal: 0,
+        tableData: [],
+        activeObj: {},
+        billInfo: {},
+        supplierId: '',
+        queryId: '',
+        batchIds: [],
+        shouldRate: '',
+        realRate: '',
+        invoiceType: '',
+        invoiceMoney: 0,
+        afterTaxAmount: 0,
+        form: {
+          courierNumber: '',
+          invoiceType: '', //电子发票还是纸质发票
+        },
+        show: true,
+      }
+    },
+    async mounted() {
+      await this.initData();
+    },
+    async activated() {
+      await this.initData();
+      this.show = true;
+    },
+    watch: {
+      tableData: {
+        immediate: true,
+        handler() {
+          this.getInvoiceMoney()
+        }
+      }
+    },
+    computed: {
+      invoiceTotal () {
+        let total = 0;
+        this.list?.map(item => {
+          total += item.invoiceMoney
+        })
+        return total
+      }
+    },
+    deactivated() {
+      if (this.show) {
+        this.tableData = [];
+      }
+    },
+    methods: {
+      async initData() {
+        this.list = JSON.parse(localStorage.getItem('list'));
+        this.batchIds = [];
+        this.list.map(a => {
+          this.batchIds.push(a.id)
+        })
+        console.log('this.batchIds', this.batchIds)
+        this.shouldRate = this.list[0]?.shouldRate
+        this.realRate = this.list[0]?.realRate
+        this.invoiceType = this.list[0]?.invoiceType
+        this.supplierId = this.list[0]?.supplierId
+        await this.getInfo();
+      },
+      async getInfo() {
+        if(this.supplierId) {
+          let res = await getBillingInfo('/supplier/info/billing/getBySupplierId/' + this.supplierId )
+          this.billInfo = res.data || {}
+        }
+      },
+      async createInvoiceHandler() {
+        if ( !this.form.invoiceType ) {
+          this.$toast('发票类型不能为空！')
+          return
+        }
+        if (this.invoiceTotal != this.invoiceMoney) {
+          this.$toast('“应开金额”与“实开金额”不一致，请核实系统的开票金额与实际开出的发票金额。')
+          return
+        }
+        if(this.form.invoiceType == 2){
+          Dialog.confirm({
+            title: '提示',
+            message: '纸质发票上传后请尽快邮寄，并在系统《开票信息》菜单，录入快递单号，以免影响结算时效！谢谢！',
+          }).then(async () => {
+            await this.saveHandle();
+          }).catch(() => {
+          });
+        } else {
+          await this.saveHandle();
+        }
+      },
+      async saveHandle() {
+        let paramsArr = this.getParams();
+        console.log('.......', paramsArr)
+        try {
+          this.loading = true;
+          let res = await createBatch({
+            supplierId: this.supplierId,
+            batchIds: this.batchIds,
+            detailList: paramsArr
+          })
+          console.log('res', res)
+          this.loading = false;
+          Dialog.alert({
+            title: '提示',
+            message: `发票已上传成功，待审核。开票编号为：${res.data}，请前往菜单【开票信息】中查看。`,
+          }).then(() => {
+           this.h5GoBack()
+          });
+        } catch (e) {
+          console.log('eee', e)
+          Dialog.alert({
+            title: '提示',
+            message: e + '发票提交出错',
+          }).then(() => {
+
+          });
+        }finally {
+          this.loading = false;
+        }
+      },
+      getParams() {
+        let params = [...this.tableData]
+        if(params.length > 0) {
+          params.map(item => {
+            item.courierNumber = (this.form.invoiceType == 2 ? this.form.courierNumber : '')
+            item.invoiceType = this.form.invoiceType
+            if( item.taxRate.toString().indexOf('%') != -1 ) {
+              let tempRate = item.taxRate.replace('%', '');
+              item.taxRate = (Number(tempRate) / 100)
+            }
+          })
+        }
+        return params
+      },
+      deleteHandler( row ) {    // 删除发票
+        Dialog.confirm({
+          title: '提示',
+          message: '确认要删除发票信息吗?',
+        }).then(async () => {
+          await deleteInvoice({
+            id: row?.id || '',
+            path: row?.path
+          });
+          let index = this.tableData.findIndex(a => a.invoiceNumber == row.invoiceNumber)
+          this.tableData.splice(index, 1)
+        }).catch(() => {
+        });
+      },
+      beforeRead (file) {
+        const FileExt = file.name.replace(/.+\./, "");
+        if (['jpg', 'png', 'jpeg', 'pdf', 'ofd'].indexOf(FileExt.toLowerCase()) === -1) {
+          this.$toast('请上传后缀名为jpg、jpeg、png、pdf、ofd的文件！')
+          return false;
+        }
+        this.$set(this.activeObj, 'fileType', FileExt)
+        return  true
+      },
+      async afterRead (file) {
+        try {
+          var formData = new FormData();  // 创建form对象
+          formData.append('file', file.file);  // 通过append向form对象添加数据
+          formData.append('supplierId', this.supplierId)  // 如果还需要传替他参数的话
+          let res = await uploadInvoice(formData)
+          console.log('rrerer', res)
+          if( res?.code == 200 ) {
+            let test =  this.tableData.filter(item => item.invoiceNumber == res.data.ocrInvoiceRes.data.invoiceNumber)  // 如果
+            if(  test.length > 0 ) {      // 发票是否已经上传过
+              this.$message.warning("该发票已上传，不能重复上传")
+              return false
+            } else {
+
+              let invoiceDetails = this.getInvoiceRates(res.data.ocrInvoiceRes.data.invoiceDetails)
+              let flag = this.legalRate(invoiceDetails)
+              let realFlag = this.realRateCheck(invoiceDetails)
+              let errorStr = "";
+              //电子发票，验证必须是pdf版本
+              if((res.data.ocrInvoiceRes.data.invoiceType.indexOf("数电") != -1 || res.data.ocrInvoiceRes.data.invoiceType.indexOf("电子") != -1) && this.activeObj.fileType != 'pdf'){
+                errorStr = errorStr + "电票请上传PDF格式的文件;"
+              }
+              if(res.data.ocrInvoiceRes.data.invoiceType.indexOf("专用发票") == -1 && this.invoiceType == 1){
+                errorStr = errorStr + "上传发票类型与服务商配置发票类型不一致，设置类型为：专票;";
+              }
+              if(!this.billInfo.unitName ){
+                errorStr = errorStr + "未设置抬头，请联系区域经理;";
+              }
+              if(!this.billInfo.dutyParagraph ){
+                errorStr = errorStr + "未设置纳税人识别号，请联系区域经理;";
+              }
+              let ocrName = res.data.ocrInvoiceRes.data.sellerName.replace('(','').replace('（','').replace(')','').replace('）','');
+              let billName = ''
+              if (this.billInfo && this.billInfo.unitName) {
+                billName = this.billInfo.unitName.replace('(','').replace('（','').replace(')','').replace('）','');
+              }
+              let diffNumber = this.charDifference(ocrName,billName);
+              if(ocrName != billName && diffNumber > 2 && !res.data.ocrInvoiceRes.data.sellerName.startsWith("国家税务总局")){
+                errorStr = errorStr + "上传发票抬头与服务商配置不一致，设置抬头为：" + (this.billInfo.unitName || '未设置') + "，识别抬头为：" + res.data.ocrInvoiceRes.data.sellerName + ";如发票确认无误，请联系结算部：021-53682525";
+              }
+
+              if( !flag ) {
+                Dialog.alert({
+                  title: '提示',
+                  message: '您上传的发票税率不符合要求',
+                }).then(() => {
+                  this.uploadLoading=false;
+                  return false
+                });
+              }else if(!realFlag){
+                Dialog.alert({
+                  title: '提示',
+                  message: "您上传的发票税率与服务商配置税率不一致，设置税率为：" + this.realRate + "%"
+                }).then(() => {
+                  this.uploadLoading=false;
+                  return false
+                });
+              }else if(errorStr && errorStr.length > 0){
+                Dialog.alert({
+                  title: '提示',
+                  message: errorStr,
+                }).then(() => {
+                  this.uploadLoading=false;
+                  return false
+                });
+              } else {
+                console.log('res', res)
+                console.log('file', file)
+                this.form.invoiceType = res.data.ocrInvoiceRes.data.invoiceType.indexOf("数电") == -1 && res.data.ocrInvoiceRes.data.invoiceType.indexOf("电子") == -1 ? 2 : 1
+                let isOrdinaryInvoice = res.data.ocrInvoiceRes.data.invoiceType.indexOf("普通") > -1
+                this.$set(this.activeObj, 'imageUrl', '')
+                this.$set(this.activeObj, 'fileName', '')
+                if (['pdf','ofd'].indexOf(this.activeObj.fileType) === -1) {
+                  // this.activeObj.imageUrl = URL.createObjectURL(file.raw);
+                  this.activeObj.imageUrl = res.data.url
+                  this.$set(this.activeObj, 'fileName', file.file.name)
+                } else {
+                  this.$set(this.activeObj, 'fileName', file.file.name)
+                }
+                this.$set(this.activeObj, 'path', res.data.url)
+                this.$set(this.activeObj, 'invoiceNumber', res.data.ocrInvoiceRes.data.invoiceNumber)
+                this.$set(this.activeObj, 'accountName', res.data.ocrInvoiceRes.data.sellerName)
+                this.$set(this.activeObj, 'invoiceMoney', res.data.ocrInvoiceRes.data.totalAmount)
+                this.$set(this.activeObj, 'taxRate',isOrdinaryInvoice?0: res.data.ocrInvoiceRes.data.invoiceDetails[0].taxRate)
+                this.$set(this.activeObj, 'taxAmount',isOrdinaryInvoice?0: res.data.ocrInvoiceRes.data.invoiceTax)
+                this.$set(this.activeObj, 'afterTaxAmount',isOrdinaryInvoice?res.data.ocrInvoiceRes.data.totalAmount: res.data.ocrInvoiceRes.data.invoiceAmountPreTax)
+                this.$set(this.activeObj, 'invoiceDate', res.data.ocrInvoiceRes.data.invoiceDate)
+                this.$set(this.activeObj, 'invoiceCode', res.data.ocrInvoiceRes.data.invoiceCode)
+                this.$set(this.activeObj, 'invoiceTypeCodeString', res.data.ocrInvoiceRes.data.invoiceType)
+                this.$set(this.activeObj, 'payName', res.data.ocrInvoiceRes.data.purchaserName)
+                this.tableData.push({...this.activeObj})
+                this.$forceUpdate()
+              }
+            }
+          }
+        } catch (e) {
+          console.log('eeee', e)
+        }
+      },
+      goInvoiceDetail (item) {
+        localStorage.setItem('invoiceDetail', JSON.stringify(item))
+        this.show = false;
+        this.goPage('showInvoice')
+      },
+      getInvoiceMoney() {
+        let invoiceMoney = 0;
+        let afterTaxAmount = 0;
+        if( this.tableData.length > 0){
+          this.tableData.map(item => {
+            if( item.invoiceMoney && item.afterTaxAmount ) {
+              invoiceMoney += (Number(item.invoiceMoney) * 100)
+              afterTaxAmount += ( Number(item.afterTaxAmount) * 100 )
+            }
+          })
+          this.invoiceMoney = invoiceMoney != 0 ?  (invoiceMoney / 100) : 0
+          this.afterTaxAmount = afterTaxAmount != 0 ? ( afterTaxAmount / 100 ) : 0
+        } else {
+          this.invoiceMoney = invoiceMoney
+          this.afterTaxAmount = afterTaxAmount
+        }
+      },
+      charDifference(str1,str2) {
+        let difference = 0;
+        // 遍历字符串1的每个字符
+        for (let i = 0; i < str1.length; i++) {
+          // 如果字符串2中不包含当前字符，或者位置不对，则误差加1
+          if (str2.indexOf(str1[i]) === -1 || str2[i] !== str1[i]) {
+            difference++;
+          }
+        }
+
+        //如果前面部分都对得上，但是长度不同，则差异是长度
+        if(str1.length != str2.length){
+          difference += Math.abs(str1.length - str2.length)
+        }
+        // 同样遍历字符串2，处理字符串1中不存在的字符
+        /*for (let i = 0; i < str2.length; i++) {
+          if (str1.indexOf(str2[i]) === -1) {
+            difference++;
+          }
+        }*/
+        return difference;
+      },
+      legalRate(rateList) {     // 合法的 税率
+        let rate = rateList[0]
+        let flag = rateList.every(item => {
+          //设置的是普票，不校验税率
+          if(this.invoiceType == 2 && item != '免税' && item != '0%'){
+            return true
+          }
+          return  item == rate && ['1%', '3%', '6%', '9%', '13%'].includes(item)
+        })
+        console.log('flag', flag)
+        return flag
+      },
+      realRateCheck(rateList) {     // 和设置的税率是否符合
+        let rate = rateList[0]
+        let flag = rateList.every(item => {
+          //设置的是普票，不校验税率
+          if(this.invoiceType == 2 && item != '免税' && item != '0%'){
+            return true
+          }
+          return  item == rate && this.realRate + '%' == item
+        })
+        console.log('flag', flag)
+        return flag
+      },
+      getInvoiceRates(invoiceDetails) {     // 获取发票详情的税率数组
+        let rates = [];
+        invoiceDetails.map(item => {
+          rates.push(item.taxRate)
+        })
+        return rates
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/mixin.scss";
+  @import "@/styles/common.scss";
+  .wrap{
+    @include wh(100%,100%);
+    background-color: #F4F5F7;
+    overflow-y: auto;
+  }
+  .navBar{
+    height: 46px;
+  }
+  .mt10 {
+    margin-top: 10px;
+  }
+  .contentWrap {
+    padding-bottom: 70px;
+    .content_top {
+      padding: 15px 20px;
+      background-color: #fff;
+      .content_tip {
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.5);
+      }
+      .top_detail {
+        .detail_content {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          padding: 10px 0;
+          .content_item {
+            font-size: 12px;
+            color: rgba(0, 0, 0, 0.5);
+            line-height: 27px;
+            .content_money {
+              font-size: 15px;
+              color: #D48139;
+              font-weight: bold;
+            }
+          }
+        }
+      }
+      .detail_title {
+        font-weight: bold;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 16px;
+        padding: 10px 0;
+      }
+      .title {
+        display: flex;
+        align-items: center;
+      }
+      .money {
+        font-size: 22px;
+      }
+      .detail_color {
+        color: #D48139;
+      }
+      .detail_color2 {
+        color: #FF5D2E;
+      }
+      .pd_no {
+        padding-top: 0;
+      }
+    }
+  }
+  .squire {
+    width: 6px;
+    height: 6px;
+    display: inline-block;
+    background-color: #D48139;
+    border-radius: 2px;
+    margin-right: 10px;
+  }
+  .squire2 {
+    background-color: #FF5D2E;
+  }
+  .border {
+    width: 100%;
+    height: 0;
+    border-bottom: 1px solid;
+    opacity: 0.16;
+    border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
+  }
+
+  .invoice_wrap {
+    background-color: #F4FAFF;
+    padding: 11px 3px 15px 18px;
+    border-radius: 4px;
+    border: 1px solid #EBF2F7;
+    .invoice_title {
+      font-size: 14px;
+      font-weight: bold;
+      color: rgba(50, 54, 67, 0.76);
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 10px;
+      .btn_del {
+        width: 48px;
+        height: 18px;
+        margin-right: 12px;
+        line-height: 18px;
+        text-align: center;
+        border-radius: 3px;
+        border: 1px solid #DDDDDD;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.7);
+        font-weight: normal;
+      }
+    }
+    .invoice_content {
+      padding-top: 10px;
+      padding-right: 12px;
+      color: #000;
+      font-size: 12px;
+      line-height: 24px;
+      .label {
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.5);
+        margin-right: 10px;
+      }
+      .invoice_money {
+        color: #FF5D2E;
+        font-size: 15px;
+        font-weight: bold;
+      }
+    }
+  }
+  .upload_btn_wrap {
+    position: fixed;
+    width: 100%;
+    box-sizing: border-box;
+    bottom: 0;
+    left: 0;
+    padding: 15px 30px;
+    display: flex;
+    color: #fff;
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 40px;
+    background: #FBFBFB;
+    box-shadow: 0px -1px 20px 4px rgba(98,107,128,0.2);
+    div {
+      height: 40px;
+      border-radius: 5px;
+      text-align: center;
+      flex: 1;
+    }
+    .btn_save {
+      background: #354D93;
+      margin-right: 4px;
+    }
+    .btn_upload {
+      background: #354D93;
+      margin-left: 4px;
+    }
+    .icon_upload {
+      width: 13px;
+      height: 13px;
+    }
+  }
+  .invoice_flex {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  ::v-deep .van-uploader__input-wrapper {
+    width: 100% !important;
+  }
+</style>

src/views/index/vehicleAdd.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="wrap">
+<div class="wrap vehicleAdd">
   <div class="navBar">
     <van-nav-bar
         :title="id ? '修改车辆信息' : '添加车辆'"
@@ -12,13 +12,55 @@
     />
   </div>
 <div class="addContentWrap">
-  <cell-group label="车牌号" placeholder="请输入车牌号"   v-model="carNum" />
+  <div class="itemContent">
+    <div class="titleType">
+      <img class="startImg" src="@/assets/start.png" />
+      <span>行驶证首页</span>
+    </div>
+    <van-uploader
+      v-model="vehicleLicenseFrontList"
+      :after-read="vehicleLicenseFrontHandler"
+      :max-size="5 * 1024 * 1024"
+      max-count="1"
+      :preview-size="54"
+      accept="image "
+    />
+  </div>
+  <div class="itemContent">
+    <div class="titleType">
+      <img class="startImg" src="@/assets/start.png" />
+      <span>行驶证副页</span>
+    </div>
+    <van-uploader
+      v-model="vehicleLicenseBackList"
+      :after-read="vehicleLicenseBackHandler"
+      :max-size="5 * 1024 * 1024"
+      max-count="1"
+      :preview-size="54"
+      accept="image "
+    />
+  </div>
+  <div class="itemContent">
+    <div class="titleType">
+      <img class="startImg" src="@/assets/start.png" />
+      <span>车头照</span>
+    </div>
+    <van-uploader
+      v-model="vehicleFrontPhotoList"
+      :after-read="vehicleFrontPhotoHandler"
+      max-count="1"
+      :preview-size="54"
+      accept="image "
+    />
+  </div>
+
+  <cell-group label="车牌号" placeholder="车牌号" disabled v-model="carNum" />
   <div class="itemContent">
     <div class="titleType">
       <img class="startImg" src="@/assets/start.png" />
       <span>车辆类型</span>
     </div>
-    <select id="mySelect" style="width: 70px"  v-model="selectedOption">
+    <select id="mySelect"  class="mySelect"  v-model="selectedOption">
       <option v-for="(item,index) in typeList" :key="index" :value="index">{{item}}</option>
     </select>
   </div>
@@ -57,24 +99,30 @@
     </div>
   </div>
   <div class="serviceType">
+
     <div class="trailerService" v-for="(item,index) in supplierServiceList" :key="index">
-      <div class="serviceline">
+      <div class="serviceline"  @click="loadAll(index)">
+        <img  :ref="'serviceline' + index" :src="imageUrl" style="width: 20px;height: 15px" >
         <span  class="service">{{ item.name }}:</span>
         <span class="line"></span>
       </div>
-      <van-checkbox-group v-model="serviceIds" v-for="(item2,index2) in item.children" :key="index2" class="radioWrap" @change="change">
+      <div :ref="'checkboxGroup' + index"  class="checkbox-group">
-        <van-checkbox class="item" :name="item2.id">{{item2.name }}</van-checkbox>
+        <van-checkbox-group  v-model="serviceIds" v-for="(item2,index2) in item.children" :key="index2" class="radioWrap" >
-      </van-checkbox-group>
+          <van-checkbox class="item" :name="item2.id">{{item2.name }}</van-checkbox>
+        </van-checkbox-group>
+      </div>
+
     </div>
   </div>
-  <two-common-btn class="btn" @cancelClick="cancelBtn" @submitClick="submitBtn" />
+  <two-common-btn class="btn" @cancelClick="h5GoBack" @submitClick="submitBtn" />
 </div>
 </div>
 </template>
 
 <script>
+  // uploadImage
 import {myMixins} from "@/utils/myMixins"
-import {vehicleTypeList,saveVehicle,getInfoById,supplierServiceTree} from "@/api/mine"
+import {vehicleTypeList,saveVehicle,getInfoById,supplierServiceTree, uploadImage, ocrHandler} from "@/api/mine"
 import TwoCommonBtn from "@/components/twoBtnCommon.vue"
 import CellGroup from "@/components/cellGroup.vue";
 export default {
@@ -83,7 +131,6 @@ export default {
   data(){
     return{
       trailerService: '',//拖车服务
-      smallRepairService: '',//小修服务
       isJoin:'',//是否参与
       activeIcon: require('@/assets/check.png'),
       inactiveIcon: require('@/assets/uncheck.png'),
@@ -94,7 +141,17 @@ export default {
       selectedOption:'1',//车辆类型
       id:'',//车辆Id
       serviceIds:[],//车辆服务种类,
-      supplierServiceList:[]
+      supplierServiceList:[],
+      show:false,
+      imageUrl: require('@/assets/arr_right.png'),
+      vehicleLicenseFrontList: [],
+      vehicleLicenseBackList: [],
+      vehicleFrontPhotoList: [],
+      vehicleLicenseFront: '',  // 行驶证首页
+      vehicleLicenseBack: '',   // 行驶证副页
+      vehicleFrontPhoto: '',    // 车头照
+      vehicleLicenseInfo: {},
+      vehicleLicenseBackOcrFlag: false,   // 行驶证副页 修改时默认不需要 ocr识别
     }
   },
   async mounted() {
@@ -110,6 +167,102 @@ export default {
     await this.getSupplierServiceTree();
   },
   methods:{
+    async vehicleLicenseFrontHandler(file) {    // 上传 行驶证首页
+      const formData = new FormData();
+      formData.append("file" , file.file);
+      let res = await uploadImage(formData)
+      this.vehicleLicenseFront = res.data;
+      await this.vehicleOcrHandler();
+    },
+    async vehicleLicenseBackHandler(file) {     // 上传 行驶证副页
+      this.vehicleLicenseBackOcrFlag = true;
+      const formData = new FormData();
+      formData.append("file" , file.file);
+      let res = await uploadImage(formData);
+      this.vehicleLicenseBack = res.data;
+      await this.vehicleBackOcrHandler();
+    },
+    async vehicleFrontPhotoHandler(file) {     // 上传 车头照
+      const formData = new FormData();
+      formData.append("file" , file.file);
+      let res = await uploadImage(formData);
+      this.vehicleFrontPhoto = res.data;
+    },
+    async vehicleOcrHandler() {     // 行驶证首页 ocr 识别
+      this.vehicleLicenseInfo.licensePlateNumber = '';
+      this.vehicleLicenseInfo.vehicleType = '';
+      this.vehicleLicenseInfo.owner = '';
+      this.vehicleLicenseInfo.address = '';
+      this.vehicleLicenseInfo.useNature = '';
+      this.vehicleLicenseInfo.model = '';
+      this.vehicleLicenseInfo.vinCode = '';
+      this.vehicleLicenseInfo.engineNumber = '';
+      this.vehicleLicenseInfo.registrationDate = '';
+      this.vehicleLicenseInfo.issueDate = '';
+      this.vehicleLicenseInfo.issueAuthority = '';
+      let res = await ocrHandler({
+        ocrType: 3,
+        imageUrl: this.vehicleLicenseFront,
+        cardSide: 'FRONT'
+      })
+      if ( res?.data?.frontInfo ) {
+        let frontInfo = res?.data?.frontInfo;
+        this.carNum = frontInfo?.plateNo;
+        this.vehicleLicenseInfo.licensePlateNumber = frontInfo?.plateNo;
+        this.vehicleLicenseInfo.vehicleType = frontInfo?.vehicleType;
+        this.vehicleLicenseInfo.owner = frontInfo?.owner;
+        this.vehicleLicenseInfo.address = frontInfo?.address;
+        this.vehicleLicenseInfo.useNature = frontInfo?.useCharacter;
+        this.vehicleLicenseInfo.model = frontInfo?.model;
+        this.vehicleLicenseInfo.vinCode = frontInfo?.vin;
+        this.vehicleLicenseInfo.engineNumber = frontInfo?.engineNo;
+        this.vehicleLicenseInfo.registrationDate = frontInfo?.registerDate;
+        this.vehicleLicenseInfo.issueDate = frontInfo?.issueDate;
+        this.vehicleLicenseInfo.issueAuthority = frontInfo?.seal;
+      }
+    },
+    async vehicleBackOcrHandler() {     // 行驶证副页 ocr 识别
+      this.vehicleLicenseInfo.recordNumber = '';
+      this.vehicleLicenseInfo.passengerCapacity = '';
+      this.vehicleLicenseInfo.totalWeight = '';
+      this.vehicleLicenseInfo.curbWeight = '';
+      this.vehicleLicenseInfo.permittedWeight = '';
+      this.vehicleLicenseInfo.overallDimension = '';
+      this.vehicleLicenseInfo.tractionWeight = '';
+      this.vehicleLicenseInfo.backPlateNo = '';     // 行驶证副页 车牌号，仅用来判断 ocr 识别是否成功
+      let res = await ocrHandler({
+        ocrType: 3,
+        imageUrl: this.vehicleLicenseBack,
+        cardSide: 'BACK'
+      })
+      if(res?.data?.backInfo) {
+        let backInfo = res?.data?.backInfo;
+        this.vehicleLicenseInfo.recordNumber = backInfo?.fileNo;
+        this.vehicleLicenseInfo.passengerCapacity = backInfo?.allowNum;
+        this.vehicleLicenseInfo.totalWeight = backInfo?.totalMass;
+        this.vehicleLicenseInfo.curbWeight = backInfo?.curbWeight;
+        this.vehicleLicenseInfo.permittedWeight = backInfo?.loadQuality;
+        this.vehicleLicenseInfo.overallDimension = backInfo?.externalSize;
+        this.vehicleLicenseInfo.tractionWeight = backInfo?.TotalQuasiMass;
+        this.vehicleLicenseInfo.backPlateNo = backInfo?.plateNo;
+      }
+      console.log('this.vehicle', this.vehicleLicenseInfo)
+    },
+    loadAll(i){
+      // console.log(i)
+      this.show = !this.show
+      const refName='checkboxGroup' + i;
+      const element1 = this.$refs[refName]; // 通过动态属性名访问引用this.$refs.checkboxGroup.style.display = 'block';
+      const refName1='serviceline' + i;
+      const element = this.$refs[refName1];
+      if(this.show){
+        element1[0].style.display = 'block'
+        element[0].src= require('@/assets/arr_bot.png')
+      }else {
+        element1[0].style.display = 'none'
+        element[0].src= require('@/assets/arr_right.png')
+      }
+    },
     async getTypeList() {
         let result=await vehicleTypeList();
         if(result.code === 200){
@@ -124,36 +277,54 @@ export default {
       let res= await  getInfoById({
         vehicleId:this.id
       })
-        let result=res.data;
+      let result=res.data;
-        this.id=result.vehicleId
+      this.id=result.vehicleId
-        this.carNum=result.plateNumber
+      this.carNum=result.plateNumber
-        this.isJoin=result.hasPolymerization.code
+      this.isJoin=result.hasPolymerization.code
-        this.selectedOption=result.vehicleType;
+      this.selectedOption=result.vehicleType;
-        this.serviceIds=result.serviceIds
+      this.serviceIds=result.serviceIds
-    },
+      this.vehicleLicenseFront = result.vehicleLicenseFront;
-    change(e) {
+      this.vehicleLicenseBack = result.vehicleLicenseBack;
-      // this.trailerService=e
+      this.vehicleFrontPhoto = result.vehicleFrontPhoto;
-      console.log(" this.trailerService",e, this.result)
+      this.vehicleLicenseInfo = result.vehicleLicenseInfo;
-    },
+      this.vehicleLicenseFrontList = [{ url : this.vehicleLicenseFront }];
-    change2(e) {
+      this.vehicleLicenseBackList = [{ url : this.vehicleLicenseBack }];
-      this.smallRepairService=e
+      this.vehicleFrontPhotoList = [{ url : this.vehicleFrontPhoto }];
     },
     isChange(e){
       this.isJoin=e
     },
-    cancelBtn(){//取消车辆
-      this.$router.back()
-    },
     async submitBtn(){
-      // if(this.carNum || this.selectedOption || this.isJoin){
+        if( !this.vehicleLicenseFront ) {
-      //   this.$toast('必填字段未填写')
+          this.$toast('行驶证主页照片不能为空')
-      // }else{
+          return
+        }
+      if( !this.vehicleLicenseBack ) {
+        this.$toast('行驶证副页照片不能为空')
+        return
+      }
+      if( !this.vehicleLicenseBack ) {
+        this.$toast('车头照片不能为空')
+        return
+      }
+      if( !this.vehicleLicenseInfo.licensePlateNumber ) {
+        this.$toast('行驶证主页识别失败')
+        return
+      }
+      if(this.vehicleLicenseBackOcrFlag && !this.vehicleLicenseInfo.backPlateNo ) {
+        this.$toast('行驶证副页识别失败')
+        return
+      }
         await saveVehicle({
           vehicleId:this.id ? this.id : '',
           plateNumber:this.carNum ? this.carNum :'',
           vehicleType:this.selectedOption ? this.selectedOption : '',
-          hasPolymerization:this.isJoin ? this.isJoin : '',
+          hasPolymerization:this.isJoin,
-          serviceIds:this.serviceIds ? this.serviceIds : []
+          serviceIds:this.serviceIds ? this.serviceIds : [],
+          vehicleLicenseFront: this.vehicleLicenseFront,
+          vehicleLicenseBack: this.vehicleLicenseBack,
+          vehicleFrontPhoto: this.vehicleFrontPhoto,
+          vehicleLicenseInfo: this.vehicleLicenseInfo,
         })
         if(this.id){
           this.$toast('修改成功')
@@ -164,7 +335,6 @@ export default {
           this.$router.back();
         },2000)
       }
-    // },
   },
   components:{
     CellGroup,
@@ -173,9 +343,25 @@ export default {
 }
 </script>
 
+<style>
+  .vehicleAdd .van-field__control:disabled {
+    color: #323643 !important;
+    -webkit-text-fill-color: #323643 !important;
+  }
+</style>
 <style scoped lang="scss">
 @import "@/styles/mixin.scss";
 @import "@/styles/common.scss";
+.mySelect{
+  @include fontWeightSize(bold,13px);
+  color: #323643;
+  appearance: none;
+  padding-right: 16px;
+  background: url('@/assets/arrow_bot.png') no-repeat right center / 15px 14px;
+}
+.checkbox-group {
+  display: none;
+}
 .navBar{
   margin-bottom: 46px;
 }
@@ -186,8 +372,7 @@ export default {
 .addContentWrap{
   margin-left: 16px;
   .itemContent{
-    display: flex;
+    @include flexColBet;
-    justify-content: space-between;
     line-height: 56px;
     box-sizing: border-box;
     padding-right: 25px;
@@ -238,13 +423,13 @@ export default {
       margin-left: 10px;
     }
     .service{
-      opacity: .7;
+      @include colorOpa(#323643,0.7);
-      color: #323643;
       line-height: 18px;
+      white-space: nowrap;
     }
     .line{
       display: inline-block;
-      @include wh(246px,2px);
+      @include wh(240px,2px);
       opacity: 0.16;
       border-bottom: 1px solid;
       border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
@@ -254,11 +439,8 @@ export default {
     }
   }
   .btn{
-    //margin-left: 8px;
     width: 90%;
     margin: 40px 0 30px 8px;
-    //position: fixed;
-    //bottom: 30px;
   }
 }
 </style>

src/views/index/vehicleManage.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="wrap"  @scroll="handleScroll">
+<div class="wrap"  >
   <div class="navBar">
     <van-nav-bar
         title="车辆管理"
@@ -10,7 +10,7 @@
         :safe-area-inset-top="true"
         @click-left="goBack"
     >
-      <template slot="right">
+      <template slot="right" v-if="permissonList.includes('vehicleAddBtn')">
         <div class="rightWrap" @click="goPage('vehicleAdd')">
               <img src="@/assets/addImg.png" />
               <span class="addTxt">添加</span>
@@ -19,30 +19,37 @@
     </van-nav-bar>
   </div>
   <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
-    <div class="carItem" v-for="(item,index) in vehicleList" :key="index">
+    <van-list
-      <div class="carCode">
+        v-model="loading"
-        <div class="codeLeft">{{item.plateNumber}} / {{item.vehicleTypeString}}</div>
+        :finished="finished"
-        <div class="twoBtn">
+        finished-text="没有更多了"
-          <button class="del" @click="deleteItem(item.vehicleId)">删除</button>
+        @load="onLoad"
-          <button class="revise" @click="updateVehicle(item)">修改</button>
+    >
+      <div class="carItem" v-for="(item,index) in vehicleList" :key="index">
+        <div class="carCode">
+          <div class="codeLeft">{{item.plateNumber}} / {{item.vehicleTypeString}}</div>
+          <div class="twoBtn">
+            <button v-if="permissonList.includes('vehicleAddBtn')" class="del" @click="deleteItem(item.vehicleId)">删除</button>
+            <button v-if="permissonList.includes('vehicleModifyBtn')" class="revise" @click="updateVehicle(item)">修改</button>
+          </div>
+        </div>
+        <div class="carType">{{ item.serviceName }}</div>
+        <div class="juhe">
+          <span class="zdJuhe">是否参与中道聚合:        </span>
+          <span :class="item.hasPolymerization.code == 0  ? 'isYes' :'isNo'">{{item.hasPolymerization.label}}</span>
         </div>
       </div>
-      <div class="carType">{{ item.serviceName }}</div>
+
-      <div class="juhe">
+    </van-list>
-        <span class="zdJuhe">是否参与中道聚合:        </span>
+ </van-pull-refresh>
-        <span :class="item.hasPolymerization.code == 0  ? 'isYes' :'isNo'">{{item.hasPolymerization.label}}</span>
+  <van-dialog v-model="show" title="确定删除吗" show-cancel-button @confirm="handleConfirm"></van-dialog>
-      </div>
-    </div>
-  </van-pull-refresh>
-<van-dialog v-model="show" title="确定删除吗" show-cancel-button @confirm="handleConfirm"></van-dialog>
-  <div v-if="loading">加载中...</div>
 </div>
 
 </template>
 
 <script>
 import { myMixins} from "@/utils/myMixins";
-import {supplierVehicleList,deleteVehicle} from "@/api/mine"
+import {supplierVehicleList,deleteVehicle,userOperationPermissions} from "@/api/mine"
 export default {
   name: "vehicleManage",
   mixins:[myMixins],
@@ -54,16 +61,30 @@ export default {
       pageNum:1,
       pageSize:10,
       total:'',
-      loading:false,
       isLoading: false,
+      loading: false,
+      finished: false,
+      permissonList:[],
     }
   },
   mounted() {
-    this.getVehicleList();
+    // this.getVehicleList();
+    this.getPermissions();
   },
   methods:{
+    async onLoad(){
+      await this.getVehicleList()
+      this.pageNum++;
+      // 加载状态结束
+      this.loading = false;
+      // 数据全部加载完成
+      if (this.vehicleList.length >= this.total) {
+        this.finished = true;
+      }
+    },
     onRefresh() {
-      this.getVehicleList()
+      this.pageNum=1
+      // this.getVehicleList()
       setTimeout(() => {
         this.$toast('刷新成功');
         this.isLoading = false;
@@ -74,7 +95,6 @@ export default {
           pageNum:this.pageNum,
           pageSize:this.pageSize
         })
-        // if(result.code === 200){
           this.total=result.total
           if(this.pageNum == 1){// 第一页直接赋值
             this.vehicleList=result.data;
@@ -83,8 +103,12 @@ export default {
             let arr = result.data;
             this.vehicleList = preList.concat(arr)
           }
-        // }
       },
+    async getPermissions(){
+      let res = await userOperationPermissions();
+      this.permissonList = res.data
+      // console.log("车辆管理",this.permissonList.includes('vehicleAddBtn','vehicleModifyBtn'))
+    },
     deleteItem(id){//删除车辆
         this.show=true
         this.id=id
@@ -93,11 +117,9 @@ export default {
       await deleteVehicle({
         vehicleId:this.id
       })
-     // if(result.code === 200){
        this.$toast('删除成功');
-       // this.vehicleList=[]
+      this.pageNum=1
-       await this.getVehicleList();
+      await this.getVehicleList();
-     // }
     },
     updateVehicle(item){//修改
       this.$router.push({
@@ -107,15 +129,6 @@ export default {
         }
       })
     },
-    async handleScroll(){
-      let num =  Math.ceil( this.total / 10)
-      if(num <= this.pageNum){
-        // console.log("不在加载数据")
-      }else{
-        this.pageNum++;
-        await this.getVehicleList()
-      }
-    },
 
   }
 }
@@ -125,47 +138,38 @@ export default {
 @import "@/styles/mixin.scss";
 @import "@/styles/common.scss";
 .wrap{
+  background: #F4F5F7;
+  @include sizingPadding(13px,13px);
+  @include wh(100%, 100%);
   overflow-y: auto;
-  @include wh(100%,calc(100% - 46px));
-  box-sizing: border-box;
-  padding: 13px 13px 0;
 }
 .navBar{
   margin-bottom: 46px;
-  //height: 46px;
   .rightWrap{
-    width: 50px;
+    @include wh(50px,20px);
-    height: 20px;
     border-radius: 10px;
     opacity: 0.7;
     border: 1px solid #FFFFFF;
-    @include flexCenter;
+    @include flexTwoCenter;
-    justify-content: center;
     img{
       @include widHeiMar(9px,8px,4px);
     }
     .addTxt{
       @include fontWeightSize(bolder,11px);
-      opacity: .7;
+      @include colorOpa(#FFFFFF,0.7);
-      color: #FFFFFF;
     }
   }
-
 }
 .carItem{
-//position: relative;
-//  z-index: 11;
   @include wh(100%,86px);
   background: #FFFFFF;
   box-shadow: 0px 2px 10px 0px rgba(216,216,216,0.5);
-  border-radius: 6px;
+  @include radiusSizing(6px);
-  box-sizing: border-box;
   padding: 11px 13px 11px 15px;
   margin-bottom: 10px;
   @include flexBetween;
   .carCode{
-    display: flex;
+    @include flexColBet;
-    justify-content: space-between;
     .codeLeft{
       @include fontWeightSize(bold,14px)
     }
@@ -173,13 +177,9 @@ export default {
       display: flex;
       button{
         border: none;
-        //width: 48px;
-        //@include all-height(20px);
         padding: 4px  8px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
         border-radius: 3px;
+        @include flexTwoCenter;
         @include fontWeightSize(bold,12px)
       }
       .del{
@@ -187,9 +187,8 @@ export default {
         background-color: #FFFFFF;
       }
       .revise{
-        color: #FFFFFF;
+        @include bgFontColor( #FFFFFF,#354D93);
         margin-left: 15px;
-        background: #354D93;
       }
     }
   }

src/views/index/workOrderDetail.vue

@@ -15,18 +15,17 @@
         </div>
         <div class="rightContent">
           <div class="rightItem" style="display: flex;align-items: center;">
-            <span id="copyText">{{orderCode}}</span>
+            <span id="copyText">{{orderDetailInfo.orderCode}}</span>
             <img @click="copyText" src="@/assets/copy.png" style="width: 35px;height: 15px;margin-left: 10px"/>
           </div>
           <div class="rightItem">{{ orderDetailInfo.contractName }}</div>
-          <div class="rightItem">{{ orderDetailInfo.contractSettleType.label }}</div>
+          <div class="rightItem">{{ orderDetailInfo.contractSettleType?.label }}</div>
           <div class="rightItem">{{ orderDetailInfo.userName }}</div>
           <div class="rightItem">{{ orderDetailInfo.userPhone }}</div>
           <div class="rightItem">{{ orderDetailInfo.plateNumber }}</div>
-          <div class="rightItem"  style="line-height: 17px;width: 220px;align-items: baseline">
+<!--          <div class="rightItem" >理想智动LXA6500SHEVM理想智动LXA6500SHEVM</div>-->
-            <span >{{orderDetailInfo.model}}  </span>
+          <div class="rightItem" >{{orderDetailInfo.model}}{{ orderDetailInfo.brand }}</div>
-            <span>{{ orderDetailInfo.brand }}</span>
+
-             </div>
         </div>
       </div>
     </div>
@@ -38,7 +37,7 @@
           <span class="leftTitle fontColor">服务类型:</span><span class="rightContent">{{ orderDetailInfo.taskServiceName }}</span>
         </div>
         <div class="item">
-          <span class="leftTitle fontColor">车辆位于:</span><span class="rightContent">{{ orderDetailInfo.positionEnvironment.label }}</span>
+          <span class="leftTitle fontColor">车辆位于:</span><span class="rightContent">{{ orderDetailInfo.positionEnvironment?.label }}</span>
         </div>
         <div class="item"  style="align-items: baseline">
           <span class="leftTitle fontColor">事发地:</span><span class="rightContent" style="flex: 1">{{ orderDetailInfo.vehiclePointAddress }}</span>
@@ -47,10 +46,10 @@
           <span class="leftTitle fontColor">事发地补充:</span><span class="rightContent vehicleRemark" >{{orderDetailInfo.vehiclePointRemark}}
       </span>
         </div>
-        <div class="item"  style="align-items: baseline">
+        <div v-show="orderDetailInfo.taskFlowId === 2" class="item"  style="align-items: baseline" >
           <span class="leftTitle fontColor">目的地:</span><span class="rightContent" style="flex: 1">{{ orderDetailInfo.destinationAddress }}</span>
         </div>
-        <div class="item"  style="align-items: baseline">
+        <div v-show="orderDetailInfo.taskFlowId === 2" class="item"  style="align-items: baseline">
           <span class="leftTitle fontColor">目的地补充:</span><span class="rightContent vehicleRemark">{{orderDetailInfo.destinationRemark}}</span>
         </div>
         <div class="item">
@@ -60,16 +59,44 @@
           <span class="leftTitle fontColor">服务车辆:</span><span class="rightContent">{{ orderDetailInfo.taskVehicleName }}</span>
         </div>
         <div class="item">
-          <span class="leftTitle fontColor">服务师傅:</span><span class="rightContent">{{ orderDetailInfo.driverName }} {{orderDetailInfo.drivePhone ? '/' : ''}} {{orderDetailInfo.drivePhone }}</span>
+          <span class="leftTitle fontColor">服务师傅:</span><span class="rightContent">{{ orderDetailInfo.driverName }} {{orderDetailInfo.drivePhone ? '/' : ''}} {{orderDetailInfo.drivePhone }}
+           <span v-if="queryType == 5" class="driverPoiBtn" @click="noMultipleClicks(showMap)">查看司机位置</span>
+          </span>
+        </div>
+        <div class="item" v-if="queryType == 9 || queryType ==11  || queryType ==12">
+          <span class="leftTitle fontColor">工单照片:</span><span class="rightContent">
+           <span  class="driverPoiBtn" @click="checkPhoto">查看照片</span>
+          </span>
         </div>
       </div>
     </div>
+    <div class="serviceInfo common" v-if="orderDetailInfo.batteryNo">
+      <div class="title">电瓶信息:</div>
+      <div class="line"></div>
+      <div class="infoContent">
+        <div class="item">
+          <span class="leftTitle fontColor">设备号:</span><span class="rightContent">{{orderDetailInfo?.batteryNo}}</span>
+        </div>
+        <div class="item">
+          <span class="leftTitle fontColor">品牌:</span><span class="rightContent">{{orderDetailInfo?.batteryBrand}}</span>
+        </div>
+        <div class="item">
+          <span class="leftTitle fontColor">型号:</span><span class="rightContent">{{orderDetailInfo?.batteryModel}}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="map" v-show="showPopup"   id="container">
+      <img @click="showPopup = false"  src="@/assets/delKey.png" class="mapImg">
+    </div>
   </div>
 </template>
-
 <script>
 import {myMixins} from '@/utils/myMixins'
-import {getOrderDetail} from "@/api/order"
+import {getOrderDetail,showVehiclePositionInfo} from "@/api/order"
+import minePosition from '@/assets/minePosition.png';
+import vehiclePosition from '@/assets/vehiclePosition.png';
+import  desitationPosition from '@/assets/desitationPosition.png'
 export default {
   name: "workOrderDetail",
   mixins:[myMixins],
@@ -79,7 +106,11 @@ export default {
       queryType:'',
       orderCode:'',
       taskOrderId:'',
-      orderDetailInfo:{}
+      orderDetailInfo:{},
+      showPopup: false,
+      map: '',
+      driverPoiInfo:{},
+      noClick:true,
     }
   },
   async mounted() {
@@ -91,6 +122,13 @@ export default {
     this.orderCode=urlParams.get('orderCode');
     this.taskOrderId=urlParams.get('taskOrderId') ? urlParams.get('taskOrderId') : '';
     await this.getDetail();
+    if(this.queryType == 5){
+      await this.getDriverPoi();
+    }
+    this.$nextTick(() => {
+      this.initMap();
+    });
+
   },
   methods:{
     async getDetail(){
@@ -101,8 +139,83 @@ export default {
         taskOrderId:this.taskOrderId ? this.taskOrderId : ''
       })
       // if(result.code === 200){
-        this.orderDetailInfo=result;
+        this.orderDetailInfo=result.data;
       // }
+    },
+    showMap() {
+      this.showPopup = true;
+      this.mapMarkers();
+    },
+    checkPhoto(){
+      let isAllowImage = this.queryType == 9 ? 0 : 1
+      let data = {
+        "action": "orderPhoto",
+        "params": {
+          "userOrderId": this.userOrderId,
+          "orderCode": this.orderCode,
+          "taskOrderId": this.taskOrderId,
+          "isAllowImage":isAllowImage,
+        }
+      }
+      var u = navigator.userAgent;
+      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+      if(isiOS){
+        window.webkit.messageHandlers.nativeObject.postMessage(data);
+      }else {
+        window.android.sendMessage("orderPhoto,"+this.userOrderId+","+this.orderCode+","+this.taskOrderId+","+isAllowImage);
+      }
+    },
+    initMap() {
+      this.map = new AMap.Map('container',{
+        zoom:14,//级别(缩放比例 3-20 )
+        center: [this.driverPoiInfo.vehiclePositionLongtitude,this.driverPoiInfo.vehiclePositionLatitude],//中心点坐标
+        viewMode:'2D',//使用3D视图
+      })
+      this.map.on('complete', () => {
+        console.log("地图加载完成")
+        this.mapMarkers();
+      });
+    },
+    mapMarkers(){
+      // 车辆位置，a点
+      let marker = new AMap.Marker({
+        position: [this.driverPoiInfo?.vehiclePositionLongtitude,this.driverPoiInfo?.vehiclePositionLatitude],
+        icon: new AMap.Icon({
+          image: minePosition, // 图片的相对路径
+          size: new AMap.Size(22, 32),  // 图标的尺寸
+          imageSize: new AMap.Size(22, 32)  // 图片的实际尺寸
+        }),
+      });
+      this.map.add(marker);
+      // 事发地，b点
+      let marker1 = new AMap.Marker({
+        position: [this.driverPoiInfo?.vehiclePointLongitude,this.driverPoiInfo?.vehiclePointLatitude],
+        icon: new AMap.Icon({
+          image: vehiclePosition, // 图片的相对路径
+          size: new AMap.Size(26, 28),  // 图标的尺寸
+          imageSize: new AMap.Size(26, 28)  // 图片的实际尺寸
+        })
+      });
+      this.map.add(marker1);
+      let marker2 = new AMap.Marker({
+        position: [this.driverPoiInfo?.destinationLongitude,this.driverPoiInfo?.destinationLatitude],
+        icon: new AMap.Icon({
+          image: desitationPosition, // 图片的相对路径
+          size: new AMap.Size(28, 28),  // 图标的尺寸
+          imageSize: new AMap.Size(28, 28)  // 图片的实际尺寸
+        })
+      });
+      this.map.add(marker2);
+      this.map.setFitView([marker,marker1,marker2])
+    },
+    async getDriverPoi(){
+      let res=await showVehiclePositionInfo({
+        userOrderId:this.userOrderId,
+        taskOrderId:this.taskOrderId
+      })
+      // 2704382，24145
+      this.driverPoiInfo = res.data
+      console.log("driverPoiInfo",this.driverPoiInfo)
     }
   }
 }
@@ -111,23 +224,46 @@ export default {
 <style scoped lang="scss">
 @import "@/styles/mixin.scss";
 .wrap{
-  width: 100%;
+  @include wh(100%,100%);
-  height: 100%;
   background-color: #F4F5F7;
+  overflow-y: auto;
 }
+::v-deep .amap-copyright{
+  display: none !important;
+}
+::v-deep .amap-logo{
+  display: none !important;
+}
+.map{
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  @include wh(95%,350px);
+  .mapImg{
+    background-color: #FFFFFF;
+    position: absolute;
+    right: 0;
+    top: 0;
+    @include wh(25px,25px);
+    z-index: 1111111;
+  }
+}
+
 .common{
   background: #FFFFFF;
-  border-radius: 6px;
+  @include radiusSizing(6px);
-  box-sizing: border-box;
   padding: 11px 17px 15px 24px;
 }
 .fontColor{
   @include fontWeightSize(400,12px);
   color: #000000;
-  line-height: 27px;
+  line-height: 24px;
 }
 .baseInfo{
-  @include wh(100%,250px);
+  @include wh(100%,260px);
   margin-bottom: 12px;
   .infoWrap{
     display: flex;
@@ -138,16 +274,17 @@ export default {
       opacity: .5;
     }
     .rightContent{
-      @include wh(90px,189px);
+      height: 189px;
+      width: calc(100% - 60px);
     }
   }
 }
 .serviceInfo{
-  @include wh(100%,356px);
+  //@include wh(100%,356px);
+  width: 100%;
+  margin-bottom: 30px;
   .item{
-    display: flex;
+    @include flexCenter;
-    align-items: center;
-    line-height: 27px;
   }
   .infoContent{
     .leftTitle{
@@ -158,12 +295,21 @@ export default {
     .rightContent{
       width: calc(100% - 90px);
       @include fontWeightSize(bold,12px);
+      .driverPoiBtn{
+        display: inline-block;
+        padding: 3px 8px;
+        @include bgFontColor(#FFFFFF,#354D93);
+        opacity: .7;
+        border-radius: 3px;
+        text-align: center;
+        margin-left: 6px;
+        cursor: pointer;
+      }
     }
 
     .vehicleRemark{
       @include fontWeightSize(400,11px);
-      opacity: 0.55;
+      @include colorOpa(#121212,0.55);
-      color: #121212;
       line-height: 14px;
       flex: 1;
     }
@@ -174,9 +320,8 @@ export default {
 }
 .title{
   @include fontWeightSize(bold,14px);
-  color: #323643;
+  @include colorOpa(#323643,0.6);
   line-height: 20px;
-  opacity: .6;
 }
 .line{
   @include wh(100%,2px);

src/views/invoice/invoiceIndex.vue

@@ -0,0 +1,13 @@
+<template>
+<div class="wrap">票务首页</div>
+</template>
+
+<script>
+export default {
+  name: "invoiceIndex"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/kpi/components/circleChar.vue

@@ -0,0 +1,113 @@
+<template>
+<div class="wrap">
+  <div  id="supplierScore" ref="supplierScore" class="chart" @click="handle"></div>
+</div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: "circleChar",
+  props:['data','bgColor','titleText','isStore'],
+  data(){
+    return{
+    }
+  },
+  mounted() {
+  /*  if(this.data){
+      this.drawHandle();
+    }*/
+    setTimeout(()=>{
+      this.drawHandle();
+    },500)
+
+  },
+  methods:{
+    initCircle(){
+      // setTimeout(()=>{
+        this.drawHandle();
+      // },500)
+    },
+    handle(){
+      if(this.titleText == '投诉率'){
+        this.$emit('clickComplain')
+      }else if(this.titleText == '使用率'){
+        this.$emit('clickUse')
+      }
+    },
+    // 绘制 总分图表
+    drawHandle() {
+      let supplierScoreChart = echarts.init(this.$refs.supplierScore)
+      let option;
+      let arrow=(this.titleText == '投诉率' || this.titleText == '使用率') ? '>' : ''
+      const gaugeData = [
+        {
+          value: this.data,
+          name: this.isStore ? '' : this.titleText+arrow,
+          title: {
+            offsetCenter: ['0%', '20%']
+          },
+          detail: {
+            valueAnimation: true,
+            offsetCenter: ['0%', this.isStore ? '10%' : '-25%']
+
+          }
+        }
+      ];
+      option = {
+        series: [
+          {
+            type: 'gauge',
+            startAngle: 90,
+            endAngle: -270,
+            pointer: {
+              show: false
+            },
+            progress: {
+              show: true,
+              // width:6,
+              itemStyle:{
+                color:this.bgColor
+              }
+            },
+           /* axisLine: {
+              lineStyle: {
+                width:12,
+              }
+            },*/
+            splitLine: { show: false},
+            axisTick: { show: false},
+            axisLabel: {show: false},
+            data: gaugeData,
+            title: {
+              fontSize: 11,
+              color:'rgba(4, 4, 21,0.45)'
+            },
+            detail: {
+              color:this.isStore ? this.bgColor : '#040415',
+              fontSize: this.isStore ? 43 :19,
+              formatter: this.isStore ? '{value}' : '{value}%'
+            }
+          }
+        ]
+      };
+      // 绘制图表
+      option && supplierScoreChart.setOption(option, true);
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+.wrap{
+  @include flexCenter;
+}
+.img{
+  @include whMarLe(12px,10px,4px);
+}
+.chart{
+  width: 100%;
+  height: 125px;
+}
+</style>

src/views/kpi/components/noFit-table.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="wrap">
+    <el-table :data="tableData"
+              stripe
+              border
+              style="width: 100%"
+              height="100%"
+              v-loading="loading"
+              :cell-style="setTableCellStyle"
+              class="custom-table">
+      <template v-if="active===1">
+        <el-table-column v-for="item in labelList" :key="item.prop" :label="item.label" :prop="item.prop" align="center">
+          <template slot-scope="scope">{{scope.row[item.prop]}}  </template>
+        </el-table-column>
+      </template>
+      <template v-else-if="active===3">
+        <el-table-column v-for="(column,index) in filteredLabelList" :key="column.prop" :prop="column.prop" :label="column.label"
+                         :fixed="index===0" align="center"  min-width="100"
+                         :width="(isMobile && (column.label=='案件编号' || column.label=='服务内容')) ? 70 : 'auto'">
+          <template slot-scope="scope">
+            <span v-if="column.label === '师傅姓名'">
+              {{ scope.row[column.prop] }}
+              <span style=" color: #FFBA00;" v-if="scope.row.starRank"><i class="el-icon-star-on star"></i>{{scope.row.starRank}}</span>
+            </span>
+            <span v-else>{{ scope.row[column.prop] }}</span>
+          </template>
+        </el-table-column>
+      </template>
+      <template v-else>
+        <el-table-column v-for="column in labelList" :key="column.prop" :prop="column.prop" :label="column.label"
+                         align="center"  min-width="100" :width="(isMobile && (column.label=='案件编号' || column.label=='服务内容')) ? 70 : 'auto'">
+        </el-table-column>
+      </template>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "noFit-table",
+  props: ['tableData', 'labelList', 'loading', 'isMobile','active'],
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  computed: {
+    filteredLabelList() {
+      if(this.active!==3){
+        return
+      }
+      return this.labelList.filter(column => column.label !== '星级评分');
+    }
+  },
+  methods: {
+    setTableCellStyle({ row, column,columnIndex }) {
+      // 月总表格被转置，原始方法失效，重新定义对比
+      if(this.active===1){
+        if(row.month == '3′接单率(%)'){
+          if(columnIndex){
+            let res=row[column.property]
+            const rate = parseFloat(res && res.replace('%', ''));
+            if(rate < 95){
+              return {backgroundColor: '#F1B289'}
+            }
+          }
+        }
+        if(row.month == '接单时效(分)'){
+          if(columnIndex){
+            let res=row[column.property]
+            if(res > 5){
+              return {backgroundColor: '#F1B289'}
+            }
+          }
+        }
+        if(row.month == '到达时效(分)'){
+          if(columnIndex){
+            let res=row[column.property]
+            if(res > 40){
+              return {backgroundColor: '#F1B289'}
+            }
+          }
+        }
+        if(row.month == '总聚合成功率(%)'){
+          if(columnIndex){
+            let res=row[column.property]
+            const rate = parseFloat(res && res.replace('%', ''));
+            if(rate < 80){
+              return {backgroundColor: '#F1B289'}
+            }
+          }
+        }
+        if(row.month == '使用率(%)'){
+          if(columnIndex){
+            let res=row[column.property]
+            const rate = parseFloat(res && res.replace('%', ''));
+            if(rate < 95){
+              return {backgroundColor: '#F1B289'}
+            }
+          }
+        }
+        if(row.month == '投诉率(%)'){
+          if(columnIndex){
+            let res=row[column.property]
+            const rate = parseFloat(res && res.replace('%', ''));
+            if(rate > 0.1){
+              return {backgroundColor: '#F1B289'}
+            }
+          }
+        }
+      }
+      // 接单率
+      if(column.property=='threeMinutesReceivingRate'){
+        if(columnIndex){
+          const rate = parseFloat(row.threeMinutesReceivingRate && row.threeMinutesReceivingRate.replace('%', ''));
+          if(rate < 95){
+            return {backgroundColor: '#F1B289'}
+          }
+        }
+      }
+      //师傅接单时效》5
+      if(column.property=='receiving'){
+        if(columnIndex){
+          if(row.receiving > 5){
+            return {backgroundColor: '#F1B289'}
+          }
+        }
+      }
+      //到达时效》40
+      if(column.property=='arriving'){
+        if(columnIndex){
+          if(row.arriving > 40){
+            return {backgroundColor: '#F1B289'}
+          }
+        }
+      }
+      //聚合成功率《80
+      if(column.property=='polymerizationSuccessRate'){
+        if(columnIndex){
+          const rate = parseFloat(row.polymerizationSuccessRate && row.polymerizationSuccessRate.replace('%', ''));
+          if(rate < 80){
+            return {backgroundColor: '#F1B289'}
+          }
+        }
+      }
+      //app使用率《95
+      if(column.property=='appRate'){
+        if(columnIndex){
+          const rate = parseFloat(row.appRate && row.appRate.replace('%', ''));
+          if(rate < 95){
+            return {backgroundColor: '#F1B289'}
+          }
+        }
+      }
+      //催促率》3
+      if(column.property=='urgeRate'){
+        if(columnIndex){
+          const rate = parseFloat(row.urgeRate && row.urgeRate.replace('%', ''));
+          if(rate > 3){
+            return {backgroundColor: '#F1B289'}
+          }
+        }
+      }
+      //投诉率》0.1
+      if(column.property=='complainOrderRate'){
+        if(columnIndex){
+          const rate = parseFloat(row.complainOrderRate.replace('%', ''));
+          if(rate > 0.1){
+            return {backgroundColor: '#F1B289'}
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+::v-deep .el-table{
+  font-size: 11px;
+}
+::v-deep .el-table thead{
+  color: #1D2129;
+  font-weight: bold;
+}
+::v-deep .el-table th.el-table__cell.is-leaf {
+  background-color: #E5E6EB;
+}
+::v-deep .el-table .el-table__cell{
+  padding: 4px 0 !important;
+}
+</style>

src/views/newcomerTraining/driverTrainingList.vue

@@ -0,0 +1,308 @@
+<template>
+  <div class="wrap" :style="{ 'overflow-y': showPoup ? 'hidden' : 'auto' }">
+    <div class="navBar">
+      <van-nav-bar title="师傅培训"  :border="false" :fixed="true" :safe-area-inset-top="true">
+        <template slot="left" v-if="isFinished">
+         <van-icon  name="checked" color="#37ec37" size="20"/>
+        </template>
+      </van-nav-bar>
+    </div>
+    <div class="contentWrap" v-show="!showEmpty">
+      <van-pull-refresh v-model="isLoading" @refresh="onRefresh"  style="min-height:85vh">
+        <div class="itemWrap" v-for="(item,index) in  pageList" :key="index" @click="goH5Detail(item,'培训文档')">
+          <div class="info flexBetween common">
+            <div class="title">{{ item.name }}</div>
+<!--            <div class="time">{{ item.pushTime }}</div>-->
+          </div>
+          <div class="imgWrap"><img :src="item.themePicture"></div>
+          <div class="num common">{{ item.synopsis }}</div>
+          <div  class="info flexBetween common">
+            <div class="time">{{ item.pushTime		 }}</div>
+            <template v-if="item.alreadyRead === 1">
+              <div class="status"  style="color: #cccccc">已处理</div>
+            </template>
+            <template v-else>
+              <div class="status" >未处理</div>
+            </template>
+          </div>
+        </div>
+      </van-pull-refresh>
+    </div>
+    <div class="empty" v-show="showEmpty">
+      <img src="@/assets/empty.png" />
+    </div>
+    <div  class="poupCommon" v-if="showPoup">
+      <div class="container showPoupContainer">
+        <div class="con">
+          <div class="title">培训提醒</div>
+          <div class="content">欢迎使用中道司机APP。请您先完成培训，阅读文章，并问答相应问题。完成后即可正常使用APP。祝您使用愉快!</div>
+          <div class="line"></div>
+          <div class="btnWrap">
+            <div class="nextBtn" @click="showPoup = false">确定</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div  class="poupCommon" v-if="isFinished">
+      <div class="container finishContainer">
+        <div class="con">
+          <div class="title">提示</div>
+          <div class="content">恭喜您，您已经全部完成培训！现在您可以正常使用我们的app，请前往体验。</div>
+          <div class="line"></div>
+          <div class="btnWrap">
+            <div class="nextBtn" @click="goApp">前往</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {myMixins} from "@/utils/myMixins"
+import {driverTrainList} from  "@/api/mine"
+export default {
+  name: "driverTrainingList",
+  computed: {
+  },
+  mixins:[myMixins],
+  data(){
+    return{
+      pageList:[],
+      show:false,
+      showEmpty:false,
+      isLoading:false,
+      showPoup:true,//进入弹框
+      isFinished:false,
+      driverId:'',
+    }
+  },
+  mounted() {
+    const urlParams = new URLSearchParams(window.location.search);
+    this.driverId = urlParams.get('driverId');
+    this.getList();
+    document.addEventListener('visibilitychange', async (  ) => {
+      let state = document.visibilityState
+      if (state == 'hidden') {  // 用户离开了
+      }
+      if (state == 'visible') {
+        this.getList();
+      }
+    });
+  },
+  methods:{
+    onRefresh() {
+      this.getList()
+      setTimeout(() => {
+        this.$toast('刷新成功');
+        this.isLoading = false;
+      }, 1000);
+    },
+
+    async getList(){
+      let res= await driverTrainList({
+        driverId:this.driverId,//79639
+      })
+      this.pageList=res.data?.list;
+      if(res.data.assessState == 0){
+        this.isFinished=false
+      }else {
+        this.isFinished=true //是否完成
+      }
+      if(this.pageList?.length === 0){
+        this.showEmpty  = true
+      }else {
+        this.showEmpty = false
+      }
+    },
+    goApp(){
+      let data = {"action":"goBack","params":""}
+      var u = navigator.userAgent;
+      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+      if(isiOS){
+        window.webkit.messageHandlers.nativeObject.postMessage(data);
+      }else {
+        window.android.sendMessage("goBack");
+      }
+    },
+  }
+}
+</script>
+<style scoped lang="scss">
+@import "@/styles/common.scss";
+@import "@/styles/mixin.scss";
+@import "@/styles/docment.scss";
+@import "@/styles/driverDocment.scss";
+.contentWrap{
+  height: calc(100% - 50px) !important;
+}
+.status{
+  color: red;
+  font-size: 14px;
+  margin-right: 8px;
+  text-align: right
+}
+.wrap{
+  position: relative;
+  overflow-y: hidden;
+}
+.poupCommon{
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,.7);
+    position: absolute;
+    top: 0;
+    left: 0;
+    .showPoupContainer{
+      height: 310px;
+      background-size: 320px 310px;
+      .content{
+        margin-bottom: 20px;
+      }
+      .btnWrap{
+        margin-top: 6px;
+      }
+    }
+    .finishContainer{
+      height: 260px;
+      background-size: 320px 260px;
+      .con{
+        top: 80px !important;
+      }
+    }
+    .container{
+      width: 320px;
+      background-image: url("@/assets/trainBg.png");
+      background-repeat: no-repeat;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+      .con{
+        position: absolute;
+        top: 100px;
+        left: 20px;
+      }
+
+    }
+    .title{
+      font-weight: bold;
+      font-size: 19px;
+      color: #3364B7;
+      line-height: 26px;
+      width: 70%;
+      margin-left: 35px;
+      text-align: center;
+    }
+    .content{
+      width: 70%;
+      height: 92px;
+      font-size: 14px;
+      color: #4C5361;
+      line-height: 23px;
+      text-align: justify;
+      margin-top: 8px;
+      margin-left: 35px;
+    }
+    .line{
+      width: 285px;
+      height: 1px;
+      border-bottom: 1px solid #F1F2F5;
+    }
+    .btnWrap{
+      width: 92%;
+      font-weight: bold;
+      font-size: 13px;
+      display: flex;
+      justify-content: space-around;
+      height: 40px;
+      line-height: 40px;
+      .closeBtn{
+        color: #999B9F;
+      }
+      .line{
+        width: 1px;
+        height: 48px;
+        border-right: 1px solid #F1F2F5;
+      }
+      .nextBtn{
+        color: #3364B7;
+      }
+    }
+}
+//.poupWrap{
+//  width: 100%;
+//  height: 100%;
+//  background-color: rgba(0,0,0,.7);
+//  position: absolute;
+//  top: 0;
+//  left: 0;
+//  .container{
+//    width: 320px;
+//    height: 310px;
+//    background-image: url("@/assets/trainBg.png");
+//    background-size: 320px 310px;
+//    background-repeat: no-repeat;
+//    position: absolute;
+//    top: 0;
+//    bottom: 0;
+//    left: 0;
+//    right: 0;
+//    margin: auto;
+//    .con{
+//      position: absolute;
+//      top: 100px;
+//      left: 20px;
+//    }
+//
+//  }
+//  .title{
+//    font-weight: bold;
+//    font-size: 19px;
+//    color: #3364B7;
+//    line-height: 26px;
+//    width: 70%;
+//    margin-left: 35px;
+//    text-align: center;
+//  }
+//  .content{
+//    width: 70%;
+//    height: 92px;
+//    font-size: 14px;
+//    color: #4C5361;
+//    line-height: 23px;
+//    text-align: justify;
+//    margin-top: 8px;
+//    margin-bottom: 20px;
+//    margin-left: 35px;
+//  }
+//  .line{
+//    width: 285px;
+//    height: 1px;
+//    border-bottom: 1px solid #F1F2F5;
+//  }
+//  .btnWrap{
+//    width: 92%;
+//    font-weight: bold;
+//    font-size: 13px;
+//    display: flex;
+//    justify-content: space-around;
+//    margin-top: 6px;
+//    height: 40px;
+//    line-height: 40px;
+//    .closeBtn{
+//      color: #999B9F;
+//    }
+//    .line{
+//      width: 1px;
+//      height: 48px;
+//      border-right: 1px solid #F1F2F5;
+//    }
+//    .nextBtn{
+//      color: #3364B7;
+//    }
+//  }
+//}
+</style>

src/views/newcomerTraining/newTrainingList.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="wrap" :style="{ 'overflow-y': showPoup ? 'hidden' : 'auto' }">
+    <div class="navBar">
+      <van-nav-bar title="培训"  :border="false" :fixed="true" :safe-area-inset-top="true">
+        <template slot="left" v-if="isFinished">
+         <van-icon  name="checked" color="#37ec37" size="20"/>
+        </template>
+      </van-nav-bar>
+    </div>
+    <div class="contentWrap" v-show="!showEmpty">
+      <van-pull-refresh v-model="isLoading" @refresh="onRefresh"  style="min-height:85vh">
+        <div class="itemWrap" v-for="(item,index) in  pageList" :key="index" @click="goH5Detail(item,'培训文档')">
+          <div class="info flexBetween common">
+            <div class="title">{{ item.name }}</div>
+<!--            <div class="time">{{ item.updateTime }}</div>-->
+          </div>
+          <div class="imgWrap"><img :src="item.themePicture"></div>
+          <div class="num common">{{ item.synopsis }}</div>
+          <div  class="info flexBetween common" >
+            <div class="time">{{ item.pushTime		 }}</div>
+            <span style="color: red;font-size: 14px;margin-right: 8px" :class="item.alreadyRead===1 ? 'alRead' : ''">{{ item.alreadyRead===1 ? '已处理' :  '未处理' }}</span>
+          </div>
+<!--          <template v-if="item.alreadyRead === 1">
+            <div class="status"  style="color: #cccccc">已处理</div>
+          </template>
+          <template v-else>
+            <div class="status" >未处理</div>
+          </template>-->
+        </div>
+      </van-pull-refresh>
+    </div>
+    <div class="empty" v-show="showEmpty">
+      <img src="@/assets/empty.png" />
+    </div>
+    <div  class="poupCommon" v-if="showPoup">
+      <div class="container showPoupContainer">
+        <div class="con">
+          <div class="title">培训提醒</div>
+          <div class="content">欢迎使用中道供应商APP。请您先完成培训，阅读文章，并问答相应问题。完成后即可正常使用APP。祝您使用愉快!</div>
+          <div class="line"></div>
+          <div class="btnWrap">
+            <div class="nextBtn" @click="showPoup = false">确定</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div  class="poupCommon" v-if="isFinished">
+      <div class="container finishContainer">
+        <div class="con">
+          <div class="title">提示</div>
+          <div class="content">恭喜您，您已经全部完成培训！现在您可以正常使用我们的app，请前往体验。</div>
+          <div class="line"></div>
+          <div class="btnWrap">
+            <div class="nextBtn" @click="goApp">前往</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {myMixins} from "@/utils/myMixins"
+import {pageList} from  "@/api/mine"
+export default {
+  name: "newTrainingList",
+  computed: {
+  },
+  mixins:[myMixins],
+  data(){
+    return{
+      pageNum:1,
+      pageSize:10,
+      pageList:[],
+      keyword:'',
+      show:false,
+      showEmpty:false,
+      isLoading:false,
+      showPoup:true,//进入弹框
+      isFinished:false,
+    }
+  },
+  mounted() {
+    // this.onRefresh();
+    this.getList();
+
+    document.addEventListener('visibilitychange', async (  ) => {
+      let state = document.visibilityState
+      if (state == 'hidden') {  // 用户离开了
+        // console.log('用户离开了')
+      }
+      if (state == 'visible') {
+        // console.log('用户回来了')
+        this.getList();
+        //调用接口,获取订单状态
+      }
+    });
+  },
+  created() {
+    console.log("createdcreatedcreated")
+    // this.getList();
+    // 每次回答完问题之后返回需重新加结果
+
+  },
+  async activated() {
+    await this.getList()
+  },
+  methods:{
+    onRefresh() {
+      this.getList()
+      setTimeout(() => {
+        this.$toast('刷新成功');
+        this.isLoading = false;
+      }, 1000);
+    },
+
+    async getList(){
+      let res= await pageList({
+        pageNum:this.pageNum,
+        pageSize:this.pageSize,
+        docType:1,
+        trainingType:4,
+      })
+      this.pageList=res.data?.list || [];
+      if(res.data.assessState == 0){
+        this.isFinished=false
+      }else {
+        this.isFinished=true //是否完成
+      }
+      if(this.pageList?.length == 0){
+        this.showEmpty  = true
+      }else {
+        this.showEmpty = false
+      }
+    },
+    initShow(){
+      this.keyword= '',
+      this.getList()
+    },
+    goApp(){
+      let data = {"action":"goBack","params":""}
+      var u = navigator.userAgent;
+      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+      if(isiOS){
+        window.webkit.messageHandlers.nativeObject.postMessage(data);
+      }else {
+        window.android.sendMessage("goBack");
+      }
+    },
+  }
+}
+</script>
+<style scoped lang="scss">
+@import "@/styles/common.scss";
+@import "@/styles/mixin.scss";
+@import "@/styles/docment.scss";
+.contentWrap{
+  height: calc(100% - 50px) !important;
+}
+
+.status{
+  color: red;
+  font-size: 14px;
+  margin-right: 8px;
+  text-align: right
+}
+.wrap{
+  position: relative;
+  overflow-y: hidden;
+}
+.poupCommon{
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,.7);
+    position: absolute;
+    top: 0;
+    left: 0;
+    .showPoupContainer{
+      height: 310px;
+      background-size: 320px 310px;
+      .content{
+        margin-bottom: 20px;
+      }
+      .btnWrap{
+        margin-top: 6px;
+      }
+    }
+    .finishContainer{
+      height: 260px;
+      background-size: 320px 260px;
+      .con{
+        top: 80px !important;
+      }
+    }
+    .container{
+      width: 320px;
+      background-image: url("@/assets/trainBg.png");
+      background-repeat: no-repeat;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+      .con{
+        position: absolute;
+        top: 100px;
+        left: 20px;
+      }
+
+    }
+    .title{
+      font-weight: bold;
+      font-size: 19px;
+      color: #3364B7;
+      line-height: 26px;
+      width: 70%;
+      margin-left: 35px;
+      text-align: center;
+    }
+    .content{
+      width: 70%;
+      height: 92px;
+      font-size: 14px;
+      color: #4C5361;
+      line-height: 23px;
+      text-align: justify;
+      margin-top: 8px;
+      margin-left: 35px;
+    }
+    .line{
+      width: 285px;
+      height: 1px;
+      border-bottom: 1px solid #F1F2F5;
+    }
+    .btnWrap{
+      width: 92%;
+      font-weight: bold;
+      font-size: 13px;
+      display: flex;
+      justify-content: space-around;
+      height: 40px;
+      line-height: 40px;
+      .closeBtn{
+        color: #999B9F;
+      }
+      .line{
+        width: 1px;
+        height: 48px;
+        border-right: 1px solid #F1F2F5;
+      }
+      .nextBtn{
+        color: #3364B7;
+      }
+    }
+}
+.alRead{
+  color: #cccccc !important;
+}
+
+</style>

src/views/vehicle-maintenance/maintenance-application.vue

@@ -0,0 +1,429 @@
+<template>
+<div class="wrap">
+  <div class="navBar">
+    <van-nav-bar
+        title="车辆维保"
+        left-arrow
+        left-arrow-color="#FFFFFF"
+        :border="false"
+        :fixed="true"
+        :safe-area-inset-top="true"
+        @click-left="goPrePage"
+    />
+  </div>
+  <div class="flowWrap">
+    <div class="detailInfo">
+      <div class="line1">
+        <div class="leftTitle commonTitle">{{ rowInfo.stage }}:</div>
+        <div class="right">
+          <img class="commonImg" :src="getStatus(detailInfo.states)">
+          <div :class="getStatusColor(detailInfo.states)" >{{detailInfo.statesStr}}</div>
+        </div>
+      </div>
+      <div class="line"></div>
+      <div ><span class="opa">车辆名称:</span><span>{{ detailInfo.vehicleName }}</span></div>
+      <div><span class="opa">车牌号:</span><span>{{ detailInfo.plateNumber }}</span></div>
+<!--      审批中，通过，终止detailInfo.states ==1 || detailInfo.states ==2 ||detailInfo.states ==3-->
+      <div class="shopName" v-if="[1,2,3].includes(detailInfo.states)"><span class="opa" >门店信息:</span><span class="textarea">{{detailInfo.repairPoint || ''}}</span></div>
+      <div class="shopImgList" v-if="[1,2,3].includes(detailInfo.states)">
+        <template v-if="detailInfo.storePhotoUrls && detailInfo.storePhotoUrls.indexOf(',') !== -1">
+          <div v-for="(item,index) in (detailInfo.storePhotoUrls?.split(','))" :key="index">
+            <img  :src="item" @click="previewPhoto(item)">
+          </div>
+        </template>
+        <template v-else>
+          <div v-if="!detailInfo.storePhotoUrls"></div>
+          <img v-else  :src="detailInfo.storePhotoUrls" @click="previewPhoto(detailInfo.storePhotoUrls)">
+        </template>
+      </div>
+<!--      不通过-->
+      <div v-if="noPassStatus"><span class="opa">车辆里程:</span><span>{{ parseInt(detailInfo.mileage) || '' }}km</span></div>
+      <div v-if="noPassStatus"><span class="opa">结算类型:</span><span>{{ detailInfo.paymentType?.label || '' }}</span></div>
+      <div v-if="noPassStatus && detailInfo.paymentType?.code !=2"><span class="opa">维修金额:</span><span>{{ detailInfo.amount || ''}}元</span></div>
+      <div v-if="noPassStatus && detailInfo.paymentType?.code !=2" class="shopName"><span class="opa">维保项目:</span><span class="project textarea">{{ detailInfo.information ||'' }}</span></div>
+    </div>
+<!--   不通过-->
+    <div class="detailInfo"  v-if="noPassStatus  && detailInfo.paymentType?.code !=2">
+      <div class="line1">
+        <div class="leftTitle commonTitle">维保项目照片:</div>
+      </div>
+      <div class="shopImgList">
+        <template v-if="detailInfo.maintenancePhotoUrls && detailInfo.maintenancePhotoUrls.indexOf(',') !== -1">
+          <div v-for="(item,index) in (detailInfo.maintenancePhotoUrls?.split(','))" :key="index">
+            <img  :src="item" @click="previewPhoto(item)">
+          </div>
+        </template>
+        <template v-else>
+          <div v-if="!detailInfo.maintenancePhotoUrls"></div>
+          <img v-else :src="detailInfo.maintenancePhotoUrls" @click="previewPhoto(detailInfo.maintenancePhotoUrls)">
+        </template>
+      </div>
+    </div>
+    <div class="detailInfo"  v-if="noPassStatus && detailInfo.paymentType?.code !=2">
+      <div class="line1">
+        <div class="leftTitle commonTitle">维保清单/凭证照片:</div>
+      </div>
+      <div class="shopImgList">
+        <template v-if="detailInfo.voucherPhotoUrls && detailInfo.voucherPhotoUrls.indexOf(',') !== -1">
+          <div v-for="(item,index) in (detailInfo.voucherPhotoUrls?.split(','))" :key="index">
+            <img  :src="item" @click="previewPhoto(item)">
+          </div>
+        </template>
+        <template v-else>
+          <div v-if="!detailInfo.voucherPhotoUrls"></div>
+          <img v-else :src="detailInfo.voucherPhotoUrls" @click="previewPhoto(detailInfo.voucherPhotoUrls)">
+        </template>
+      </div>
+    </div>
+    <!--  维保申请审批中，维保完成审批中,  -->
+    <div class="approvalContent" v-if="[1,4].includes(detailInfo.states)">
+      <div class="title commonTitle">审批意见：</div>
+      <textarea class="multiple" placeholder="输入意见" v-model="auditRemark"></textarea>
+    </div>
+<!--审批意见显示：   只要不是审批中状态-->
+    <div class="resultWrap" v-if="!(detailInfo.states == 1 || detailInfo.states == 4)">
+      <div class="result">
+        <div class="title commonTitle">审批意见：</div>
+        <div class="right">
+          <img class="commonImg" :src="getStatus(detailInfo.states)">
+          <div :class="getStatusColor(detailInfo.states)" >{{detailInfo.statesStr}}</div>
+        </div>
+      </div>
+      <div :class="getStatusColor(detailInfo.states)" class="time">{{ detailInfo.createTime }}  {{detailInfo.statesStr}}</div>
+<!--      完成不通过-->
+      <div class="line" v-if="detailInfo.auditRemark"></div>
+      <div class="reason" v-if="detailInfo.auditRemark">{{detailInfo.auditRemark}}</div>
+    </div>
+  </div>
+<!--  维保申请审批中，维保完成审批中-->
+  <div class="btnWrap"  v-if="detailInfo.states==1 || detailInfo.states==4">
+    <div class="noPass" @click="approvalHandle(0)">不通过</div>
+    <div class="pass" @click="approvalHandle(1)">通过</div>
+  </div>
+<!-- 维保申请通过 -->
+  <div class="btnWrap" v-if="detailInfo.states == 3">
+    <div  class="stoping pass" @click="show=true">维保终止</div>
+  </div>
+  <div class="dialogWrap" v-if="show">
+    <div class="title">维保终止 </div>
+    <div class="textWrap">
+      <textarea class="ipt" placeholder="请输入终止原因" v-model="reason"></textarea>
+    </div>
+    <div class="btnWrap">
+      <div class="noPass" @click="cancelHandle">取消</div>
+      <div class="pass" @click="handleConfirm">确定</div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import {getVehicleMaintenanceDetail,vehicleMaintenanceStop,vehicleMaintenanceApproval} from "@/api/maintenance"
+import {myMixins} from  "@/utils/myMixins"
+import { ImagePreview } from "vant";
+export default {
+  name: "maintenance-application",
+  mixins:[myMixins],
+  data() {
+    return {
+      rowInfo:'',
+      noClick:true,
+      detailInfo:'',
+      show:false,
+      auditRemark:'',
+      reason:'',
+      status:'',
+      // activeIndex:'',
+    }
+  },
+  mounted() {
+    this.rowInfo=this.$route.params.info
+    this.status=this.$route.params.status
+    this.getDetail()
+  },
+  computed: {
+     // 维保申请不通过，维保完成不通过
+     noPassStatus(){
+       return  this.detailInfo.states===5 || this.detailInfo.states===4 || this.detailInfo.states===6;
+     },
+  },
+  methods: {
+    goPrePage(){
+      this.$router.push({
+        name: 'vehicleMaintenanceList',
+        params: {
+          activeIndex:this.$route.params?.activeIndex,
+          status:this.status,
+        }
+      });
+    },
+    previewPhoto(url) {
+      let urls=[]
+      // this.auditPhotoList.forEach((item)=>{
+        urls.push(url)
+      // })
+      ImagePreview({
+        images: urls,
+        startPosition: 0,
+        closeable: true,
+      });
+
+    },
+    cancelHandle(){
+      this.show=false
+      console.log('this.show0',this.show)
+    },
+    async handleConfirm(){
+      let res=await vehicleMaintenanceStop({id:this.rowInfo.id, vehicleId:this.rowInfo.vehicleId, auditRemark:this.reason,})
+      if (res.code==200){
+        this.show=false
+        await this.getDetail();
+      }
+    },
+    async approvalHandle(approvalType){
+      let res=await vehicleMaintenanceApproval({
+        id:this.rowInfo.id,
+        vehicleId:this.rowInfo.vehicleId,
+        auditResult:approvalType,
+        auditRemark:this.auditRemark,
+      })
+      if(res.code==200){
+        await this.getDetail();
+      }
+    },
+    // 1申请审批，2申请不通过，3申请通过，4完成审批中，5完成不通过，6完成通过，9维保终止
+    getStatusColor(i){
+      switch (i){
+        case 1://
+        case 4://
+          return 'yelColor'
+        case 2://
+        case 5://
+          return 'redColor'
+        case 3://
+        case 6://
+          return 'greColor'
+        case 9://
+          return 'garyColor'
+        default:
+          return ''
+      }
+    },
+    getStatus(i){
+      switch (i){
+        case 1://
+        case 4://
+          return require('@/assets/waitSubmit.png')
+        case 2://审核通过
+        case 5://已打款
+          return require('@/assets/unpass.png')
+        case 3://
+        case 6://
+          return require('@/assets/dakuan.png')
+        case 9://报销失败
+          return require('@/assets/unSubmit.png')
+        default:
+          return ''
+      }
+    },
+    async getDetail() {
+      let res=await getVehicleMaintenanceDetail ({
+        id:this.rowInfo.id,
+        vehicleId:this.rowInfo.vehicleId,
+      })
+      if(res.code===200 && res.data){
+        this.detailInfo=res.data
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+@import "@/styles/common.scss";
+@import "@/styles/approval.scss";
+.dialogWrap{
+  position:absolute ;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  z-index: 111;
+  width: 326px;
+  box-sizing: border-box;
+  height: 180px;
+  background: #F1F5F7;
+  box-shadow: 0px 6px 21px 0px rgba(0,0,0,0.3);
+  border-radius: 6px;
+  .title{
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    background: #E3ECF1;
+    border-radius: 6px 6px 0px 0px;
+    @include fontWeightSize(16px,bold);
+    color: #262628;
+  }
+  .textWrap{
+    width: 100%;
+    box-sizing: border-box;
+    padding: 15px 25px;
+    .ipt{
+      width: 100%;
+      height: 52px;
+      box-sizing: border-box;
+      padding-left: 5px;
+      background: #ECF4F9;
+      border-radius: 3px;
+      border: 1px solid #3364B7;
+      backdrop-filter: blur(10px);
+    }
+  }
+  .btnWrap div{
+    width: 130px;
+    @include all-height(40px);
+  }
+
+}
+::v-deep .van-field__control{
+  border: 1px solid #eee8e8 !important;
+}
+.navBar{
+  margin-bottom: 46px;
+}
+.wrap{
+  background-color: #F4F5F7;
+}
+.flowWrap{
+  height: calc(100% - 120px);
+  overflow-y: auto;
+}
+.line{
+  margin: 5px 0;
+  width: 325px;
+  border-bottom: 2px solid;
+  opacity: 0.16;
+  border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
+}
+.commonTitle{
+  @include fontWeightSize(14px,bold);
+  @include colHeight( #323643,20px);
+}
+.detailInfo{
+  width: 100%;
+  background: #FFFFFF;
+  @include sizing4Padding(13px,25px,14px,24px);
+  margin-bottom: 10px;
+  .line1{
+    @include flexColBet;
+    line-height: 23px;
+    .leftTitle{
+      opacity: .66;
+    }
+    .right{
+      @include flexCenter;
+    }
+  }
+  .opa{
+    display: inline-block;
+    width: 60px;
+    @include colorOpa(#000000,.5);
+    font-size: 12px;
+    line-height: 27px;
+  }
+  .shopName{
+    width: 100%;
+    display: flex;
+    align-items: baseline;
+    .textarea{
+      width: calc(100% - 60px);
+    }
+  }
+  .project{
+    color: #E8A524;
+    //width: calc(100% -  60px);
+  }
+  .shopImgList{
+    margin-top: 6px;
+    @include flexColBet;
+    flex-wrap: wrap;
+    img{
+      background: #FAFAFA;
+      border-radius: 3px;
+      border: 1px solid #EAEAEA;
+      backdrop-filter: blur(10px);
+      @include wh(154px,93px);
+      margin-bottom: 10px;
+    }
+  }
+}
+.approvalContent{
+  background-color: #FFFFFF;
+  width: 100%;
+  @include sizing4Padding(13px,25px,24px,25px);
+  .title {
+    margin-bottom: 8px;
+  }
+  .multiple{
+    @include wh(100%,125px);
+    background: #FAFAFA;
+    border: 1px solid #E6E6E6;
+    backdrop-filter: blur(10px);
+    @include sizingPadRadius(7px,10px,3px);
+  }
+}
+.resultWrap{
+  width: 100%;
+  background: #FFFFFF;
+  @include sizing4Padding(12px,23px,16px,24px);
+  @include flexBetween;
+  .title {
+    margin-bottom: 8px;
+  }
+  .result{
+    @include flexColBet;
+  }
+  .right{
+    @include flexCenter;
+  }
+  .commonImg{
+    @include widHeiMar(13px,13px,4px);
+  }
+  .time{
+    text-align: right;
+  }
+  .reason {
+    font-size: 13px;
+    color: #FF5D2E;
+    line-height: 20px;
+  }
+}
+.btnWrap{
+  @include wh(100%, 54px);
+  @include sizingPadding(0,30px);
+  @include flexBetCen;
+  position: absolute;
+  bottom: 12px;
+  background-color: #F4F5F7;
+  div{
+    @include wh(152px, 48px);
+    line-height: 48px;
+    text-align: center;
+    border-radius: 5px;
+    @include fontWeightSize(15px,bold);
+    color: #FFFFFF;
+  }
+  .noPass{
+    background: #9EA7C0;
+  }
+  .pass{
+    background: #354D93;
+  }
+  .stoping{
+    width: 100% !important;
+  }
+}
+</style>

src/views/vehicle-maintenance/vehicle-maintenance-list.vue

@@ -0,0 +1,242 @@
+<template>
+<div class="wrap">
+  <div class="navBar">
+    <van-nav-bar
+        title="车辆维保"
+        :left-arrow="isShowBackBtn ? true : false"
+        left-arrow-color="#FFFFFF"
+        :border="false"
+        :fixed="true"
+        :safe-area-inset-top="true"
+        @click-left="goPrePage"
+    />
+  </div>
+  <div class="tab_wrap">
+    <div v-for="(item, index) in tabArr" :key="index"
+         @click="changeTab(index)">
+      <span :class="{'active' : activeIndex == index , 'alpha' :true}"> {{ item.name }}</span>
+      <span class="numTip" style="opacity: 1 !important;" v-if="index===0 && item.num">{{item.num}}</span>
+    </div>
+  </div>
+  <van-pull-refresh class="refresh" v-model="isLoading" @refresh="onRefresh" v-show="!show">
+    <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+    >
+      <div class="listWrap">
+        <div class="listItem"  @click="noMultipleClicks(goPageDetail,item)" v-for="(item,index) in pageList" :key="index">
+          <div class="line1">
+            <div class="title">{{item.stage}}</div>
+            <div class="right">
+              <img class="commonImg" :src="getStatus(item.states?.code)">
+              <div :class="getStatusColor(item.states?.code)">{{ item.states?.label }}</div>
+            </div>
+          </div>
+          <div class="driverInfo">{{ item.vehicleName }} /  {{ item.plateNumber }}</div>
+          <div class="time">{{ item.createTime }}</div>
+        </div>
+      </div>
+    </van-list>
+  </van-pull-refresh>
+  <div class="bgEmptyImg" v-show="show" >
+    <img  src="@/assets/empty.png" />
+  </div>
+</div>
+</template>
+
+<script>
+import {myMixins} from  "@/utils/myMixins"
+import {vehicleMaintenanceList,vehicleMaintenanceCount} from "@/api/maintenance"
+export default {
+  name: "vehicle-maintenance-list",
+  mixins:[myMixins],
+  data() {
+    return {
+      id:'',
+      tabArr: [ {name: '待审批', status: 2,num:0 },{name: '已审批', status: 2,num:0 },],
+      activeIndex: 0,
+      pageList:[],
+      pageNum:1,
+      pageSize:10,
+      total:'',
+      noClick:true,
+      isShowBackBtn:true,
+      inApprovalCount:0,
+      status:'',
+      isLoading:"",
+      loading: false,
+      finished: false,
+    }
+  },
+  mounted() {
+    const urlParams = new URLSearchParams(window.location.search);
+    this.status=urlParams.get('status')
+    if(this.status=='crm' || this.$route.params.status == 'crm' ){//后台进入此页面没有返回按钮
+      this.isShowBackBtn=false
+    }else{
+      this.isShowBackBtn=true
+    }
+    this.activeIndex=this.$route.params?.activeIndex || 0
+    this.getList()
+  },
+  computed:{
+    show() {
+      return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
+    },
+  },
+  methods: {
+    async onLoad(){
+      this.pageNum++;
+      await this.getList()
+      this.loading = false;
+      console.log("this.pageList.length",this.pageList.length)
+      console.log("this.total",this.total)
+
+      if (this.pageList.length >= this.total) {
+        this.finished = true;
+      }
+    },
+    goPrePage(){
+      this.$router.push({  name: 'toDoList' });
+    },
+    // 1申请审批，2申请不通过，3申请通过，4完成审批中，5完成不通过，6完成通过，9维保终止
+    getStatusColor(i){
+      switch (i){
+        case 1://
+        case 4://
+          return 'yelColor'
+        case 2://
+        case 5://
+          return 'redColor'
+        case 3://
+        case 6://
+          return 'greColor'
+        case 9://
+          return 'garyColor'
+        default:
+          return 'yelColor'
+      }
+    },
+    getStatus(i){
+      switch (i){
+        case 1://
+        case 4://
+          return require('@/assets/waitSubmit.png')
+        case 2://审核通过
+        case 5://已打款
+          return require('@/assets/unpass.png')
+        case 3://
+        case 6://
+          return require('@/assets/dakuan.png')
+        case 9://报销失败
+          return require('@/assets/unSubmit.png')
+        default:
+          return require('@/assets/waitSubmit.png')
+      }
+    },
+/*    onRefresh() {
+      vehicleMaintenanceCount();
+      // this.getList()
+      setTimeout(() => {
+        this.$toast('刷新成功');
+        this.isLoading = false;
+      }, 1000);
+    },*/
+    onRefresh() {
+      vehicleMaintenanceCount();
+      this.pageNum=1
+      // this.getList()
+      setTimeout(() => {
+        this.$toast('刷新成功');
+        this.isLoading = false;
+      }, 1000);
+    },
+    async changeTab(index) {
+      this.activeIndex = index
+      this.pageNum = 1
+      this.pageList = [];
+      this.total=0
+      await this.getList()
+    },
+    async getList() {
+      let result=await vehicleMaintenanceCount();
+      if(result.code==200 && result.data){
+        this.tabArr[0].num=result.data.inApprovalCount
+      }
+      let res=await vehicleMaintenanceList ({
+        pageNum:this.pageNum,
+        pageSize:this.pageSize,
+        queryType:this.activeIndex+1,
+      })
+      // this.pageList=res.data
+      // console.log("===",this.pageList)
+      this.total=res.total
+      if(this.pageNum == 1){// 第一页直接赋值
+        this.pageList=res.data
+      }else{// 第二页数据拼接
+        console.log("第二页数据拼接")
+        let preList = this.pageList;
+        // console.log("preList",preList)
+        let arr = res.data;
+        // console.log("arr",arr)
+        this.pageList = preList.concat(arr)
+        console.log("this.pageList====",this.pageList)
+      }
+    },
+    goPageDetail(item){
+      this.$router.push({
+        name: 'maintenanceApplication',  // 目标路由的名称
+        params: {
+          info:item,
+          activeIndex:this.activeIndex,
+          status:this.status,
+        }
+      });
+
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+@import "@/styles/common.scss";
+@import "@/styles/approval.scss";
+.wrap{
+  @include wh(100%,100%);
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+.navBar{
+  margin-bottom: 46px;
+}
+::v-deep .van-list__finished-text{
+  background-color: #F4F5F7 !important;
+  padding-bottom: 10px;
+}
+::v-deep .van-pull-refresh{
+  height: calc(100% - 86px) ;
+  overflow-y: auto;
+  background-color: #F4F5F7;
+}
+.listItem{
+  padding: 11px 28px 11px 23px;
+  div{
+    .title{
+      @include fontWeightSize(bold,14px);
+      line-height: 20px;
+      margin-bottom: 8px;
+    }
+    .right{
+      @include flexCenter();
+    }
+  }
+  .driverInfo{
+    font-size: 12px;
+    line-height: 18px;
+    margin-bottom: 5px;
+  }
+}
+</style>

src/views/workOrder/aduitCompleteDetail.vue

@@ -11,7 +11,7 @@
         @click-left="goback"
     />
   </div>
-  <div class="baseInfo common">
+  <div class="baseInfo common" style="height: 344px">
     <div class="title">基本信息:</div>
     <div class="line"></div>
     <div class="item">
@@ -43,43 +43,72 @@
       <span class="titleLeft">结算方式：</span>
       <div class="content" style="width: calc(100% - 84px);display: flex;justify-content: space-between;line-height: 27px" >
         <span>{{orderInfo.taskSettleType?.label}}</span>
-        <!--        <span>包含公里数:15</span>-->
-        <!--        <span>超出单价:6</span>-->
       </div>
     </div>
     <div class="item">
       <span class="titleLeft">扣除责任险费：</span>
-      <span class="content">{{orderInfo.policyAmount}} {{orderInfo.cutInsuranceAmount}}</span>
+      <span class="content">{{orderInfo.policyAmount}}</span>
+    </div>
+    <div class="item">
+      <span class="titleLeft">车衣费用：</span>
+      <span class="content">{{orderInfo.carClothingToolAmount}}</span>
+    </div>
+    <div class="item">
+      <span class="titleLeft">换电瓶费用：</span>
+      <span class="content">{{orderInfo.replaceBatteryAmount}}</span>
     </div>
-
   </div>
   <div class="baseInfo common">
     <div class="title">审核数据:</div>
     <div class="line"></div>
-    <div class="item">
+    <div class="item" v-show="abState">
+      <span class="titleLeft">到事发地距离：</span>
+      <span class="content">{{ orderInfo.settleMileageAb + ' km' }}</span>
+    </div>
+    <div class="item" v-show="bcState">
       <span class="titleLeft">拖车里程：</span>
-      <span class="content">{{ orderInfo.bridgeAmountBc + ' km' }}</span>
+      <span class="content">{{ orderInfo.settleMileageBc + ' km' }}</span>
     </div>
-    <div class="item">
+    <div class="item" v-show="caState">
-      <span class="titleLeft">路桥费：</span>
+      <span class="titleLeft">返程里程：</span>
-      <span class="content">{{orderInfo.bridgeAmount + ' 元' }}</span>
+      <span class="content">{{ orderInfo.settleMileageCa + ' km' }}</span>
     </div>
-    <div class="item">
+    <div class="item" v-show="bridgeAbState">
+      <span class="titleLeft">ab路桥费：</span>
+      <span class="content">{{orderInfo.bridgeAmountAb + ' 元' }}</span>
+    </div>
+    <div class="item" v-show="bridgeBcState">
+      <span class="titleLeft">bc路桥费：</span>
+      <span class="content">{{orderInfo.bridgeAmountBc + ' 元' }}</span>
+    </div>
+    <div class="item" v-show="bridgeCaState">
+      <span class="titleLeft">va路桥费：</span>
+      <span class="content">{{orderInfo.bridgeAmountCa + ' 元' }}</span>
+    </div>
+    <div class="item"  v-show="tyreAmountState">
       <span class="titleLeft">小轮费：</span>
       <span class="content" >{{ orderInfo.tyreAmount  + ' 元'}}</span>
     </div>
-    <div class="item">
+    <div class="item" v-show="dilemmaAmountState && basePriceDisabled">
       <span class="titleLeft">困境费：</span>
       <span class="content" >{{ orderInfo.dilemmaAmount  + ' 元'}}</span>
     </div>
-    <div class="item">
+    <div class="item" v-show="waitAmountState">
       <span class="titleLeft">等候费：</span>
       <span class="content" >{{ orderInfo.waitAmount  + ' 元'}}</span>
     </div>
-    <div class="item">
+    <div class="item" v-show="basementFeeState">
       <span class="titleLeft">地库费：</span>
       <span class="content" >{{ orderInfo.basementFee  + ' 元'}}</span>
     </div>
+    <div class="item">
+      <span class="titleLeft">基本费用：</span>
+      <span class="content" >{{ orderInfo.basePrice   + '元'}}</span>
+    </div>
+    <div class="item">
+      <span class="titleLeft">额外费用总计：</span>
+      <span class="content" >{{ orderInfo.extraPrice   + '元'}}</span>
+    </div>
     <div class="item">
       <span class="titleLeft">收取客户金额：</span>
       <span class="content" >{{ orderInfo.customerAmount   + '元'}}</span>
@@ -105,12 +134,42 @@ export default {
       postfix:'',
       orderInfo:{},
       index:"",
+      queryTime:'',//记录工单对账选择的时间
+      serviceType:'',
+      settleType:'',
+      taskFlowId: '',
+      appCode:'',
+      abState:false,
+      bcState:false,
+      caState:false,
+      bridgeAbState:false,
+      bridgeBcState:false,
+      bridgeCaState:false,
+      waitAmountState:false,
+      dilemmaAmountState:false,
+      tyreAmountState:false,
+      basementFeeState:false,
+      accountStatus:'',
     }
   },
+  computed:{
+    basePriceDisabled(){
+      return !(this.serviceType == '困境救援' || this.serviceType == '困境-吊车' || this.serviceType == '困境救援-事故' || this.serviceType == '困境救援-故障'
+          || (this.fixedPrice && parseFloat(this.fixedPrice) > 0 && this.fixedPriceType) || this.supplierId == 500921)
+    },
+    //保险实拖案件，剔除人保和太平事故
+    isCPICDrag(){
+      return this.settleType == '实拖' &&  !['PICC10101','PICCSHANGQI','PICC101099','SAIPCC2021',''].includes(this.appCode)
+    },
+    isBasement(){
+      return this.serviceType == '困境救援' || this.serviceType == '困境-吊车' || this.serviceType == '困境救援-事故' || this.serviceType == '困境救援-故障'
+    },
+  },
   async mounted() {
     this.id=this.$route.params?.id;
     this.postfix=this.$route.params?.postfix;
     this.index=this.$route.params?.index;
+    this.queryTime = this.$route.params?.queryTime
     await this.getDetail()
   },
   methods: {
@@ -119,16 +178,60 @@ export default {
         name:"workOrderReconciliation",
         params:{
           activeIndex:this.index,
+          queryTime:this.queryTime
         }
       })
     },
-    async getDetail() {
+    async getDetail(){
-      let res = await getAccountRecordDetail({
+      this.abState = false
-        id: this.id,
+      this.bcState = false
-        postfix: this.postfix
+      this.caState = false
+      this.bridgeAbState = false
+      this.bridgeBcState = false
+      this.bridgeCaState = false
+      this.waitAmountState = false
+      this.dilemmaAmountState = false
+      this.tyreAmountState = false
+      this.basementFeeState = false
+      this.accountStatus = ''
+      let res= await getAccountRecordDetail({
+        id:this.id,
+        postfix:this.postfix
       })
-      if (res.code === 200) {
+      if(res.code === 200){
-        this.orderInfo = res.data
+        this.orderInfo=res.data
+        this.serviceType=this.orderInfo.serviceName
+        this.taskFlowId=this.orderInfo.taskFlowId
+        this.settleType=this.orderInfo.settleType?.label
+        this.accountStatus = this.orderInfo.accountStatus?.code
+        this.appCode=this.orderInfo.appCode
+      }
+      if(this.settleType == '实拖'  && this.basePriceDisabled){
+        this.bcState = true
+
+      }else if(this.settleType == '单程' && this.basePriceDisabled){
+        this.abState = true
+        this.bcState = true
+        if(this.taskFlowId == '1'  && this.basePriceDisabled ){
+          this.bcState = false
+        }
+      }else if(this.settleType == '全程'  && this.basePriceDisabled){
+        this.abState = true
+        this.bcState = true
+        this.caState = true
+      }else if(this.settleType == '全程减半'  && this.basePriceDisabled){
+        this.abState = true
+        this.bcState = true
+        this.caState = true
+      }
+      if(this.orderInfo.refBridgeAmountAB > 0 && !this.isCPICDrag && !this.isBasement) this.bridgeAbState = true
+      if(this.orderInfo.refBridgeAmountBC > 0 && !this.isCPICDrag && !this.isBasement) this.bridgeBcState = true
+      if(this.orderInfo.refBridgeAmountCA > 0 && !this.isCPICDrag && !this.isBasement) this.bridgeCaState = true
+      if(this.orderInfo.refWaitFee > 0) this.waitAmountState = true
+      if(this.orderInfo.refDilemmaFee > 0) this.dilemmaAmountState = true
+      if(this.orderInfo.refTyreNumber > 0 && this.taskFlowId != '1') this.tyreAmountState = true
+      if(this.orderInfo.refBasementFee > 0 && this.taskFlowId != '1' ){
+        this.basementFeeState = true
       }
     },
   }
@@ -139,8 +242,7 @@ export default {
 @import "@/styles/mixin.scss";
 @import "@/styles/common.scss";
 .wrap{
-  width: 100%;
+  @include wh(100%,100%);
-  height: 100%;
   background-color: #F4F5F7;
   overflow-y: auto;
 }
@@ -149,8 +251,7 @@ export default {
 }
 .title{
   @include fontWeightSize(bold,14px);
-  color: #323643;
+  @include colorOpa(#323643,0.66);
-  opacity: 0.66;
 }
 .line{
   @include wh(100%,2px);
@@ -160,11 +261,9 @@ export default {
   border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
 }
 .item{
-  display: flex;
+  @include flexCenter;
-  align-items: center;
   font-size: 12px !important;
   font-weight: 400 !important;
-  //@include fontWeightSize(400,12px) !important;
   .titleLeft{
     opacity: .5;
     line-height: 27px;
@@ -188,8 +287,7 @@ img{
   @include wh(100%, 438px);
 
   .inpInfo {
-    display: flex;
+    @include flexColBet;
-    justify-content: space-between;
     margin: 0 5px;
     color: #323643;
     line-height: 32px;
@@ -211,16 +309,12 @@ img{
 
     .inputContent {
       text-align: right;
-      //opacity: .5;e
       .btnComputed {
         width: 48px;
-        @include all-height(18px);
         text-align: center;
-        color: #FFFFFF;
-        background: #354D93;
         border-radius: 3px;
-        //position: absolute;
+        @include all-height(18px);
-        //right: 24px;
+        @include bgFontColor(#FFFFFF,#354D93);
       }
     }
   }

src/views/workOrder/settlementDetail.vue

@@ -0,0 +1,113 @@
+<template>
+<div class="wrap">
+  <div class="navBar">
+    <van-nav-bar
+        title="结算单详情"
+        left-arrow
+        left-arrow-color="#FFFFFF"
+        :border="false"
+        :fixed="true"
+        :safe-area-inset-top="true"
+        @click-left="goback"
+    />
+  </div>
+  <div class="baseInfo">
+    <div class="itemWrap"  v-for="(item,index) in settleDetailList" :key="index">{{item.remark}}</div>
+  </div>
+
+</div>
+</template>
+
+<script>
+import {myMixins} from "@/utils/myMixins"
+
+export default {
+  name: "settlementDetail",
+  mixins:[myMixins],
+  data(){
+    return{
+      id:'',
+      postfix:'',
+      orderInfo:{},
+      index:"",
+      queryTime:'',//记录工单对账选择的时间
+      settleDetailList:[]
+    }
+  },
+  async mounted() {
+    this.id=this.$route.params?.id;
+    this.postfix=this.$route.params?.postfix;
+    this.index=this.$route.params?.index;
+    this.queryTime = this.$route.params?.queryTime
+    this.settleDetailList=this.$route.params?.settleDetailList
+    console.log(" this.settleDetailList", this.settleDetailList)
+  },
+  methods: {
+    goback(){
+      this.$router.push({
+        name:"accountingView",
+        params:{
+          id: this.id,                  // 参数对象的属性
+          postfix:this.postfix,
+          activeIndex:this.index,
+          queryTime:this.queryTime
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+@import "@/styles/common.scss";
+.wrap{
+  @include wh(100%,100%);
+  background-color: #F4F5F7;
+  overflow-y: auto;
+}
+.navBar{
+  margin-bottom: 46px;
+}
+.title{
+  @include fontWeightSize(bold,14px);
+  @include colorOpa(#323643,0.66);
+}
+.line{
+  @include wh(100%,2px);
+  opacity: 0.16;
+  border-top: 1px solid;
+  margin-top: 7px;
+  border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
+}
+.item{
+  @include flexCenter;
+  font-size: 12px !important;
+  font-weight: 400 !important;
+  .titleLeft{
+    opacity: .5;
+    line-height: 27px;
+  }
+}
+.itemWrap{
+  background-color: #FFFFFF;
+  margin-bottom: 10px;
+  box-sizing: border-box;
+  padding: 15px;
+}
+
+img{
+  @include wh(35px,15px);
+  margin-left: 21px;
+}
+/*.common{
+  background-color: #FFFFFF;
+  padding: 11px 24px 14px;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+}*/
+.baseInfo{
+  @include wh(100%,100%);
+
+}
+</style>

src/views/workOrder/workOrderReconciliation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="wrap">
+  <div class="wrap" :style="`backgroundColor: ${show ? '#FAFAFA' : '#F4F5F7'};`">
     <div class="navBar">
       <van-nav-bar
           title="工单对账"
@@ -12,7 +12,7 @@
       >
         <template slot="right">
           <div class="rightWrap"  @click="showDatetime = !showDatetime">
-            <span class="dateTitle">{{ ymTime }}</span>
+            <span class="dateTitle">{{ time ? time?.slice(0,7) : ymTime  }}</span>
             <img src="@/assets/line.png" class="img1"/>
             <img src="@/assets/arrow_bottom.png" class="img2"/>
           </div>
@@ -34,7 +34,7 @@
       </div>
     </div>
 
-    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+    <van-pull-refresh v-model="isLoading" @refresh="onRefresh"  v-show="!show" >
      <div >
         <div  class="content_wrap" v-for="(item,index) in orderList" :key="index">
           <div class="codeTxt common">
@@ -57,22 +57,24 @@
               <span class="allTxt">{{ item.accountStatus?.label }}</span>
             </div>
             <div class="rightBtn">
-              <button class="btn"  v-if="queryType == 1"  @click="handleAccounting(item)">记账</button>
+              <button class="btn"  v-if="queryType == 1 && permissonList.includes('supplierRecordOperation')"  @click="handleAccounting(item)">记账</button>
-              <button class="btn" v-if="queryType == 3"  @click="handleAccounting(item)">{{item.accountStatus.code == 3 ? '重新记账'  : '记账'}}</button>
+              <button class="btn" v-if="queryType == 3 && permissonList.includes('supplierRecordOperation')"  @click="handleAccounting(item)">{{item.accountStatus.code == 3 ? '重新记账'  : '记账'}}</button>
-              <button class="btn"  v-if="queryType == 5"  @click="handleAccounting(item)">重新记账</button>
+              <button class="btn"  v-if="queryType == 5 && permissonList.includes('supplierRecordOperation')"  @click="handleAccounting(item)">重新记账</button>
               <button class="btn"  v-if="queryType == 7" @click="goPageDetail(item)">查看详情</button>
             </div>
           </div>
         </div>
       </div>
     </van-pull-refresh>
-
+    <div class="bgEmptyImg" v-show="show">
+      <img  src="@/assets/empty.png" />
+    </div>
   </div>
 </template>
 
 <script>
 import {myMixins} from "@/utils/myMixins"
-import {accountRecordList} from "@/api/mine"
+import {accountRecordList,userOperationPermissions} from "@/api/mine"
 import {timeFormat} from "@/utils/common"
 export default {
   name: "workOrderReconciliation",
@@ -85,20 +87,30 @@ export default {
       pageNum: 1,
       pageSize: 10,
       total: 0,
-      queryType:1,
+      queryType:1,//默认显示待记账
-      queryTime:'',
+      queryTime:'',//默认查询时间为当年当月
-      showDatetime: false,
+      showDatetime: false,//时间选择器
       currentDate: new Date(),
-      ymTime: '',
+      ymTime: '',//默认显示时间为当年当月
       isLoading:"",
+      permissonList:[],
+      time:'',//当页面已经跳转到其他页面时就用原本的时间，如果没有就用当前时间
     }
   },
-  mounted() {
+  async mounted() {
+    console.log("params",this.$route.params?.queryTime)
     this.activeIndex=this.$route.params?.activeIndex || 0
     this.queryType=this.$route.params?.queryType || this.queryType
-    this.initIndex()
+    this.time = this.$route.params?.queryTime
-    this.initSelectTime();
+    await this.initIndex()
-    this.getList();
+    await this.initSelectTime();
+    await this.getPermissions();
+    await this.getList();
+  },
+  computed:{
+    show() {
+      return (this.orderList.length < 0 || this.orderList.length == 0); // 判断数组长度是否大于 0
+    },
   },
   methods: {
     onRefresh() {
@@ -108,17 +120,6 @@ export default {
         this.isLoading = false;
       }, 1000);
     },
-    initIndex(){
-      if(this.activeIndex === 0){
-        this.queryType = 1
-      }else if(this.activeIndex === 1){
-        this.queryType = 3
-      }else if(this.activeIndex === 2){
-        this.queryType = 5
-      }else if(this.activeIndex === 3){
-        this.queryType = 7
-      }
-    },
     async changeTab(index) {
       this.activeIndex = index
       this.initIndex()
@@ -132,33 +133,54 @@ export default {
         pageNum:this.pageNum,
         pageSize:this.pageSize,
         queryType:this.queryType,
-        queryTime:this.queryTime
+        queryTime:this.time || this.queryTime,//当页面已经跳转到其他页面时就用原本的时间，如果没有就用当前时间
       })
       if(res.code === 200){
         this.orderList = res.data;
       }
     },
+    async getPermissions(){
+      let res = await userOperationPermissions();
+      this.permissonList = res.data
+      // console.log("1122",this.permissonList)
+      // console.log('工单对账',this.permissonList.includes('supplierRecordOperation'))
+    },
     handleAccounting(item){
+      console.log("item")
       this.$router.push({
         name: 'accountingView',  // 目标路由的名称
         params: {
           id: item.id,                  // 参数对象的属性
           postfix:item.postfix,
-          index:this.activeIndex
+          index:this.activeIndex,
+          queryTime:this.queryTime
         }
       });
     },
+    initIndex(){
+      if(this.activeIndex === 0){
+        this.queryType = 1
+      }else if(this.activeIndex === 1){
+        this.queryType = 3
+      }else if(this.activeIndex === 2){
+        this.queryType = 5
+      }else if(this.activeIndex === 3){
+        this.queryType = 7
+      }
+    },
     goPageDetail(item){
       this.$router.push({
         name: 'aduitCompleteDetail',  // 目标路由的名称
         params: {
           id: item.id,                  // 参数对象的属性
           postfix:item.postfix,
-          index:this.activeIndex
+          index:this.activeIndex,
+          queryTime: this.time || this.queryTime
         }
       });
     },
     async onConfirm(value) {
+      this.time = '';
       this.showDatetime = false
       const date = new Date(value);
       const year = date.getFullYear(); // 获取年份，结果为 2023
@@ -169,11 +191,18 @@ export default {
       await this.getList();
     },
     initSelectTime() {//初始化查询时间
+      if(this.time){
+        const date = new Date(this.time);
+        const year = date.getFullYear(); // 获取年份，结果为 2023
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');  // 获取月份，需要注意月份从 0 开始，所以要加 1，结果为 9
+        this.ymTime = year + '-' + month
+        return
+      }
       const year = this.currentDate.getFullYear(); // 获取年份，结果为 2023
       const month = (this.currentDate.getMonth() + 1).toString().padStart(2, '0');  // 获取月份，需要注意月份从 0 开始，所以要加 1，结果为 9
       this.ymTime = year + '-' + month;
       this.queryTime=timeFormat(new Date());
-      // console.log(this.queryTime)
+
     },
   }
 }
@@ -185,9 +214,7 @@ export default {
 
 .wrap {
   @include wh(100%, 100%);
-  background: #F4F5F7;
+  @include sizingPadding(0,12px);
-  box-sizing: border-box;
-  padding: 0 12px;
   overflow-y: auto;
 }
 
@@ -203,8 +230,8 @@ export default {
   margin-bottom: 46px;
 
   .rightWrap {
-    @include flexCenter;
+    @include flexColAround;
-    justify-content: space-around;
+    align-items: center;
     @include wh(106px, 26px);
     background: linear-gradient(180deg, #A3B8E9 0%, #6C81CD 100%);
     border-radius: 4px;
@@ -214,41 +241,33 @@ export default {
     .img1 {
       @include wh(1px, 18px)
     }
-
     .img2 {
       @include wh(7px, 5px)
     }
 
     .dateTitle {
       @include fontWeightSize(bolder, 12px);
-      color: #FFFFFF;
+      @include colorOpa(#FFFFFF,0.9);
-      opacity: .9;
     }
   }
 }
 
 .tab_wrap {
   @include fontWeightSize(bolder, 15px);
-  display: flex;
+  @include flexColAround;
-  justify-content: space-around;
+  @include colorOpa(#737373,0.7);
   padding: 10px 0 15px 0;
-  color: #737373;
-  opacity: .7;
-
   div {
     padding-top: 8px;
   }
-
   .active {
     color: #3678FF;
     position: relative;
   }
-
   .active:after {
     content: '';
     display: block;
-    width: 18px;
+    @include wh(18px,3px);
-    height: 3px;
     background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);
     border-radius: 2px;
     position: absolute;
@@ -262,51 +281,41 @@ export default {
   @include wh(100%, 96px);
   background: #FFFFFF;
   box-shadow: 0px 1px 4px 0px rgba(39, 52, 125, 0.05);
-  border-radius: 6px;
   border: 1px solid #E6E6E6;
   backdrop-filter: blur(5.602678571428572px);
   @include flexBetween;
-  box-sizing: border-box;
+  @include sizingPadRadius(10px,0,6px);
-  padding: 10px 0;
   margin-bottom: 10px;
   .common {
     @include flexColBet();
     margin-left: 18px;
     margin-right: 14px;
-
   }
-
   .line {
     @include wh(100%, 1px);
     background: #E9E9EA;
     opacity: 0.6;
   }
-
   .supplier {
     margin-left: 18px;
     margin-right: 14px;
   }
-
   .btn {
-    //@include wh(48px, 18px);
-    @include all-height(20px);
     text-align: center;
-    @include bgFontColor(#FFFFFF, #354D93);
     border-radius: 3px;
     border: none;
+    @include bgFontColor(#FFFFFF, #354D93);
+    @include all-height(20px);
   }
-
   .halfTxt {
     display: inline-block;
     width: 55px;
     @include fontWeightSize(400, 12px);
     opacity: .5;
   }
-
   .allTxt {
     @include fontWeightSize(400, 12px)
   }
-
   .orderCode {
     @include fontWeightSize(bold, 13px)
   }
@@ -320,4 +329,12 @@ export default {
     color: #09B820;
   }
 }
+.bgEmptyImg{
+  @include flexTwoCenter;
+  height: 85% ;
+  background-color: #FAFAFA;
+  img{
+    width: 100%;
+  }
+}
 </style>