xiangan/pages/user/auth.vue

<template>
  <view class="auth-page">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
      <view class="nav-content">
        <view class="nav-left" @click="goBack">
          <text class="nav-back">‹</text>
        </view>
        <view class="nav-title">业主认证</view>
      </view>
    </view>

    <!-- 表单内容 -->
    <view class="form-container">
      <!-- 所属小区 -->
      <view class="form-item">
        <view class="form-label">
          <text class="required">*</text>
          <text>所属小区</text>
        </view>
        <view class="form-value" @click="selectCommunity">
          <text :class="selectedCommunity ? 'value-text' : 'placeholder'">
            {{ selectedCommunity ? selectedCommunity.name : '请选择' }}
          </text>
          <text class="arrow">›</text>
        </view>
      </view>

      <!-- 楼栋信息 -->
      <view class="form-item">
        <view class="form-label">
          <text class="required">*</text>
          <text>楼栋信息</text>
        </view>
        <view class="form-value" @click="selectRoom">
          <text :class="selectedRoom ? 'value-text' : 'placeholder'">
            {{ selectedRoom ? selectedRoom.title : '请选择' }}
          </text>
          <text class="arrow">›</text>
        </view>
      </view>

      <!-- 真实姓名 -->
      <view class="form-item">
        <view class="form-label">
          <text class="required">*</text>
          <text>真实姓名</text>
        </view>
        <view class="form-value">
          <input class="form-input" v-model="formData.name" placeholder="请输入真实姓名"/>
        </view>
      </view>

      <!-- 手机号 -->
      <view class="form-item">
        <view class="form-label">
          <text class="required">*</text>
          <text>手机号</text>
        </view>
        <view class="form-value">
          <input class="form-input" v-model="formData.phone" placeholder="请输入手机号"/>
        </view>
      </view>

      <!-- 业主类型 -->
      <view class="form-item">
        <view class="form-label">
          <text>业主类型</text>
        </view>
        <view class="form-value" @click="selectOwnerType">
          <text class="value-text">业主</text>
          <text class="arrow">›</text>
        </view>
      </view>

    </view>

    <!-- 底部提交按钮 -->
    <view class="submit-container">
      <button class="submit-btn" @click="submitAuth">提交</button>
    </view>
    <u-picker :show="showCommunity" :columns="communityList" keyName="name" @confirm="selectCommunity"
              @cancel="showCommunity = true"></u-picker>
    <u-picker :show="showRoom" :columns="roomList" keyName="title" @confirm="selectRoom"
              @cancel="showRoom = true"></u-picker>
  </view>
</template>

<script>
import {communityListReq, roomListReq} from "@/api/common";
import {ownerAuditReq, userInfoReq} from "@/api/user";

export default {
  data() {
    return {
      statusBarHeight: 0,
      realName: '梁欣',
      phone: '18577375184',
      selectedCommunity: null,
      selectedRoom: null,
      ownerType: '家属',
      livingType: '常驻',
      communityList: [],
      roomList: [],
      showCommunity: false,
      showRoom: false,
      formData: {
        baseVillageVillageCode: '',
        baseBuildingBuildCode: '',
        baseUnitUnitCode: '',
        baseRoomRoomCode: '',
        ownerType: 1,
        personType: '',
        name: '',
      }
    }
  },
  onLoad() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    this.getUserData()
  },
  methods: {
    async getUserData(){
      const res = await userInfoReq()
      console.log(res)
    },
    goBack() {
      uni.navigateBack()
    },
    selectCommunity() {
      // 跳转到选择小区页面
      uni.navigateTo({
        url: '/pages/user/select-community',
        events: {
          select: (community) => {
            this.selectedCommunity = community
            this.formData.baseVillageVillageCode = community.villageCode
          }
        }
      })
    },
    selectRoom() {
      // 选择房屋
      if (!this.selectedCommunity) {
        uni.showToast({
          title: '请先选择小区',
          icon: 'none'
        })
        return
      }
      // 跳转到选择房屋页面，传入小区代码
      uni.navigateTo({
        url: `/pages/user/select-room?villageCode=${this.selectedCommunity.villageCode}`,
        events: {
          select: (room) => {
            console.log(room)
            this.selectedRoom = room
            this.formData.baseBuildingBuildCode = room.baseBuildingBuildCode
            this.formData.baseUnitUnitCode = room.baseUnitUnitCode
            this.formData.baseRoomRoomCode = room.roomCode
          }
        }
      })
    },
    async submitAuth() {
      await ownerAuditReq(this.formData)
      uni.showToast({
        title: '提交成功',
        icon: 'success'
      })
      setTimeout(() => {
        uni.switchTab({url: '/pages/index/index'})
      }, 1500)
    },
  }
}
</script>

<style scoped lang="scss">
.auth-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #FF6B35 0%, #FF8A65 100%);
}

.custom-navbar {
  background: linear-gradient(180deg, #FF6B35 0%, #FF8A65 100%);

  .nav-content {
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32rpx;
    position: relative;
  }

  .nav-left {
    width: 80rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .nav-back {
    font-size: 48rpx;
    color: #fff;
    font-weight: 300;
  }

  .nav-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 36rpx;
    color: #fff;
    font-weight: 500;
  }

  .nav-right {
    display: flex;
    align-items: center;
    gap: 24rpx;
  }

  .nav-icon {
    width: 60rpx;
    height: 60rpx;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #fff;
  }
}

.form-container {
  margin: 32rpx 32rpx 0 32rpx;
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 32rpx 32rpx;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }
}

.form-label {
  width: 200rpx;
  display: flex;
  align-items: center;
  font-size: 32rpx;
  color: #333;

  .required {
    color: #FF6B35;
    margin-right: 8rpx;
    font-size: 32rpx;
  }
}

.form-value {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .placeholder {
    color: #999;
    font-size: 32rpx;
  }

  .value-text {
    color: #333;
    font-size: 32rpx;
  }

  .arrow {
    color: #ccc;
    font-size: 36rpx;
    font-weight: 300;
  }
}

.form-input {
  flex: 1;
  font-size: 32rpx;
  color: #333;
  text-align: right;
}

.submit-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32rpx;
  background: #fff;
}

.submit-btn {
  width: 100%;
  height: 96rpx;
  background: linear-gradient(90deg, #FF6B35 0%, #FF8A65 100%);
  border-radius: 48rpx;
  border: none;
  font-size: 36rpx;
  color: #fff;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>