4 changed files with 585 additions and 1 deletions
@ -0,0 +1,571 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<!-- 搜索框 --> |
|||
<view class="search-container"> |
|||
<u-search |
|||
v-model="searchPhone" |
|||
placeholder="请输入手机号" |
|||
:show-action="false" |
|||
:clearabled="true" |
|||
bg-color="#fff" |
|||
shape="square" |
|||
@search="handleSearch" |
|||
@clear="handleClear" |
|||
> |
|||
<template v-slot:prefix> |
|||
<u-icon name="search" size="16" color="#999"></u-icon> |
|||
</template> |
|||
</u-search> |
|||
</view> |
|||
|
|||
<!-- 预约列表 --> |
|||
<view class="appointment-list"> |
|||
<scroll-view scroll-y="true"> |
|||
<view |
|||
class="appointment-card" |
|||
v-for="item in filteredAppointmentList" |
|||
:key="item.id" |
|||
> |
|||
<!-- 卡片头部 --> |
|||
<view class="card-header"> |
|||
<u-icon name="home" size="16" color="#08B3B3"></u-icon> |
|||
<text class="community-info" |
|||
>{{ item.community }} | {{ item.houseType }}</text |
|||
> |
|||
</view> |
|||
|
|||
<!-- 卡片内容 --> |
|||
<view class="card-content"> |
|||
<view class="info-row"> |
|||
<text class="label">预约人：</text> |
|||
<text class="value">{{ item.appointee }}</text> |
|||
</view> |
|||
<view class="info-row"> |
|||
<text class="label">预约人电话：</text> |
|||
<text class="value">{{ item.phone }}</text> |
|||
</view> |
|||
<view class="info-row"> |
|||
<text class="label">预约时间：</text> |
|||
<text class="value">{{ item.appointmentTime }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 操作按钮 --> |
|||
<view class="actionButtons"> |
|||
<button class="btn process" @click="handleViewHouse(item)"> |
|||
看房登记 |
|||
</button> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
|
|||
<!-- 空状态 --> |
|||
<u-empty |
|||
v-if="filteredAppointmentList.length === 0 && !loading" |
|||
text="暂无预约信息" |
|||
mode="list" |
|||
></u-empty> |
|||
|
|||
<!-- 加载状态 --> |
|||
<u-loading-page |
|||
v-if="loading" |
|||
:loading="true" |
|||
text="加载中..." |
|||
></u-loading-page> |
|||
|
|||
<!-- 看房登记弹框 --> |
|||
<u-popup |
|||
:show="showRegisterPopup" |
|||
mode="center" |
|||
:round="16" |
|||
@close="handleClosePopup" |
|||
bgColor="transparent" |
|||
> |
|||
<view class="register-popup" @click="showStatusDropdown = false"> |
|||
<view class="popup-close" @click.stop="handleClosePopup"> |
|||
<u-icon |
|||
name="/static/img/close-circle.png" |
|||
size="22" |
|||
color="#666" |
|||
></u-icon> |
|||
</view> |
|||
<view class="popup-title" style="letter-spacing: 1rpx">看房登记</view> |
|||
|
|||
<view class="form-container"> |
|||
<!-- 看房状态 --> |
|||
<view class="form-item"> |
|||
<text class="required">*</text> |
|||
<text class="form-label"> 看房状态 </text> |
|||
<view class="dropdown" @click.stop="toggleStatusDropdown"> |
|||
<u-input |
|||
v-model="viewingStatusText" |
|||
placeholder="请选择看房状态" |
|||
:disabled="true" |
|||
:border="true" |
|||
shape="round" |
|||
:custom-style="{ backgroundColor: '#fff' }" |
|||
> |
|||
<template v-slot:suffix> |
|||
<u-icon |
|||
:class="{ 'arrow-open': showStatusDropdown }" |
|||
name="arrow-down" |
|||
size="14" |
|||
color="#999" |
|||
></u-icon> |
|||
</template> |
|||
</u-input> |
|||
<view v-if="showStatusDropdown" class="dropdown-list"> |
|||
<view |
|||
v-for="opt in statusColumns" |
|||
:key="opt.value" |
|||
class="dropdown-item" |
|||
@click.stop="selectStatus(opt)" |
|||
> |
|||
{{ opt.text }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 看房说明 --> |
|||
<view class="form-item" style="flex-direction: column"> |
|||
<text class="form-label">看房说明</text> |
|||
<u-textarea |
|||
v-model="viewingDescription" |
|||
placeholder="请输入看房说明" |
|||
:border="true" |
|||
shape="round" |
|||
:custom-style="{ backgroundColor: '#fff' }" |
|||
:maxlength="200" |
|||
:count="true" |
|||
></u-textarea> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 操作按钮 --> |
|||
<view class="popup-actions"> |
|||
<u-button |
|||
type="default" |
|||
plain |
|||
:custom-style="{ |
|||
background: '#ffffff', |
|||
color: '#B0B0B0', |
|||
borderColor: '#D7D7D7', |
|||
height: '35px', |
|||
}" |
|||
shape="circle" |
|||
@click="handleCancel" |
|||
> |
|||
取消 |
|||
</u-button> |
|||
<u-button |
|||
type="primary" |
|||
:custom-style="{ |
|||
background: '#22C1C3', |
|||
color: '#ffffff', |
|||
borderColor: '#22C1C3', |
|||
height: '35px', |
|||
}" |
|||
shape="circle" |
|||
@click="handleConfirm" |
|||
> |
|||
确定 |
|||
</u-button> |
|||
</view> |
|||
</view> |
|||
</u-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
searchPhone: "", // 搜索手机号 |
|||
loading: false, // 加载状态 |
|||
appointmentList: [ |
|||
{ |
|||
id: 1, |
|||
community: "西海岸路乐业社区", |
|||
houseType: "三居室", |
|||
appointee: "杨斌", |
|||
phone: "13362000010", |
|||
appointmentTime: "2025-08-06 上午09:00-12:00", |
|||
idCard: "370832199606062001", |
|||
}, |
|||
{ |
|||
id: 2, |
|||
community: "西海岸路乐业社区", |
|||
houseType: "三居室", |
|||
appointee: "曲曼", |
|||
phone: "17700020202", |
|||
appointmentTime: "2025-08-06 上午09:00-12:00", |
|||
idCard: "370832199606062002", |
|||
}, |
|||
], |
|||
showRegisterPopup: false, // 看房登记弹框显示状态 |
|||
currentAppointment: {}, // 当前选中的预约信息 |
|||
viewingStatus: "1", // 看房状态 (1: 已看房, 2: 未看房) |
|||
viewingStatusText: "已看房", // 看房状态文本 |
|||
viewingDescription: "", // 看房说明 |
|||
showStatusDropdown: false, // 看房状态下拉 |
|||
statusColumns: [ |
|||
{ |
|||
text: "已看房", |
|||
value: "1", |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
computed: { |
|||
// 过滤后的预约列表 |
|||
filteredAppointmentList() { |
|||
if (!this.searchPhone) { |
|||
return this.appointmentList; |
|||
} |
|||
return this.appointmentList.filter( |
|||
(item) => |
|||
item.phone.includes(this.searchPhone) || |
|||
item.appointee.includes(this.searchPhone) |
|||
); |
|||
}, |
|||
}, |
|||
onLoad() { |
|||
this.loadAppointmentList(); |
|||
}, |
|||
// 下拉刷新 |
|||
onPullDownRefresh() { |
|||
this.loadAppointmentList(); |
|||
}, |
|||
// 上拉加载 |
|||
onReachBottom() {}, |
|||
methods: { |
|||
// 加载预约列表 |
|||
loadAppointmentList() { |
|||
this.loading = true; |
|||
// 模拟API调用 |
|||
setTimeout(() => { |
|||
this.loading = false; |
|||
// 停止下拉刷新 |
|||
uni.stopPullDownRefresh(); |
|||
}, 1000); |
|||
}, |
|||
|
|||
// 搜索预约 |
|||
handleSearch(value) { |
|||
console.log("搜索:", value); |
|||
// 搜索逻辑通过computed属性自动处理 |
|||
}, |
|||
|
|||
// 清空搜索 |
|||
handleClear() { |
|||
this.searchPhone = ""; |
|||
}, |
|||
|
|||
// 看房登记 |
|||
handleViewHouse(item) { |
|||
this.currentAppointment = item; |
|||
this.viewingStatus = item.viewingStatus || "1"; // 如果有已有的看房状态，则使用 |
|||
this.viewingStatusText = |
|||
this.statusColumns.find((col) => col.value === this.viewingStatus) |
|||
?.text || "已看房"; |
|||
this.viewingDescription = item.viewingDescription || ""; |
|||
this.showRegisterPopup = true; |
|||
}, |
|||
|
|||
// 关闭弹框 |
|||
handleClosePopup() { |
|||
this.showRegisterPopup = false; |
|||
this.currentAppointment = {}; |
|||
this.viewingStatus = "1"; |
|||
this.viewingStatusText = "已看房"; |
|||
this.viewingDescription = ""; |
|||
this.showStatusDropdown = false; |
|||
}, |
|||
|
|||
// 内联下拉切换与选择 |
|||
toggleStatusDropdown() { |
|||
this.showStatusDropdown = !this.showStatusDropdown; |
|||
}, |
|||
selectStatus(opt) { |
|||
this.viewingStatus = opt.value; |
|||
this.viewingStatusText = opt.text; |
|||
this.showStatusDropdown = false; |
|||
}, |
|||
|
|||
// 确定看房登记 |
|||
handleConfirm() { |
|||
if (!this.viewingStatus) { |
|||
uni.showToast({ |
|||
title: "请选择看房状态", |
|||
icon: "none", |
|||
}); |
|||
return; |
|||
} |
|||
}, |
|||
|
|||
// 取消看房登记 |
|||
handleCancel() { |
|||
this.handleClosePopup(); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.container { |
|||
min-height: 100vh; |
|||
background-color: #f8f8f8; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.search-container { |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.appointment-list { |
|||
.appointment-card { |
|||
background-color: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 30rpx; |
|||
margin-bottom: 20rpx; |
|||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05); |
|||
position: relative; |
|||
transition: all 0.3s ease; |
|||
|
|||
&:active { |
|||
transform: scale(0.98); |
|||
} |
|||
|
|||
.card-header { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 24rpx; |
|||
|
|||
.community-info { |
|||
margin-left: 16rpx; |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
} |
|||
|
|||
.card-content { |
|||
background: #fbfbfb; |
|||
padding: 20rpx; |
|||
|
|||
.info-row { |
|||
display: flex; |
|||
margin-bottom: 16rpx; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.label { |
|||
color: #999; |
|||
font-size: 28rpx; |
|||
min-width: 160rpx; |
|||
text-align: right; |
|||
} |
|||
|
|||
.value { |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.actionButtons { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
margin-top: 20rpx; |
|||
margin-left: auto; |
|||
gap: 20rpx; |
|||
width: fit-content; |
|||
} |
|||
|
|||
.btn { |
|||
height: 52rpx; |
|||
line-height: 46rpx; |
|||
border-radius: 52rpx; |
|||
background-color: rgba(255, 255, 255, 1); |
|||
color: rgba(8, 179, 179, 1); |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
font-family: AlibabaPuHui-regular; |
|||
border: 2rpx solid rgba(8, 179, 179, 1); |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 看房登记弹框样式 */ |
|||
.register-popup { |
|||
width: 76%; |
|||
padding: 36rpx 50rpx 32rpx; |
|||
background: radial-gradient( |
|||
110% 140% at 80% 0%, |
|||
rgba(35, 217, 208, 0.35) 0%, |
|||
rgba(35, 217, 208, 0.18) 22%, |
|||
rgba(255, 255, 255, 0) 60% |
|||
), |
|||
radial-gradient( |
|||
120% 140% at 0% 100%, |
|||
rgba(255, 173, 199, 0.28) 0%, |
|||
rgba(255, 173, 199, 0.12) 28%, |
|||
rgba(255, 255, 255, 0) 58% |
|||
), |
|||
#ffffff; |
|||
border-radius: 45rpx; |
|||
box-shadow: 0 12rpx 28rpx rgba(0, 0, 0, 0.18); |
|||
border: 1rpx solid rgba(0, 0, 0, 0.06); |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
position: relative; |
|||
|
|||
.popup-close { |
|||
position: absolute; |
|||
top: -35rpx; |
|||
right: -48rpx; |
|||
} |
|||
|
|||
.popup-title { |
|||
font-size: 40rpx; |
|||
font-weight: 700; |
|||
color: #111; |
|||
margin-bottom: 36rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.form-container { |
|||
width: 100%; |
|||
margin-bottom: 32rpx; |
|||
|
|||
.appointment-info { |
|||
background-color: #fafafa; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx 30rpx; |
|||
margin-bottom: 28rpx; |
|||
border: 1rpx solid #efefef; |
|||
box-shadow: none; |
|||
|
|||
.info-item { |
|||
display: flex; |
|||
margin-bottom: 16rpx; |
|||
align-items: center; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.label { |
|||
color: #6c757d; |
|||
font-size: 28rpx; |
|||
min-width: 200rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.value { |
|||
color: #495057; |
|||
font-size: 28rpx; |
|||
flex: 1; |
|||
font-weight: 400; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.form-item { |
|||
margin-bottom: 30rpx; |
|||
display: flex; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
.required { |
|||
color: #ff0000; |
|||
font-size: 28rpx; |
|||
margin-top: 16rpx; |
|||
} |
|||
.form-label { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 30rpx; |
|||
margin-bottom: 16rpx; |
|||
white-space: nowrap; |
|||
margin-right: 20rpx; |
|||
} |
|||
.u-input, |
|||
.u-textarea { |
|||
background-color: #fff; |
|||
border: 1rpx solid #e6e6e6; |
|||
border-radius: 14rpx; |
|||
padding: 20rpx; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
min-height: 80rpx; |
|||
transition: all 0.3s ease; |
|||
|
|||
&:focus { |
|||
border-color: #08b3b3; |
|||
box-shadow: 0 0 0 2rpx rgba(8, 179, 179, 0.1); |
|||
} |
|||
} |
|||
|
|||
.u-textarea { |
|||
padding-top: 16rpx; |
|||
min-height: 120rpx; |
|||
resize: none; |
|||
} |
|||
|
|||
/* 下拉样式 */ |
|||
.dropdown { |
|||
position: relative; |
|||
} |
|||
.dropdown-list { |
|||
position: absolute; |
|||
top: calc(100% + 8rpx); |
|||
left: 0; |
|||
right: 0; |
|||
background: #ffffff; |
|||
border: 1rpx solid #e6e6e6; |
|||
border-radius: 14rpx; |
|||
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08); |
|||
z-index: 9; |
|||
overflow: hidden; |
|||
} |
|||
.dropdown-item { |
|||
padding: 22rpx 24rpx; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
} |
|||
.dropdown-item:active { |
|||
background: #f6f7fb; |
|||
} |
|||
.arrow-open { |
|||
transform: rotate(180deg); |
|||
transition: transform 0.2s ease; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.popup-actions { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-top: 36rpx; |
|||
gap: 28rpx; |
|||
|
|||
.u-button { |
|||
flex: 1; |
|||
border-radius: 48rpx; |
|||
font-size: 30rpx; |
|||
height: 88rpx; |
|||
line-height: 88rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 1.3 KiB |
Loading…
Reference in new issue