322 lines
6.6 KiB
Vue
322 lines
6.6 KiB
Vue
<template>
|
|
<view class="contentStyle">
|
|
<view class="status-bar"></view>
|
|
<uni-nav-bar title="我的车位" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
|
|
</uni-nav-bar>
|
|
<scroll-view class="page" scroll-y="true" @scrolltolower="getList" refresher-enabled="true" :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
|
|
<view v-if="parkingSpaceList.length === 0" class="empty-state">
|
|
<uni-icons type="info" size="60" color="#ccc"></uni-icons>
|
|
<text class="empty-text">暂无数据</text>
|
|
</view>
|
|
<view class="parkingSpace-list">
|
|
<view class="parkingSpace-card" v-for="(item, index) in parkingSpaceList" :key="index"
|
|
@click="tapParkingSpace(item)">
|
|
<view class="card-header">
|
|
<view class="title-box">
|
|
<text class="parkingSpace-name">{{ item.villageName }}</text>
|
|
</view>
|
|
<text class="status-tag"
|
|
:class="item.checkStatus=='0'?'pending':item.checkStatus=='1'?'success':item.checkStatus=='2'?'fail':''">{{ item.checkStatus=='0'?'未认证':item.checkStatus=='1'?'认证成功':item.checkStatus=='2'?'认证失败':'' }}</text>
|
|
</view>
|
|
<view class="card-body">
|
|
<view class="left">
|
|
<view class="line">
|
|
<view class="row">
|
|
<text class="label">车位楼层</text>
|
|
<view class="value-box">
|
|
<text class="value">{{ item.areaName }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="line">
|
|
<view class="row">
|
|
<text class="label">车位编号</text>
|
|
<text class="value">{{ item.parkingCode }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="line">
|
|
<view class="row">
|
|
<text class="label">车位状态</text>
|
|
<text class="value">{{ getParkingStatus(item.parkingStatus) }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="line">
|
|
<view class="row">
|
|
<text class="label">绑定车辆</text>
|
|
<text class="value">{{ item.carNum }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<image :src="item.carImageUrl?item.carImageUrl:'http://47.104.199.163:9090/images/propertyImgs/myParkingSpace.png'"
|
|
class="imgItem" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="bottom-btn">
|
|
<button class="add-btn" @click="addParkingSpace">添加车位</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
onMounted
|
|
} from 'vue'
|
|
import {
|
|
getCarList
|
|
} from '@/pageSubPack/api/apiSub.js'
|
|
|
|
const statusBarHeight = ref(20)
|
|
const parkingSpaceList = ref([])
|
|
|
|
// ==================== 下拉刷新 ====================
|
|
const onRefresh = () => {
|
|
isRefreshing.value = true
|
|
pageNum.value = 1
|
|
noMoreData.value = false
|
|
parkingSpaceList.value = []
|
|
loadingMore.value = false
|
|
getList()
|
|
}
|
|
|
|
// 页面加载时请求第一页
|
|
onMounted(() => {
|
|
getList()
|
|
})
|
|
|
|
const loadingMore = ref(false)
|
|
const noMoreData = ref(false)
|
|
const isRefreshing = ref(false)
|
|
|
|
const pageNum = ref(1)
|
|
const pageSize = ref(10)
|
|
|
|
// 车位状态映射
|
|
const getParkingStatus =(status) =>{
|
|
const statusMap = {
|
|
'0':'闲置',
|
|
'1':'自用',
|
|
'2':'租赁',
|
|
'3':'借出',
|
|
'4':'其他'
|
|
}
|
|
return statusMap[status]
|
|
}
|
|
// ==================== 获取列表数据 ====================
|
|
const getList = async () => {
|
|
// 防重复请求
|
|
if (loadingMore.value || noMoreData.value) return
|
|
loadingMore.value = true
|
|
try {
|
|
const res = await getCarList({
|
|
pageNum: pageNum.value,
|
|
pageSize: pageSize.value,
|
|
// residentId: uni.getStorageSync('userId')
|
|
})
|
|
|
|
const data = res
|
|
const newList = data.rows || []
|
|
|
|
// 第一页 → 覆盖数据
|
|
if (pageNum.value === 1) {
|
|
parkingSpaceList.value = newList
|
|
} else {
|
|
// 后续页 → 追加数据
|
|
parkingSpaceList.value = [...parkingSpaceList.value, ...newList]
|
|
}
|
|
// 判断是否没有更多数据
|
|
if (newList.length < pageSize.value) {
|
|
noMoreData.value = true
|
|
} else {
|
|
pageNum.value++
|
|
}
|
|
} catch (err) {
|
|
uni.showToast({
|
|
title: '加载失败',
|
|
icon: 'none'
|
|
})
|
|
console.error('列表接口报错：', err)
|
|
} finally {
|
|
loadingMore.value = false
|
|
// 关闭 refresher 下拉刷新状态
|
|
if (isRefreshing.value) {
|
|
isRefreshing.value = false
|
|
}
|
|
}
|
|
}
|
|
|
|
const tapParkingSpace = (item) => {
|
|
console.log(item);
|
|
uni.navigateTo({
|
|
url: '/pageSubPack/my/parkingSpaceDetail?id=' + item.id + '&statusClass=' + item.checkStatus
|
|
})
|
|
}
|
|
|
|
const addParkingSpace = () => {
|
|
uni.setStorageSync('operationType', 'add')
|
|
uni.navigateTo({
|
|
url: '/pageSubPack/my/addParkingSpace'
|
|
})
|
|
}
|
|
|
|
const goBack = () => {
|
|
uni.navigateBack()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #F9F9F9;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.status-bar {
|
|
width: 100vw;
|
|
height: 46px;
|
|
}
|
|
|
|
.contentStyle {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
background-color: #f5f7fa;
|
|
}
|
|
|
|
.page {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0px 40rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 100rpx 0;
|
|
color: #ccc;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 32rpx;
|
|
color: #999;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.bottom-btn {
|
|
padding: 20rpx 30rpx 40rpx;
|
|
}
|
|
|
|
.parkingSpace-card {
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
margin-bottom: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-header {
|
|
padding: 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.title-box {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.parkingSpace-name {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.status-tag {
|
|
font-size: 24rpx;
|
|
padding: 4rpx 16rpx;
|
|
border-radius: 30rpx;
|
|
margin-left: 20rpx;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.success {
|
|
background: #2F77FD;
|
|
color: #fff;
|
|
}
|
|
|
|
.pending {
|
|
background: #09C2BD;
|
|
color: #fff;
|
|
}
|
|
|
|
.fail {
|
|
background: #E34D59;
|
|
color: #fff;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 0rpx 30rpx 30rpx 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.line {
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.label {
|
|
width: 80px;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.value-box {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.value {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.add-btn {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
background: #007aff;
|
|
color: #fff;
|
|
border-radius: 12rpx;
|
|
font-size: 32rpx;
|
|
border: none;
|
|
}
|
|
|
|
.left {}
|
|
|
|
.right {
|
|
width: 42%;
|
|
}
|
|
|
|
.imgItem {
|
|
width: 100%;
|
|
}
|
|
</style> |