Browse Source

退房检查、释放房源检查

wyx
wangyx 3 months ago
parent
commit
3631d3d8ef
  1. 131
      pages.json
  2. 2
      pages/login/login.vue
  3. 15
      pages/tabBar/work/index.vue
  4. 231
      pagesA/checkout/detail/detail.vue
  5. 136
      pagesA/checkout/list/list.vue
  6. 263
      pagesA/release/detail/detail.vue
  7. 136
      pagesA/release/list/list.vue

131
pages.json

@ -1,50 +1,80 @@
{ {
"easycom": { "easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}, },
"pages": [ "pages": [{
{
"path": "pages/login/login", "path": "pages/login/login",
"style": { "style": {
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },
{ {
"path": "pages/tabBar/work/index", "path": "pages/tabBar/work/index",
"style": { "style": {
"navigationBarTitleText": "工作", "navigationBarTitleText": "工作",
"disableScroll": true "disableScroll": true
} }
}, },
{ {
"path": "pages/tabBar/mine/index", "path": "pages/tabBar/mine/index",
"style": { "style": {
"navigationBarTitleText": "我的", "navigationBarTitleText": "我的",
"disableScroll": true "disableScroll": true
} }
}, },
{ {
"path": "pages/tabBar/bsPage/bsRecord", "path": "pages/tabBar/bsPage/bsRecord",
"style": { "style": {
"navigationBarTitleText": "报事", "navigationBarTitleText": "报事",
"disableScroll": true "disableScroll": true
} }
}, },
{ {
"path": "pages/tabBar/bsPage/bsReport", "path": "pages/tabBar/bsPage/bsReport",
"style": { "style": {
"navigationBarTitleText": "上报", "navigationBarTitleText": "上报",
"disableScroll": true "disableScroll": true
} }
}, },
{ {
"path": "pages/tabBar/msg/index", "path": "pages/tabBar/msg/index",
"style": { "style": {
"navigationBarTitleText": "消息", "navigationBarTitleText": "消息",
"disableScroll": true "disableScroll": true
} }
} }
], ],
"subPackages": [{
"root": "pagesA",
"pages": [{
"path": "checkout/list/list",
"style": {
"navigationBarTitleText": "退房检查"
}
},
{
"path": "checkout/detail/detail",
"style": {
"navigationBarTitleText": "退房检查"
}
},
{
"path" : "release/list/list",
"style" :
{
"navigationBarTitleText" : "释放房源检查"
}
},
{
"path" : "release/detail/detail",
"style" :
{
"navigationBarTitleText" : "释放房源检查"
}
}
]
}],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app", "navigationBarTitleText": "uni-app",
@ -52,27 +82,26 @@
"backgroundColor": "#fff" "backgroundColor": "#fff"
}, },
"uniIdRouter": {}, "uniIdRouter": {},
"tabBar": { "tabBar": {
"color": "#8b8b8b", "color": "#8b8b8b",
"selectedColor": "#08B3B3", "selectedColor": "#08B3B3",
"borderStyle": "black", "borderStyle": "black",
"backgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8",
"list": [ "list": [{
{
"pagePath": "pages/tabBar/msg/index", "pagePath": "pages/tabBar/msg/index",
"iconPath": "static/img/消息-灰.png", "iconPath": "static/img/消息-灰.png",
"selectedIconPath": "static/img/消息.png", "selectedIconPath": "static/img/消息.png",
"text": "消息" "text": "消息"
}, },
{ {
"pagePath": "pages/tabBar/work/index", "pagePath": "pages/tabBar/work/index",
"iconPath": "static/img/工作-灰.png", "iconPath": "static/img/工作-灰.png",
"selectedIconPath": "static/img/工作.png", "selectedIconPath": "static/img/工作.png",
"text": "工作" "text": "工作"
}, },
{ {
"pagePath": "pages/tabBar/mine/index", "pagePath": "pages/tabBar/mine/index",
"iconPath": "static/img/我的-灰.png", "iconPath": "static/img/我的-灰.png",
"selectedIconPath": "static/img/我的.png", "selectedIconPath": "static/img/我的.png",
"text": "我的" "text": "我的"
} }

2
pages/login/login.vue

@ -62,7 +62,7 @@ export default {
fontSize: "18px", fontSize: "18px",
margin: "50px", margin: "50px",
marginTop: "200rpx", marginTop: "200rpx",
background: "linear-gradient(90deg, #3ec6c6 0%, #4edfa7 100%)", background: "linear-gradient(90deg, #0DC6C6 0%, #13C2C2 100%)",
}, },
}; };
}, },

15
pages/tabBar/work/index.vue

@ -5,9 +5,9 @@
<view class="conItem" style="margin-top: 100rpx;"> <view class="conItem" style="margin-top: 100rpx;">
<view class="conItem-title">房源</view> <view class="conItem-title">房源</view>
<view class="conItem-cont"> <view class="conItem-cont">
<view class="conItem-cont-item" v-for="(item, index) in fyList" :key="index"> <view class="conItem-cont-item" v-for="(item, index) in fyList" :key="index" @click="handelFyClick(item)">
<image :src="item.image" class="itemImg"></image> <image :src="item.image" class="itemImg"></image>
<text class="itemText">房子</text> <text class="itemText">{{item.text}}</text>
</view> </view>
</view> </view>
</view> </view>
@ -89,6 +89,17 @@ export default {
}, },
methods: { methods: {
handelFyClick(item) {
if (item.text == "退房检查") {
uni.navigateTo({
url: '/pagesA/checkout/list/list'
})
}else if (item.text == "释放房源检查") {
uni.navigateTo({
url: '/pagesA/release/list/list'
})
}
},
handleBsClick (item) { handleBsClick (item) {
if (item.text === '处理') { if (item.text === '处理') {
// //

231
pagesA/checkout/detail/detail.vue

@ -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>

136
pagesA/checkout/list/list.vue

@ -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>

263
pagesA/release/detail/detail.vue

@ -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>

136
pagesA/release/list/list.vue

@ -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…
Cancel
Save