yizhizan-h5/package/jobIntention/addAddress.vue

<template>
  <view class="switch-roles">
    <nav-bar title="添加地址"></nav-bar>
    <view class="roles-content">
      <view class="content">
		<!-- 城市 -->
		<view class="form-item">
			<view class="item-label"><text class="required">*</text>所在城市</view>
			<view class="item-content flex align-center justify-between" @click="toCityPage">
				<view class="content-value">
					<text v-if="city">{{ city }}</text>
					<text class="placeholder" v-else>请选择城市</text>
				</view>
				<u-icon name="arrow-down" color="rgba(153, 153, 153, 1)"></u-icon>
			</view>
		</view>
		
		<!-- 区域 -->
		<view class="form-item">
			<view class="item-label"><text class="required">*</text>所在区域</view>
			<view class="item-content flex align-center justify-between" @click="toCountyPage">
				<view class="content-value">
					<text v-if="district">{{ district }}</text>
					<text class="placeholder" v-else>请选择区域</text>
				</view>
				<u-icon name="arrow-down" color="rgba(153, 153, 153, 1)"></u-icon>
			</view>
		</view>
		
		<!-- 详细地址 -->
		<view class="form-item">
			<view class="item-label"><text class="required">*</text>详细地址</view>
			<view class="item-content">
				<input v-model="addr" placeholder="请输入公司详细地址" class="input" placeholder-class="input-placeholder" />
			</view>
		</view>
      </view>
    </view>
	<view class="button-section">
		<view class="submit-btn" @click="confirmAddress">确定</view>
	</view>
  </view>
</template>

<script>
import navBar from "@/components/nav-bar/index.vue";
// import addr from "@/utils/addr.json";

export default {
  data() {
    return {
      latitude: '', // 纬度（地图选点获取）
      longitude: '', // 经度（地图选点获取）
	  province: '', // 省份
	  city: '', // 城市
	  district: '', // 区域
	  addr: '', // 详情地址
    };
  },
  components: {
    navBar,
  },
  // created() {
  //   // 初始化省份数据
  //   this.provinces = addr;
  // },
  onLoad(options) {
    if (options.address) {
      let address = JSON.parse(options.address);
      this.latitude = address.latitude;
      this.longitude = address.longitude;
	  this.province = decodeURIComponent(address.province) || ''
	  this.city = decodeURIComponent(address.city)
	  this.district = decodeURIComponent(address.district)
	  this.addr = this.setAddress(decodeURIComponent(address.fullText))
    }
	
	uni.$on('city', data => {
		if (data.city) {
			this.city = data.city
		}
	})
	uni.$on('filterCity', data => {
		this.city = data.city
		this.district = data.county
	})
  },
  onUnload() {
	  uni.$off('city')
	  uni.$off('filterCity')
  },
  methods: {
	// 设置详细地址
	setAddress(address) {
		let preStr = `${this.province}${this.city}${this.district}`
		return address.replace(preStr, '')
	},
	
	// 跳转选择城市页面
	toCityPage() {
		uni.navigateTo({
			url: '/package/jobIntention/city'
		})
	},
	
	// 跳转选择区域页面
	toCountyPage() {
		if (!this.city) {
			this.$queue.showToast('请先选择城市')
			return
		}
		uni.navigateTo({
			url: `/package/screen/city?city=${this.city}&county=&type=search`
		})
	},

    // 确认地址并回传
    confirmAddress() {
		let city = this.city
		let district = this.district
		let address = this.addr.trim()
		if (!city) {
			return uni.showToast({ title: '请选择城市', icon: 'none' });
		}
		if (!district) {
			return uni.showToast({ title: '请选择区域', icon: 'none' });
		}
		if (!address) {
			return uni.showToast({ title: '请输入详细地址', icon: 'none' });
		}

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

		// 回传上一页
		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;

      .required {
        color: #FF0027;
        /* 红色必填标记 */
        font-size: 28rpx;
      }
    }
  }

  .button-section {
  	padding: 28rpx 40rpx;
  	box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.04);
  }
  .submit-btn {
  	flex-shrink: 0;
  	border-radius: 999px;
  	box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.04);
  	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;
  }
}

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

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

.item-label {
  color: #1F2C37;
  font-size: 28rpx;
  line-height: 44rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.item-content {
	box-sizing: border-box;
	border: 1px solid rgba(227, 231, 236, 1);
	border-radius: 24px;
	background: Colors/White, rgba(255, 255, 255, 1);
	padding: 15rpx 32rpx;
	line-height: 40rpx;
	.placeholder {
		color: rgba(153, 153, 153, 1);
	}
	.input {
		font-size: 28rpx;
	}
	.input-placeholder {
		color: rgba(153, 153, 153, 1);
	}
}
</style>