532 lines
15 KiB
Vue
532 lines
15 KiB
Vue
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
<view class="containerBody">
|
||
|
|
<VNavigationBar background-color="rgba(0,0,0,0)" title="新建工单" title-color="#333"></VNavigationBar>
|
||
|
|
<view class="body">
|
||
|
|
<view class="card phone">
|
||
|
|
<view class="phoneHeader">
|
||
|
|
<view class="title">查找手机号</view>
|
||
|
|
<view class="desc">根据手机号查找/建立客户信息</view>
|
||
|
|
</view>
|
||
|
|
<view class="phoneBody">
|
||
|
|
<view class="searchBox">
|
||
|
|
<input v-model="phone" placeholder="请输入手机号码" type="tel">
|
||
|
|
</view>
|
||
|
|
<view class="btn">
|
||
|
|
<image class="btnIcon" mode="aspectFit" src="/pages-order/static/search.png"></image>
|
||
|
|
确认查找
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view :class="{ 'none': !carList || carList.length === 0 }" class="card cardInfo carCard">
|
||
|
|
<template v-if="!carList || carList.length === 0">
|
||
|
|
<image class="cardNoneIcon" mode="widthFix" src="/pages-order/static/carNoneIcon.png"></image>
|
||
|
|
<view class="btn">
|
||
|
|
<image mode="aspectFit" src="/pages-order/static/addIcon.png" style="width: 28rpx;height: 28rpx"></image>
|
||
|
|
<text @click="editCarInfo()">添加车辆信息</text>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<view class="carTitle">车辆信息</view>
|
||
|
|
<view class="carListTab">
|
||
|
|
<view v-for="(item, index) in carList" :key="index" :class="{'active': activeCarIndex === index}"
|
||
|
|
class="carTabItem" @click="() => activeCarIndex = index">
|
||
|
|
<image :src="item.image" class="carImage" mode="aspectFit"></image>
|
||
|
|
<text>{{ item.licenseNumber }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="carDetail">
|
||
|
|
<view class="carHeader">
|
||
|
|
<image :src="carList[activeCarIndex].image" class="carImage" mode="aspectFill"></image>
|
||
|
|
<view class="carHeaderRight">
|
||
|
|
<text class="carNumber">{{ carList[activeCarIndex].licenseNumber }}</text>
|
||
|
|
<text class="carType">{{ carList[activeCarIndex].carCategory }}</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">{{ carList[activeCarIndex].cjNo }}</view>
|
||
|
|
</view>
|
||
|
|
<view class="infoItem" style="flex: 1">
|
||
|
|
<view class="label">发动机号</view>
|
||
|
|
<view class="value">{{ carList[activeCarIndex].fdjNo }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view style="display: flex;align-items: center">
|
||
|
|
<view class="infoItem" style="flex: 1">
|
||
|
|
<view class="label">年检时间</view>
|
||
|
|
<view class="value">{{ carList[activeCarIndex].njDate }}</view>
|
||
|
|
</view>
|
||
|
|
<view class="infoItem" style="flex: 1">
|
||
|
|
<view class="label">保险时间</view>
|
||
|
|
<view class="value">{{ carList[activeCarIndex].bxDate }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="infoItem">
|
||
|
|
<view class="label">注册日期</view>
|
||
|
|
<view class="value">{{ carList[activeCarIndex].zcrqDate }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="carFoot">
|
||
|
|
<image mode="aspectFit" src="/static/icons/edit.png" style="width: 28rpx;height: 28rpx"></image>
|
||
|
|
<text @click="editCarInfo(activeCarIndex)">修改信息</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view :class="{ 'none': !userInfo }" class="card cardInfo userCard">
|
||
|
|
<template v-if="!userInfo">
|
||
|
|
<image class="cardNoneIcon" mode="widthFix" src="/pages-order/static/userNone.png"></image>
|
||
|
|
<view class="btn">
|
||
|
|
<image mode="aspectFit" src="/pages-order/static/addIcon.png" style="width: 28rpx;height: 28rpx"></image>
|
||
|
|
<text @click="editUserInfo()">添加客户信息</text>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<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">{{ userInfo.name }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="infoItem" style="flex: 1">
|
||
|
|
<text class="label">性别</text>
|
||
|
|
<text class="value">{{ userInfo.sex === '1' ? '女' : '男' }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view style="display: flex;align-items: center">
|
||
|
|
<view class="infoItem" style="flex: 1">
|
||
|
|
<text class="label">联系方式</text>
|
||
|
|
<text class="value">{{ userInfo.phone }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="infoItem" style="flex: 1">
|
||
|
|
<text class="label">出生年月</text>
|
||
|
|
<text class="value">{{ userInfo.birthday }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="infoItem">
|
||
|
|
<text class="label">联系地址</text>
|
||
|
|
<text class="value">
|
||
|
|
{{ userInfo.provinceName }} {{ userInfo.cityName }} {{ userInfo.areaName }} {{ userInfo.address }}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="userFoot">
|
||
|
|
<image mode="aspectFit" src="/static/icons/edit.png" style="width: 28rpx;height: 28rpx"></image>
|
||
|
|
<text @click="editUserInfo(userInfo)">修改信息</text>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
</view>
|
||
|
|
<view :class="{ 'none': !selectedProj || selectedProj.length === 0 }" class="card cardInfo projCard">
|
||
|
|
<template v-if="!selectedProj || selectedProj.length === 0">
|
||
|
|
<image class="cardNoneIcon" mode="widthFix" src="/pages-order/static/projectNone.png"></image>
|
||
|
|
<view class="btn">
|
||
|
|
<image mode="aspectFit" src="/pages-order/static/addIcon.png" style="width: 28rpx;height: 28rpx"></image>
|
||
|
|
<text @click="addProj()">添加维修项目</text>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<view class="projTitle">维修项目</view>
|
||
|
|
<view class="projList">
|
||
|
|
<view v-for="item in selectedProj" :key="item.id" class="projItem">
|
||
|
|
{{ item.name }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="projFoot">
|
||
|
|
<image mode="aspectFit" src="/static/icons/edit.png" style="width: 28rpx;height: 28rpx"></image>
|
||
|
|
<text @click="addProj(selectedProj)">修改信息</text>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<project-picker ref="proj" @confirm="projConfirm"></project-picker>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="footer">
|
||
|
|
<view class="btn" @click="submit">创建工单</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import VNavigationBar from '@/components/VNavigationBar.vue'
|
||
|
|
import ProjectPicker from "@/components/projectPicker.vue";
|
||
|
|
import {bus} from "@/utils/eventBus";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
ProjectPicker,
|
||
|
|
VNavigationBar,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
phone: '',
|
||
|
|
carList: [
|
||
|
|
{
|
||
|
|
licenseNumber: '川A 184AO1',
|
||
|
|
carCategory: '一汽奥迪 2024款 A6L',
|
||
|
|
cjNo: '124105112425',
|
||
|
|
fdjNo: '124109581905',
|
||
|
|
njDate: '2024年',
|
||
|
|
bxDate: '2024年',
|
||
|
|
zcrqDate: '2023-10-20',
|
||
|
|
image: ''
|
||
|
|
},
|
||
|
|
{
|
||
|
|
licenseNumber: '川A 34225A',
|
||
|
|
carCategory: '一汽奥迪 2024款 A6L',
|
||
|
|
cjNo: '124105112425',
|
||
|
|
fdjNo: '124109581905',
|
||
|
|
njDate: '2024年',
|
||
|
|
bxDate: '2024年',
|
||
|
|
zcrqDate: '2023-10-20',
|
||
|
|
image: ''
|
||
|
|
},
|
||
|
|
{
|
||
|
|
licenseNumber: '川A 34225A',
|
||
|
|
carCategory: '一汽奥迪 2024款 A6L',
|
||
|
|
cjNo: '124105112425',
|
||
|
|
fdjNo: '124109581905',
|
||
|
|
njDate: '2024年',
|
||
|
|
bxDate: '2024年',
|
||
|
|
zcrqDate: '2023-10-20',
|
||
|
|
image: ''
|
||
|
|
}
|
||
|
|
],
|
||
|
|
activeCarIndex: 0,
|
||
|
|
userInfo: null,
|
||
|
|
selectedProj: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(data) {
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
submit() {
|
||
|
|
uni.showToast({
|
||
|
|
title: '创建成功',
|
||
|
|
icon: 'success'
|
||
|
|
})
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.navigateBack();
|
||
|
|
}, 600)
|
||
|
|
},
|
||
|
|
editCarInfo(index) {
|
||
|
|
bus.$off('updateCarInfo')
|
||
|
|
bus.$on('updateCarInfo', (carInfo) => {
|
||
|
|
console.log('Car', carInfo)
|
||
|
|
if (index) {
|
||
|
|
this.carList[index] = carInfo
|
||
|
|
} else {
|
||
|
|
this.carList.push(carInfo)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/myCar/carDetail?car=${index >= 0 ? encodeURIComponent(JSON.stringify(this.carList[index])) : ''}`
|
||
|
|
})
|
||
|
|
},
|
||
|
|
editUserInfo(userInfo) {
|
||
|
|
bus.$off('updateUserInfo')
|
||
|
|
bus.$on('updateUserInfo', (userInfo) => {
|
||
|
|
console.log('userInfo', userInfo)
|
||
|
|
this.userInfo = userInfo
|
||
|
|
})
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/userInfo/editUserInfo?userInfo=${userInfo ? encodeURIComponent(JSON.stringify(userInfo)) : ''}`
|
||
|
|
})
|
||
|
|
},
|
||
|
|
addProj(projList = []) {
|
||
|
|
this.$refs.proj.open(projList)
|
||
|
|
},
|
||
|
|
projConfirm(proj) {
|
||
|
|
this.selectedProj = proj
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.container {
|
||
|
|
height: 100%;
|
||
|
|
background-color: #F3F5F7;
|
||
|
|
|
||
|
|
.containerBody {
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
background: linear-gradient(180deg, #C1DEFF 0%, rgba(193, 222, 255, 0) 100%);
|
||
|
|
background-size: 100% 500rpx;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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 {
|
||
|
|
&.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 {
|
||
|
|
.carListTab {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
column-gap: 32rpx;
|
||
|
|
padding: 0 26rpx 22rpx;
|
||
|
|
|
||
|
|
.carTabItem {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
row-gap: 10rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #333333;
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
.carImage {
|
||
|
|
border: 2rpx solid #0174F6;
|
||
|
|
}
|
||
|
|
|
||
|
|
color: #0174F6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carImage {
|
||
|
|
width: 128rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
background: #F2F2F7;
|
||
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.carDetail {
|
||
|
|
background: linear-gradient(180deg, rgba(1, 116, 246, 0.15) 0%, rgba(255, 255, 255, 0) 100%) no-repeat;
|
||
|
|
background-size: 100% 184rpx;
|
||
|
|
padding: 30rpx 30rpx 0;
|
||
|
|
|
||
|
|
.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 {
|
||
|
|
.projList {
|
||
|
|
padding: 0 30rpx;
|
||
|
|
display: flex;
|
||
|
|
gap: 20rpx;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
|
||
|
|
.projItem {
|
||
|
|
padding: 10rpx 16rpx;
|
||
|
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||
|
|
border: 2rpx solid #0174F6;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #0174F6;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.userCard {
|
||
|
|
.userContainer {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
row-gap: 30rpx;
|
||
|
|
margin: 0 30rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
width: 750rpx;
|
||
|
|
height: 136rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
width: 510rpx;
|
||
|
|
height: 76rpx;
|
||
|
|
background: #0174F6;
|
||
|
|
border-radius: 38rpx 38rpx 38rpx 38rpx;
|
||
|
|
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|