398 lines
13 KiB
Vue
398 lines
13 KiB
Vue
<template>
|
||
<div class="reststop-list-page">
|
||
<view class="topBox" :style="{ height: menu.bottom + 14 + 'px' }">
|
||
<view class="topContent" :style="{ paddingTop: menu.top + 'px', height: menu.height + 'px' }">
|
||
<view class="backIconBox" @click="handleBack">
|
||
<image class="backIcon" src="/static/images/home/brankBlackArrow.svg" />
|
||
</view>
|
||
<view class="currentServiceBox" @click="goSelectServer">
|
||
<image class="servicePosition" src="/static/images/home/servicePosition.svg" />
|
||
<text class="currentService">{{ detailInfo.SERVERPART_NAME }}</text>
|
||
<image class="rightArrow" src="/static/images/home/rightArrow.svg" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 共享休息站列表 -->
|
||
<div class="reststops-section" :style="{ marginTop: menu.bottom + 14 + 'px' }">
|
||
<div class="reststops-list" v-if="reststopList.length > 0">
|
||
<div class="reststop-item" v-for="(item, index) in reststopList" :key="index" @click="goToDetail(item)">
|
||
<div class="reststop-header">
|
||
<div class="reststop-name">{{ item.RESTSTATION_NAME }}</div>
|
||
<div class="reststop-status" :class="[
|
||
item.LOCK_STATUS === 1 ? 'status-available' : 'status-occupied'
|
||
]">
|
||
{{ getDoorLockStatusText(item.LOCK_STATUS) }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="reststop-info">
|
||
<div class="info-row">
|
||
<!-- <div class="info-item">
|
||
<span class="info-icon">🕒</span>
|
||
<span class="info-text">剩余时间：{{ item.remainingTime || '0分钟' }}</span>
|
||
</div> -->
|
||
<div class="info-item">
|
||
<span class="info-icon">🧹</span>
|
||
<span class="info-text">保洁状态：{{ getCleaningStatusText(item.CLEANING_STATUS) }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-icon">⭐</span>
|
||
<span class="info-text">评分：{{ item.RESTSTATIONBILL_SCORE || '暂无' }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="info-row">
|
||
|
||
<div class="info-item">
|
||
<span class="info-icon">📋</span>
|
||
<span class="info-text">订单：{{ getOrderStatusText(item.orderStatus) }}</span>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
|
||
<!-- <div class="reststop-footer">
|
||
<div class="action-btn" :class="[
|
||
item.orderStatus === 'active' ? 'action-active' :
|
||
(item.orderStatus === 'completed' || item.orderStatus === 'cancelled' ? 'action-normal' : 'action-disabled')
|
||
]" @click.stop="handleAction(item)">
|
||
{{
|
||
item.orderStatus === 'active' ? '使用中' :
|
||
(item.orderStatus === 'completed' || item.orderStatus === 'cancelled' ? '查看详情' : '不可用')
|
||
}}
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 空状态 -->
|
||
<div class="empty-state" v-else>
|
||
<div class="empty-icon">🏠</div>
|
||
<div class="empty-title">暂无休息站</div>
|
||
<div class="empty-desc">当前服务区暂无可用的共享休息站</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
menu: {},
|
||
reststopList: [],
|
||
detailInfo: {}
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.menu = uni.getMenuButtonBoundingClientRect();
|
||
},
|
||
onShow() {
|
||
let currentService = uni.getStorageSync("currentService");
|
||
this.detailInfo = currentService
|
||
console.log('this.detailInfo', this.detailInfo);
|
||
|
||
|
||
|
||
|
||
if (this.detailInfo.SERVERPART_ID) {
|
||
this.loadReststopList();
|
||
} else {
|
||
this.goSelectServer()
|
||
}
|
||
},
|
||
methods: {
|
||
// 跳转到选择服务区
|
||
goSelectServer() {
|
||
uni.navigateTo({ url: "/pages/newMap/index/index?comeForm=sharedRestStop" });
|
||
},
|
||
// 返回上级页面
|
||
handleBack() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
},
|
||
// 加载休息站列表
|
||
async loadReststopList() {
|
||
const req = {
|
||
SearchParameter: {
|
||
SERVERPART_IDS: this.detailInfo.SERVERPART_ID,
|
||
RESTSTATION_STATE: 1
|
||
},
|
||
PageIndex: 1,
|
||
PageSize: 999999,
|
||
type: 'encryption'
|
||
}
|
||
uni.showLoading({
|
||
title: '加载中...',
|
||
mask: true
|
||
});
|
||
const data = await this.$api.$posMemberPost("/Member/GetRESTSTATIONList", req)
|
||
uni.hideLoading();
|
||
let list = data.Result_Data.List
|
||
console.log('dadjasodjasopdjaspod', list);
|
||
this.reststopList = list
|
||
},
|
||
|
||
// 跳转到休息站详情
|
||
goToDetail(item) {
|
||
uni.navigateTo({
|
||
url: `/pages/sharedRestStop/detail?id=${item.RESTSTATION_ID}`
|
||
});
|
||
},
|
||
|
||
// 处理按钮点击
|
||
handleAction(item) {
|
||
if (item.orderStatus === 'completed' || item.orderStatus === 'cancelled') {
|
||
uni.navigateTo({
|
||
url: `/pages/sharedRestStop/detail?id=${item.id}`
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: '当前订单进行中',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
|
||
// 获取门锁状态文本
|
||
getDoorLockStatusText(status) {
|
||
const statusMap = {
|
||
1: '可使用',
|
||
2: '使用中'
|
||
};
|
||
return statusMap[status] || '';
|
||
},
|
||
|
||
// 获取保洁状态文本
|
||
getCleaningStatusText(status) {
|
||
const statusMap = {
|
||
1: '待清洁',
|
||
2: '清洁中',
|
||
3: '已清洁'
|
||
};
|
||
return statusMap[status] || '';
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.reststop-list-page {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
background: #f8fafc;
|
||
overflow-y: auto;
|
||
|
||
.topBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx;
|
||
position: fixed;
|
||
background: #f5f5f5;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 99;
|
||
|
||
.topContent {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.backIconBox {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
|
||
.backIcon {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.currentServiceBox {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12rpx 16rpx;
|
||
background: #fff;
|
||
border-radius: 32rpx;
|
||
border: 1rpx solid #e7e7e6;
|
||
margin-left: 8rpx;
|
||
|
||
.servicePosition {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.currentService {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #090c1a;
|
||
line-height: 40rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
|
||
.rightArrow {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.reststops-section {
|
||
padding: 40rpx 32rpx;
|
||
|
||
.reststops-list {
|
||
.reststop-item {
|
||
background: white;
|
||
border-radius: 24rpx;
|
||
margin-bottom: 32rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
.reststop-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 24rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
|
||
.reststop-name {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #1f2937;
|
||
flex: 1;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.reststop-status {
|
||
padding: 8rpx 12rpx;
|
||
border-radius: 16rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
|
||
&.status-available {
|
||
background: #dcfce7;
|
||
color: #15803d;
|
||
}
|
||
|
||
&.status-occupied {
|
||
background: #fef3c7;
|
||
color: #92400e;
|
||
}
|
||
}
|
||
}
|
||
|
||
.reststop-info {
|
||
padding: 24rpx;
|
||
|
||
.info-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 20rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
|
||
.info-icon {
|
||
font-size: 24rpx;
|
||
margin-right: 12rpx;
|
||
width: 32rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.info-text {
|
||
font-size: 24rpx;
|
||
color: #6b7280;
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.reststop-footer {
|
||
padding: 0 24rpx 24rpx;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
.action-btn {
|
||
padding: 12rpx 24rpx;
|
||
border-radius: 40rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
transition: all 0.3s ease;
|
||
|
||
&.action-normal {
|
||
background: linear-gradient(135deg, #22c55e, #16a34a);
|
||
color: white;
|
||
|
||
&:active {
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
&.action-active {
|
||
background: linear-gradient(135deg, #f59e0b, #d97706);
|
||
color: white;
|
||
|
||
&:active {
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
&.action-disabled {
|
||
background: #f3f4f6;
|
||
color: #9ca3af;
|
||
border: 2rpx solid #e5e7eb;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 200rpx 40rpx;
|
||
|
||
.empty-icon {
|
||
font-size: 120rpx;
|
||
margin-bottom: 32rpx;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.empty-title {
|
||
font-size: 32rpx;
|
||
color: #6b7280;
|
||
margin-bottom: 16rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.empty-desc {
|
||
font-size: 26rpx;
|
||
color: #9ca3af;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.reststop-list-page::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style> |