7 changed files with 860 additions and 54 deletions
@ -0,0 +1,231 @@ |
|||||
|
<template> |
||||
|
<view class="checkout-detail-bg"> |
||||
|
<!-- 房间图片 --> |
||||
|
<image class="room-img" src="/static/img/login-top.png" mode="aspectFill"></image> |
||||
|
<!-- 基本信息卡片 --> |
||||
|
<view class="info-card"> |
||||
|
<view class="room-title">5号楼1单元101 房间1</view> |
||||
|
<view class="info-row"><text class="label">居住人</text>王静</view> |
||||
|
<view class="info-row"><text class="label">性别</text>女</view> |
||||
|
<view class="info-row"><text class="label">联系电话</text>187****0001</view> |
||||
|
<view class="info-row"><text class="label">居住日期</text>2025-04-04 至 2025-05-06</view> |
||||
|
</view> |
||||
|
<!-- 设备检查 --> |
||||
|
<view class="section-card"> |
||||
|
<view class="section-title">设备检查</view> |
||||
|
<view v-for="(item, idx) in deviceList" :key="item.name" class="device-row"> |
||||
|
<text class="device-label">{{ item.name }}</text> |
||||
|
<u-radio-group v-model="item.status" placement="row" @change="onDeviceChange(idx, $event)"> |
||||
|
<u-radio activeColor="#0DC6C6" v-for="opt in statusOptions" :key="opt" :label="opt" :name="opt"></u-radio> |
||||
|
</u-radio-group> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 水电表 --> |
||||
|
<view class="section-card"> |
||||
|
<view class="section-title">水电表设备</view> |
||||
|
<view class="meter-row"> |
||||
|
<text class="meter-label">水表数</text> |
||||
|
<u-input v-model="waterMeter" type="digit" placeholder="请输入水表数" border="none" /> |
||||
|
</view> |
||||
|
<view class="meter-row"> |
||||
|
<text class="meter-label">电表数</text> |
||||
|
<u-input v-model="electricMeter" type="digit" placeholder="请输入电表数" border="none" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 其他说明 --> |
||||
|
<view class="section-card"> |
||||
|
<view class="section-title">其他说明</view> |
||||
|
<u-input |
||||
|
v-model="remark" |
||||
|
type="textarea" |
||||
|
placeholder="请输入内容(不超过500字)" |
||||
|
maxlength="500" |
||||
|
height="100" |
||||
|
border="none" |
||||
|
custom-style="background:#f7f7f7;border-radius:12rpx;padding:16rpx;" |
||||
|
/> |
||||
|
</view> |
||||
|
<!-- 图片/视频上传区域 --> |
||||
|
<view class="section-card"> |
||||
|
<view class="section-title">图片/视频</view> |
||||
|
<u-upload |
||||
|
v-model="fileList" |
||||
|
:max-count="10" |
||||
|
:multiple="true" |
||||
|
:preview-full-image="true" |
||||
|
:deletable="true" |
||||
|
:show-upload-list="true" |
||||
|
:file-list="fileList" |
||||
|
accept="image,video" |
||||
|
@after-read="afterRead" |
||||
|
@delete="onDelete" |
||||
|
> |
||||
|
<view class="custom-upload-btn"> |
||||
|
<u-icon name="plus" size="40"></u-icon> |
||||
|
<view class="upload-tips">最多10个</view> |
||||
|
</view> |
||||
|
</u-upload> |
||||
|
</view> |
||||
|
<!-- 提交按钮 --> |
||||
|
<view class="submit-btn-wrap"> |
||||
|
<u-button type="primary" shape="circle" @click="onSubmit">提交</u-button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
deviceList: [ |
||||
|
{ name: '空调', status: '完好' }, |
||||
|
{ name: '冰箱', status: '完好' }, |
||||
|
{ name: '洗衣机', status: '完好' }, |
||||
|
{ name: '电磁灶', status: '完好' }, |
||||
|
{ name: '沙发', status: '完好' }, |
||||
|
{ name: '茶几', status: '完好' }, |
||||
|
{ name: '桌椅', status: '完好' } |
||||
|
], |
||||
|
statusOptions: ['完好', '破损', '丢失'], |
||||
|
waterMeter: 3245.1, |
||||
|
electricMeter: 2672.6, |
||||
|
remark: '', |
||||
|
fileList: [] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onDeviceChange(idx, val) { |
||||
|
this.deviceList[idx].status = val |
||||
|
}, |
||||
|
afterRead(event) { |
||||
|
let files = Array.isArray(event) ? event : [event] |
||||
|
this.fileList = this.fileList.concat(files) |
||||
|
}, |
||||
|
onDelete(event) { |
||||
|
this.fileList.splice(event.index, 1) |
||||
|
}, |
||||
|
onSubmit() { |
||||
|
uni.showToast({ title: '提交成功', icon: 'success' }) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.checkout-detail-bg { |
||||
|
background: #f7f7f7; |
||||
|
min-height: 100vh; |
||||
|
padding-bottom: 40rpx; |
||||
|
} |
||||
|
.room-img { |
||||
|
width: 100vw; |
||||
|
height: 220rpx; |
||||
|
object-fit: cover; |
||||
|
display: block; |
||||
|
} |
||||
|
.info-card { |
||||
|
background: #fff; |
||||
|
border-radius: 20rpx; |
||||
|
margin: -40rpx 24rpx 16rpx 24rpx; |
||||
|
padding: 24rpx 24rpx 12rpx 24rpx; |
||||
|
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04); |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
.room-title { |
||||
|
font-weight: bold; |
||||
|
font-size: 32rpx; |
||||
|
margin-bottom: 16rpx; |
||||
|
} |
||||
|
.info-row { |
||||
|
font-size: 28rpx; |
||||
|
color: #222; |
||||
|
margin-bottom: 8rpx; |
||||
|
} |
||||
|
.label { |
||||
|
color: #888; |
||||
|
margin-right: 24rpx; |
||||
|
} |
||||
|
.section-card { |
||||
|
background: #fff; |
||||
|
border-radius: 20rpx; |
||||
|
margin: 0 24rpx 16rpx 24rpx; |
||||
|
padding: 24rpx; |
||||
|
} |
||||
|
.section-title { |
||||
|
font-weight: bold; |
||||
|
font-size: 28rpx; |
||||
|
margin-bottom: 18rpx; |
||||
|
} |
||||
|
.device-row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 0 24rpx; |
||||
|
min-height: 64rpx; |
||||
|
border-bottom: 1px solid #f2f2f2; |
||||
|
} |
||||
|
.device-label { |
||||
|
width: 160rpx; |
||||
|
color: #222; |
||||
|
font-size: 28rpx; |
||||
|
margin-right: 24rpx; |
||||
|
} |
||||
|
.meter-row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 12rpx; |
||||
|
} |
||||
|
.meter-label { |
||||
|
width: 120rpx; |
||||
|
color: #888; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
.u-radio { |
||||
|
margin-right: 36rpx; |
||||
|
} |
||||
|
.meter-value { |
||||
|
color: #222; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
.custom-upload-btn { |
||||
|
width: 160rpx; |
||||
|
height: 160rpx; |
||||
|
background: #fafafa; |
||||
|
border: 2rpx dashed #e5e5e5; |
||||
|
border-radius: 16rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin: 0 16rpx 0 0; |
||||
|
} |
||||
|
.upload-tips { |
||||
|
color: #bbb; |
||||
|
font-size: 24rpx; |
||||
|
margin-top: 8rpx; |
||||
|
} |
||||
|
.u-upload__wrap { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.u-upload__preview { |
||||
|
border-radius: 16rpx; |
||||
|
overflow: hidden; |
||||
|
margin-right: 16rpx; |
||||
|
margin-bottom: 16rpx; |
||||
|
} |
||||
|
.submit-btn-wrap { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
margin: 40rpx 0 0 0; |
||||
|
} |
||||
|
.u-button--primary { |
||||
|
background: linear-gradient(90deg, #0DC6C6 0%, #13C2C2 100%) !important; |
||||
|
font-size: 36rpx; |
||||
|
border-radius: 48rpx !important; |
||||
|
width: 80vw; |
||||
|
height: 88rpx; |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,136 @@ |
|||||
|
<template> |
||||
|
<view class="checkout-list-bg"> |
||||
|
<u-list |
||||
|
@scrolltolower="loadMore" |
||||
|
@refresh="onRefresh" |
||||
|
:refreshing="refreshing" |
||||
|
:finished="finished" |
||||
|
:finished-text="'没有更多了'" |
||||
|
> |
||||
|
<u-list-item v-for="item in list" :key="item.id"> |
||||
|
<view class="checkout-card" @click="goDetail(item)"> |
||||
|
<image :src="item.img" class="room-img" mode="aspectFill"></image> |
||||
|
<view class="room-info"> |
||||
|
<view class="room-title">{{ item.roomNo }}</view> |
||||
|
<view class="room-user"> |
||||
|
<text>{{ item.tenant }}</text> |
||||
|
<text class="gender">{{ item.gender }}</text> |
||||
|
<text class="phone">{{ item.phone }}</text> |
||||
|
</view> |
||||
|
<view class="room-date" |
||||
|
>{{ item.startDate }}至{{ item.endDate }}</view |
||||
|
> |
||||
|
</view> |
||||
|
</view> |
||||
|
</u-list-item> |
||||
|
</u-list> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
list: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
img: "/static/img/login-top.png", |
||||
|
roomNo: "5号楼1单元101 房间1", |
||||
|
tenant: "王静", |
||||
|
gender: "女", |
||||
|
phone: "187****8801", |
||||
|
startDate: "2025-04-01", |
||||
|
endDate: "2025-05-08", |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
img: "/static/img/login-top.png", |
||||
|
roomNo: "2号楼1单元501 房间1", |
||||
|
tenant: "刘宇", |
||||
|
gender: "男", |
||||
|
phone: "187****8202", |
||||
|
startDate: "2025-04-01", |
||||
|
endDate: "2025-05-08", |
||||
|
}, |
||||
|
], |
||||
|
page: 1, |
||||
|
pageSize: 10, |
||||
|
refreshing: false, |
||||
|
finished: false, |
||||
|
}; |
||||
|
}, |
||||
|
onLoad() { |
||||
|
this.getList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
// 下拉刷新 |
||||
|
onRefresh() { |
||||
|
this.page = 1; |
||||
|
this.finished = false; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
// 上拉加载 |
||||
|
loadMore() { |
||||
|
if (this.finished) return; |
||||
|
this.page++; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
getList() { }, |
||||
|
goDetail(item) { |
||||
|
uni.navigateTo({ |
||||
|
url: `/pagesA/checkout/detail/detail?id=${item.id}` |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.checkout-list-bg { |
||||
|
background: #f7f7f7; |
||||
|
min-height: 80vh; |
||||
|
padding: 24rpx 0; |
||||
|
} |
||||
|
.checkout-card { |
||||
|
display: flex; |
||||
|
background: #fff; |
||||
|
border-radius: 20rpx; |
||||
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04); |
||||
|
margin: 24rpx 24rpx 0 24rpx; |
||||
|
padding: 20rpx; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.room-img { |
||||
|
width: 160rpx; |
||||
|
height: 120rpx; |
||||
|
border-radius: 12rpx; |
||||
|
object-fit: cover; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
.room-info { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.room-title { |
||||
|
font-weight: bold; |
||||
|
font-size: 32rpx; |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
|
.room-user { |
||||
|
font-size: 28rpx; |
||||
|
color: #222; |
||||
|
margin-bottom: 8rpx; |
||||
|
} |
||||
|
.room-user .gender { |
||||
|
margin-left: 16rpx; |
||||
|
} |
||||
|
.room-user .phone { |
||||
|
margin-left: 16rpx; |
||||
|
} |
||||
|
.room-date { |
||||
|
color: #bbb; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,263 @@ |
|||||
|
<template> |
||||
|
<view class="checkout-detail-bg"> |
||||
|
<!-- 房间图片 --> |
||||
|
<image |
||||
|
class="room-img" |
||||
|
src="/static/img/login-top.png" |
||||
|
mode="aspectFill" |
||||
|
></image> |
||||
|
<!-- 基本信息卡片 --> |
||||
|
<view class="info-card"> |
||||
|
<view class="info-header"> |
||||
|
<view class="room-title">2号楼1单元101 房间1</view> |
||||
|
<view class="status-text">待释放</view> |
||||
|
</view> |
||||
|
<view class="checkout-date-row">退房日期:2025-05-16</view> |
||||
|
</view> |
||||
|
<!-- 设备检查 --> |
||||
|
<view class="section-card"> |
||||
|
<view class="section-title">设备检查</view> |
||||
|
<view |
||||
|
v-for="(item, idx) in deviceList" |
||||
|
:key="item.name" |
||||
|
class="device-row" |
||||
|
> |
||||
|
<text class="device-label">{{ item.name }}</text> |
||||
|
<u-radio-group |
||||
|
v-model="item.status" |
||||
|
placement="row" |
||||
|
@change="onDeviceChange(idx, $event)" |
||||
|
> |
||||
|
<u-radio |
||||
|
activeColor="#0DC6C6" |
||||
|
v-for="opt in statusOptions" |
||||
|
:key="opt" |
||||
|
:label="opt" |
||||
|
:name="opt" |
||||
|
></u-radio> |
||||
|
</u-radio-group> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 水电表 --> |
||||
|
<view class="section-card"> |
||||
|
<view class="section-title">水电表设备</view> |
||||
|
<view class="meter-row"> |
||||
|
<text class="meter-label">水表数</text> |
||||
|
<u-input |
||||
|
v-model="waterMeter" |
||||
|
type="digit" |
||||
|
placeholder="请输入水表数" |
||||
|
border="none" |
||||
|
/> |
||||
|
</view> |
||||
|
<view class="meter-row"> |
||||
|
<text class="meter-label">电表数</text> |
||||
|
<u-input |
||||
|
v-model="electricMeter" |
||||
|
type="digit" |
||||
|
placeholder="请输入电表数" |
||||
|
border="none" |
||||
|
/> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 其他说明 --> |
||||
|
<view class="section-card"> |
||||
|
<view class="section-title">其他说明</view> |
||||
|
<u-input |
||||
|
v-model="remark" |
||||
|
type="textarea" |
||||
|
placeholder="请输入内容(不超过500字)" |
||||
|
maxlength="500" |
||||
|
height="100" |
||||
|
border="none" |
||||
|
custom-style="background:#f7f7f7;border-radius:12rpx;padding:16rpx;" |
||||
|
/> |
||||
|
</view> |
||||
|
<!-- 图片/视频上传区域 --> |
||||
|
<view class="section-card"> |
||||
|
<view class="section-title">图片/视频</view> |
||||
|
<u-upload |
||||
|
v-model="fileList" |
||||
|
:max-count="10" |
||||
|
:multiple="true" |
||||
|
:preview-full-image="true" |
||||
|
:deletable="true" |
||||
|
:show-upload-list="true" |
||||
|
:file-list="fileList" |
||||
|
accept="image,video" |
||||
|
@after-read="afterRead" |
||||
|
@delete="onDelete" |
||||
|
> |
||||
|
<view class="custom-upload-btn"> |
||||
|
<u-icon name="plus" size="40"></u-icon> |
||||
|
<view class="upload-tips">最多10个</view> |
||||
|
</view> |
||||
|
</u-upload> |
||||
|
</view> |
||||
|
<!-- 提交按钮 --> |
||||
|
<view class="submit-btn-wrap"> |
||||
|
<u-button type="primary" shape="circle" @click="onSubmit">提交</u-button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
deviceList: [ |
||||
|
{ name: "空调", status: "完好" }, |
||||
|
{ name: "冰箱", status: "完好" }, |
||||
|
{ name: "洗衣机", status: "完好" }, |
||||
|
{ name: "电磁灶", status: "完好" }, |
||||
|
{ name: "沙发", status: "完好" }, |
||||
|
{ name: "茶几", status: "完好" }, |
||||
|
{ name: "桌椅", status: "完好" }, |
||||
|
], |
||||
|
statusOptions: ["完好", "破损", "丢失"], |
||||
|
waterMeter: 3245.1, |
||||
|
electricMeter: 2672.6, |
||||
|
remark: "", |
||||
|
fileList: [], |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
onDeviceChange(idx, val) { |
||||
|
this.deviceList[idx].status = val; |
||||
|
}, |
||||
|
afterRead(event) { |
||||
|
let files = Array.isArray(event) ? event : [event]; |
||||
|
this.fileList = this.fileList.concat(files); |
||||
|
}, |
||||
|
onDelete(event) { |
||||
|
this.fileList.splice(event.index, 1); |
||||
|
}, |
||||
|
onSubmit() { |
||||
|
uni.showToast({ title: "提交成功", icon: "success" }); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.checkout-detail-bg { |
||||
|
background: #f7f7f7; |
||||
|
min-height: 100vh; |
||||
|
padding-bottom: 40rpx; |
||||
|
} |
||||
|
.room-img { |
||||
|
width: 100vw; |
||||
|
height: 220rpx; |
||||
|
object-fit: cover; |
||||
|
display: block; |
||||
|
} |
||||
|
.info-card { |
||||
|
background: #fff; |
||||
|
border-radius: 20rpx; |
||||
|
margin: 24rpx 24rpx 0 24rpx; |
||||
|
padding: 24rpx 24rpx 12rpx 24rpx; |
||||
|
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04); |
||||
|
} |
||||
|
.info-header { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.room-title { |
||||
|
font-weight: bold; |
||||
|
font-size: 32rpx; |
||||
|
color: #222; |
||||
|
} |
||||
|
.status-text { |
||||
|
color: #FFB200; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.checkout-date-row { |
||||
|
font-size: 28rpx; |
||||
|
color: #222; |
||||
|
margin-top: 18rpx; |
||||
|
} |
||||
|
.section-card { |
||||
|
background: #fff; |
||||
|
border-radius: 20rpx; |
||||
|
margin: 0 24rpx 16rpx 24rpx; |
||||
|
padding: 24rpx; |
||||
|
} |
||||
|
.section-title { |
||||
|
font-weight: bold; |
||||
|
font-size: 28rpx; |
||||
|
margin-bottom: 18rpx; |
||||
|
} |
||||
|
.device-row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 0 24rpx; |
||||
|
min-height: 64rpx; |
||||
|
border-bottom: 1px solid #f2f2f2; |
||||
|
} |
||||
|
.device-label { |
||||
|
width: 160rpx; |
||||
|
color: #222; |
||||
|
font-size: 28rpx; |
||||
|
margin-right: 24rpx; |
||||
|
} |
||||
|
.meter-row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 12rpx; |
||||
|
} |
||||
|
.meter-label { |
||||
|
width: 120rpx; |
||||
|
color: #888; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
.u-radio { |
||||
|
margin-right: 36rpx; |
||||
|
} |
||||
|
.meter-value { |
||||
|
color: #222; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
.custom-upload-btn { |
||||
|
width: 160rpx; |
||||
|
height: 160rpx; |
||||
|
background: #fafafa; |
||||
|
border: 2rpx dashed #e5e5e5; |
||||
|
border-radius: 16rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin: 0 16rpx 0 0; |
||||
|
} |
||||
|
.upload-tips { |
||||
|
color: #bbb; |
||||
|
font-size: 24rpx; |
||||
|
margin-top: 8rpx; |
||||
|
} |
||||
|
.u-upload__wrap { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.u-upload__preview { |
||||
|
border-radius: 16rpx; |
||||
|
overflow: hidden; |
||||
|
margin-right: 16rpx; |
||||
|
margin-bottom: 16rpx; |
||||
|
} |
||||
|
.submit-btn-wrap { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
margin: 40rpx 0 0 0; |
||||
|
} |
||||
|
.u-button--primary { |
||||
|
background: linear-gradient(90deg, #0dc6c6 0%, #13c2c2 100%) !important; |
||||
|
font-size: 36rpx; |
||||
|
border-radius: 48rpx !important; |
||||
|
width: 80vw; |
||||
|
height: 88rpx; |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,136 @@ |
|||||
|
<template> |
||||
|
<view class="checkout-list-bg"> |
||||
|
<u-list |
||||
|
@scrolltolower="loadMore" |
||||
|
@refresh="onRefresh" |
||||
|
:refreshing="refreshing" |
||||
|
:finished="finished" |
||||
|
:finished-text="'没有更多了'" |
||||
|
> |
||||
|
<u-list-item v-for="item in list" :key="item.id"> |
||||
|
<view class="checkout-card" @click="goDetail(item)"> |
||||
|
<image :src="item.img" class="room-img" mode="aspectFill"></image> |
||||
|
<view class="room-info"> |
||||
|
<view class="room-title">{{ item.roomNo }}</view> |
||||
|
<view class="room-user"> |
||||
|
<text>{{ item.tenant }}</text> |
||||
|
<text class="gender">{{ item.gender }}</text> |
||||
|
<text class="phone">{{ item.phone }}</text> |
||||
|
</view> |
||||
|
<view class="room-date" |
||||
|
>{{ item.startDate }}至{{ item.endDate }}</view |
||||
|
> |
||||
|
</view> |
||||
|
</view> |
||||
|
</u-list-item> |
||||
|
</u-list> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
list: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
img: "/static/img/login-top.png", |
||||
|
roomNo: "5号楼1单元101 房间1", |
||||
|
tenant: "王静", |
||||
|
gender: "女", |
||||
|
phone: "187****8801", |
||||
|
startDate: "2025-04-01", |
||||
|
endDate: "2025-05-08", |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
img: "/static/img/login-top.png", |
||||
|
roomNo: "2号楼1单元501 房间1", |
||||
|
tenant: "刘宇", |
||||
|
gender: "男", |
||||
|
phone: "187****8202", |
||||
|
startDate: "2025-04-01", |
||||
|
endDate: "2025-05-08", |
||||
|
}, |
||||
|
], |
||||
|
page: 1, |
||||
|
pageSize: 10, |
||||
|
refreshing: false, |
||||
|
finished: false, |
||||
|
}; |
||||
|
}, |
||||
|
onLoad() { |
||||
|
this.getList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
// 下拉刷新 |
||||
|
onRefresh() { |
||||
|
this.page = 1; |
||||
|
this.finished = false; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
// 上拉加载 |
||||
|
loadMore() { |
||||
|
if (this.finished) return; |
||||
|
this.page++; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
getList() { }, |
||||
|
goDetail(item) { |
||||
|
uni.navigateTo({ |
||||
|
url: `/pagesA/release/detail/detail?id=${item.id}` |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.checkout-list-bg { |
||||
|
background: #f7f7f7; |
||||
|
min-height: 80vh; |
||||
|
padding: 24rpx 0; |
||||
|
} |
||||
|
.checkout-card { |
||||
|
display: flex; |
||||
|
background: #fff; |
||||
|
border-radius: 20rpx; |
||||
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04); |
||||
|
margin: 24rpx 24rpx 0 24rpx; |
||||
|
padding: 20rpx; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.room-img { |
||||
|
width: 160rpx; |
||||
|
height: 120rpx; |
||||
|
border-radius: 12rpx; |
||||
|
object-fit: cover; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
.room-info { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.room-title { |
||||
|
font-weight: bold; |
||||
|
font-size: 32rpx; |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
|
.room-user { |
||||
|
font-size: 28rpx; |
||||
|
color: #222; |
||||
|
margin-bottom: 8rpx; |
||||
|
} |
||||
|
.room-user .gender { |
||||
|
margin-left: 16rpx; |
||||
|
} |
||||
|
.room-user .phone { |
||||
|
margin-left: 16rpx; |
||||
|
} |
||||
|
.room-date { |
||||
|
color: #bbb; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
</style> |
Loading…
Reference in new issue