xiangan/pages/user/my-properties.vue

<template>
  <view class="my-properties-page">
    <!-- 房产列表 -->
    <view class="property-list">
      <view
        class="property-card"
        v-for="(property, index) in properties"
        :key="index"
      >
        <view class="flex justify-between items-center">
          <view class="card-header">
            <image class="community-icon" src="/static/房产.png" mode="aspectFit"></image>
            <view class="flex justify-start items-center">
              <text class="community-name">{{ property.villageName }}</text>
              <text class="mx-25">|</text>
              <text class="text-25 mr-10 text-gray">共{{ property.peopleNum }}人</text>
            </view>
            <view class="identity-badge" :class="identityClass[property.ownerType]">
              {{ ownerType[property.ownerType] }}
            </view>
          </view>
          <u-icon name="arrow-right"/>
        </view>

        <view class="property-info">
          <view class="info-row">
            <text class="info-label">楼栋：</text>
            <text class="info-value">{{ property.buildingName }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">单元：</text>
            <text class="info-value">{{ property.unitName }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">房号：</text>
            <text class="info-value">{{ property.roomNumber }}</text>
          </view>
        </view>

        <!--        <view class="card-actions">-->
        <!--          <button class="action-btn danger">-->
        <!--            解除绑定-->
        <!--          </button>-->
        <!--        </view>-->
        <view class="flex justify-end items-center w-100p">
          <u-button type="primary" shape="circle" :custom-style="{width: '200rpx', margin: '0 20rpx'}"
                    size="small"
                    @click="showShare(property.baseRoomRoomCode)">
            邀请绑定
          </u-button>
        </view>
      </view>
    </view>

    <u-gap height="120rpx"></u-gap>
    <!-- 新增按钮 -->
    <view class="add-property-button">
      <button class="add-btn" @click="addProperty">
        <u-icon name="plus" color="#fff" size="30rpx"></u-icon>
        新增房产
      </button>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="properties.length === 0">
      <image class="empty-icon" src="/static/empty-property.png" mode="aspectFit"></image>
      <text class="empty-text">您还没有绑定任何房产</text>
    </view>
    <u-popup :show="showPopup" close-on-click-overlay round="10" mode="bottom">
      <view class="p-30">
        <view class="text-30 my-20">邀请家人</view>
        <view class="flex justify-center items-center my-20">
          <u-image :src="qr" width="300rpx" height="300rpx"/>
        </view>
        <u-button shape="circle" type="primary" @click="showPopup = false">关闭</u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {roomListReq, wechatMakeJoinQrReq} from "@/api/room";

export default {
  data() {
    return {
      properties: [],
      identityClass: [
        '',
        'owner',
        'family',
        'tenant',
        'tenant',
      ],
      ownerType: [
        '',
        '业主',
        '家属',
        '租客',
        '工作人员',
      ],
      qr: '',
      showPopup: false
    };
  },
  methods: {
    async getRoomList() {
      const {data} = await roomListReq({
        withPeopleNum: true
      })
      this.properties = data
    },
    addProperty() {
      // 跳转到添加房产页面
      uni.navigateTo({
        url: '/pages/user/auth'
      });
    },
    async showShare(roomCode) {
      const {data} = await wechatMakeJoinQrReq({
        roomCode
      })
      this.qr = data
      this.showPopup = true
    }
  },
  onShow() {
    this.getRoomList();
  },
};
</script>

<style scoped lang="scss">
page {
  background-color: #f5f5f5;
}

.my-properties-page {
  padding: 24rpx;
}

.property-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.community-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 16rpx;
}

.community-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.identity-badge {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  color: #fff;

  &.owner {
    background-color: #4facfe;
  }

  &.family {
    background-color: #28a745;
  }

  &.tenant {
    background-color: #ffc107;
    color: #333;
  }
}

.property-info {
  padding: 20rpx 0;
}

.info-row {
  display: flex;
  font-size: 28rpx;
  line-height: 1.8;
}

.info-label {
  color: #999;
  width: 120rpx;
}

.info-value {
  color: #333;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 16rpx;
  border-top: 1rpx solid #f0f0f0;
  gap: 20rpx;
}

.action-btn {
  font-size: 26rpx;
  padding: 0 24rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 30rpx;
  margin: 0;

  &.default {
    background-color: #fff;
    color: #333;
    border: 1rpx solid #ccc;
  }

  &.danger {
    background-color: #f56c6c;
    color: #fff;
  }
}

.add-property-button {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
}

.add-btn {
  background: linear-gradient(to right, #769636, #98C147);
  color: #fff;
  border-radius: 50rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  border: none;
}

.empty-state {
  text-align: center;
  padding-top: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}
</style>