first
This commit is contained in:
180
src/views/index/accounting.vue
Normal file
180
src/views/index/accounting.vue
Normal file
@ -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">车牌号： </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>
|
||||
84
src/views/index/carManage.vue
Normal file
84
src/views/index/carManage.vue
Normal file
@ -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>
|
||||
156
src/views/index/driverAdd.vue
Normal file
156
src/views/index/driverAdd.vue
Normal file
@ -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>
|
||||
140
src/views/index/driverManage.vue
Normal file
140
src/views/index/driverManage.vue
Normal file
@ -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">性 别:</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">状 态:</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">性 别:</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">状 态:</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>
|
||||
66
src/views/index/invoicingDetail.vue
Normal file
66
src/views/index/invoicingDetail.vue
Normal file
@ -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>
|
||||
94
src/views/index/invoicingNotify.vue
Normal file
94
src/views/index/invoicingNotify.vue
Normal file
@ -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>
|
||||
250
src/views/index/reAccounting.vue
Normal file
250
src/views/index/reAccounting.vue
Normal file
@ -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">车牌号： </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>
|
||||
132
src/views/index/reporting.vue
Normal file
132
src/views/index/reporting.vue
Normal file
@ -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>
|
||||
137
src/views/index/supplySettlement.vue
Normal file
137
src/views/index/supplySettlement.vue
Normal file
@ -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>
|
||||
116
src/views/index/toDoList.vue
Normal file
116
src/views/index/toDoList.vue
Normal file
@ -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>
|
||||
255
src/views/index/vehicleAdd.vue
Normal file
255
src/views/index/vehicleAdd.vue
Normal file
@ -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>
|
||||
157
src/views/index/workOrderDetail.vue
Normal file
157
src/views/index/workOrderDetail.vue
Normal file
@ -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>
|
||||
Reference in New Issue
Block a user