admin/RentWeAppFront
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

通知公告/看房预约/合同签约/退租申请页面样式改版

Browse Source
This commit is contained in:
wenqi.peng
2025-12-26 17:39:00 +08:00
parent dac2ae956d
commit fb8a6cc27e
6 changed files with 534 additions and 457 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
pages/reserve/reserveRecords.vue
View File

@@ -18,12 +18,9 @@
:key="item.id"
class="record-card"
>
<!-- 顶部时间 + 状态 -->
<view class="record-header">
<view class="time-box">
<u-icon name="clock" size="32" color="#999" />
<text class="record-time">{{ item.date }}</text>
</view>
<!-- 资产名称和状态 -->
<view class="card-header">
<text class="asset-name">{{ item.assetName }}</text>
<text
:class="['record-status', item.status]"
>
@@ -32,42 +29,41 @@
</view>
<!-- 内容部分 -->
<view class="record-body">
<!-- 资产名称 -->
<view class="info-line">
<text class="info-text">资产名称：{{ item.assetName }}</text>
<view class="card-content">
<!-- 预约时间 -->
<view class="info-item">
<text class="info-label">预约时间：</text>
<text class="info-value">{{ formatDate(item.date) }}</text>
</view>
<!-- 资产地址 + 查看位置按钮 -->
<view class="info-line">
<text class="info-text">地址：{{ item.assetAddress }}</text>
<u-button
class="map-btn"
size="mini"
type="primary"
@click="viewLocation(item)"
icon="map"
>
查看位置
</u-button>
<!-- 地址 -->
<view class="info-item">
<text class="info-label">地址：</text>
<text class="info-value">{{ item.assetAddress }}</text>
</view>
<!-- 管家信息 + 拨号按钮 -->
<view class="info-line">
<text class="info-text">
管家：{{ item.managerName }}（{{ item.managerPhone }}）
</text>
<u-button
class="call-btn"
size="mini"
type="success"
icon="phone"
@click="callManager(item.managerPhone)"
>
拨打电话
</u-button>
<!-- 管家 -->
<view class="info-item">
<text class="info-label">管家：</text>
<text class="info-value">{{ item.managerName }}（{{ item.managerPhone }}）</text>
</view>
</view>
<!-- 操作按钮 -->
<view class="action-buttons">
<button
class="location-btn"
@click="viewLocation(item)"
>
查看位置
</button>
<button
class="call-btn"
@click="callManager(item.managerPhone)"
>
拨打电话
</button>
</view>
</view>
<u-loadmore :status="loadStatus" />
@@ -123,6 +119,19 @@ export default {
return '未知';
}
},
formatDate(dateStr) {
// 格式化日期，例如：2025-11-10 周五 09:00
const date = new Date(dateStr);
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const weekday = weekdays[date.getDay()];
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
return `${year}-${month}-${day} ${weekday} ${hours}:${minutes}`;
},
viewLocation(item) {
uni.openLocation({
latitude: item.lat,
@@ -153,9 +162,9 @@ export default {
<style lang="scss" scoped>
.reserve-records {
background: #f8f8f8;
background: #f5f5f5;
min-height: 100vh;
padding-top: 175rpx; /* 给导航栏留空间 */
padding-top: 120rpx; /* 给导航栏留空间 */
}
.scroll-content {
@@ -163,76 +172,107 @@ export default {
}
.record-list {
padding: 20rpx;
padding: 30rpx 40rpx;
}
.record-card {
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
margin-bottom: 20rpx;
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
border-radius: 12rpx;
padding: 32rpx;
margin-bottom: 30rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}
.record-header {
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
margin-bottom: 24rpx;
}
.time-box {
display: flex;
align-items: center;
gap: 8rpx;
.asset-name {
font-size: 32rpx;
font-weight: 500;
color: #2D2B2C;
}
.record-status {
font-size: 26rpx;
padding: 10rpx 15rpx;
border-radius: 4rpx;
&.done {
background: #FCE5E0;
color: #ED7748;
}
.record-time {
font-size: 28rpx;
color: #666;
}
.record-status {
font-size: 26rpx;
padding: 4rpx 14rpx;
border-radius: 24rpx;
&.done {
background: #e8f5e9;
color: #4caf50;
}
&.pending {
background: #fffbe6;
color: #ff9800;
}
&.pending {
background: #F2F3F7;
color: #86868C;
}
}
.record-body {
.card-content {
margin-bottom: 32rpx;
}
.info-item {
display: flex;
flex-direction: column;
gap: 16rpx;
align-items: flex-start;
}
.info-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10rpx;
font-size: 28rpx;
color: #333;
.info-item:last-child {
margin-bottom: 0;
}
.info-text {
flex: 1;
line-height: 1.6;
}
.info-label {
font-size: 24rpx;
color: #666;
width: 120rpx;
flex-shrink: 0;
line-height: 44rpx;
}
u-icon {
flex-shrink: 0;
}
.info-value {
font-size: 24rpx;
color: #333;
flex: 1;
line-height: 44rpx;
}
u-button {
flex-shrink: 0;
margin-left: 10rpx;
}
}
.action-buttons {
display: flex;
justify-content: flex-end;
gap: 20rpx;
margin-top: 32rpx;
padding-top: 32rpx;
border-top: 1rpx solid #f0f0f0;
}
.location-btn {
width: 220rpx;
height: 72rpx;
background: #fff;
color: #2D2B2C;
font-size: 28rpx;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border: 1px solid #222222;
}
.call-btn {
width: 220rpx;
height: 72rpx;
background: #ff3b30;
color: #fff;
font-size: 28rpx;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border: none;
}
.empty {