first

src/App.vue

@@ -0,0 +1,27 @@
+<template>
+  <div id="app">
+    <keep-alive>
+      <router-view v-if="$route.meta.cache" />
+    </keep-alive>
+    <router-view v-if="!$route.meta.cache" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+}
+</script>
+
+<style>
+  #app {
+    height: 100%;
+  }
+  body {
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+</style>

src/api/order.js

@@ -0,0 +1,13 @@
+import request from '@/utils/http'
+
+// 预计费用计算
+export function getToDoList() {
+  return request({
+    url: '/supplierAppV2/dispatchApp/toDoMessage/toDoList',
+    method: 'POST',
+   // withCredentials: true
+    // contentType: 'application/json',
+    // data
+  })
+}
+

src/components/cellGroup.vue

@@ -0,0 +1,63 @@
+<template>
+  <van-cell-group>
+    <van-field
+        :value="value"
+        :label="label"
+        :placeholder="placeholder"
+        required
+        @input="$emit('input', $event)"
+        input-align="right"
+    />
+  </van-cell-group>
+</template>
+
+<script>
+export default {
+  name: "cellGroup",
+  props:{
+    label:{
+      type:String,
+      default:''
+    },
+    placeholder:{
+      type:String,
+      default: ''
+    },
+    value: [String, Number]
+  },
+  data(){
+    return{
+        name:''
+    }
+  },
+  mounted() {
+    // this.name='我是测试东西'
+  },
+  methods:{
+
+  }
+}
+</script>
+
+<style scoped>
+::v-deep .van-cell{
+  padding:0 25px 0 0;
+  line-height: 57px;
+}
+::v-deep .van-cell--required::before{
+  background-image: url("@/assets/start.png");
+  background-repeat: no-repeat;
+  position: absolute;
+  left: 0;
+  top: 25px;
+  width: 8px;
+  height: 8px;
+  margin-right: 3px;
+  content:''
+}
+::v-deep  .van-field__label{
+  color: #323643;
+  margin-left: 20px;
+
+}
+</style>

src/components/commonBtn.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="button" @click="clickHandler">
+    {{ title }}
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "commonBtn",
+    props: {
+      title: {
+        type: String,
+        default: '提交'
+      }
+    },
+    methods: {
+      clickHandler() {
+        this.$emit('submitClick')
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+.button {
+  position: fixed;
+  bottom: 30px;
+  border-radius: 5px;
+  text-align: center;
+  @include bgFontColor(#FFFFFF,#354D93);
+  @include fontWeightSize(500,15px);
+  @include whLin(88%,48px);
+}
+</style>

src/components/twoBtnCommon.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="btn">
+    <button class="cancel" @click="cancelClick">{{ title1 }}</button>
+    <button class="submit" @click="submitClick">{{ title2}}</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "twoBtnCommon",
+  props:{
+    title1:{
+      type:String,
+      default:"取消"
+    },
+    title2:{
+      type:String,
+      default: '提交'
+    }
+  },
+  methods:{
+    cancelClick(){
+      this.$emit('cancelClick')
+    },
+    submitClick(){
+      this.$emit('submitClick')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+.btn{
+  @include flexColBet;
+  button{
+    @include whLin(152px,39px);
+    border-radius: 5px;
+    color: #FFFFFF;
+    border: none;
+    @include fontWeightSize(500,14px)
+  }
+  .cancel{
+    background: #9EA7C0;
+  }
+  .submit{
+    background-color: #354D93;
+  }
+}
+</style>

src/main.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import Vant from 'vant';
+import 'vant/lib/index.css';
+import "lib-flexible/flexible";
+import "@/utils/rem.js"
+import store from './store'
+Vue.config.productionTip = false
+Vue.use(Vant);
+new Vue({
+  store,
+  router,
+  render: h => h(App),
+}).$mount('#app')

src/router/index.js

@@ -0,0 +1,119 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+Vue.use(VueRouter);
+
+const routes = [
+    {
+      path: '/',
+      redirect: '/index'
+    },
+    {
+      path: '/index',
+      name: 'toDoList',
+      component: () => import('@/views/index/toDoList'),
+      meta:{
+        title: '代办事项',
+      }
+    },
+    {
+      path: "/reporting",
+      name: 'reportingView',
+      component: () => import('@/views/index/reporting.vue'),
+      meta: {
+        title: '报备'
+      }
+    },
+    {
+      path: "/workOrderDetail",
+      name: 'workOrderDetail',
+      component: () => import('@/views/index/workOrderDetail'),
+      meta: {
+        title: '工单详情'
+      }
+    },
+    {
+      path: "/supplySettlement",
+      name: 'supplySettlement',
+      component: () => import('@/views/index/supplySettlement'),
+      meta: {
+        title: '补结算单'
+      }
+    },
+    {
+      path: "/accounting",
+      name: 'accountingView',
+      component: () => import('@/views/index/accounting'),
+      meta: {
+        title: '记账'
+      }
+    },
+    {
+      path: "/reAccounting",
+      name: 'reAccountingView',
+      component: () => import('@/views/index/reAccounting'),
+      meta: {
+        title: '重新记账'
+      }
+    },
+    {
+      path: "/invoicingNotify",
+      name: 'invoicingNotify',
+      component: () => import('@/views/index/invoicingNotify.vue'),
+      meta: {
+        title: '开票通知'
+      }
+    },
+    {
+        path: "/invoicingDetail",
+        name: 'invoicingDetail',
+        component: () => import('@/views/index/invoicingDetail'),
+        meta: {
+            title: '开票通知详情'
+        }
+    },
+    {
+        path: "/carManage",
+        name: 'carManage',
+        component: () => import('@/views/index/carManage'),
+        meta: {
+            title: '车辆管理'
+        }
+    },
+    {
+        path: "/vehicleAdd",
+        name: 'vehicleAdd',
+        component: () => import('@/views/index/vehicleAdd'),
+        meta: {
+            title: '车辆新增或修改'
+        }
+    },
+    {
+        path: '/driverManage',
+        name: 'driverManage',
+        component:()=>import('@/views/index/driverManage'),
+        meta:{
+            title: '司机管理'
+        }
+    },
+    {
+        path: '/driverAdd',
+        name: 'driverAdd',
+        component:()=>import('@/views/index/driverAdd'),
+        meta: {
+            name:'司机新增或修改'
+        }
+    }
+  ]
+
+const router = new VueRouter({
+  mode: 'history',
+  // base: process.env.BASE_URL,
+  routes
+})
+router.beforeEach(function (to, form, next) {
+  if (to.meta.title) {
+    document.title = to.meta.title
+  }
+  next()
+})
+export default router

src/store/getters.js

@@ -0,0 +1,4 @@
+const getters = {
+  order: state => state.order
+}
+export default getters

src/store/index.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import getters from './getters'
+
+Vue.use(Vuex)
+
+
+const modulesFiles = require.context('./modules', true, /\.js$/)
+
+
+const modules = modulesFiles.keys().reduce((modules, modulePath) => {
+  // set './app.js' => 'app'
+  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
+  const value = modulesFiles(modulePath)
+  modules[moduleName] = value.default
+  return modules
+}, {})
+
+const store = new Vuex.Store({
+  modules,
+  getters
+})
+
+export default store

src/store/modules/order.js

@@ -0,0 +1,73 @@
+const state = {
+  orderInfo: {},
+  address: {},        // 事发地
+  destAddress: {},    // 目的地
+  localAddress: {  // 定位地址
+    lat: 31.184102,
+    lng: 121.506799,
+    address: '中道汽车救援股份有限公司',
+    localCityCode: '',
+  },
+  serverCity: '',
+  localCityCode: '',
+  // serviceId: '',
+  // isAppoint: 0,                    // 是否预约
+  // appointTime: '',                 // 预约时间
+  // positionEnvironment: '',         // 车辆位于
+
+  // startPoiAddress: '',
+  // startLat: '',
+  // startLng: '',
+  // endPoiAddress: '',
+  // endLat: '',
+  // endLng: '',
+}
+
+const mutations = {
+  SET_LOCAL_ADDRESS: (state, data) => {
+    state.localAddress = data
+  },
+  SET_ORDER_INFO: (state, data) => {
+    state.orderInfo = data
+  },
+  SET_ADDRESS: (state, data) => {
+    state.address = data
+  },
+  SET_DEST_ADDRESS: (state, data) => {
+    state.destAddress = data
+  },
+  SET_SERVER_CITY: (state, data) => {
+    state.serverCity = data
+  },
+  SET_LOCAL_CITY: (state, data) => {
+    state.localCityCode = data
+  }
+}
+
+const actions = {
+  setLocalAddress({ commit }, data) {
+    commit('SET_LOCAL_ADDRESS', data)
+  },
+  setAddress({ commit }, data) {
+    commit('SET_ADDRESS', data)
+  },
+  setDestAddress({ commit }, data ) {
+    commit('SET_DEST_ADDRESS', data)
+  },
+  setOrderInfo({ commit }, data) {
+    commit('SET_ORDER_INFO', data)
+  },
+  setServerCity({ commit }, data) {
+    commit('SET_SERVER_CITY', data)
+  },
+  setLocalCity({ commit }, data) {
+    commit('SET_LOCAL_CITY', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/styles/common.scss

@@ -0,0 +1,40 @@
+.van-toast--html, .van-toast--text {
+  z-index: 100000000002 !important;
+}
+.van-popup--bottom {
+  z-index: 10000000000 !important;
+}
+.van-dialog {
+  z-index: 100000000001 !important;
+}
+.van-overlay {
+  z-index: 9999999999 !important;
+}
+.van-dialog__content {
+  max-height: 70vh;
+  overflow-y: auto;
+}
+::v-deep .van-nav-bar__content{
+  background-color: #354683 ;
+}
+::v-deep .van-nav-bar__title{
+  color: #fff;
+  opacity: .7;
+  font-weight: 500;
+  font-size: 15px;
+}
+::v-deep .van-nav-bar .van-icon{
+  color: #fff;
+  opacity: .7;
+  font-size: 15px;
+  width: 6px;
+  height: 13px;
+}
+::v-deep .van-radio__label{
+  margin-left: 0;
+  font-weight: 400;
+  font-size: 14px;
+  //@include fontWeightSize(400,14px);
+  color: #000000;
+}
+

src/styles/mixin.scss

@@ -0,0 +1,41 @@
+@mixin fontWeightSize($weight,$size){
+    font-size: $size;
+    font-weight: $weight;
+}
+@mixin bgFontColor($color,$bgcolor){
+    color:$color;
+    background: $bgcolor;
+}
+@mixin all-height($height) {
+    height: $height;
+    line-height: $height;
+}
+@mixin whLin($width,$height){
+    width: $width;
+    @include all-height($height)
+}
+@mixin widHeiMar($width,$height,$marin){
+    width: $width;
+    height: $height;
+    margin-right: $marin;
+}
+@mixin wh($w,$h){
+    width: $w;
+    height: $h;
+}
+@mixin flexColumn{
+    display: flex;
+    flex-direction: column;
+}
+@mixin flexBetween(){
+    @include flexColumn;
+    justify-content: space-between;
+}
+@mixin flexColBet(){
+    display: flex;
+    justify-content: space-between;
+}
+@mixin flexCenter(){
+    display: flex;
+    align-items: center;
+}

src/utils/appointTime.js

@@ -0,0 +1,59 @@
+import { formatDate, formatNumber } from '@/utils/common'
+// 拼接 预约时间 picker
+export function getAppointFun (time) {
+  let arr = []
+  // 当天剩余时间段
+  let obj = getCurrentDatePicker(time)
+  arr.push(obj)
+  // 后六天的可选时间段
+  let tempArr = getAfterTimeList()
+  arr.push(...tempArr)
+  return arr
+}
+
+// 拼接 当天剩余的可预约时间段（默认第一个是两小时之后可选）
+const getCurrentDatePicker = time => {
+  let obj = {}
+  obj.text = formatDate(time);
+  let timeArr = getCurrentTimeList()
+  obj.children = timeArr
+  return obj
+}
+
+// 当天日期的时间段
+const getCurrentTimeList = () => {
+  let todayDate = new Date()
+  let tempArr = []
+  tempArr.push({ text: '尽快到' });    // 首先添加尽快到
+  if( todayDate.getMinutes() <= 30 && todayDate.getMinutes() > 0 ) {
+    let tempVal = todayDate.getHours() + 2;
+    let tempHalfHours =  formatNumber(tempVal) + ':30';
+    tempArr.push({ text: tempHalfHours });
+  }
+  let startFlag = (todayDate.getMinutes() == 0) ? (todayDate.getHours() + 2) : (todayDate.getHours() + 3)
+  tempArr = getDateTimeList(startFlag, tempArr)
+  return tempArr
+}
+
+// 获取后六天的 预约时间 picker
+const getAfterTimeList = () => {
+  let afterArr = []
+  for(let i = 1; i < 7; i++ ) {
+    let obj = {};
+    let tempTime = formatDate(new Date().getTime() + (i * 24* 60 * 60 * 1000))
+    obj.text = tempTime
+    let timeArr = []
+    obj.children = getDateTimeList(0, timeArr)
+    afterArr.push(obj)
+  }
+  return afterArr
+}
+
+// 获取某个时间段后的所有可选时段
+const getDateTimeList = (startHours = 0, list) => {
+  for(let i = startHours; i < 24; i++ ) {
+    list.push({ text: formatNumber(i) + ':' + '00' })
+    list.push({ text: formatNumber(i) + ':' + '30' })
+  }
+  return list
+}

src/utils/common.js

@@ -0,0 +1,30 @@
+const formatDate = date => {
+  let tempDate = new Date(date)
+  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}`
+}
+
+const leftCopy = (obj, source) => {
+  let sourceKey = Object.keys(source)
+  if (obj && source) {
+    Object.keys(obj).forEach(key => {
+      if (sourceKey.includes(key)) {
+        obj[key] = source[key] == null ? '' : source[key]
+      }
+    })
+  }
+}
+
+
+module.exports = {
+  formatNumber,
+  formatDate,
+  leftCopy,
+}

src/utils/http.js

@@ -0,0 +1,54 @@
+import axios from "axios";
+import qs from 'qs'
+import { Toast } from 'vant'
+
+console.log('process.env.VUE_APP_BASE_API', process.env.VUE_APP_BASE_API)
+
+const service = axios.create({
+  // baseURL: process.env.VUE_APP_BASE_API,
+  baseURL: 'https://api1.sino-assist.com/',
+  headers: {
+    Accept: 'application/json'
+  },
+  timeout: 10000
+})
+service.interceptors.request.use(
+  config => {
+    config.data = config.contentType ? config.data : qs.stringify(config.data)
+    config.headers['Content-Type'] = config.contentType || 'application/x-www-form-urlencoded'
+      // 在发送请求之前做一些操作，如添加token到请求头
+    const token='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJzemwiLCJhdWQiOlsic3VwcGxpZXItYXBwIl0sIm5iZiI6MTY5MTU1NzIzNSwidXNlcl9pbmZvIjp7InVzZXJJZCI6NTQ1ODUsInBob25lIjoiMTc2MzAwMzU2NTgiLCJuYW1lIjoi5bCP5a6LIiwic3VwcGxpZXJOYW1lIjoi5LiK5rW35a6J55WFQSIsInN1cHBsaWVySWQiOjExMjgsInVzZXJuYW1lIjoic3psIiwidXNlclR5cGUiOiJBUFAiLCJhdXRob3JpdGllcyI6W119LCJzY29wZSI6WyJhbGwiXSwiaXNzIjoiaHR0cHM6Ly9zaW5vYXNzaXN0LmNvbSIsImV4cCI6MTY5MTY0MzYzNSwiaWF0IjoxNjkxNTU3MjM1fQ.S1AignpcnCxSrm3M8rzhCLYlgyqD2Hv-SPMqPLgqlt4'
+      config.headers['Authorization'] = `${token}`;
+   /* if (getToken()) {
+      config.headers['token'] = getToken()
+    }*/
+    return config
+  },
+  error => {
+    console.log(error)
+    return Promise.reject(error)
+  }
+)
+
+service.interceptors.response.use(
+  response => {
+    const res = response.data
+    console.log('rere', res)
+    if (res.code && (res.code != '00'  && res.code != '105' )) {
+      Toast(res.msg || 'Error')
+      return Promise.reject(new Error(res.msg || 'Error'))
+    } else {
+      if( res.code === 0 ) {
+        return res.result
+      } else {
+        return res.data
+      }
+    }
+  },
+  error => {
+    console.log('err' + error)
+    Toast(error.message)
+    return Promise.reject(error)
+  }
+)
+export default service

src/utils/map.js

@@ -0,0 +1,108 @@
+// 获取定位, 返回 经纬度
+export function getLocal(mapContext) {
+  return new Promise((resolve, reject) => {
+    mapContext.plugin('AMap.Geolocation', function () {
+      let geolocation = new AMap.Geolocation({
+        enableHighAccuracy: true, // 是否使用高精度定位，默认：true
+        timeout: 10000, // 设置定位超时时间，默认：无穷大
+        offset: [10, 20],  // 定位按钮的停靠位置的偏移量
+        zoomToAccuracy: true,  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
+        position: 'RB' //  定位按钮的排放位置,  RB表示右下
+      })
+
+      geolocation.getCurrentPosition(function(status, result){
+        if(status == 'complete'){
+          resolve(result.position)
+        }else{
+          reject(result)
+        }
+      });
+    })
+  })
+}
+
+// 逆地址解析，根据经纬度获取详细地址
+export function getAddress(mapContext, lnglat) {
+  return new Promise((resolve, reject) => {
+    mapContext.plugin('AMap.Geocoder', function () {
+      let geocoder = new AMap.Geocoder({
+        // city: "010", //城市设为北京，默认：“全国”
+      });
+
+      geocoder.getAddress(lnglat, function(status, result) {
+        if (status === 'complete' && result.info === 'OK') {
+          // result为对应的地理位置详细信息
+          resolve(result)
+        } else {
+          console.log(result)
+          alert(JSON.stringify(result))
+        }
+      })
+    })
+  })
+}
+
+// 输入提示
+export function searchFun(mapContext, cityCode, keyword) {
+  return new Promise((resolve, reject) => {
+    mapContext.plugin('AMap.AutoComplete', function(){
+      var autoOptions = {
+        city: cityCode || '全国',
+      };
+      // 实例化AutoComplete
+      var autoComplete= new AMap.AutoComplete(autoOptions);
+      // 根据关键字进行搜索
+      autoComplete.search(keyword, function(status, result) {
+        // 搜索成功时，result即是对应的匹配数据
+        if(result.info == 'OK') {
+          resolve(result.tips)
+        } else {
+          reject(result)
+        }
+      })
+    })
+  })
+}
+
+// 路径规划
+export function getRoad( mapContext, startLng, startLat, endLng, endLat ) {
+  return new Promise((resolve, reject) => {
+    mapContext.plugin('AMap.Driving', function() {
+      let driving = new AMap.Driving({
+        // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
+        // policy: AMap.DrivingPolicy.LEAST_TIME,
+        // map: mapContext
+      })
+
+      let startLngLat = [startLng, startLat]
+      let endLngLat = [endLng, endLat]
+
+      driving.search(startLngLat, endLngLat, function (status, result) {
+        // 未出错时，result即是对应的路线规划方案
+        if (status === 'complete') {
+          resolve(result)
+        } else {
+          reject(result)
+        }
+      })
+    })
+  })
+}
+
+
+function drawRoute(route, map) {
+  let path = parseRouteToPath(route)
+
+  let routeLine = new AMap.Polyline({
+    path: path,
+    isOutline: true,
+    outlineColor: '#ffeeee',
+    borderWeight: 2,
+    strokeWeight: 5,
+    strokeOpacity: 0.9,
+    strokeColor: '#0091ff',
+    lineJoin: 'round'
+  })
+
+  map.add(routeLine);
+}

src/utils/myMixins.js

@@ -0,0 +1,27 @@
+export const myMixins = {
+  data() {
+    return {
+      touchStart: [],
+      touchEnd: [],
+      slideShow: true
+    }
+  },
+  methods: {
+    goPage(page, query) {
+      this.$router.push({
+        name: page,
+        query: query
+      })
+    },
+    copyText(){//复制订单编号
+      const copyText = document.getElementById('copyText');
+      const range = document.createRange();
+      range.selectNode(copyText);
+      window.getSelection().removeAllRanges(); // 清除当前页面的选择内容
+      window.getSelection().addRange(range);
+      document.execCommand('copy');
+      window.getSelection().removeAllRanges(); // 清除选择内容的高亮状态
+      this.$toast('复制成功')
+    }
+  }
+}

src/utils/rem.js

@@ -0,0 +1,14 @@
+const baseSize = 37.5 //跟postcss.config.js中rootValue的值是一致的
+// 设置 rem 函数
+function setRem () {
+  // 当前页面宽度相对于 375 宽的缩放比例，可根据自己需要修改。  vantUI使用的是375px页面宽，这里使用375px
+  const scale = document.documentElement.clientWidth / 375
+  // 设置页面根节点字体大小 最高为两倍图 即设计稿为750
+  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
+}
+// 初始化
+setRem()
+// 改变窗口大小时重新设置 rem
+window.onresize = function () {
+  setRem()
+}

src/views/index/accounting.vue

@@ -0,0 +1,180 @@
+<template>
+<div class="wrap">
+  <div class="baseInfo common">
+    <div class="title">基本信息:</div>
+    <div class="line"></div>
+    <div class="item">
+      <span class="title">工单编号：</span>
+      <span class="content" id="copyText">ZD230626124283</span>
+      <img @click="copyText" src="@/assets/copy.png" />
+    </div>
+    <div class="item">
+      <span class="title">车牌号：&nbsp;&nbsp;&nbsp;&nbsp;</span>
+      <span class="content">湘H-DD899</span>
+    </div>
+    <div class="item">
+      <span class="title">服务类型：</span>
+      <span class="content" >搭电</span>
+    </div>
+    <div class="item">
+      <span class="title">工单状态：</span>
+      <span class="content" >未完成</span>
+    </div>
+    <div class="item">
+      <span class="title">结算比例：</span>
+      <span class="content" >按服务不成功结算</span>
+    </div>
+    <div class="item">
+      <span class="title">结算类型：</span>
+      <span class="content" >系统一口价</span>
+    </div>
+    <div class="item" >
+      <span class="title">结算方式：</span>
+      <div class="content" style="width: calc(100% - 84px);display: flex;justify-content: space-between;line-height: 27px" >
+        <span>起步价:135</span>
+        <span>包含公里数:15</span>
+        <span>超出单价:6</span>
+         </div>
+    </div>
+    <div class="item">
+      <span class="title">扣除责任险费：</span>
+      <span class="content">0</span>
+    </div>
+
+  </div>
+  <div class="supplierData common">
+    <div class="title">供应商数据:</div>
+    <div class="line"></div>
+    <div class="inpInfo">
+      <div class="titleContent">
+        <div>拖车里程:</div>
+        <div>路桥费:</div>
+        <div>小轮费:</div>
+        <div>收取客户金额:</div>
+        <div>费用总计:</div>
+        <div>备注说明:</div>
+      </div>
+      <div class="inputContent">
+        <div class="halfOpcity"><input type="number"/>公里</div>
+        <div class="halfOpcity"><input type="number"/>元</div>
+        <div class="halfOpcity"><input type="number"/>元</div>
+        <div class="halfOpcity"><input type="number"/>元</div>
+        <div class="btnComputed">计算</div>
+      </div>
+    </div>
+    <textarea class="multipleTxt" placeholder="报备描述"></textarea>
+    <two-common-btn class="btn" @cancelClick="cancelBtn" @submitClick="submitBtn" />
+  </div>
+</div>
+</template>
+
+<script>
+import {myMixins} from '@/utils/myMixins'
+import TwoCommonBtn from "@/components/twoBtnCommon.vue"
+export default {
+  name: "accountingView",
+  mixins:[myMixins],
+  methods:{
+    cancelBtn(){
+      console.log("取消")
+    },
+    submitBtn(){
+      console.log("提交")
+    }
+  },
+  components:{
+    TwoCommonBtn
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+.wrap{
+  width: 100%;
+  height: 100%;
+  background-color: #F4F5F7;
+}
+.title{
+  @include fontWeightSize(500,14px);
+  color: #323643;
+  opacity: 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{
+  display: flex;
+  align-items: center;
+  @include fontWeightSize(400,12px);
+  .title{
+    opacity: .5;
+    line-height: 27px;
+  }
+}
+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%,276px);
+}
+.supplierData{
+  @include wh(100%,438px);
+  .inpInfo{
+    display: flex;
+    justify-content: space-between;
+    margin: 0 5px;
+    color: #323643;
+    line-height: 32px;
+    input{
+      border: none;
+      text-align: right;
+    }
+    .titleContent{
+      width: 91px;
+      @include fontWeightSize(500,13px);
+
+    }
+    .halfOpcity{
+      opacity: .5;
+    }
+    .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;
+        right: 24px;
+      }
+    }
+  }
+  .multipleTxt{
+    @include wh(100%,87px);
+    background: #FAFAFA;
+    border-radius: 3px;
+    border: 1px solid #E6E6E6;
+    backdrop-filter: blur(10px);
+    padding: 8px;
+    box-sizing: border-box;
+  }
+  .btn{
+    margin-top: 8px;
+  }
+}
+</style>

src/views/index/carManage.vue

@@ -0,0 +1,84 @@
+<template>
+<div class="wrap">
+  <div class="carItem" v-for="(item,index) in 3" :key="index">
+    <div class="carCode">
+      <div class="codeLeft">苏AB6768 / 拖车</div>
+      <div class="twoBtn">
+        <button class="del">删除</button>
+        <button class="revise" @click="goPage('vehicleAdd')">修改</button>
+      </div>
+    </div>
+    <div class="carType">事故--大型拖车,事故--小型拖车,事故--平板拖车....</div>
+    <div class="juhe">
+      <span class="zdJuhe">是否参与中道聚合:        </span>
+      <span class="isZd isYes">是</span>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import { myMixins} from "@/utils/myMixins";
+
+export default {
+  name: "carManage",
+  mixins:[myMixins],
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+.wrap{
+  @include wh(100%,100%);
+  box-sizing: border-box;
+  padding: 13px 13px 0;
+}
+.carItem{
+  @include wh(100%,86px);
+  background: #FFFFFF;
+  box-shadow: 0px 2px 10px 0px rgba(216,216,216,0.5);
+  border-radius: 6px;
+  box-sizing: border-box;
+  padding: 11px 13px 11px 15px;
+  margin-bottom: 10px;
+  @include flexBetween;
+  .carCode{
+    display: flex;
+    justify-content: space-between;
+    .codeLeft{
+      @include fontWeightSize(500,14px)
+    }
+    .twoBtn{
+      button{
+        border: none;
+        width: 48px;
+        @include all-height(20px);
+        border-radius: 3px;
+        @include fontWeightSize(500,12px)
+      }
+      .del{
+        border: 1px solid #DDDDDD;
+        background-color: #FFFFFF;
+      }
+      .revise{
+        color: #FFFFFF;
+        margin-left: 15px;
+        background: #354D93;
+      }
+    }
+  }
+  .carType,.zdJuhe{
+    opacity: .7;
+    @include fontWeightSize(400,12px)
+  }
+  .isZd{
+    @include fontWeightSize(400,12px);
+  }
+  .isYes{
+    color: #09B820;
+  }
+  .isNo{
+    color: #FF0000;
+  }
+}
+</style>

src/views/index/driverAdd.vue

@@ -0,0 +1,156 @@
+<template>
+<div class="wrap">
+  <cell-group label="测试" placeholder="请输入测试内容" v-model="name"/>
+  <div class="itemContent">
+    <div class="titleType">
+      <img class="startImg" src="@/assets/start.png" />
+      <span>司机姓名</span>
+    </div>
+    <div class="checkContent">
+      <input placeholder="请输入司机姓名" />
+    </div>
+  </div>
+  <div class="lineBot"></div>
+  <div class="itemContent">
+    <div class="titleType">
+      <img class="startImg" src="@/assets/start.png" />
+      <span>手机号码</span>
+    </div>
+    <div class="checkContent">
+      <input placeholder="请输入手机号码" />
+    </div>
+  </div>
+  <div class="lineBot"></div>
+  <div class="itemContent">
+    <div class="titleType">
+      <img class="startImg" src="@/assets/start.png" />
+      <span>身份证号</span>
+    </div>
+    <div class="checkContent">
+      <input placeholder="请输入身份证号" />
+    </div>
+  </div>
+  <div class="lineBot"></div>
+  <div class="itemContent">
+    <div class="titleType">
+      <img class="startImg" src="@/assets/start.png" />
+      <span>准驾车型</span>
+    </div>
+    <select id="myDropdown" @change="handleSelectChange()" style="border: none">
+      <option value="option1">C1</option>
+      <option value="option2">C2</option>
+      <option value="option3">C3</option>
+    </select>
+  </div>
+  <div class="lineBot"></div>
+  <div class="itemContent">
+    <div class="titleType">
+      <img class="startImg" src="@/assets/start.png" />
+      <span>司机状态</span>
+    </div>
+    <div class="isJoin">
+      <van-radio-group v-model="radio" @change="isUse"  class="joinWrap">
+        <van-radio name="启用" style="margin-right: 26px" 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-group>
+    </div>
+  </div>
+  <div class="lineBot"></div>
+  <two-common-btn class="btn" @cancelClick="cancelBtn" @submitClick="submitBtn" />
+</div>
+</template>
+
+<script>
+import TwoCommonBtn from "@/components/twoBtnCommon.vue"
+import CellGroup  from "@/components/cellGroup.vue"
+export default {
+  name: "driverAdd",
+  data(){
+    return{
+      name:"",
+      radio:'启用',
+      activeIcon: require('@/assets/check.png'),
+      inactiveIcon: require('@/assets/uncheck.png')
+    }
+  },
+  methods:{
+    isUse(e){
+      console.log("是否启用",e)
+    },
+    cancelBtn(){
+      console.log("取消司机")
+    },
+    submitBtn(){
+      console.log("提交司机")
+    }
+  },
+  components:{
+    TwoCommonBtn,
+    CellGroup
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+@import "@/styles/common.scss";
+.wrap{
+  @include wh(100%,100%);
+  box-sizing: border-box;
+  padding-left: 16px;
+}
+.itemContent{
+  @include flexColBet;
+  line-height: 56px;
+  box-sizing: border-box;
+  padding-right: 25px;
+  .titleType{
+    @include fontWeightSize(500,14px);
+    color: #323643;
+  }
+  .isJoin{
+    display: flex;
+    .joinWrap, .item{
+      @include flexCenter;
+    }
+    img{
+      @include widHeiMar(16px,16px,6px)
+    }
+  }
+  .startImg{
+    @include widHeiMar(6px,6px,3px);
+    vertical-align: super;
+  }
+  input{
+    border: none;
+    text-align: right;
+    @include fontWeightSize(500,13px);
+    opacity: .5;
+  }
+}
+.lineBot{
+  @include wh(100%,1px);
+  background: #E9E9EA;
+  opacity: 0.6;
+}
+.btn{
+  margin-left: 8px;
+  width: 91%;
+  position: fixed;
+  bottom: 30px;
+}
+</style>

src/views/index/driverManage.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="wrap">
+    <div class="itemWrap">
+      <div class="name-status">
+        <div class="namephone">王小微 / 15234345656</div>
+        <div class="twoBtn">
+          <button class="del">启用</button>
+          <button class="revise">修改</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">男</span>
+        </div>
+        <div class="carType">
+          <span class="halfOpci">准驾车型:</span>
+          <span class="allOpci">C2</span>
+        </div>
+      </div>
+      <div>
+        <span class="halfOpci">身份证号:</span>
+        <span class="allOpci">4115241999083449090</span>
+      </div>
+      <div class="">
+        <span class="halfOpci">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态:</span>
+        <span class="statusNo">停用</span>
+      </div>
+    </div>
+    <div class="itemWrap">
+      <div class="name-status">
+        <div class="namephone">王小微 / 15234345656</div>
+        <div class="twoBtn">
+          <button class="del">停用</button>
+          <button class="revise" @click="goPage('driverAdd')">修改</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">男</span>
+        </div>
+        <div class="carType">
+          <span class="halfOpci">准驾车型:</span>
+          <span class="allOpci">C2</span>
+        </div>
+      </div>
+      <div>
+        <span class="halfOpci">身份证号:</span>
+        <span class="allOpci">4115241999083449090</span>
+      </div>
+      <div>
+        <span class="halfOpci">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态:</span>
+        <span class="statusYes">启用</span>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+import {myMixins} from "@/utils/myMixins"
+export default {
+  name: "driverManage",
+
+  mixins:[myMixins],
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/mixin.scss';
+
+.wrap {
+  background: #F4F5F7;
+  box-sizing: border-box;
+  padding: 13px;
+  @include wh(100%, 100%);
+}
+
+.itemWrap {
+  @include wh(100%, 104px);
+  background: #FFFFFF;
+  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;
+
+  .halfOpci {
+    opacity: .5;
+    margin-right: 5px;
+  }
+
+  .allOpci {
+    opacity: 1;
+  }
+
+  .statusNo {
+    color: #FF0000;
+  }
+
+  .statusYes {
+    color: #09B820
+  }
+}
+
+.name-status {
+  display: flex;
+  justify-content: space-between;
+
+  .namephone {
+    @include fontWeightSize(500, 14px)
+  }
+
+  .twoBtn {
+    button {
+      border: none;
+      width: 48px;
+      @include all-height(20px);
+      border-radius: 3px;
+      @include fontWeightSize(500, 12px)
+    }
+
+    .del {
+      border: 1px solid #DDDDDD;
+      background-color: #FFFFFF;
+    }
+
+    .revise {
+      color: #FFFFFF;
+      margin-left: 15px;
+      background: #354D93;
+    }
+  }
+
+}
+</style>

src/views/index/invoicingDetail.vue

@@ -0,0 +1,66 @@
+<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="onClickLeft"
+    />
+  </div>
+  <div class="contentWrap">
+      <div class="item" v-for="(item,index) in 4" :key="index">
+        <div class="itemContent">ZDZD230630253236  拖车   128元</div>
+        <div class="line"></div>
+      </div>
+  </div>
+</div>
+</template>
+
+<script>
+import {myMixins} from "@/utils/myMixins"
+export default {
+  name: "invoicingDetail",
+  mixins:[myMixins],
+  methods:{
+    onClickLeft(){
+      this.goPage('invoicingNotify')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+@import "@/styles/common.scss";
+.wrap{
+  @include wh(100%,100%);
+}
+.navBar{
+  height: 46px;
+}
+.contentWrap{
+  width: 100%;
+  height: 400px;
+ margin-left: 27px;
+  .item{
+    width: 100%;
+    @include all-height(47px);
+    .itemContent{
+      margin-left: 5px;
+      @include fontWeightSize(400,13px);
+      color: #323643;
+    }
+    .line{
+      width: 100%;
+      height: 1px;
+      background: #E9E9EA;
+      opacity: 0.6;
+    }
+  }
+}
+
+</style>

src/views/index/invoicingNotify.vue

@@ -0,0 +1,94 @@
+<template>
+<div class="wrap">
+<div class="itemWrap" v-for="(item,index) in 3" :key="index">
+  <div class="item line1">
+    <div class="itemTime">
+      <span class="title">开票月份:</span>
+      <span class="content">2023年7月</span>
+    </div>
+    <div class="orderNum">
+      <span class="title">总案件数:</span>
+      <span class="content">86</span>
+    </div>
+    <div class="checkBtn" @click="goPage('invoicingDetail')">查看
+    </div>
+  </div>
+  <div class="item">
+    <span class="title">批次号:</span>
+    <span class="content">PC230626124283</span>
+  </div>
+  <div class="item">
+    <span class="title">结算总金额:</span>
+    <span class="content">1238元</span>
+  </div>
+  <div class="item">
+    <span class="title">扣款金额:</span>
+    <span class="content">2300元</span>
+  </div>
+  <div class="item">
+    <span class="title">扣款原因:</span>
+    <span class="content"  style="color: #FF8F37;">调度不及时导致客户等待时间过长</span>
+  </div>
+  <div class="item">
+    <span class="title">最终开票金额:</span>
+    <span class="content">1008元</span>
+  </div>
+</div>
+</div>
+</template>
+
+<script>
+import {myMixins} from "@/utils/myMixins"
+export default {
+  name: "invoicingNotify",
+  mixins:[myMixins],
+  methods:{
+    checkDetail(index){
+      console.log("查看详情"+index)
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+.wrap{
+  @include wh(100%,100%);
+  background-color: #F4F5F7;
+  overflow-y: auto;
+}
+.itemWrap{
+  background: #FFFFFF;
+  @include wh(100%,194px);
+  box-sizing: border-box;
+  padding: 14px 25px 18px 29px;
+  @include flexBetween;
+  margin-bottom: 10px;
+  .item{
+    @include fontWeightSize(400,12px);
+    span{
+      display: inline-block;
+    }
+    .title{
+      opacity: .5;
+      //width:55px;
+    }
+    .content{}
+  }
+  .line1{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    .checkBtn{
+      background: #354D93;
+      border-radius: 3px;
+      @include wh(48px,18px);
+      line-height: 18px;
+      text-align: center;
+      color: #FFFFFF;
+    }
+  }
+}
+
+</style>

src/views/index/reAccounting.vue

@@ -0,0 +1,250 @@
+<template>
+<div class="wrap">
+  <div class="baseInfo common">
+    <div class="title">基本信息:</div>
+    <div class="line"></div>
+    <div class="item">
+      <span class="title">工单编号：</span>
+      <span class="content" id="copyText">ZD230626124283</span>
+      <img @click="copyText" src="@/assets/copy.png" />
+    </div>
+    <div class="item">
+      <span class="title">车牌号：&nbsp;&nbsp;&nbsp;&nbsp;</span>
+      <span class="content">湘H-DD899</span>
+    </div>
+    <div class="item">
+      <span class="title">服务类型：</span>
+      <span class="content" >搭电</span>
+    </div>
+    <div class="item">
+      <span class="title">工单状态：</span>
+      <span class="content" >未完成</span>
+    </div>
+    <div class="item">
+      <span class="title">结算比例：</span>
+      <span class="content" >按服务不成功结算</span>
+    </div>
+    <div class="item">
+      <span class="title">结算类型：</span>
+      <span class="content" >系统一口价</span>
+    </div>
+    <div class="item" >
+      <span class="title">结算方式：</span>
+      <div class="content" style="width: calc(100% - 84px);display: flex;justify-content: space-between;line-height: 27px" >
+        <span>起步价:135</span>
+        <span>包含公里数:15</span>
+        <span>超出单价:6</span>
+         </div>
+    </div>
+    <div class="item">
+      <span class="title">扣除责任险费：</span>
+      <span class="content">0</span>
+    </div>
+  </div>
+  <div class="dataType">
+    <table>
+      <tr>
+        <td class="col1 checkData">审核数据</td>
+        <td  class="col2 supplierData">供应商数据</td>
+      </tr>
+      <tr>
+        <td class="col1">拖车里程:32km</td>
+        <td  class="col2 halfOpc"><input placeholder="输入拖车公里"/></td>
+      </tr>
+      <tr>
+        <td class="col1">路桥费:36元</td>
+        <td  class="col2 halfOpc"><input placeholder="输入路桥费"/></td>
+      </tr>
+      <tr>
+        <td class="col1">小轮费:32元</td>
+        <td  class="col2 halfOpc"><input placeholder="输入小轮费"/></td>
+      </tr>
+      <tr>
+        <td class="col1">收取客户:100元</td>
+        <td  class="col2 halfOpc"><input placeholder="收取客户金额"/></td>
+      </tr>
+      <tr>
+        <td class="col1">费用总计:165元</td>
+        <td  class="col2" style="position: relative" >
+          <span class="halfOpc">费用总计</span>
+          <button class="btnCom">计算</button></td>
+      </tr>
+      <tr>
+        <td class="col1 alignLeft" style="border-bottom-left-radius: 3px">
+          <div class="title col1" style="white-space: nowrap;">审核失败原因</div>
+          <div class="reason">审核失败原因审核失败原因审核失败原因审核失败原因审核失败原因</div>
+          <div class="imgWrap">
+            <img class="camerImg" src="@/assets/camer.png" >
+            <img class="camerImg" src="@/assets/camer.png" >
+          </div>
+        </td>
+        <td  class="col2 alignLeft"  style="border-bottom-right-radius: 3px">
+          <div class="title"> 本次补充说明:</div>
+<!--          <div class="reason">审核失败原因审核失败原因审核失败原因审核失败原因审核失败原因</div>-->
+          <div class="imgWrap">
+            <img class="camerImg" src="@/assets/camer.png" >
+            <img class="camerImg" src="@/assets/camer.png" >
+            <img class="camerImg" src="@/assets/camer.png" >
+          </div>
+        </td>
+      </tr>
+    </table>
+  </div>
+  <div class="btn">
+    <button>取消</button>
+    <button>再次审核</button>
+    <button class="submit">提交</button>
+  </div>
+</div>
+</template>
+
+<script>
+import {myMixins} from  '@/utils/myMixins'
+export default {
+  name: "reAccountingView",
+  mixins:[myMixins],
+  methods:{
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+.wrap{
+  width: 100%;
+  height: 100%;
+  background-color: #F4F5F7;
+  overflow-y: auto;
+}
+.title{
+  @include fontWeightSize(500,14px);
+  color: #323643;
+  opacity: 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{
+  display: flex;
+  align-items: center;
+  @include fontWeightSize(400,12px);
+  .title{
+    opacity: .5;
+    line-height: 27px;
+  }
+  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%,276px);
+}
+.dataType{
+  padding: 0 8px;
+  table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+  td {
+    padding: 10px;
+    border: 1px solid #ccc;
+    text-align: center;
+  }
+  .alignLeft{
+    text-align: left !important;
+    .reason{
+      @include fontWeightSize(400,11px);
+      color: #FF8F37;
+      opacity: 1 !important;
+    }
+    .camerImg{
+      @include widHeiMar(54px,42px,4px);
+      margin-top: 15px;
+    }
+    .title{
+      @include fontWeightSize(400,11px);
+      opacity: .5;
+    }
+  }
+  .col1{
+    width: 41%;
+    background-color: #E9E9EA;
+    @include fontWeightSize(400,12px);
+    opacity: 0.55;
+  }
+  .col2{
+    width: 58%;
+    background-color: #EAEFF6;
+    @include fontWeightSize(400,12px);
+    color: #0434D0;
+    input{
+      width: 72px;
+      border: none;
+      background-color:#EAEFF6;
+      text-align: center;
+    }
+    input::placeholder {
+      color: #0434D0; /* 设置提示内容文字颜色 */
+    }
+
+  }
+  .btnCom{
+    position: absolute;
+    right: 13px;
+    border: none;
+    width: 48px;
+    @include all-height(18px);
+    background: #354D93;
+    border-radius: 3px;
+    color: #FFFFFF;
+    @include fontWeightSize(500,12px)
+  }
+  .checkData,.supplierData{
+    color: #323643;
+  }
+  .checkData{
+    border-top-left-radius: 3px;
+    opacity: 0.66;
+  }
+  .supplierData{
+    border-top-right-radius: 3px;
+  }
+  .halfOpc{
+    opacity: .5;
+  }
+}
+.btn{
+  margin-top: 31px;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-around;
+  box-sizing: border-box;
+  padding: 0 8px;
+  button{
+    @include wh(105px,39px);
+    line-height: 39px;
+    background: #9EA7C0;
+    border-radius: 5px;
+    color: #FFFFFF;
+    @include fontWeightSize(500,14px);
+    border: none;
+  }
+  .submit{
+    background: #354D93;
+  }
+}
+</style>

src/views/index/reporting.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="wrap">
+    <div class="title">报备事项:</div>
+    <div class="line"></div>
+    <van-radio-group v-model="radio" @change="change">
+      <van-radio name="1" class="item">
+        特殊情况绕路
+        <img
+            slot="icon"
+            slot-scope="props"
+            :src="props.checked ? activeIcon : inactiveIcon"
+        >
+      </van-radio>
+      <van-radio name="2" class="item">
+        事发地变更
+        <img
+            slot="icon"
+            slot-scope="props"
+            :src="props.checked ? activeIcon : inactiveIcon"
+        >
+      </van-radio>
+      <van-radio name="3" class="item">
+        目的地变更
+        <img
+            slot="icon"
+            slot-scope="props"
+            :src="props.checked ? activeIcon : inactiveIcon"
+        >
+      </van-radio>
+      <van-radio name="4" class="item">
+        其他报备
+        <img
+            slot="icon"
+            slot-scope="props"
+            :src="props.checked ? activeIcon : inactiveIcon"
+        >
+      </van-radio>
+    </van-radio-group>
+
+    <!--    <div class="item" @click="isCheck = !isCheck">-->
+<!--      <img :src="isCheck ? require('@/assets/check.png')  :  require('@/assets/uncheck.png')" />-->
+<!--      <span>特殊情况绕路</span>-->
+<!--    </div>-->
+<!--    <div class="item">-->
+<!--      <img :src="isCheck ? require('@/assets/check.png')  :  require('@/assets/uncheck.png')" />-->
+<!--      <span>事发地变更</span>-->
+<!--    </div>-->
+<!--    <div class="item">-->
+<!--      <img :src="isCheck ? require('@/assets/check.png')  :  require('@/assets/uncheck.png')" />-->
+<!--      <span>目的地变更</span>-->
+<!--    </div>-->
+<!--    <div class="item">-->
+<!--      <img :src="isCheck ? require('@/assets/check.png')  :  require('@/assets/uncheck.png')" />-->
+<!--      <span>其他报备</span>-->
+<!--    </div>-->
+    <textarea class="multiple" id="text-input" rows="4" cols="50" placeholder="报备描述"></textarea><br>
+    <common-btn @submitClick="submit" />
+  </div>
+</template>
+
+<script>
+import CommonBtn from "@/components/commonBtn.vue"
+export default {
+  name: "reportingView",
+  data(){
+    return{
+      // isCheck:false,
+      radio: '1',
+      activeIcon: require('@/assets/check.png'),
+      inactiveIcon: require('@/assets/uncheck.png')
+    }
+  },
+  methods:{
+    submit(){
+      console.log("提交1111111111")
+    },
+    change(e){
+      console.log("change,可以拿到选中的是哪个值",e)
+    },
+  },
+  components:{
+    CommonBtn
+  }
+}
+</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(500,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: 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);
+}
+
+.multiple {
+  width: 100%;
+  height: 125px;
+  background: #FAFAFA;
+  border-radius: 3px;
+  border: 1px solid #E6E6E6;
+  backdrop-filter: blur(10px);
+  padding: 10px;
+  box-sizing: border-box;
+  margin-top: 20px;
+}
+
+
+</style>

src/views/index/supplySettlement.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="wrap">
+    <div class="kilometers  common">
+      <div class="title">公里数:</div>
+      <div class="line"></div>
+      <div class="metersWrap">
+        <div class="leftKiloMeters">
+          <div>AB段公里数</div>
+          <div>BC段公里数</div>
+          <div>CA段公里数</div>
+        </div>
+        <div class="rightInputMeters">
+          <div><input type="number"/>公里</div>
+          <div><input type="number"/>公里</div>
+          <div><input type="number"/>公里</div>
+        </div>
+      </div>
+    </div>
+    <div class="roadBridgeFee common">
+      <div class="title">路桥费:</div>
+      <div class="line"></div>
+      <div class="metersWrap">
+        <div class="leftKiloMeters">
+          <div>AB段公里数</div>
+          <div>BC段公里数</div>
+          <div>CA段公里数</div>
+        </div>
+        <div class="rightInputMeters">
+          <div><input type="number"/>公里</div>
+          <div><input type="number"/>公里</div>
+          <div><input type="number"/>公里</div>
+        </div>
+      </div>
+    </div>
+    <div class="otherFee common">
+      <div class="title">其他费用:</div>
+      <div class="line"></div>
+      <div class="metersWrap">
+        <div class="leftKiloMeters">
+          <div>小轮个数</div>
+          <div>等候费</div>
+          <div>困境费</div>
+          <div class="blueColor">已收取客户金额</div>
+        </div>
+        <div class="rightInputMeters" style="opacity: 1">
+          <div class="alignRight"><input type="number"/>个</div>
+          <div  class="alignRight"><input type="number"/>元</div>
+          <div class="alignRight"><input type="number"/>元</div>
+          <div class="blueColor"><input type="number"/>元</div>
+        </div>
+      </div>
+    </div>
+    <common-btn class="btn" @submitClick="submit" />
+  </div>
+</template>
+
+<script>
+import CommonBtn  from "@/components/commonBtn.vue"
+export default {
+  name: "supplySettlement",
+  data(){
+    return{}
+  },
+  methods:{
+    submit() {
+      console.log("提交")
+    }
+  },
+  components:{
+    CommonBtn
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+.wrap {
+  width: 100%;
+  height: 100%;
+  background-color: #F4F5F7;
+}
+.common {
+  @include wh(100%, 161px);
+  background: #FFFFFF;
+  backdrop-filter: blur(5.602678571428572px);
+  box-sizing: border-box;
+  padding: 10px 17px 10px 24px;
+  margin-bottom: 10px;
+}
+.otherFee {
+  @include wh(100%, 198px)
+}
+.title {
+  @include fontWeightSize(500, 14px);
+  color: #323643;
+  opacity: 0.66;
+}
+.line {
+  @include wh(calc(100% - 10px), 2px);
+  text-align: center;
+  opacity: 0.16;
+  border-top: 1px solid;
+  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;
+}
+.metersWrap {
+  display: flex;
+  justify-content: space-between;
+  line-height: 37px;
+  .blueColor{
+    @include fontWeightSize(500,14px);
+    color: #4682FE;
+  }
+  .alignRight{
+    text-align: right;
+    opacity: .5;
+  }
+  .leftTitle {
+    @include fontWeightSize(400, 14px);
+  }
+  .rightInputMeters {
+    margin-right: 13px;
+    @include fontWeightSize(500, 13px);
+    color: #323643;
+    opacity: .5;
+    input {
+      border: none;
+      text-align: right;
+      color: #323643;
+      opacity: .8;
+    }
+  }
+}
+.btn{
+  margin-left: 24px;
+}
+</style>

src/views/index/toDoList.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="wrap" >
+    <ul id="dataList" class="dataList">
+      <li class="item" v-for="(item,i) in 4" :key="i">
+        <div class="left">
+          <div class="repairName"><span class="name">维修申请</span><span class="carCode">苏AB6768</span></div>
+          <div class="addressName">苏州老张汽车修理厂</div>
+          <div class="time">2023-05-12 12:30:30 张三</div>
+        </div>
+        <div class="right">
+          <button class="nopass" @click="noPass">不通过</button>
+          <button class="pass" @click="pass">通过</button>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import {getToDoList} from "@/api/order"
+export default {
+  name: "toDoList",
+  data(){
+    return{
+
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods:{
+    async getList(){
+      let result=await getToDoList()
+      console.log("result",result)
+    },
+    noPass(){
+      console.log("不通过")
+    },
+    pass(){
+      console.log("通过")
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+.wrap {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 13px 13px 0 13px;
+  background-color: #F4F5F7;
+}
+
+.dataList {
+  padding: 0;
+}
+
+.item {
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  width: 100%;
+  background: #FFFFFF;
+  box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
+  border-radius: 6px;
+  padding: 10px 13px;
+  box-sizing: border-box;
+}
+
+.repairName {
+  font-weight: 500;
+}
+
+.name {
+  font-size: 14px;
+  margin-right: 22px;
+}
+
+.carCode {
+  font-size: 12px;
+}
+
+.addressName {
+  margin-top: 8px;
+  margin-bottom: 5px;
+}
+
+.addressName,
+.time {
+  font-size: 12px;
+}
+
+button {
+  padding: 2px 8px;
+  @include fontWeightSize(500,12px);
+  border-radius: 3px;
+}
+
+.nopass {
+  background: white;
+  border: 1px solid #DDDDDD !important;
+  margin-right: 15px;
+}
+
+.pass {
+  border: none;
+  border: 1px solid #2A5094 !important;
+  background: #2A5094;
+  color: white;
+}
+
+
+</style>

src/views/index/vehicleAdd.vue

@@ -0,0 +1,255 @@
+<template>
+<div class="wrap">
+<div class="addContentWrap">
+  <div class="itemContent">
+    <div class="titleType">
+      <img class="startImg" src="@/assets/start.png" />
+      <span>车牌号</span>
+    </div>
+    <div class="checkContent">
+      <input placeholder="请输入车牌号" />
+    </div>
+  </div>
+  <div class="lineBot"></div>
+  <div class="itemContent">
+    <div class="titleType">
+      <img class="startImg" src="@/assets/start.png" />
+      <span>车辆类型</span>
+    </div>
+    <select id="myDropdown" @change="handleSelectChange()">
+      <option value="option1">一般平板</option>
+      <option value="option2">小轿车</option>
+      <option value="option3">大卡车</option>
+    </select>
+  </div>
+  <div class="lineBot"></div>
+  <div class="itemContent">
+    <div class="titleType">
+      <img class="startImg" src="@/assets/start.png" />
+      <span>是否参与中道聚合</span>
+    </div>
+    <div class="isJoin">
+      <van-radio-group v-model="radio3" @change="isChange"  class="joinWrap">
+        <van-radio name="参与" style="margin-right: 26px">
+          参与
+          <img
+              slot="icon"
+              slot-scope="props"
+              :src="props.checked ? activeIcon : inactiveIcon"
+          >
+        </van-radio>
+        <van-radio name="不参与">
+          不参与
+          <img
+              slot="icon"
+              slot-scope="props"
+              :src="props.checked ? activeIcon : inactiveIcon"
+          >
+        </van-radio>
+      </van-radio-group>
+    </div>
+  </div>
+  <div class="lineBot"></div>
+  <div class="itemContent">
+    <div class="titleType">
+      <img class="startImg" src="@/assets/start.png" />
+      <span>选择服务种类</span>
+    </div>
+  </div>
+  <div class="serviceType">
+    <div class="trailerService">
+      <div class="serviceline">
+        <span  class="service">拖车服务:</span>
+        <span class="line"></span>
+      </div>
+      <van-radio-group v-model="radio" @change="change" class="radioWrap">
+        <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-group>
+    </div>
+    <div class="smallRepairService">
+      <div  class="serviceline">
+        <span class="service">小修服务:</span>
+        <span class="line"></span>
+      </div>
+      <van-radio-group v-model="radio2" @change="change2" class="radioWrap">
+        <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"
+              :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-group>
+    </div>
+  </div>
+  <two-common-btn class="btn" @cancelClick="cancelBtn" @submitClick="submitBtn" />
+</div>
+</div>
+</template>
+
+<script>
+import {myMixins} from "@/utils/myMixins"
+import TwoCommonBtn from "@/components/twoBtnCommon.vue"
+export default {
+  name: "vehicleAdd",
+  mixins:[myMixins],
+  data(){
+    return{
+      radio: '故障——平板拖车',
+      radio2: '换胎',
+      radio3:'参与',
+      activeIcon: require('@/assets/check.png'),
+      inactiveIcon: require('@/assets/uncheck.png')
+
+    }
+  },
+  methods:{
+    change(e) {
+      console.log("拖车服务",e)
+    },
+    change2(e) {
+      console.log("小修服务",e)
+    },
+    isChange(e){
+      console.log("是否参与",e)
+    },
+    cancelBtn(){
+      console.log("取消车辆")
+    },
+    submitBtn(){
+      console.log("提交车辆")
+    }
+  },
+  components:{
+    TwoCommonBtn
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+@import "@/styles/common.scss";
+.wrap{
+@include wh(100%,100%);
+}
+.addContentWrap{
+  margin-left: 16px;
+  .itemContent{
+    display: flex;
+    justify-content: space-between;
+    line-height: 56px;
+    box-sizing: border-box;
+    padding-right: 25px;
+    .titleType{
+      @include fontWeightSize(500,14px);
+      color: #323643;
+    }
+    .isJoin{
+      display: flex;
+      .joinWrap{
+        display: flex;
+      }
+      img{
+        @include widHeiMar(16px,16px,6px)
+      }
+    }
+    .startImg{
+      @include widHeiMar(6px,6px,3px);
+      vertical-align: super;
+    }
+    input{
+      border: none;
+      text-align: right;
+      @include fontWeightSize(500,13px);
+      opacity: .5;
+    }
+  }
+  .lineBot{
+    @include wh(100%,1px);
+    background: #E9E9EA;
+    opacity: 0.6;
+  }
+  select{
+    border: none;
+  }
+  .serviceType{
+    @include fontWeightSize(500,13px);
+    margin-left: 15px;
+    .trailerService{
+      margin-bottom: 10px;
+    }
+    .serviceline{
+      @include flexCenter;
+      margin-bottom: 10px;
+    }
+    .item{
+     margin: 20px 0;
+      @include flexCenter;
+    }
+    .radioWrap{
+      margin-left: 10px;
+    }
+    .service{
+      opacity: .7;
+      color: #323643;
+      line-height: 18px;
+    }
+    .line{
+      display: inline-block;
+      @include wh(246px,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;
+    }
+    img{
+      @include widHeiMar(16px,16px,12px)
+    }
+  }
+  .btn{
+    margin-left: 8px;
+    width: 90%;
+    position: fixed;
+    bottom: 30px;
+  }
+}
+</style>

src/views/index/workOrderDetail.vue

@@ -0,0 +1,157 @@
+<template>
+<div class="wrap">
+  <div class="baseInfo common">
+    <div class="title">基本信息:</div>
+    <div class="line"></div>
+    <div class="infoWrap fontColor">
+      <div class="leftTitle">
+        <div class="leftItem">工单编号:</div>
+        <div class="leftItem">合同:</div>
+        <div class="leftItem">结算方式:</div>
+        <div class="leftItem">客户姓名:</div>
+        <div class="leftItem">客户电话:</div>
+        <div class="leftItem">车牌号:</div>
+        <div class="leftItem">车型品牌:</div>
+      </div>
+      <div class="rightContent">
+        <div class="rightItem" style="display: flex;align-items: center;">
+          <span id="copyText">ZD23097890987</span>
+          <img @click="copyText" src="@/assets/copy.png" style="width: 35px;height: 15px;margin-left: 10px"/>
+        </div>
+        <div class="rightItem">平安产险</div>
+        <div class="rightItem">合同月结</div>
+        <div class="rightItem">万女士</div>
+        <div class="rightItem">15234447878</div>
+        <div class="rightItem">沪A123456</div>
+        <div class="rightItem">奥迪 A6L</div>
+      </div>
+    </div>
+  </div>
+  <div class="serviceInfo common">
+    <div class="title">服务信息:</div>
+    <div class="line"></div>
+    <div class="infoContent">
+      <div class="item">
+        <span class="leftTitle fontColor">服务类型:</span><span class="rightContent">故障——拖车</span>
+      </div>
+      <div class="item">
+        <span class="leftTitle fontColor">车辆位于:</span><span class="rightContent">地面</span>
+      </div>
+      <div class="item">
+        <span class="leftTitle fontColor">事发地:</span><span class="rightContent">上海市高科西路650号</span>
+      </div>
+      <div class="item" style="align-items: baseline">
+        <span class="leftTitle fontColor">事发地补充:</span><span class="rightContent vehicleRemark" style="flex: 1">50公里免拖，超出部分费用按照市场价格由客户现场支付，原始手机号：15088752478,客户承担背车段路桥费。目的地不明确请师傅到现场核实清楚并回电反馈</span>
+      </div>
+      <div class="item">
+        <span class="leftTitle fontColor">目的地:</span><span class="rightContent">浙江省杭州市富阳区比亚迪海洋4s店</span>
+      </div>
+      <div class="item">
+        <span class="leftTitle fontColor">目的地补充:</span><span class="rightContent vehicleRemark">无</span>
+      </div>
+      <div class="item">
+        <span class="leftTitle fontColor">工单状态:</span><span class="rightContent orderStatus">师傅接单，待发车</span>
+      </div>
+      <div class="item">
+        <span class="leftTitle fontColor">服务车辆:</span><span class="rightContent">沪A123456</span>
+      </div>
+      <div class="item">
+        <span class="leftTitle fontColor">服务师傅:</span><span class="rightContent">周师傅/15234345656</span>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import {myMixins} from '@/utils/myMixins'
+export default {
+  name: "workOrderDetail",
+  mixins:[myMixins],
+  data(){
+    return{
+
+    }
+  },
+  methods:{
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+.wrap{
+  width: 100%;
+  height: 100%;
+  background-color: #F4F5F7;
+}
+.common{
+  background: #FFFFFF;
+  border-radius: 6px;
+  box-sizing: border-box;
+  padding: 11px 17px 15px 24px;
+}
+.fontColor{
+  @include fontWeightSize(400,12px);
+  color: #000000;
+  line-height: 27px;
+}
+.baseInfo{
+  @include wh(100%,250px);
+  margin-bottom: 12px;
+  .infoWrap{
+    display: flex;
+    .leftTitle{
+      margin-left: 5px;
+      margin-right: 6px;
+      @include wh(60px,189px);
+      opacity: .5;
+    }
+    .rightContent{
+      @include wh(90px,189px);
+    }
+  }
+}
+.serviceInfo{
+  @include wh(100%,356px);
+  .item{
+    display: flex;
+    align-items: center;
+  }
+  .infoContent{
+    .leftTitle{
+      display: block;
+      width: 72px;
+      opacity: .5;
+    }
+    .rightContent{
+      width: calc(100% - 90px);
+      @include fontWeightSize(500,12px);
+    }
+
+    .vehicleRemark{
+      @include fontWeightSize(400,11px);
+      opacity: 0.55;
+      color: #121212;
+      line-height: 14px;
+    }
+    .orderStatus{
+      color: #E69B0B;
+    }
+  }
+}
+.title{
+ @include fontWeightSize(500,14px);
+  color: #323643;
+  line-height: 20px;
+  opacity: .6;
+}
+.line{
+  @include wh(100%,2px);
+  opacity: 0.16;
+  border-bottom: 1px solid;
+  margin: 7px 0;
+  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>