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="title">添加地址</view>
        
        <!-- 地图选点入口 -->
        <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"> 工作地址 </view>
          <u-input
            placeholder="请输入办公大楼名称，例：碧桂园凤凰智谷"
            v-model="address"
            clearable
            class="custom-input"
            :customStyle="{ padding: '8rpx 24rpx ' }"
          >
            <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"
            :customStyle="{ padding: '8rpx 24rpx ' }"
          >
            <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 {
      address: "",        // 办公大楼名称
      addressDetail: '',  // 楼层/单元室详情
      latitude: '',       // 纬度
      longitude: ''       // 经度
    };
  },
  components: {
    navBar,
  },
  onLoad(options) {
    // 回显上一页传递的地址信息
    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-app的地图选择API
      uni.chooseLocation({
        success: (res) => {
          // 地图选点成功后自动填充地址信息
          this.address = res.name || res.address;
          this.latitude = res.latitude;   // 获取纬度
          this.longitude = res.longitude; // 获取经度
          
          // 解析详细地址（尝试提取门牌号等信息）
          const addressParts = this.parseAddressDetail(res.address);
          if (addressParts.detail) {
            this.addressDetail = addressParts.detail;
          }
        },
        fail: (err) => {
          console.error('地图选择失败：', err);
          if (err.errMsg.includes('auth')) {
            uni.showToast({
              title: '请开启位置权限',
              icon: 'none'
            });
          }
        }
      });
    },
    
    // 解析地址详情（提取门牌号等信息）
    parseAddressDetail(fullAddress) {
      // 简单的地址解析逻辑，可根据实际需求优化
      const reg = /(\d+层|\d+栋|\d+单元|\d+室)/g;
      const details = fullAddress.match(reg);
      return {
        detail: details ? details.join('') : ''
      };
    },
    
    // 确认地址并回传
    confirmAddress() {
      if (!this.address.trim()) {
        return uni.showToast({
          title: '请输入或选择办公大楼名称',
          icon: 'none'
        });
      }

      // 合并完整地址信息（包含经纬度）
      const fullAddress = {
        address: this.address.trim(),
        addressDetail: this.addressDetail.trim(),
        latitude: this.latitude,
        longitude: this.longitude,
        fullText: 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: hidden;
    overflow-y: auto;
    
    .content {
      padding: 40rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      
      .title {
        color: #333;
        width: 100%;
        font-family: DM Sans;
        font-size: 40rpx;
        font-weight: 600;
        margin-bottom: 30rpx;
      }
      
      // 地图选择器样式
      .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-left: 4rpx;
      }
    }
  }
  
  .submit-btn {
    flex-shrink: 0;
    border-radius: 999px;
    box-shadow: 0px 2px 4px 0px rgba(9, 196, 116, 0.3);
    background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
    color: rgba(255, 255, 255, 1);
    font-family: DM Sans;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 48rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16rpx 32rpx;
    box-sizing: border-box;
    margin: 60rpx 20rpx;
    height: 96rpx;
    transition: all 0.2s ease;
    
    &:active {
      transform: scale(0.98);
      opacity: 0.9;
    }
  }
}

.form-item {
  margin-bottom: 32rpx;
  width: 100%;
}

.item-label {
  color: rgba(18, 26, 44, 1);
  font-family: Roboto;
  font-size: 32rpx;
  font-weight: 400;
  line-height: 51.2rpx;
  letter-spacing: 0px;
  text-align: left;
  padding: 10rpx 0;
  box-sizing: border-box;
}

.custom-input {
  box-sizing: border-box;
  border: 2rpx solid rgba(158, 161, 168, 1);
  border-radius: 100rpx;
  background: rgba(255, 255, 255, 1);
  padding: 8rpx 24rpx !important;
  height: 96rpx;
}

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

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