xiangan/pages/user/join.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">
          <text :class="selectedCommunity ? 'value-text' : 'placeholder'">
            {{ selectedCommunity }}
          </text>
        </view>
      </view>

      <!-- 楼栋信息 -->
      <view class="form-item">
        <view class="form-label">
          <text class="required">*</text>
          <text>楼栋信息</text>
        </view>
        <view class="form-value">
          <text :class="selectedRoom ? 'value-text' : 'placeholder'">
            {{ selectedRoom }}
          </text>
        </view>
      </view>

      <!-- 真实姓名 -->
      <view class="form-item">
        <view class="form-label">
          <text class="required">*</text>
          <text>真实姓名</text>
        </view>
        <view class="form-value">
          <u-input border="none" 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">
          <u-input border="none" v-model="formData.phone" readonly placeholder="请输入手机号"/>
        </view>
      </view>

      <!-- 业主类型 -->
      <view class="form-item">
        <view class="form-label">
          <text>业主类型</text>
        </view>
        <view class="form-value" @click="showType = true">
          <text class="value-text">{{ ownerType }}</text>
          <text class="arrow">›</text>
        </view>
      </view>

    </view>

    <!-- 底部提交按钮 -->
    <view class="submit-container">
      <button class="submit-btn" @click="submitAuth">提交</button>
    </view>
    <u-picker :columns="[ownerTypeList]"></u-picker>
    <u-picker :show="showType" :columns="[ownerTypeList]" @cancel="showType = false"
              @confirm="selectType" closeOnClickOverlay
    />
    <Login ref="Login" @done="getUserData"></Login>
  </view>
</template>

<script>
import {communityListReq, roomListReq} from "@/api/common";
import {ownerAuditReq, userInfoReq} from "@/api/user";
import Login from "@/components/Login.vue";
import {roomInfoByCodeReq} from "@/api/room";
import {getUserInfo} from "@/util/user";

export default {
  components: {Login},
  data() {
    return {
      statusBarHeight: 0,
      realName: '梁欣',
      phone: '18577375184',
      selectedCommunity: '',
      selectedRoom: '',
      ownerType: '家属',
      livingType: '常驻',
      communityList: [],
      roomList: [],
      showCommunity: false,
      showRoom: false,
      formData: {
        baseVillageVillageCode: '',
        baseBuildingBuildCode: '',
        baseUnitUnitCode: '',
        baseRoomRoomCode: '',
        ownerType: 2,
        personType: '',
        name: '',
        direct: true
      },
      ownerTypeList: [
        '家属',
        '租客',
        '工作人员',
      ],
      showType: false
    }
  },
  onLoad(e) {
    if (!getUserInfo().token) this.$refs.Login.open()
    this.formData.baseRoomRoomCode = e.scene
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    this.getUserData()
  },
  methods: {
    async getUserData() {
      const {data} = await userInfoReq()
      this.formData.phone = data.phone
      await this.getRoomInfo()
    },
    goBack() {
      uni.navigateBack()
    },
    async getRoomInfo() {
      const {data} = await roomInfoByCodeReq(this.formData.baseRoomRoomCode)
      this.formData.baseBuildingBuildCode = data.baseBuildingBuildCode
      this.formData.baseCommunityCommunityCode = data.baseCommunityCommunityCode
      this.formData.baseVillageVillageCode = data.baseVillageVillageCode
      this.formData.baseUnitUnitCode = data.baseUnitUnitCode
      this.selectedCommunity = data.village
      this.selectedRoom = `${data.building}-${data.unit}-${data.roomNumber}`
    },
    async submitAuth() {
      await ownerAuditReq(this.formData)
      uni.showToast({
        title: '提交成功',
        icon: 'success'
      })
      setTimeout(() => {
        uni.switchTab({url: '/pages/index/index'})
      }, 1500)
    },
    selectType({value}) {
      this.ownerType = value[0]
      const index = this.ownerTypeList.findIndex(item => item === value[0])
      this.formData.ownerType = index + 2
      console.log(this.formData.ownerType)
      this.showType = false
    }
  }
}
</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>