xiangan/userPages/pages/peopleList.vue

<template>
  <view class="people-list-container">
    <!-- 温馨提示 -->
    <view class="tip-container">
      <text class="tip-text">温馨提示：您在祥安E家登记了以下住户信息</text>
    </view>

    <!-- 地址信息 -->
    <view class="address-container" v-if="peopleList.length">
      <text class="address-text">{{ peopleList[0].villageName }}-{{
          peopleList[0].buildingName
        }}-{{ peopleList[0].unitName }}-{{ peopleList[0].roomNumber }}
      </text>
    </view>

    <!-- 住户信息卡片 -->
    <view class="resident-card" v-for="(item, index) in peopleList" :key="index">
      <!-- 姓名和业主标识 -->
      <view class="resident-header">
        <text class="resident-name">{{ item.name }}</text>
        <view class="owner-tag">
          <text class="owner-text">{{ ownerType[item.ownerType] }}</text>
        </view>
      </view>

      <!-- 联系信息 -->
      <view class="contact-info">
        <view class="info-row">
          <text class="info-label">联系电话：</text>
          <text class="info-value">{{ item.phone }}</text>
        </view>
        <!--        <view class="info-row">-->
        <!--          <text class="info-label">身份证号：</text>-->
        <!--          <text class="info-value">450**********2130</text>-->
        <!--        </view>-->
        <view class="info-row">
          <text class="info-label">认证时间：</text>
          <text class="info-value">{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</text>
        </view>
      </view>
      <u-button type="error" shape="circle" v-if="isOwner" @click="del(item)">删除</u-button>
    </view>

    <!-- 添加家人按钮 -->
    <!--    <view class="add-family-btn" @click="addFamily">-->
    <!--      <text class="add-family-text">添加家人</text>-->
    <!--    </view>-->
  </view>
</template>

<script>
import {delPeopleReq, peopleListReq} from "@/api/room";
import dayjs from "dayjs";
import {userInfoReq} from "@/api/user";

export default {
  name: "peopleList",
  data() {
    return {
      peopleList: [],
      ownerType: [
        '',
        '业主',
        '家属',
        '租客',
        '工作人员',
      ],
      userData: null,
      baseRoomRoomCode: null,
      isOwner: false,
      delLoading: false,
    }
  },
  methods: {
    dayjs,
    goBack() {
      uni.navigateBack()
    },
    async getPeopleList(baseRoomRoomCode) {
      const {data} = await peopleListReq({baseRoomRoomCode})
      this.peopleList = data.map(item => {
        item.phoneOrigin = item.phone
        item.phone = item.phone.replace(/(.{3}).*(.{4})/, '$1****$2')
        return item
      })
      await this.getUserData()
    },
    async getUserData() {
      const {data} = await userInfoReq()
      this.userData = data
      if (this.peopleList.length) {
        this.peopleList.map(item => {
          console.log(item.ownerType, item.phoneOrigin, data.phone)
          if (item.ownerType === 1 && item.phoneOrigin === data.phone)
            this.isOwner = true
        })
      }
    },
    addFamily() {

    },
    del(item) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该住户吗？',
        success: (res) => {
          if (res.confirm) {
            this.delLoading = true
            delPeopleReq(item.id)
              .then(() => {
                this.$toast('删除成功')
              })
              .finally(() => {
                this.delLoading = false
                this.getPeopleList(this.baseRoomRoomCode)
              })
          }
        }
      })
    }
  },
  onLoad({baseRoomRoomCode}) {
    this.baseRoomRoomCode = baseRoomRoomCode
    this.getPeopleList(baseRoomRoomCode)

  }
}
</script>

<style lang="scss" scoped>
.people-list-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 88rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.nav-back {
  position: absolute;
  left: 30rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-back-icon {
  font-size: 40rpx;
  color: #333;
  font-weight: bold;
}

.nav-title {
  font-size: 36rpx;
  color: #333;
  font-weight: 500;
}

.tip-container {
  margin: 30rpx;
  padding: 30rpx;
  background-color: #fff3cd;
  border-radius: 12rpx;
  border-left: 6rpx solid #ffc107;
}

.tip-text {
  font-size: 28rpx;
  color: #856404;
  line-height: 1.5;
}

.address-container {
  margin: 0 30rpx 30rpx;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 12rpx;
}

.address-text {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.resident-card {
  margin: 0 30rpx 20rpx;
  padding: 40rpx 30rpx;
  background-color: #fff;
  border-radius: 12rpx;
}

.resident-header {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.resident-name {
  font-size: 36rpx;
  color: #333;
  font-weight: 600;
  margin-right: 20rpx;
}

.owner-tag {
  padding: 8rpx 16rpx;
  background-color: #ffc107;
  border-radius: 20rpx;
}

.owner-text {
  font-size: 24rpx;
  color: #fff;
}

.contact-info {
  margin-bottom: 40rpx;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 30rpx;
  color: #666;
  width: 180rpx;
}

.info-value {
  font-size: 30rpx;
  color: #333;
  flex: 1;
}

.notice-container {
  padding-top: 30rpx;
  border-top: 1rpx solid #eee;
}

.notice-text {
  display: block;
  font-size: 26rpx;
  color: #999;
  line-height: 1.6;
  margin-bottom: 16rpx;
}

.notice-text:last-child {
  margin-bottom: 0;
}

.add-family-btn {
  position: fixed;
  bottom: 60rpx;
  left: 30rpx;
  right: 30rpx;
  height: 96rpx;
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  border-radius: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(255, 193, 7, 0.3);
}

.add-family-text {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
}
</style>