lanan-repair/pages-order/orderDetail/orderDetail.vue
2024-12-06 14:35:36 +08:00

1226 lines
36 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="container">
<view class="containerBody">
<VNavigationBar background-color="#fff" title="工单详情" title-color="#333"></VNavigationBar>
<view class="body" v-if="null!=ticketInfo">
<view class="orderInfo">
<view class="orderTypeInfo">
<text class="label">维修类别</text>
<text class="value" style="font-size: 35rpx">{{ ticketInfo.repairTypeText }}</text>
</view>
<view class="orderStateInfo">
<text>当前工单状态</text>
<text v-if="ticketInfo.statusStr=='待维修' || ticketInfo.statusStr=='已作废'" >{{ ticketInfo.statusStr }}</text>
<text v-else-if="ticketInfo.statusStr=='维修中'" style="color: #E8A321">{{ ticketInfo.statusStr }}</text>
<text v-else style="color: #2979FF;">{{ ticketInfo.statusStr }}</text>
</view>
<view class="orderDateInfo">
<text class="label">车辆进厂时间:</text>
<text class="value">{{ ticketInfo.inTime }}</text>
</view>
<view class="orderDateInfo">
<text class="label">预计竣工时间:</text>
<text class="value">{{ ticketInfo.outTime }}</text>
</view>
<view class="orderDateInfo" v-if="ticketInfo.realOverDate">
<text class="label">实际竣工时间:</text>
<text class="value">{{ ticketInfo.realOverDate }}</text>
</view>
</view>
<view class="card cardInfo carCard">
<view class="carDetail">
<view class="carHeader">
<image v-show="ticketInfo.carInfo.logoImg" :src="imgUrlPrex + ticketInfo.carInfo.logoImg" class="carImage" mode="aspectFit"></image>
<view class="carHeaderRight">
<text class="carNumber">{{ ticketInfo.carNo }}</text>
<text class="carType">{{ ticketInfo.carBrandName+" " }} <text v-if="ticketInfo.carInfo && ticketInfo.carInfo.carModel"> - {{ticketInfo.carInfo.carModel}}</text></text>
</view>
</view>
<view class="line"></view>
<view class="carBody">
<view style="display: flex;flex-direction: column;">
<view class="infoItem">
<view class="label">服务顾问</view>
<view class="value">{{ ticketInfo.adviserName }}</view>
</view>
<view class="infoItem" @click="callPhone(ticketInfo.linkPhone)">
<text class="label">服务顾问联系方式</text>
<text class="value">{{ ticketInfo.linkPhone }}</text>
</view>
<view class="infoItem">
<view class="label">车主</view>
<view class="value">{{ ticketInfo.userName }}</view>
</view>
<view class="infoItem">
<text class="label">联系方式</text>
<text class="value">{{ ticketInfo.userMobile }}</text>
</view>
<view class="infoItem">
<text class="label">性别</text>
<text class="value">{{ ticketInfo.customerInfo.sex === '1' ? '女' : '男' }}</text>
</view>
<view class="infoItem" v-if="ticketInfo.handleName">
<text class="label">经办人</text>
<text class="value">{{ ticketInfo.handleName }}</text>
</view>
<view class="infoItem" v-if="ticketInfo.handleMobile">
<text class="label">经办人电话</text>
<text class="value">{{ ticketInfo.handleMobile }}</text>
</view>
<view class="line"></view>
<view class="infoItem">
<view class="label">车架号</view>
<view class="value">{{ ticketInfo.carVin }}</view>
</view>
<view class="infoItem">
<view class="label">发动机号</view>
<view class="value">{{ ticketInfo.carInfo.engineNumber }}</view>
</view>
<view class="infoItem">
<view class="label">车辆注册日期</view>
<view class="value">{{ ticketInfo.carRegisterDate }}</view>
</view>
<view class="infoItem">
<view class="label">年检到期时间</view>
<view class="value">{{ ticketInfo.nextInspectionDate}}</view>
</view>
<view class="infoItem">
<view class="label">保险到期时间</view>
<view class="value">{{ ticketInfo.insuranceExpiryDate}}</view>
</view>
<view class="infoItem">
<view class="label">最近保养日期</view>
<view class="value">{{ ticketInfo.maintenanceDate}}</view>
</view>
<view class="infoItem">
<view class="label">最近保养公里数</view>
<view class="value">{{ ticketInfo.maintenanceMileage}}</view>
</view>
</view>
</view>
</view>
</view>
<!-- 维修工时项目-只读 -->
<view class="card projDateCard" v-if="ticketInfo.projectList && ticketInfo.projectList.length > 0">
<view class="projTitle">维修工时项目</view>
<view class="projTabs">
<view @click="chooseProjTab(index)" v-for="(item, index) in ticketInfo.projectList" :key="item.groupId" class="projTabItem" :class="{ active: index === activeProjTabKey }">
{{ item.groupName }}
<view v-if="index === activeProjTabKey" class="activeLine"></view>
</view>
</view>
<view class="projTabsBottomLine"></view>
<view class="workPerson">
<text>服务顾问:{{ticketInfo.projectList[activeProjTabKey].servicer}}</text>
<text>施工人员:{{ticketInfo.projectList[activeProjTabKey].worker}}</text>
</view>
<view class="projList">
<view class="projItem" v-for="(item, index) in ticketInfo.projectList[activeProjTabKey].wares.slice(0, 5)" :key="item.id">
<text class="projSeq">{{ index + 1 }}</text>
<text class="projName">{{ item.itemName }}</text>
</view>
<view v-if="ticketInfo.projectList[activeProjTabKey].showAll" class="projItem" v-for="(item, index) in ticketInfo.projectList[activeProjTabKey].wares.slice(5, ticketInfo.projectList[activeProjTabKey].wares.length)" :key="item.id">
<text class="projSeq">{{ 6 + index }}</text>
<text class="projName">{{ item.itemName }}</text>
</view>
</view>
<view v-if="ticketInfo.projectList[activeProjTabKey].wares.length > 5" class="action" @click="() => $set(ticketInfo.projectList[activeProjTabKey], 'showAll', !ticketInfo.projectList[activeProjTabKey].showAll)">
<text>{{ ticketInfo.projectList[activeProjTabKey].showAll ? '收起' : '展开' }}</text>
<uni-icons :type="ticketInfo.projectList[activeProjTabKey].showAll ? 'top' : 'bottom'" color="#0174f6"></uni-icons>
</view>
</view>
<!-- 更换配件清单-编辑 -->
<!-- <view v-if="loginUser.roleCodes.includes('repair_warehouse') && isDetail == '0'">-->
<!-- <view v-if="ticketInfo.waresGroupList && ticketInfo.waresGroupList.length > 0" class="card cardInfo projCard">-->
<!-- <view class="projTitle">更换配件清单 <view class="dl-ifcus" v-if="canOpenCus"><text>是否开放给客户</text><switch :checked="ticketInfo.partShow == '1'" style="transform:scale(0.7)" @change="toPartShow" /></view></view>-->
<!-- <view class="projList">-->
<!-- <uni-collapse ref="collapse" >-->
<!-- <uni-collapse-item v-for="(groupItem,groupIndex) in ticketInfo.waresGroupList" :key="groupItem.groupId" :title="groupItem.groupName+'('+groupItem.nums+'类配件,合计:'+groupItem.totalAmount+'元)'" >-->
<!-- <view class="content">-->
<!-- <template>-->
<!-- <view v-for="(item,index) in groupItem.wares" :key="item.id" class="projEditItem">-->
<!-- <view >-->
<!-- <view class="projEditLine1">-->
<!-- <text>{{ item.itemName }}</text>-->
<!-- <text class="projAmount"><text v-if="canSeeMoney">¥{{ item.itemMoney }}</text><uni-icons @click="delWares(item,groupIndex,index)" type="trash" size="25" style="color: #0174F6"></uni-icons></text>-->
<!-- </view>-->
<!-- <view class="projBaseInfo" >-->
<!-- <view v-if="canSeeMoney">售价:<input @input="onKeyInput('sj',item)" style="background: white;padding: 0 10rpx" type="decimal" placeholder="请输入售价" v-model="item.itemPrice" /></view>-->
<!-- <view>数量:<input @input="onKeyInput('sl',item)" style="background: white;padding: 0 10rpx" type="number" placeholder="请输入数量" v-model="item.itemCount" /></view>-->
<!-- <view>单位:<input style="padding: 0 10rpx" type="text" v-model="item.unitText" disabled /></view>-->
<!-- <view v-if="canSeeMoney">折扣:<input @input="onKeyInput('zk',item)" style="background: white;padding: 0 10rpx" type="decimal" placeholder="请输入折扣0-1" v-model="item.itemDiscount" /></view>-->
<!-- <view v-if="canSeeMoney">金额:{{ item.itemMoney || "" }}</view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </template>-->
<!-- </view>-->
<!-- </uni-collapse-item>-->
<!-- </uni-collapse>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- 更换配件清单 -->
<view class="card partCard" v-if="ticketInfo.partShow=='1' && ticketInfo.waresGroupList && ticketInfo.waresGroupList.length > 0">
<view class="projTitle">更换配件清单
</view>
<view class="projTabs">
<view @click="choosePartTab(index)" v-for="(item, index) in ticketInfo.waresGroupList" :key="item.groupId"
class="projTabItem" :class="{ active: index === activePartTabKey }">
{{ item.groupName }}
<view v-if="index === activePartTabKey" class="activeLine"></view>
</view>
</view>
<view class="projTabsBottomLine" style="margin-bottom: 0"></view>
<!-- 只读状态-->
<view class="projList">
<view class="projItem"
v-for="(item, index) in ticketInfo.waresGroupList[activePartTabKey].wares.slice(0, 5)" :key="item.id">
<text class="projSeq">{{ index + 1 }}</text>
<text class="projName">{{ item.itemName }}</text>
<text style="color: #636C8C;font-size: 32rpx;">x{{ item.itemCount || "0" }}</text>
</view>
<view v-if="ticketInfo.waresGroupList[activePartTabKey].showAll" class="projItem"
v-for="(item, index) in ticketInfo.waresGroupList[activePartTabKey].wares.slice(5, ticketInfo.waresGroupList[activePartTabKey].wares.length)"
:key="item.id">
<text class="projSeq">{{ 6 + index }}</text>
<text class="projName">{{ item.itemName }}</text>
<text style="color: #636C8C;font-size: 32rpx;">x{{ item.itemCount || "0" }}</text>
</view>
</view>
<view v-if="ticketInfo.waresGroupList[activePartTabKey].wares.length > 5" class="action"
@click="() => $set(ticketInfo.waresGroupList[activePartTabKey], 'showAll', !ticketInfo.waresGroupList[activePartTabKey].showAll)">
<text>{{ ticketInfo.waresGroupList[activePartTabKey].showAll ? '收起' : '展开' }}</text>
<uni-icons :type="ticketInfo.waresGroupList[activePartTabKey].showAll ? 'top' : 'bottom'"
color="#0174f6"></uni-icons>
</view>
</view>
<view class="card cardInfo projCard">
<view class="projTitle">维修进度记录表</view>
<view class="projList">
<view class="tushi-box">
<view class="tushi-item" style="color: #B7BDC6">待维修 </view>
<view class="tushi-item" style="color: #E8A321">维修中 </view>
<view class="tushi-item" style="color: #2979FF;">已完成</view>
</view>
<uni-steps :options="list2" active-color="#007AFF" :active="active" :doingActive="doingActive" direction="column" @prviewImage="prviewImage" @sendCusImgManage="sendCusImgManage"/>
</view>
</view>
<view class="card cardInfo projCard">
<view class="projTitle">维修记录</view>
<view class="projList">
<template>
<view v-for="item in ticketInfo.records" :key="item.id" class="projItem">
<view class="projTop">
<text class="projName">{{ item.type }}【{{item.roleName}}-{{item.dealUserName}}】</text>
</view>
<view class="projBody">
<view class="projDate" style="padding: 10rpx 0 0 0" v-if="item.projectName">
<text class="projDateText">本次维修项目:{{ item.projectName }}</text>
</view>
<view class="projDate" style="padding: 10rpx 0">
<image mode="aspectFit" src="/static/icons/date.png" style="width: 24rpx;height: 24rpx"></image>
<text class="projDateText">{{ item.createTime }}</text>
</view>
<template >
<view class="projDesc">
{{ item.remark }}
</view>
<view class="projImg" v-if="item.itemList && item.itemList.length>0">
<image v-for="(img, imgIndex) in item.itemList" @click="prviewImage(item.itemList,imgIndex)" :key="imgIndex" :src="imgUrlPrex + img.image"
class="projImgItem"></image>
</view>
<view class="projSend" v-if="item.itemList.length>0 && canOpenCus">
<template >
<image mode="aspectFit" src="/static/icons/send.png" style="width: 28rpx;height: 28rpx"></image>
<text style="color: #0174F6" @click="sendCusImgManage(item.itemList)">发送给客户</text>
</template>
</view>
</template>
</view>
</view>
</template>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import VNavigationBar from '@/components/VNavigationBar.vue'
import reservationOrder from '@/components/reservationOrder/reservationOrder.vue'
import TicketsItem from "@/pages-order/ticketsItem/ticketsItem.vue";
import {getOrderStatusText,formatDate,formatTimestamp,getDictTextByCodeAndValue} from "@/utils/utils";
import {
setStorageWithExpiry,
getStorageWithExpiry
} from '@/utils/auth'
import request from "@/utils/request";
import config from '@/config'
export default {
components: {
VNavigationBar,
reservationOrder,
TicketsItem
},
data() {
return {
ticketsId: null,
ticketInfo:null,
carInfo: {},
userInfo: {},
imgUrlPrex:config.baseImageUrl,
active: -1,
doingActive: -1,
//维修项目进度记录表
list2: [],
activeProjTabKey: 0,
activePartTabKey: 0,
};
},
onLoad(data){
if (data.ticketsId){
this.ticketsId = data.ticketsId
}
this.getTicketsInfo()
//查维修进度记录
this.getProjItem()
},
methods: {
chooseProjTab(index) {
this.activeProjTabKey = index
},
choosePartTab(index) {
this.activePartTabKey = index
},
callPhone(phone){
uni.makePhoneCall({
phoneNumber: phone
});
},
/**
* 预览图片
*/
prviewImage(imgList, index) {
let urls = []
imgList.forEach(i => {
urls.push(this.imgUrlPrex+i.image)
})
uni.previewImage({
urls: urls,
current: index
});
},
gotoEvaluate() {
uni.navigateTo({
url: '/pages-order/orderDetail/evaluate'
})
},
buildRecords(resultObj){
resultObj.records.map((item)=>{
item.createTime = formatTimestamp(item.createTime)
let canReadImg =item.itemList.filter((img)=>{
return img.isOpen=='1'
})
item.itemList = canReadImg
})
this.ticketInfo = resultObj
console.log(this.ticketInfo,"this.ticketInfo")
},
/**
* 查看维修进度记录
*/
getProjItem(){
request({
url: '/app-api/repair/titem/getProjList',
method: 'get',
params:{ticketId:this.ticketsId},
tenantIdFlag:false
}).then((res)=>{
if(res.code==200){
this.list2 = []
//当前在修的项目
let endIndex = -1
for (let i = 0; i < res.data.length; i++) {
let thisObj = res.data[i]
thisObj.title = thisObj.itemName
if(thisObj.itemStatus=='03'){
//这个项目已处理完毕,
endIndex = i
thisObj.desc = formatTimestamp(thisObj.updateTime)
}else if(thisObj.itemStatus=='02'){
//正在处理中
this.doingActive = i
}
this.list2.push(thisObj)
}
this.active = endIndex
console.log(this.list2,"thisObj.itemStatus=='02'")
}
})
},
getTicketsInfo(){
request({
url: '/userClient/repair/tickets/get',
method: 'get',
params:{id:this.ticketsId},
tenantIdFlag:false
}).then((res)=>{
let resultObj = res.data
resultObj.statusStr = getOrderStatusText(res.data.ticketsStatus)
//注册日期
if (null != resultObj.carInfo.carRegisterDate){
resultObj.carRegisterDate = formatDate(resultObj.carInfo.carRegisterDate)
}else{
resultObj.carRegisterDate = '未知'
}
//进场日期
if (null != resultObj.inTime){
resultObj.inTime = formatDate(resultObj.inTime)
}else{
resultObj.inTime = '未知'
}
//最近保养日期
if (null != resultObj.maintenanceDate){
resultObj.maintenanceDate = formatDate(resultObj.maintenanceDate)
}else{
resultObj.maintenanceDate = '未知'
}
//最近保养公里数
if (!resultObj.maintenanceMileage){
resultObj.maintenanceMileage = '未知'
}
//预计竣工日期
if (null != resultObj.outTime){
resultObj.outTime = formatDate(resultObj.outTime)
}else{
resultObj.outTime = '未知'
}
//年检时间
console.log(resultObj.carInfo)
if (null != resultObj.carInfo.nextInspectionDate){
resultObj.nextInspectionDate = formatDate(resultObj.carInfo.nextInspectionDate)
} else {
resultObj.nextInspectionDate = '未知'
}
//保险时间
if (null != resultObj.carInfo.insuranceExpiryDate) {
resultObj.insuranceExpiryDate = formatDate(resultObj.carInfo.insuranceExpiryDate)
} else {
resultObj.insuranceExpiryDate = '未知'
}
//生日
if (null != resultObj.customerInfo.birthday) {
resultObj.birthday = formatDate(resultObj.customerInfo.birthday)
} else {
resultObj.birthday = '未知'
}
//维修记录格式化时间
if (null != resultObj.records){
resultObj.records.map((item)=>{
item.createTime = formatTimestamp(item.createTime)
})
}
console.log(resultObj,"resultObj")
this.buildRecords(resultObj)
})
}
},
}
</script>
<style lang="less" scoped>
.popup-content {
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
height: auto;
background-color: #fff;
}
.container {
height: 100%;
background-color: #F3F5F7;
.containerBody {
height: 100%;
display: flex;
flex-direction: column;
}
.body {
flex: 1;
height: 0;
overflow: auto;
position: relative;
background-size: 100% 600rpx;
background: linear-gradient(180deg, #CEE5FF 0%, rgba(206, 229, 255, 0) 100%) no-repeat;
}
.card {
background: #FFFFFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
margin: 20rpx 32rpx;
}
.phone {
background: #0174F6;
.phoneHeader {
padding: 20rpx 30rpx;
.title {
font-weight: bold;
font-size: 32rpx;
color: #FFFFFF;
margin-bottom: 10rpx;
}
.desc {
font-weight: 500;
font-size: 28rpx;
color: rgba(255, 255, 255, 0.7);
}
}
.phoneBody {
background: #FFFFFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
padding: 0 30rpx;
.searchBox {
padding: 40rpx 0;
border-bottom: 1rpx solid #EEEEEE;
}
.btn {
padding: 40rpx 0;
display: flex;
align-items: center;
justify-content: center;
column-gap: 10rpx;
font-weight: 500;
font-size: 32rpx;
color: #0174F6;
.btnIcon {
width: 32rpx;
height: 32rpx;
}
}
}
}
.cardInfo {
overflow: hidden;
.noReviewPart {
padding: 10rpx 36rpx 10rpx 36rpx;
display: flex;
align-items: center;
column-gap: 10rpx;
margin-top: 10rpx;
background: #FFF6E7;
border-radius: 4rpx 4rpx 4rpx 4rpx;
font-weight: 500;
font-size: 28rpx;
color: #E8A321;
.messageText {
flex: 1;
width: 0;
}
}
&.none {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
.cardNoneIcon {
width: 336rpx;
}
.btn {
position: absolute;
bottom: 40rpx;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
column-gap: 10rpx;
font-weight: 500;
font-size: 28rpx;
color: #0174F6;
}
}
}
.projTitle, .userTitle, .carTitle {
padding: 30rpx;
font-weight: bold;
font-size: 36rpx;
color: #333333;
}
.dl-ifcus{
font-size: 14px;
float: right;
}
.carCard {
.orderFlag {
display: flex;
align-items: center;
column-gap: 14rpx;
padding: 20rpx 30rpx;
background: #FFFBF3;
border-radius: 8rpx 8rpx 0rpx 0rpx;
border-top: 8rpx solid #E8A321;
&.end {
border-top: 8rpx solid #17DBB1;
background-color: #E3FFF9;
}
.flagBody {
display: flex;
flex-direction: column;
row-gap: 10rpx;
font-weight: bold;
font-size: 32rpx;
color: #333333;
.flagDesc {
font-weight: 500;
font-size: 28rpx;
color: #999999;
}
}
}
.carDetail {
background-size: 100% 184rpx;
padding: 30rpx 30rpx;
.carHeader {
border-radius: 8rpx 8rpx 8rpx 8rpx;
display: flex;
align-items: center;
column-gap: 20rpx;
padding-bottom: 30rpx;
.carImage {
width: 192rpx;
height: 120rpx;
//background: #F2F2F7;
border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.carHeaderRight {
display: flex;
flex-direction: column;
row-gap: 20rpx;
font-weight: bold;
font-size: 36rpx;
color: #333333;
.carType {
font-weight: 500;
font-size: 32rpx;
color: #858BA0;
}
}
}
.line {
height: 1rpx;
background-color: #ddd;
}
.carBody {
display: flex;
flex-direction: column;
row-gap: 30rpx;
padding-top: 30rpx;
}
.carFoot {
}
}
}
.projCard {
padding-bottom: 30rpx;
.projList {
padding: 0 20rpx;
display: flex;
flex-direction: column;
//gap: 20rpx;
.tushi-box{
font-weight: 500;
font-size: 32rpx;
line-height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
}
.tushi-item{
padding: 0 20rpx;
color: #606266;
}
.projItem {
background: #FFFFFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
border: 1rpx solid #DDDDDD;
padding: 0 20rpx;
margin-bottom: 10rpx;
.projTop {
padding: 20rpx 0;
border-bottom: 1rpx solid #eee;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 500;
font-size: 32rpx;
color: #333333;
.projAmount {
font-weight: bold;
color: #0174F6;
}
}
.projBody {
padding-bottom: 20rpx;
.projDate {
font-weight: 500;
font-size: 30rpx;
color: #636C8C;
display: flex;
align-items: center;
column-gap: 10rpx;
padding: 20rpx 0;
}
.projDesc {
font-weight: 500;
font-size: 30rpx;
color: #858BA0;
}
.projImg {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, 120rpx);
justify-content: space-between;
gap: 20rpx;
padding: 20rpx 0;
.projImgItem {
width: 120rpx;
height: 120rpx;
background-color: #efefef;
}
}
.projSend {
display: flex;
align-items: center;
font-weight: 500;
font-size: 28rpx;
column-gap: 8rpx;
}
}
}
.projEditItem {
margin-bottom: 17rpx;
padding: 0 20rpx;
background: #F2F2F7;
border-radius: 4rpx 4rpx 4rpx 4rpx;
position: relative;
.del-proj-box{
position: absolute;
top: -10px;
right: -10px;
}
.del-wares-box{
position: absolute;
top: 0;
right: 0;
}
.projEditLine1 {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 500;
font-size: 28rpx;
color: #333333;
padding: 15rpx 0;
.projAmount {
color: #0174F6;
}
}
.projBaseInfo {
display: grid;
grid-template-columns: 1fr 1fr;
font-size: 28rpx;
color: #999999;
gap: 20rpx;
margin-bottom: 20rpx;
}
.projEditFoot {
padding: 10rpx 0;
border-top: 1px solid #DDDDDD;
display: flex;
align-items: center;
column-gap: 10rpx;
.block1, .block2 {
flex: 1;
width: 0;
display: flex;
align-items: center;
justify-content: center;
column-gap: 8rpx;
font-size: 28rpx;
color: #0174F6;
line-height: 28rpx;
.editPeople {
flex: 1;
width: 0;
display: flex;
justify-content: space-between;
align-items: center;
.editForm {
display: flex;
flex-direction: column;
row-gap: 10rpx;
font-size: 28rpx;
color: #333333;
.label {
font-size: 28rpx;
color: #999999;
}
}
}
}
.line {
height: 28rpx;
width: 2rpx;
background-color: #DDDDDD;
}
}
}
}
}
.projEditItem {
//margin-bottom: 25rpx;
padding: 0 20rpx 10rpx 20rpx;
border-bottom: 1rpx solid #F2F2F7;
//background: #F2F2F7;
border-radius: 4rpx 4rpx 4rpx 4rpx;
position: relative;
.del-proj-box{
position: absolute;
top: -10px;
right: -10px;
}
.del-wares-box{
position: absolute;
top: 0;
right: 0;
}
.projEditLine1 {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 500;
font-size: 28rpx;
color: #333333;
padding: 15rpx 0;
.projAmount {
color: #0174F6;
}
}
.projBaseInfo {
display: grid;
grid-template-columns: 1fr 1fr;
font-size: 28rpx;
color: #999999;
gap: 20rpx;
margin-bottom: 20rpx;
}
.projEditFoot {
padding: 10rpx 0;
border-top: 1px solid #DDDDDD;
display: flex;
align-items: center;
column-gap: 10rpx;
.block1, .block2 {
flex: 1;
width: 0;
display: flex;
align-items: center;
justify-content: center;
column-gap: 8rpx;
font-size: 28rpx;
color: #0174F6;
line-height: 28rpx;
.editPeople {
flex: 1;
width: 0;
display: flex;
justify-content: space-between;
align-items: center;
.editForm {
display: flex;
flex-direction: column;
row-gap: 10rpx;
font-size: 28rpx;
color: #333333;
.label {
font-size: 28rpx;
color: #999999;
}
}
}
}
.line {
height: 28rpx;
width: 2rpx;
background-color: #DDDDDD;
}
}
}
.projDateCard, .partCard {
line-height: 1;
.projTabs {
display: flex;
overflow: scroll;
.projTabItem {
padding: 10rpx 20rpx 30rpx;
flex-shrink: 0;
font-weight: 500;
font-size: 32rpx;
color: #636C8C;
&.active {
font-weight: bold;
color: #0174F6;
position: relative;
}
.activeLine {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 36rpx;
height: 8rpx;
background: #0174F6;
border-radius: 4rpx 4rpx 4rpx 4rpx;
}
}
}
.projTabsBottomLine {
width: 686rpx;
height: 1rpx;
background-color: #eee;
margin-bottom: 20rpx;
}
.workPerson {
width: 646rpx;
margin: 0 auto;
padding: 30rpx 20rpx;
background: #F3F5F7;
border-radius: 6rpx 6rpx 6rpx 6rpx;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
font-weight: 500;
font-size: 30rpx;
color: #636C8C;
}
.projList {
padding: 0 20rpx;
.projItem {
padding: 40rpx 0;
font-weight: 500;
font-size: 32rpx;
line-height: 40rpx;
color: #333333;
border-bottom: 1rpx solid #EEEEEE;
display: flex;
column-gap: 10rpx;
}
.projSeq {
width: 40rpx;
height: 40rpx;
background: #0174F6;
border-radius: 50%;
display: inline-block;
text-align: center;
line-height: 40rpx;
font-weight: 500;
font-size: 16px;
color: #FFFFFF;
}
.projName {
flex: 1;
width: 0;
word-break: break-all;
}
.projItem:last-child {
border-bottom: none;
}
}
.action {
font-weight: 500;
font-size: 30rpx;
color: #0174F6;
text-align: center;
padding-bottom: 30rpx;
}
}
.userCard {
.userContainer {
display: flex;
flex-direction: column;
row-gap: 30rpx;
margin: 0 30rpx;
padding-bottom: 10rpx;
}
}
.infoItem {
padding: 20rpx 0;
display: flex;
justify-content: space-between;
font-weight: 500;
font-size: 32rpx;
line-height: 1;
.label {
color: #636C8C;
}
.value {
color: #333333;
}
}
.projFoot, .userFoot, .carFoot {
padding: 20rpx;
font-weight: 500;
font-size: 28rpx;
color: #0174F6;
display: flex;
align-items: center;
justify-content: center;
column-gap: 6rpx;
}
.foot {
padding: 30rpx;
background-color: #fff;
.submit {
margin: 0 auto;
width: 510rpx;
height: 76rpx;
background: #0174F6;
border-radius: 38rpx 38rpx 38rpx 38rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
color: #FFFFFF;
}
}
.formItem {
padding: 40rpx 0;
margin: 0 32rpx;
border-bottom: 1rpx solid #EEEEEE;
}
.formLabel {
font-weight: 500;
font-size: 28rpx;
color: #333333;
padding-bottom: 20rpx;
}
.edit-proj-input{
background: white;
width: 90%;
padding: 3rpx 5rpx;
border-radius: 5px;
}
}
.orderInfo {
padding: 0 32rpx;
margin: 40rpx 0;
line-height: 1;
display: flex;
flex-direction: column;
.orderTypeInfo {
padding: 10rpx 0;
font-weight: bold;
font-size: 40rpx;
color: #333333;
}
.orderStateInfo {
padding: 10rpx 0;
font-weight: 500;
font-size: 32rpx;
color: #666666;
}
.orderDateInfo {
padding: 10rpx 0;
font-weight: 500;
font-size: 32rpx;
color: #0174F6;
}
}
.processCard {
line-height: 1;
.tushi-box {
display: flex;
align-items: center;
column-gap: 40rpx;
justify-content: center;
padding-bottom: 30rpx;
font-weight: 500;
font-size: 32rpx;
line-height: 40rpx;
}
.processList {
padding: 0 20rpx;
}
.processItem {
display: flex;
column-gap: 14rpx;
margin-bottom: 20rpx;
display: flex;
align-items: stretch;
.left {
padding-bottom: 24rpx;
display: flex;
flex-direction: column;
row-gap: 8rpx;
.processSeq {
width: 32rpx;
height: 32rpx;
background: #0174F6;
border-radius: 18rpx 18rpx 18rpx 18rpx;
font-weight: 500;
font-size: 28rpx;
color: #FFFFFF;
line-height: 32rpx;
text-align: center;
}
.line {
flex: 1;
height: 0;
width: 2rpx;
background-color: #0174f6;
margin: 0 auto;
}
}
.right {
padding-bottom: 20rpx;
border-bottom: 1rpx solid #eee;
display: flex;
flex-direction: column;
row-gap: 20rpx;
.processName {
font-weight: 500;
font-size: 32rpx;
color: #333333;
}
.processDate {
font-weight: 500;
font-size: 28rpx;
color: #858BA0;
}
.processImgList {
display: flex;
gap: 10rpx;
}
.processImgItem {
width: 120rpx;
height: 120rpx;
background-color: #eee;
}
.processSendUser {
display: flex;
column-gap: 10rpx;
font-weight: 500;
font-size: 32rpx;
color: #0174F6;
}
}
}
}
</style>