453 lines
8.9 KiB
Vue
453 lines
8.9 KiB
Vue
<template>
|
||
<view class="contentStyle" style="">
|
||
<view class="status-bar"></view>
|
||
<uni-nav-bar title="我的房屋" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
|
||
</uni-nav-bar>
|
||
<!-- -->
|
||
|
||
<scroll-view class="page" scroll-y="true">
|
||
<view v-if="houseList.length === 0" class="empty-state">
|
||
<uni-icons type="info" size="60" color="#ccc"></uni-icons>
|
||
<text class="empty-text">
|
||
{{ '暂无数据'}}
|
||
</text>
|
||
</view>
|
||
<!-- 房屋列表 v-for 渲染 -->
|
||
<view class="house-list">
|
||
<view class="house-card" v-for="(item, index) in houseList" :key="index" @click="tapHouse(item)">
|
||
<!-- 标题 + 状态 -->
|
||
<view class="card-header">
|
||
<view class="title-box">
|
||
<text class="tag-default" v-if="item.isDefault==1">默认</text>
|
||
<text
|
||
class="house-name">{{ item.villageName+"-"+item.buildingName+"-"+item.unitNo }}</text>
|
||
</view>
|
||
<text class="status-tag"
|
||
:class="item.certificationStatus=='0'?'pending':item.certificationStatus=='1'?'success':item.certificationStatus=='2'?'fail':''">{{ item.certificationStatus=='0'?'未认证':item.certificationStatus=='1'?'认证成功':item.certificationStatus=='2'?'认证失败':'' }}</text>
|
||
</view>
|
||
|
||
<!-- 房屋信息 -->
|
||
<view class="card-body">
|
||
<view class="row">
|
||
<text class="label">房间号</text>
|
||
<view class="value-box">
|
||
<text class="value">{{ item.houseNo }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<text class="label">业主</text>
|
||
<text class="value">{{ item.name }}</text>
|
||
</view>
|
||
<view class="row">
|
||
<text class="label">房屋状态</text>
|
||
<text
|
||
class="value">{{ item.houseStatus==0?'自住':item.houseStatus==1?'闲置':item.houseStatus==2?'租赁':item.houseStatus==3?'其他':''}}</text>
|
||
</view>
|
||
<view class="defaultBox" v-if="item.certificationStatus=='1'&&!item.isDefault==1">
|
||
<text class="set-default">设为默认</text>
|
||
<switch class="no-cross-switch" :checked="item.isDefault==1" color="#1677ff"
|
||
@change="onSwitchChange($event,item)" @click.stop />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="houseList.length > 0" class="load-more-wrap">
|
||
<view v-if="noMoreData" class="no-more">没有更多了</view>
|
||
<button v-else class="load-more-btn" :loading="loading" @click="loadMore">加载更多</button>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 底部添加按钮 -->
|
||
<view class="bottom-btn">
|
||
<button class="add-btn" @click="addHouse">添加房屋</button>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
</template>
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
onMounted,
|
||
|
||
} from 'vue'
|
||
import {
|
||
getMyHouseList,
|
||
setMyHouseDefault
|
||
} from '/pageSubPack/api/apiSub.js'
|
||
|
||
|
||
const houseList = ref([])
|
||
const loading = ref(false)
|
||
const pageNum = ref(1)
|
||
const pageSize = ref(10)
|
||
const noMoreData = ref(false)
|
||
// ==================== 获取列表数据 ====================
|
||
const getList = async () => {
|
||
if (loading.value) return
|
||
loading.value = true
|
||
try {
|
||
const res = await getMyHouseList({
|
||
pageNum: pageNum.value,
|
||
pageSize: pageSize.value
|
||
})
|
||
const newList = res.rows || []
|
||
if (pageNum.value === 1) {
|
||
houseList.value = newList
|
||
} else {
|
||
houseList.value = [...houseList.value, ...newList]
|
||
}
|
||
// 不足一页说明没有更多数据了
|
||
if (newList.length < pageSize.value) {
|
||
noMoreData.value = true
|
||
}
|
||
} catch (err) {
|
||
uni.showToast({
|
||
title: '加载失败',
|
||
icon: 'none'
|
||
})
|
||
console.error('列表接口报错：', err)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// ==================== 加载更多 ====================
|
||
const loadMore = () => {
|
||
if (loading.value || noMoreData.value) return
|
||
pageNum.value++
|
||
getList()
|
||
}
|
||
|
||
// 页面加载时请求第一页
|
||
onMounted(() => {
|
||
pageNum.value = 1
|
||
noMoreData.value = false
|
||
getList()
|
||
})
|
||
|
||
|
||
|
||
const onSwitchChange = async (e, i) => {
|
||
// uni.showLoading({
|
||
// title: '设置中...',
|
||
// mask: true
|
||
// });
|
||
|
||
try {
|
||
const res = await setMyHouseDefault({
|
||
houseId: i.houseId
|
||
})
|
||
const data = res
|
||
if (data.code === 200) {
|
||
// uni.hideLoading();
|
||
pageNum.value = 1
|
||
noMoreData.value = false
|
||
getList()
|
||
uni.setStorageSync('houseIsDefault', e.detail.value)
|
||
uni.showToast({
|
||
title: '设置默认房屋成功',
|
||
icon: 'none'
|
||
});
|
||
} else {
|
||
// uni.hideLoading();
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} catch (err) {
|
||
// uni.hideLoading();
|
||
uni.showToast({
|
||
title: err.msg,
|
||
icon: 'none'
|
||
})
|
||
console.error('列表接口报错：', err)
|
||
}
|
||
}
|
||
|
||
|
||
|
||
const tapHouse = (item) => {
|
||
uni.navigateTo({
|
||
url: '/pageSubPack/my/houseDetail?id=' + item.id + '&certificationStatus=' + item.certificationStatus,
|
||
success: res => {},
|
||
fail: () => {},
|
||
complete: () => {}
|
||
});
|
||
}
|
||
|
||
const addHouse = () => {
|
||
uni.setStorageSync('operationType', 'add');
|
||
uni.navigateTo({
|
||
url: '/pageSubPack/my/addHouse',
|
||
success: res => {},
|
||
fail: () => {},
|
||
complete: () => {}
|
||
});
|
||
|
||
|
||
}
|
||
|
||
const goBack = () => {
|
||
uni.switchTab({
|
||
url: '/pages/myIndex/myIndex',
|
||
success: res => {},
|
||
fail: () => {},
|
||
complete: () => {}
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
// background: #F3F8FD;
|
||
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
|
||
}
|
||
</style>
|
||
|
||
<style scoped>
|
||
.contentStyle {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
/* 关键：占满屏幕高度 */
|
||
background-color: #f5f7fa;
|
||
}
|
||
|
||
.page {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 0px 40rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 空状态 */
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 100rpx 0;
|
||
color: #ccc;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 32rpx;
|
||
color: #999;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.no-more {
|
||
text-align: center;
|
||
padding: 30rpx 0;
|
||
color: #999;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.load-more-wrap {
|
||
padding: 20rpx 0 40rpx;
|
||
}
|
||
|
||
.load-more-btn {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
background: #ffffff;
|
||
color: #007aff;
|
||
border: 1rpx solid #007aff;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.load-more-btn::after {
|
||
border: none;
|
||
}
|
||
|
||
/* 底部按钮 */
|
||
.bottom-btn {
|
||
padding: 20rpx 30rpx 40rpx;
|
||
}
|
||
|
||
/* 列表 */
|
||
.house-list {
|
||
height: 100%;
|
||
overflow-y: scroll;
|
||
|
||
}
|
||
|
||
.house-card {
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 20rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 头部 */
|
||
.card-header {
|
||
padding: 30rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.title-box {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.house-name {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.tag-default {
|
||
background: #007aff;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
padding: 2rpx 16rpx;
|
||
border-radius: 30rpx;
|
||
min-width: 48rpx;
|
||
}
|
||
|
||
/* 状态标签 */
|
||
.status-tag {
|
||
font-size: 28rpx;
|
||
padding: 6rpx 14rpx;
|
||
font-weight: 600;
|
||
border-radius: 6rpx;
|
||
min-width: 120rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.success {
|
||
/* background: #e6f7ee; */
|
||
color: #2F77FD;
|
||
}
|
||
|
||
.pending {
|
||
/* background: #fff4e4; */
|
||
color: #09C2BD;
|
||
}
|
||
|
||
.fail {
|
||
/* background: #ffe7e7; */
|
||
color: #E34D59;
|
||
}
|
||
|
||
/* 内容行 */
|
||
.card-body {
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.row {
|
||
display: flex;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.row:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.label {
|
||
width: 100px;
|
||
font-size: 28rpx;
|
||
|
||
/* color: #666; */
|
||
}
|
||
|
||
.value-box {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.value {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.defaultBox {
|
||
margin-top: 10rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
z-index: 99 !important;
|
||
}
|
||
|
||
.set-default {
|
||
color: #222222;
|
||
/* font-weight: 600; */
|
||
font-size: 32rpx;
|
||
|
||
}
|
||
|
||
|
||
|
||
.add-btn {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
background: #007aff;
|
||
color: #fff;
|
||
border-radius: 12rpx;
|
||
font-size: 32rpx;
|
||
border: none;
|
||
}
|
||
|
||
.status-bar {
|
||
width: 100vw;
|
||
height: 46px;
|
||
}
|
||
</style>
|
||
<style>
|
||
/* 去掉 switch 内部的 × 和 √ 图标 */
|
||
uni-switch::before,
|
||
uni-switch::after {
|
||
display: none !important;
|
||
}
|
||
|
||
/* 微信小程序专属去除 */
|
||
wx-switch::before,
|
||
wx-switch::after {
|
||
display: none !important;
|
||
}
|
||
|
||
/* 支付宝/百度/抖音小程序兼容 */
|
||
my-switch::before,
|
||
swan-switch::before,
|
||
tt-switch::before {
|
||
display: none !important;
|
||
}
|
||
</style>
|
||
<style>
|
||
::v-deep .uni-switch-input:before {
|
||
background-color: #cccccd !important;
|
||
}
|
||
|
||
/* 隐藏 switch 关闭状态的 × 号 */
|
||
.no-cross-switch::before {
|
||
display: none !important;
|
||
|
||
}
|
||
|
||
.no-cross-switch {
|
||
transform: scale(0.85);
|
||
border-radius: 50rpx !important;
|
||
}
|
||
|
||
.no-cross-switch>>>.uni-switch-input-checked {
|
||
background-color: #007aff !important;
|
||
}
|
||
</style> |