lanan-repair-app/pages-order/appointOrder/appointOrder.vue

187 lines
4.5 KiB
Vue
Raw Normal View History

2024-10-13 23:24:23 +08:00
<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>
2024-10-13 23:24:23 +08:00
</view>
<view class="phoneBody">
<view class="searchBox">
<input v-model="phone" placeholder="请输入手机号码|车牌号|车架号" type="tel">
2024-10-13 23:24:23 +08:00
</view>
2024-10-21 18:11:30 +08:00
<view class="btn" @click="listUserInfo">
2024-10-13 23:24:23 +08:00
<image class="btnIcon" mode="aspectFit" src="/pages-order/static/search.png"></image>
确认查找
</view>
</view>
</view>
<view class="orderList">
2024-11-06 18:23:38 +08:00
<view v-for="item in orderList" :key="item.id" class="orderItem" @click="addOrder(item)">
2024-10-21 18:11:30 +08:00
<booking-order-card :order="item"></booking-order-card>
2024-10-13 23:24:23 +08:00
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import VNavigationBar from '@/components/VNavigationBar.vue'
import OrderCard from "@/components/orderCard.vue";
2024-10-21 18:11:30 +08:00
import request from "@/utils/request";
import BookingOrderCard from "@/components/bookingOrderCard.vue";
2024-10-27 14:16:10 +08:00
import {formatTimestamp, formatTimestampCustom} from "@/utils/utils";
2024-10-13 23:24:23 +08:00
export default {
components: {
OrderCard,
2024-10-21 18:11:30 +08:00
BookingOrderCard,
2024-10-13 23:24:23 +08:00
VNavigationBar,
},
data() {
return {
2024-10-21 18:11:30 +08:00
phone: '',
userInfo: null,
carList: [],
orderList: []
2024-10-13 23:24:23 +08:00
}
},
onLoad(data) {
},
2024-10-21 18:11:30 +08:00
methods: {
listUserInfo() {
this.carList = []
this.userInfo = null
console.log("获取用户信息")
if (this.phone != '') {
const params = {
phoneOrCar: this.phone
2024-10-21 18:11:30 +08:00
}
request({
url: '/admin-api/base/custom/page',
method: 'GET',
params: params
}).then(res => {
console.log(res);
if (res.data.records.length > 0) {
const params = {
userId: res.data.records[0].userId
}
request({
url: '/admin-api/repair/booking/list',
method: 'GET',
params: params
}).then(res => {
console.log(res);
this.orderList = res.data
this.orderList.map((item) => {
2024-10-27 14:16:10 +08:00
item.bookingTime = formatTimestamp( item.bookingTime)
2024-10-21 18:11:30 +08:00
})
})
}
})
} else {
uni.showToast({
title: '请输入手机号',
icon: 'none'
})
}
},
2024-11-06 18:23:38 +08:00
addOrder(order){
2024-10-21 18:11:30 +08:00
console.log('执行')
uni.navigateTo({
2024-11-07 14:16:06 +08:00
url: `/pages-order/addOrder/addOrder?phone=${this.phone}&carId=${order.carId}&repairType=${order.repairType}&bookingId=${order.id}`
2024-10-21 18:11:30 +08:00
});
},
}
2024-10-13 23:24:23 +08:00
}
</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;
}
}
}
}
.orderList {
.orderItem {
margin: 20rpx 32rpx;
}
}
}
}
</style>