yizhizan-h5/package/jobIntention/addAddress.vue

<template>
  <view class="switch-roles">
    <nav-bar title="添加地址" color="#000"></nav-bar>
    <view class="roles-content">
      <view class="content">
        <!-- 地图选点入口（辅助填充） -->
        <view class="map-selector" @click="openMapSelector">
          <u-icon name="map" size="36rpx" color="#007AFF" marginRight="16rpx"></u-icon>
          <text class="map-text">通过地图选择地址（可选）</text>
        </view>
        
        <!-- 省/市/区三级地址（手动填写为主） -->
        <view class="form-item">
          <view class="item-label"> 所在省份 <text class="required">*</text></view>
          <u-input
            v-model="province"
            placeholder="请输入省份，例：广东省"
            clearable
            class="custom-input"
          >
            <template #prefix>
              <u-icon name="location" size="36rpx" color="#999" marginRight="20rpx"></u-icon>
            </template>
          </u-input>
        </view>
        
        <view class="form-item">
          <view class="item-label"> 所在城市 <text class="required">*</text></view>
          <u-input
            v-model="city"
            placeholder="请输入城市，例：深圳市"
            clearable
            class="custom-input"
          >
            <template #prefix>
              <u-icon name="map-pin" size="36rpx" color="#999" marginRight="20rpx"></u-icon>
            </template>
          </u-input>
        </view>
        
        <view class="form-item">
          <view class="item-label"> 所在区域 <text class="required">*</text></view>
          <u-input
            v-model="district"
            placeholder="请输入区域，例：南山区"
            clearable
            class="custom-input"
          >
            <template #prefix>
              <u-icon name="map-marker" size="36rpx" color="#999" marginRight="20rpx"></u-icon>
            </template>
          </u-input>
        </view>
        
        <!-- 详细地址信息 -->
        <view class="form-item">
          <view class="item-label"> 街道/楼宇 <text class="required">*</text></view>
          <u-input
            placeholder="请输入街道或楼宇名称，例：科技园路1号"
            v-model="address"
            clearable
            class="custom-input"
          >
            <template #prefix>
              <u-icon name="map" size="36rpx" color="#999" marginRight="20rpx"></u-icon>
            </template>
          </u-input>
        </view>
        
        <view class="form-item">
          <view class="item-label"> 楼层/单元室 </view>
          <u-input
            placeholder="例：3层302室（选填）"
            v-model="addressDetail"
            clearable
            class="custom-input"
          >
            <template #prefix>
              <u-icon name="home" size="36rpx" color="#999" marginRight="20rpx"></u-icon>
            </template>
          </u-input>
        </view>
        
        <!-- 地图选点后显示经纬度（可选） -->
        <view class="location-info" v-if="latitude && longitude">
          <text>经纬度：{{ latitude }}, {{ longitude }}</text>
        </view>
      </view>
    </view>
    <view class="submit-btn" @click="confirmAddress">确定</view>
  </view>
</template>

<script>
import navBar from "@/components/nav-bar/index.vue";
export default {
  data() {
    return {
      province: "",       // 省份（必填）
      city: "",           // 城市（必填）
      district: "",       // 区域（必填）
      address: "",        // 街道/楼宇（必填）
      addressDetail: '',  // 楼层/单元室（选填）
      latitude: '',       // 纬度（地图选点获取）
      longitude: ''       // 经度（地图选点获取）
    };
  },
  components: {
    navBar,
  },
  onLoad(options) {
    // 回显上一页传递的地址信息
    if (options.province) this.province = decodeURIComponent(options.province);
    if (options.city) this.city = decodeURIComponent(options.city);
    if (options.district) this.district = decodeURIComponent(options.district);
    if (options.address) this.address = decodeURIComponent(options.address);
    if (options.addressDetail) this.addressDetail = decodeURIComponent(options.addressDetail);
    if (options.latitude) this.latitude = options.latitude;
    if (options.longitude) this.longitude = options.longitude;
  },
  methods: {
    // 打开地图选择地址（辅助填充详细地址）
    openMapSelector() {
      uni.chooseLocation({
        success: (res) => {
          // 地图选点仅填充街道/楼宇信息，省市区留给用户手动确认
          this.address = res.name || res.address;
          this.latitude = res.latitude;
          this.longitude = res.longitude;
          
          // 提示用户补充省市区信息
          uni.showToast({
            title: '请确认并补充省/市/区信息',
            icon: 'none',
            duration: 2000
          });
        },
        fail: (err) => {
          console.error('地图选择失败：', err);
          if (err.errMsg.includes('auth')) {
            uni.showToast({ title: '请开启位置权限', icon: 'none' });
          }
        }
      });
    },
    
    // 确认地址并回传（严格验证三级地址）
    confirmAddress() {
      // 验证必填项
      if (!this.province.trim()) {
        return uni.showToast({ title: '请输入所在省份', icon: 'none' });
      }
      if (!this.city.trim()) {
        return uni.showToast({ title: '请输入所在城市', icon: 'none' });
      }
      if (!this.district.trim()) {
        return uni.showToast({ title: '请输入所在区域', icon: 'none' });
      }
      if (!this.address.trim()) {
        return uni.showToast({ title: '请输入街道或楼宇名称', icon: 'none' });
      }

      // 合并完整地址信息
      const fullAddress = {
        province: this.province.trim(),
        city: this.city.trim(),
        district: this.district.trim(),
        address: this.address.trim(),
        addressDetail: this.addressDetail.trim(),
        latitude: this.latitude || '',
        longitude: this.longitude || '',
        fullText: `${this.province.trim()}${this.city.trim()}${this.district.trim()}${this.address.trim()}${this.addressDetail.trim() ? ' ' + this.addressDetail.trim() : ''}`
      };

      // 回传上一页
      uni.$emit('addressData', fullAddress);
      uni.navigateBack();
    }
  }
};
</script>

<style lang="scss" scoped>
.switch-roles {
  background-color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  
  .roles-content {
    width: 100%;
    flex: 1;
    overflow-y: auto;
    
    .content {
      padding: 40rpx;
      box-sizing: border-box;
      
      .map-selector {
        display: flex;
        align-items: center;
        padding: 20rpx 24rpx;
        background-color: #f5f7fa;
        border-radius: 16rpx;
        margin-bottom: 30rpx;
        color: #007AFF;
        font-size: 28rpx;
        cursor: pointer;
        transition: background-color 0.2s;
        
        &:active {
          background-color: #e8ebf0;
        }
      }
      
      .location-info {
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #999;
        padding: 10rpx 0;
      }
      
      .required {
        color: #ff4d4f; /* 红色必填标记 */
        font-size: 32rpx;
        margin-left: 4rpx;
      }
    }
  }
  
  .submit-btn {
    margin: 60rpx 20rpx;
    height: 96rpx;
    border-radius: 999px;
    background: linear-gradient(90deg, #0d27f7, #13c1ea);
    color: #fff;
    font-size: 32rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
    
    &:active {
      transform: scale(0.98);
      opacity: 0.9;
    }
  }
}
.custom-input {
  box-sizing: border-box;
  border: 2rpx solid #9ea1a8;
  border-radius: 100rpx;
  /* 增加左右内边距，让内容更舒展 */
  padding: 8rpx 36rpx; 
  height: 96rpx;
}

/* 调整图标与输入文字的间距 */
::v-deep .u-input__prefix {
  margin-right: 24rpx !important; /* 增加图标右侧间距 */
}

/* 输入框文字区域增加左侧间距（配合图标） */
::v-deep .u-input input {
  padding-left: 32rpx; /* 避免文字紧贴图标 */
}
.form-item {
  margin-bottom: 26rpx;
  width: 100%;
}

.item-label {
  color: #121a2c;
  font-size: 32rpx;
  padding: 10rpx 0;
  display: flex;
  align-items: center;
}

.custom-input {
  box-sizing: border-box;
  border: 2rpx solid #9ea1a8;
  border-radius: 100rpx;
  padding: 8rpx 24rpx;
  height: 96rpx;
}

/* 输入框聚焦样式 */
::v-deep .u-input input:focus {
  border-color: #007AFF !important;
  outline: none;
}

::v-deep .u-input {
  text-align: left !important;
}
</style>