367 lines
8.1 KiB
Vue
367 lines
8.1 KiB
Vue
<template>
|
||
<view class="car-class">
|
||
<view class="page-top" :style='{ justifyContent: "center" }'>
|
||
|
||
<!-- 返回上一级页面信息 -->
|
||
<view class='go-back-page' @click='pageBack'>返回</view>
|
||
|
||
<!-- 人员/车辆/我的组件显示的表头信息 -->
|
||
<view class="other-title-class">
|
||
车辆管理
|
||
</view>
|
||
</view>
|
||
<!-- <view @click="goadd('add')"
|
||
style="width: 100%; display: flex;color: white;background: #327dfb; justify-content: center; margin: 10px 0px; box-sizing: border-box; padding: 10px;font-weight: bold;border-radius: 8px;">
|
||
<text> + 新增车辆</text>
|
||
</view> -->
|
||
|
||
<!-- 搜索框-tab切换代码信息 -->
|
||
<view class="search-input-tab-class">
|
||
|
||
<!-- 搜索框代码信息 -->
|
||
<view class="input-class">
|
||
|
||
<!-- 搜索 icon -->
|
||
<view class="search-icon">
|
||
<image src="../../indexCom/img/sousuo.svg" mode=""></image>
|
||
</view>
|
||
|
||
<!-- 搜索框 -->
|
||
<view class="search-input">
|
||
<input type="text" placeholder="请输入车牌号" v-model='searchValue' />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- tab 信息 -->
|
||
<view class="tab-choose-class">
|
||
|
||
<view class="tab-content" @click="tabChoose(item, index)" v-for='(item, index) in tabList' :key='index'>
|
||
|
||
<!-- tab 名称信息 -->
|
||
<view class='tab-name-class' :style='{ color: index + 1 == tabValue ? "#101A3E" : "#8D90A6" }'>
|
||
{{ item }}
|
||
|
||
<view class="icon-tab" v-if='index == 1'>
|
||
<image src="../../indexCom/img/xialajiantou.svg" mode=""></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 名称下 icon -->
|
||
<view class="tab-icon"
|
||
:style='{ background: index + 1 == tabValue ? "linear-gradient( 180deg, #054DF3 0%, #55A3FF 100%)" : "" }'>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- list 列表信息（车辆列表） -->
|
||
<view class='car-list-class'>
|
||
|
||
<!-- 滚动 view -->
|
||
<scroll-view :refresher-triggered="trigger" @scrolltolower="loadMore" @refresherrefresh="refreshList"
|
||
:scroll-top="scrollTop" refresher-enabled="true" refresher-background="transparent" scroll-y="true"
|
||
class="scroll-view-class">
|
||
|
||
<!-- 列表信息 -->
|
||
<car-info-com v-if="listData.length>0" @goCarDetails='goCarDetails' :buttonTabValue='buttonTabValue'
|
||
:listData="listData" ref='carInfoCom'></car-info-com>
|
||
<view style="text-align: center" v-if="listData.length==0">
|
||
<image class="" src="../../../static/images/nothing.png"></image>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 车辆信息卡片组件
|
||
import carInfoCom from './carInfoCard.vue';
|
||
import request from '@/utils/request'
|
||
export default {
|
||
components: {
|
||
// 车辆信息卡片组件
|
||
carInfoCom
|
||
},
|
||
data() {
|
||
return {
|
||
//是否是从首页数据统计跳过来的
|
||
fromIndex: false,
|
||
// 距离顶部的位置信息
|
||
scrollTop: 0,
|
||
// 输入框搜索内容信息
|
||
searchValue: '',
|
||
// tab 当前值
|
||
tabValue: 1,
|
||
// 按钮类型 tab 值
|
||
buttonTabValue: 1,
|
||
// 控制刷新启动
|
||
trigger: false,
|
||
//车辆所属课程类型
|
||
courseType: null,
|
||
tabList: ["全部", "类型"],
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
},
|
||
courseList: ["C1", "C2"],
|
||
total: 0,
|
||
listData: [],
|
||
}
|
||
},
|
||
watch: {
|
||
searchValue(newval) {
|
||
this.refreshList()
|
||
},
|
||
courseType(newval) {
|
||
this.refreshList()
|
||
}
|
||
},
|
||
onLoad(data) {
|
||
if (data.fromIndex) {
|
||
this.fromIndex = data.fromIndex
|
||
this.queryParams.type = "car"
|
||
this.queryParams.timeType = data.timeType
|
||
if (data.coachId) {
|
||
this.queryParams.coachId = data.coachId
|
||
}
|
||
if (data.startTime) {
|
||
this.queryParams.startTime = data.startTime
|
||
this.queryParams.endTime = data.endTime
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getCarList()
|
||
},
|
||
created() {},
|
||
methods: {
|
||
/**
|
||
* @description 跳转车辆详情页面信息
|
||
*/
|
||
goCarDetails(record, index) {
|
||
// 跳转
|
||
uni.navigateTo({
|
||
url: '/pages/internalManagement/carManagement/carDetails?id=' + record.id
|
||
})
|
||
},
|
||
|
||
/**
|
||
* @description 获取车辆列表
|
||
*/
|
||
getCarList() {
|
||
let url = "/admin-api/drivingSchool/system/car/list"
|
||
this.queryParams.courseType = this.courseType
|
||
if (this.fromIndex) {
|
||
//来源首页
|
||
url = "/admin-api/train/indexGetTrainList"
|
||
this.queryParams.searchValue = this.searchValue
|
||
} else {
|
||
this.queryParams.carNo = this.searchValue
|
||
}
|
||
request({
|
||
url: url,
|
||
method: 'get',
|
||
params: this.queryParams
|
||
}).then((res) => {
|
||
this.trigger = false
|
||
this.total = res.data.total
|
||
if (res.code == 200) {
|
||
res.data.records.map(item => {
|
||
item.showMore = false
|
||
})
|
||
if (this.queryParams.pageNum != 1) {
|
||
this.listData = this.listData.concat(res.data.records)
|
||
} else {
|
||
this.listData = res.data.records
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* @description 触底触发刷新事件
|
||
*/
|
||
loadMore() {
|
||
//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
|
||
if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) {
|
||
uni.$u.toast('没有更多数据了')
|
||
return
|
||
}
|
||
//页码+1,调用获取数据的方法获取第二页数据
|
||
this.queryParams.pageNum++
|
||
this.getCarList()
|
||
},
|
||
|
||
/**
|
||
* @description 刷新list列表信息
|
||
*/
|
||
refreshList() {
|
||
this.trigger = true
|
||
this.queryParams.pageNum = 1
|
||
this.total = 0
|
||
this.getCarList()
|
||
},
|
||
|
||
/**
|
||
* @description 点击 tab 进行切换页面信息
|
||
* @param {String, Number}
|
||
*/
|
||
tabChoose(item, index) {
|
||
this.tabValue = index + 1
|
||
if (2 == this.tabValue) {
|
||
//弹出选择课程科目
|
||
uni.showActionSheet({
|
||
itemList: this.courseList,
|
||
success: ({
|
||
tapIndex
|
||
}) => {
|
||
this.courseType = this.courseList[tapIndex]
|
||
this.tabList[1] = this.courseType
|
||
this.$forceUpdate()
|
||
}
|
||
})
|
||
} else {
|
||
this.courseType = ""
|
||
this.tabList[1] = "类型"
|
||
this.$forceUpdate()
|
||
}
|
||
},
|
||
getback() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
})
|
||
},
|
||
goadd(type, id) {
|
||
uni.navigateTo({
|
||
url: '/pages/internalManagement/carManagement/informationAdd?type=' + type + '&id=' + id
|
||
})
|
||
},
|
||
pageBack() {
|
||
uni.navigateBack({
|
||
delta: 1 // delta值为1时表示返回的页面层数
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.car-class {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background: #F1F3F6;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.car-list-class {
|
||
width: 96%;
|
||
flex-grow: 1;
|
||
padding: 20rpx 0 0 0;
|
||
overflow-y: scroll;
|
||
|
||
.scroll-view-class {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.search-input-tab-class {
|
||
width: 100%;
|
||
height: 194rpx;
|
||
background: white;
|
||
flex-shrink: 0;
|
||
|
||
.tab-choose-class {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
padding: 12rpx 20rpx 0 20rpx;
|
||
border-top: 1rpx solid #F5F5F5;
|
||
|
||
.tab-content {
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.tab-name-class {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.icon-tab {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab-icon {
|
||
width: 66rpx;
|
||
height: 8rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
}
|
||
|
||
.input-class {
|
||
width: 86%;
|
||
margin: 24rpx 0 12rpx 7%;
|
||
height: 66rpx;
|
||
background: #F5F6F9;
|
||
border: 2rpx solid #F0F0F0;
|
||
border-radius: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.search-icon {
|
||
margin: 0 18rpx 0 30rpx;
|
||
height: 28rpx;
|
||
width: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.search-input {
|
||
height: 100%;
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
input {
|
||
width: 98%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.page-top {
|
||
flex-shrink: 0;
|
||
width: 100%;
|
||
height: 160rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
color: white;
|
||
flex-shrink: 0;
|
||
background: linear-gradient(180deg, #054DF3 0%, #55A3FF 100%);
|
||
|
||
.go-back-page {
|
||
position: absolute;
|
||
left: 20rpx;
|
||
}
|
||
}
|
||
</style> |