lanan-repair/pages-order/orderDetail/orderDetail.vue
2024-10-24 16:44:45 +08:00

777 lines
22 KiB
Vue

<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">当前工单维修项目{{ ticketInfo.flag == '02' ? '已全部完成' : ticketInfo.statusStr }}</text>
</view>
</template>
</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>
</template>
</view>
<view 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>
</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 class="projAmount" v-if="item.itemMoney">¥{{ 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 class="projEditFoot">
<view class="block1">
<template>
<view class="editPeople">
<view class="editForm">
<text class="label">销售人员</text>
<text >{{item.saleName || ""}}
</text>
</view>
</view>
</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>
</view>
</template>
</view>
</view>
</view>
</template>
</view>
</view>
<view v-if="ticketInfo.partShow=='1' && ticketInfo.wares && ticketInfo.wares.length > 0" class="card cardInfo projCard">
<view class="projTitle">维修配件 </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" v-if="item.itemMoney">¥{{ 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 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.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" :key="imgIndex" @click="prviewImage(item.itemList,imgIndex)" :src="imgUrlPrex + img.image"
class="projImgItem"></image>
</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,
};
},
onLoad(data){
if (data.ticketsId){
this.ticketsId = data.ticketsId
}
this.getTicketsInfo()
},
methods: {
/**
* 预览图片
*/
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
},
getTicketsInfo(){
request({
url: '/userClient/repair/tickets/get',
method: 'get',
params:{id:this.ticketsId}
}).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 = '未知'
}
this.buildRecords(resultObj)
})
}
},
//翻译配件单位
getItemUnit(unitCode){
if(unitCode){
let dictArray = getStorageWithExpiry("repair_unit");
if(null==dictArray || undefined==dictArray){
request({
url: '/app-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 "未知数据"
}
}
}
}
}
</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;
}
.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;
}
.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>