lanan-repair-app/pages-order/orderDetail/orderDetail.vue
2024-10-21 18:12:03 +08:00

1187 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="card cardInfo carCard">
<view :class="{'end': ticketInfo.ticketsStatus == '02'}" class="orderFlag">
<template>
<image v-if="ticketInfo.ticketsStatus == '02'" mode="aspectFit" src="/static/icons/orderEnd.png"
style="width: 48rpx;height: 48rpx"></image>
<image v-else mode="aspectFit" src="/static/icons/orderIng.png"
style="width: 48rpx;height: 48rpx"></image>
<view class="flagBody">
<text>{{ ticketInfo.ticketsStatus == '02' ? '已完成' : ticketInfo.statusStr }}</text>
<text class="flagDesc" v-if="nowRepair.repairItemId">当前工单维修项目:{{ nowRepair.itemName }}</text>
</view>
</template>
</view>
<view v-if="wares && wares.length>0" v-for="item in wares" class="noReviewPart" @click="showReviewList(item)">
<u-icon color="#E8A321" name="error-circle-fill" size="14"></u-icon>
<text class="messageText">当前项目有待审批的配件申请单!</text>
<u-icon color="#E8A321" name="arrow-right" size="14"></u-icon>
</view>
<view class="carTitle">车辆信息</view>
<view class="carDetail">
<view class="carHeader">
<image v-show="ticketInfo.carInfo.logoImg" :src="imgUrlPrex + ticketInfo.carInfo.logoImg" class="carImage" mode="aspectFill"></image>
<view class="carHeaderRight">
<text class="carNumber">{{ ticketInfo.carNo }}</text>
<text class="carType">{{ ticketInfo.carBrandName }}</text>
</view>
</view>
<view class="carBody">
<view style="display: flex;align-items: center">
<view class="infoItem" style="flex: 1">
<view class="label">车架号</view>
<view class="value">{{ ticketInfo.carVin }}</view>
</view>
<!-- <view class="infoItem" style="flex: 1">-->
<!-- <view class="label">发动机号</view>-->
<!-- <view class="value">{{ ticketInfo.fdjNo }}</view>-->
<!-- </view>-->
<view class="infoItem" style="flex: 1">
<view class="label">注册日期</view>
<view class="value">{{ ticketInfo.carRegisterDate }}</view>
</view>
</view>
<template v-if="carInfo.showAll">
<view style="display: flex;align-items: center">
<view class="infoItem" style="flex: 1">
<view class="label">年检时间</view>
<view class="value">{{ ticketInfo.inspectionDate }}</view>
</view>
<view class="infoItem" style="flex: 1">
<view class="label">保险时间</view>
<view class="value">{{ ticketInfo.insuranceDate }}</view>
</view>
</view>
</template>
</view>
<view class="carFoot">
<template v-if="!carInfo.showAll">
<text @click="() => $set(carInfo, 'showAll', true)">展开</text>
<image mode="aspectFit" src="/static/icons/bottom.png" style="width: 28rpx;height: 28rpx"></image>
</template>
<template v-else>
<text @click="() => carInfo.showAll = false">收起</text>
<!--<image mode="aspectFit" src="/static/icons/bottom.png" style="width: 28rpx;height: 28rpx"></image>-->
</template>
</view>
</view>
</view>
<view class="card cardInfo userCard">
<view class="userTitle">客户信息</view>
<view class="userContainer">
<view style="display: flex;align-items: center">
<view class="infoItem" style="flex: 1">
<text class="label">姓名</text>
<text class="value">{{ ticketInfo.userName }}</text>
</view>
<view class="infoItem" style="flex: 1">
<text class="label">性别</text>
<text class="value">{{ ticketInfo.customerInfo.sex === '1' ? '女' : '男' }}</text>
</view>
</view>
<template v-if="userInfo.showAll">
<view style="display: flex;align-items: center">
<view class="infoItem" style="flex: 1">
<text class="label">联系方式</text>
<text class="value">{{ ticketInfo.userMobile }}</text>
</view>
<view class="infoItem" style="flex: 1">
<text class="label">生日</text>
<text class="value">{{ ticketInfo.birthday }}</text>
</view>
</view>
<view class="infoItem">
<text class="label">联系地址</text>
<text class="value">
{{ ticketInfo.customerInfo.address }}
</text>
</view>
</template>
</view>
<view v-if="loginUser.roleCodes.includes('weixiu') || loginUser.roleCodes.includes('service_advisor')||loginUser.roleCodes.includes('general_inspection')" class="userFoot">
<template v-if="!userInfo.showAll">
<text @click="() => $set(userInfo, 'showAll', true)">展开</text>
<image mode="aspectFit" src="/static/icons/bottom.png" style="width: 28rpx;height: 28rpx"></image>
</template>
<template v-else>
<text @click="() => userInfo.showAll = false">收起</text>
<!--<image mode="aspectFit" src="/static/icons/bottom.png" style="width: 28rpx;height: 28rpx"></image>-->
</template>
</view>
</view>
<view v-if="ticketInfo.projects && ticketInfo.projects.length > 0" class="card cardInfo projCard">
<view class="projTitle">维修项目</view>
<view class="projList">
<template>
<view v-for="item in ticketInfo.projects" :key="item.id" class="projEditItem">
<view class="projEditLine1">
<text>{{ item.itemName }}</text>
<text v-if="loginUser.roleCodes.includes('weixiu') || loginUser.roleCodes.includes('service_advisor')||loginUser.roleCodes.includes('general_inspection')" class="projAmount">¥{{ item.itemMoney }}</text>
</view>
<view class="projBaseInfo" v-if="loginUser.roleCodes.includes('weixiu') || loginUser.roleCodes.includes('service_advisor')||loginUser.roleCodes.includes('general_inspection')" >
<view>售价:{{ item.itemPrice || "" }}</view>
<view>数量:{{ item.itemCount || "" }}</view>
<!-- <view>单位:{{ item.itemUnit}}</view>-->
<view>折扣:{{ item.itemDiscount || "" }}</view>
<view>金额:{{ item.itemMoney || "" }}</view>
</view>
<view class="projEditFoot">
<view class="block1">
<template>
<view class="editPeople">
<view class="editForm">
<text class="label">销售人员</text>
<text >{{item.saleName || ""}}
</text>
</view>
<image v-if="isDetail == '0'" src="/static/icons/edit.png" style="width: 28rpx;height: 28rpx"
@click="editPeople('xs', item)"></image>
</view>
</template>
<template v-if="isDetail == '0'">
<image src="/pages-order/static/addIcon.png" style="width: 28rpx;height: 28rpx"></image>
<text class="addText" @click="editPeople('xs', item)">添加销售人员</text>
</template>
</view>
<view class="line"></view>
<view class="block2">
<template>
<view class="editPeople">
<view class="editForm">
<text class="label">施工人员</text>
<text >{{ item.repairNames || ""}}</text>
</view>
<image v-if="isDetail == '0'" src="/static/icons/edit.png" style="width: 28rpx;height: 28rpx"
@click="editPeople('sg', item)"></image>
</view>
</template>
<template v-if="isDetail == '0'">
<image src="/pages-order/static/addIcon.png" style="width: 28rpx;height: 28rpx"></image>
<text class="addText" @click="editPeople('sg', item)">添加施工人员</text>
</template>
</view>
</view>
</view>
</template>
</view>
</view>
<view v-if="ticketInfo.wares && ticketInfo.wares.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">
<template>
<view v-for="item in ticketInfo.wares" :key="item.id" class="projEditItem">
<view class="projEditLine1">
<text>{{ item.itemName }}</text>
<text class="projAmount">¥{{ item.itemMoney }}</text>
</view>
<view class="projBaseInfo">
<view>售价:{{ item.itemPrice || "" }}</view>
<view>数量:{{ item.itemCount || "" }}</view>
<view>单位:{{ getItemUnit(item.itemUnit) || ""}}</view>
<view>折扣:{{ item.itemDiscount || "" }}</view>
<view>金额:{{ item.itemMoney || "" }}</view>
</view>
</view>
</template>
</view>
</view>
<view v-if="isDetail == '1'" 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.typeStr }}【{{item.dealUserName}}】</text>
<!-- <text class="projAmount">${{ item.amount }}</text>-->
</view>
<view class="projBody">
<view class="projDate">
<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">
<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/sendSuccess.png"-->
<!-- style="width: 28rpx;height: 28rpx"></image>-->
<!-- <text style="color: #858BA0">已发送客户</text>-->
<!-- </template>-->
<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 v-if="isDetail == '0'" class="foot">
<view class="submit" @click="submit">保存工单</view>
</view>
</view>
<!-- 悬浮操作-->
<uni-fab v-if="content.length>0" ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
:direction="direction" @trigger="trigger" @fabClick="fabClick" />
<!-- 普通弹窗---拍照上传 -->
<uni-popup ref="popup" background-color="#fff">
<view class="popup-content">
<view class="dl-avatar-box">
<uni-file-picker :value="fileList" :sizeType="sizeType" @select="afterRead" @delete="deleteFile" limit="9" title="最多选择9张图片"></uni-file-picker>
</view>
<button type="primary" @click="saveWorkingItem">保存</button>
</view>
</uni-popup>
</view>
</template>
<script>
import VNavigationBar from '@/components/VNavigationBar.vue'
import {bus} from "@/utils/eventBus";
import request from '@/utils/request';
import upload from '@/utils/upload'
import {getOrderStatusText,formatDate,formatTimestamp,getDictTextByCodeAndValue,saveTicketsRecords,setStorageWithExpiry,getStorageWithExpiry} from "@/utils/utils";
import {getUserInfo,setJSONData} from '@/utils/auth'
import config from '@/config'
export default {
components: {
VNavigationBar,
},
data() {
return {
//以下是悬浮操作需要的参数
direction: 'vertical',
horizontal: 'right',
vertical: 'bottom',
pattern: {
color: '#7A7E83',
backgroundColor: '#fff',
selectedColor: '#007AFF',
buttonColor: '#007AFF',
iconColor: '#fff'
},
content: [],
//维修配件申请单
wares:[],
sizeType:['compressed'],
//上传的图片数组
fileList: [],
imgUrlPrex:config.baseImageUrl,
//是否详情页(0否1是)
isDetail:'1',
// role: 'yewu',
ticketId: '',
//工单信息
ticketInfo: null,
//当前维修的项目
nowRepair:{
repairItemId:"",
itemName:"",
},
//是否可以授权给客户看
canOpenCus:false,
//当前选择的操作:working-维修期间|done_half-阶段完成|done-全部完成递交下一维修班组选人维修
nowChooseOperate:"",
carInfo: {},
userInfo: {},
loginUser:{},
selectedProj: [
{
projName: '清洗内饰',
amount: '280',
date: '2024-10-20 12:00',
desc: '车辆已到维修厂,工作人员正准备开始维修',
imageList: [{filePath: ''}, {filePath: ''}, {filePath: ''}, {filePath: ''}, {filePath: ''}],
isSend: true,
// 待审核部件
examinePart: [],
id: 'projId1',
// 销售
salesman: [
{
name: '魏书豪',
id: '11111'
}
],
// 施工
constructor: []
},
{
projName: '清洗内饰',
amount: '280',
date: '2024-10-20 12:00',
desc: '车辆已到维修厂,工作人员正准备开始维修',
imageList: [{filePath: ''}, {filePath: ''}, {filePath: ''}, {filePath: ''}, {filePath: ''}],
isSend: false,
// 待审核部件
hasNoReviewPart: false,
id: 'projId2',
salesman: [],
constructor: []
},
{
projName: '清洗内饰',
amount: '280',
date: '2024-10-20 12:00',
desc: '车辆已到维修厂,工作人员正准备开始维修',
imageList: [],
isSend: false,
// 待审核部件
hasNoReviewPart: true,
id: 'projId3',
salesman: [],
constructor: []
}
]
};
},
onLoad(data) {
this.loginUser = getUserInfo()
console.log(this.loginUser,294)
console.log(data)
if (data.id) {
this.ticketId = data.id
}
if (data.isDetail){
this.isDetail = data.isDetail
}
},
onShow(){
//获取订单详情
this.getOrderDetail()
//获取当前订单是否有审批的配件
this.waresByTicket()
},
methods: {
/**
* 预览图片
*/
prviewImage(imgList, index) {
let urls = []
imgList.forEach(i => {
urls.push(this.imgUrlPrex+i.image)
})
uni.previewImage({
urls: urls,
current: index
});
},
submit (){
uni.navigateTo({
url: '/pages-home/home/home'
})
},
afterRead(file) {
for (let i = 0; i < file.tempFilePaths.length; i++) {
upload({
url:'/admin-api/infra/file/upload',
filePath: file.tempFilePaths[i]
}).then((res)=>{
this.fileList.push({
url: config.baseImageUrl+res.data
})
console.log(this.fileList)
})
}
},
deleteFile(file, index) {
console.log('删除文件');
this.fileList.splice(index, 1);
},
/**
* 保存工作记录信息
*/
async saveWorkingItem(){
try {
let fileStr = this.fileList.map(item=>item.url.replace(config.baseImageUrl,"")).join(",")
if("working"==this.nowChooseOperate){
//维修中拍照
const result = await saveTicketsRecords(this.ticketInfo.id,null,null,null,"sgz","施工中拍照记录",fileStr);
}else if("done_half"==this.nowChooseOperate || "done"==this.nowChooseOperate){
//阶段完成
const result = await saveTicketsRecords(this.ticketInfo.id, '03',this.nowRepair.repairItemId,"03","sgwczj","阶段完成",fileStr);
}
this.$refs.popup.close()
uni.showToast({
title: '操作成功',
icon: 'none'
})
if("done"==this.nowChooseOperate){
//全部完成,需要指派下一个维修人
setTimeout(()=>{
uni.navigateTo({
url: '/pages-order/choosePeople/choosePeople?id=' + this.ticketInfo.id +'&ifDetail=true'
})
},500)
}
console.error("result",result);
} catch (error) {
console.error(error);
}
},
/**
* 判断工单状态和角色控制显示什么操作按钮
*/
checkRoleOperate(){
this.content = []
if(this.loginUser.roleCodes.includes("service_advisor")){
//服务顾问
this.canOpenCus = true
}
if(this.loginUser.roleCodes.includes("weixiu")){
//维修管理员
this.canOpenCus = true
}
if(this.loginUser.roleCodes.includes("general_inspection")){
//维修总检
this.canOpenCus = true
}
if(this.loginUser.roleCodes.includes("repair_staff")){
//维修工角色
if(this.ticketInfo.nowRepairId==this.loginUser.id && "05"==this.ticketInfo.ticketsStatus){
//当前用户就是施工人,,订单状态处于维修中 可以提交配件申请
this.content.push({
text: '配件申请', active: false,code:"apply"
})
if("02"==this.ticketInfo.ticketsWorkStatus){
//当前正在施工,可以随时上传图片、也可以结束施工
this.content.push({
text: '拍照上传', active: false,code:"working"
})
this.content.push({
text: '阶段完成', active: false,code:"done_half"
})
this.content.push({
text: '全部完成', active: false,code:"done"
})
//查当前维修的项目
this.selectNowRepair()
}
if("03"==this.ticketInfo.ticketsWorkStatus || "04"==this.ticketInfo.ticketsWorkStatus) {
//当前子状态是已接单和已完成,可以开始施工
this.content.push({
text: '开始施工', active: false, code: "start"
})
}
}
}
},
/**
* 操作按钮点击事件
*/
trigger(e) {
console.log(e)
this.content[e.index].active = !e.item.active
this.nowChooseOperate = e.item.code
if("working"==e.item.code || "done_half"==e.item.code || "done"==e.item.code){
//维修过程中拍照上传、阶段完成、整体完成
this.fileList=[]
this.$refs.popup.open("bottom")
}else if("start" == e.item.code){
//开始施工
this.startWork(this.ticketInfo.id)
}
// uni.showModal({
// title: '提示',
// content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}${e.item.code}`,
// success: function(res) {
// if (res.confirm) {
// console.log('用户点击确定')
// } else if (res.cancel) {
// console.log('用户点击取消')
// }
// }
// })
},
/**
* 维修照片是否授权给客户看管理
*/
sendCusImgManage(itemList){
console.log(itemList)
setJSONData("chooseImg",itemList)
uni.navigateTo({
url: '/pages-order/chooseImg/chooseImg'
})
},
/**
* 点击悬浮操作按钮
*/
fabClick() {
},
/**
* 开始施工
*/
startWork(id){
let paramsObj = {ticketId:id}
//先查当前用户在本工单下有几个维修项目
request({
url: '/admin-api/repair/titem/listProject',
method: 'get',
params:paramsObj
}).then((res) => {
console.log(res)
if (res.code == 200 && res.data.length>0) {
if(res.data.length==1){
//只有1个直接开始施工
this.startWorkRequest(id,"02",res.data[0].id,"02","kssg","开始施工")
}else{
uni.showActionSheet({
itemList: res.data.map(m => m.itemName),
success: ({
tapIndex
}) => {
this.startWorkRequest(id,"02",res.data[tapIndex].id,"02","kssg","开始施工")
}
})
}
}else{
uni.showToast({
title: '操作失败,请联系管理员',
icon: 'none'
})
}
})
},
/**
* 开始施工请求后台
*/
async startWorkRequest(id,ticketsWorkStatus,itemId,itemStatus,recordType,remark){
try {
const result = await saveTicketsRecords(id,ticketsWorkStatus,itemId,itemStatus,recordType,remark,null);
debugger
//刷新数据
this.getOrderDetail()
} catch (error) {
console.error(error);
}
},
/**
* 是否开放给用户----配件单
*/
toPartShow(row){
console.log(row.detail.value)
const show = row.detail.value?'1':'0'
request({
url: '/admin-api/repair/tickets/show',
method: 'get',
params:{id:this.ticketId,show:show}
}).then((res)=>{
uni.showToast({
title: '设置成功!',
icon: 'none'
})
})
},
/**
* 查看订单详情
*/
getOrderDetail(){
request({
url: '/admin-api/repair/tickets/get',
method: 'get',
params:{id:this.ticketId}
}).then((res)=>{
let resultObj = res.data
resultObj.statusStr = getOrderStatusText(res.data.ticketsStatus)
//注册日期
if (null != resultObj.carInfo.carRegisterDate){
resultObj.carRegisterDate = formatDate(resultObj.carInfo.carRegisterDate)
}
//年检时间
if (null != resultObj.carInfo.inspectionDate){
resultObj.inspectionDate = formatDate(resultObj.carInfo.inspectionDate)
} else {
resultObj.inspectionDate = '未知'
}
//保险时间
if (null != resultObj.carInfo.insuranceDate) {
resultObj.insuranceDate = formatDate(resultObj.carInfo.insuranceDate)
} else {
resultObj.insuranceDate = '未知'
}
//生日
if (null != resultObj.customerInfo.birthday) {
resultObj.birthday = formatDate(resultObj.customerInfo.birthday)
} else {
resultObj.birthday = '未知'
}
//维修记录匹配数据字典
if (null != resultObj.records){
resultObj.records.map((item)=>{
item.typeStr = getDictTextByCodeAndValue('repair_records_type',item.type)
item.createTime = formatTimestamp(item.createTime)
})
}
this.ticketInfo = resultObj
//判断当前角色及工单状态显示操作按钮
this.checkRoleOperate()
})
},
/**
* 查询当前工单下的审批单
*/
waresByTicket(){
request({
url: '/admin-api/repair/tw/list',
method: 'get',
params:{ticketId:this.ticketId,status:'01'}
}).then((res)=>{
if (res.code == 200){
this.wares = res.data
}
})
},
/**
* 查当前维修的项目
*/
selectNowRepair(){
request({
url: '/admin-api/dl/repair-records/listByTicketId',
method: 'get',
params:{ticketId:this.ticketInfo.id}
}).then((res)=>{
if(res.code==200){
if(res.data && res.data.hasOwnProperty("repair_item_id")){
this.nowRepair.repairItemId = res.data.repair_item_id
this.nowRepair.itemName = res.data.item_name
}
}else{
uni.showToast({
title: res.msg,
icon: 'none'
})
}
})
},
editPeople(type, proj) {
bus.$off('choosePeople')
bus.$on('choosePeople', (data) => {
console.log('choosePeople', data)
console.log('type', type)
if (type === 'xs') {
proj.salesman = data
} else if (type === 'sg') {
proj.constructor = data
}
console.log('proj', proj)
})
uni.navigateTo({
url: `/pages-order/choosePeople/choosePeople?type=${type}&ticketId=${this.ticketId}`
// url: `/pages-order/choosePeople/choosePeople?type=${type}&id=${this.ticketId}`
})
},
//翻译配件单位
getItemUnit(unitCode){
if(unitCode){
let dictArray = getStorageWithExpiry("repair_unit");
if(null==dictArray || undefined==dictArray){
request({
url: '/admin-api/system/dict-data/type',
method: 'get',
tenantIdFlag:false,
params:{type:"repair_unit"}
}).then((res) => {
console.log(res)
if (res.code == 200) {
setStorageWithExpiry("repair_unit",res.data,3600)
let dictObj = dictArray.find(dict => dict.value == unitCode)
console.log(dictObj, "dictObj")
if (dictObj) {
return dictObj.label
} else {
return "未知数据"
}
}
})
}else{
let dictObj = dictArray.find(dict => dict.value == unitCode)
console.log(dictObj, "dictObj")
if (dictObj) {
return dictObj.label
} else {
return "未知数据"
}
}
}
},
/**
* 点击配件申请单提醒,查看相关配件
* @param wareId
*/
showReviewList(formData) {
uni.navigateTo({
url: '/pages-order/reviewList/reviewList?formData='+encodeURIComponent(JSON.stringify(formData))
})
}
}
}
</script>
<style lang="less" scoped>
.popup-content {
@include 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;
}
.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: 24rpx;
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 {
.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: 32rpx;
color: #333333;
}
.dl-ifcus{
font-size: 14px;
float: right;
}
.carCard {
.orderFlag {
display: flex;
align-items: center;
column-gap: 14rpx;
padding: 40rpx 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: 24rpx;
color: #999999;
}
}
}
.carDetail {
background-size: 100% 184rpx;
padding: 0 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: 32rpx;
color: #333333;
.carType {
font-weight: 500;
font-size: 28rpx;
color: #858BA0;
}
}
}
.carBody {
display: flex;
flex-direction: column;
row-gap: 30rpx;
padding-top: 30rpx;
border-top: 1rpx solid #DDDDDD;
}
.carFoot {
}
}
}
.projCard {
padding-bottom: 30rpx;
.projList {
padding: 0 30rpx;
display: flex;
flex-direction: column;
gap: 20rpx;
.projItem {
background: #FFFFFF;
border-radius: 4rpx 4rpx 4rpx 4rpx;
border: 2rpx solid #DDDDDD;
padding: 0 20rpx;
.projTop {
padding: 20rpx 0;
border-bottom: 1rpx solid #DDDDDD;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 500;
font-size: 28rpx;
color: #333333;
.projAmount {
font-weight: bold;
color: #0174F6;
}
}
.projBody {
padding-bottom: 20rpx;
.projDate {
font-weight: 500;
font-size: 24rpx;
color: #858BA0;
display: flex;
align-items: center;
column-gap: 10rpx;
padding: 20rpx 0;
}
.projDesc {
font-weight: 500;
font-size: 24rpx;
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 {
padding: 0 20rpx;
background: #F2F2F7;
border-radius: 4rpx 4rpx 4rpx 4rpx;
.projEditLine1 {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 500;
font-size: 28rpx;
color: #333333;
padding: 30rpx 0;
.projAmount {
color: #0174F6;
}
}
.projBaseInfo {
display: grid;
grid-template-columns: 1fr 1fr;
font-size: 24rpx;
color: #999999;
gap: 20rpx;
margin-bottom: 20rpx;
}
.projEditFoot {
padding: 30rpx 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: 24rpx;
color: #999999;
}
}
}
}
.line {
height: 28rpx;
width: 2rpx;
background-color: #DDDDDD;
}
}
}
}
}
.userCard {
.userContainer {
display: flex;
flex-direction: column;
row-gap: 30rpx;
margin: 0 30rpx;
padding-bottom: 10rpx;
}
}
.infoItem {
display: flex;
flex-direction: column;
.label {
font-weight: 500;
font-size: 28rpx;
color: #858BA0;
}
.value {
font-weight: 500;
font-size: 28rpx;
color: #333333;
}
}
.projFoot, .userFoot, .carFoot {
padding: 30rpx;
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;
}
}
}
</style>