写一套完整的uniapp省市区三级联动带地区code

这里提供一种基于uni-app框架的省市区三级联动组件，并且将地区的code也一并返回，供参考：

<template>
  <div class="picker-wrap">
    <view class="picker-item">
      <text class="picker-label">省份</text>
      <picker
        class="picker"
        mode="selector"
        :range="provinces"
        :value="provinceIndex"
        @change="onProvinceChange"
      >
        {{ provinces[provinceIndex] }}
      </picker>
    </view>
    <view class="picker-item">
      <text class="picker-label">城市</text>
      <picker
        class="picker"
        mode="selector"
        :range="cities"
        :value="cityIndex"
        @change="onCityChange"
      >
        {{ cities[cityIndex] }}
      </picker>
    </view>
    <view class="picker-item">
      <text class="picker-label">地区</text>
      <picker
        class="picker"
        mode="selector"
        :range="areas"
        :value="areaIndex"
        @change="onAreaChange"
      >
        {{ areas[areaIndex] }}
      </picker>
    </view>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        provinces: [], // 省份列表
        cities: [], // 城市列表
        areas: [], // 地区列表
        provinceIndex: 0, // 当前省份索引
        cityIndex: 0, // 当前城市索引
        areaIndex: 0, // 当前地区索引
        provinceCode: '', // 当前省份code
        cityCode: '', // 当前城市code
        areaCode: '', // 当前地区code
        provinceData: [], // 省份数据
        cityData: [], // 城市数据
        areaData: [], // 地区数据
      };
    },
    created() {
      this.initData();
    },
    methods: {
      initData() {
        // 获取省份数据
        uni.request({
          url: 'https://xxx.xxx.com/api/provinces',
          success: (res) => {
            this.provinceData = res.data.data;
            this.provinces = this.provinceData.map((item) => item.name);
            this.onProvinceChange();
          },
        });
      },
      onProvinceChange(e) {
        const index = e ? e.detail.value : 0;
        this.provinceIndex = index;
        this.provinceCode = this.provinceData[index].code;
        // 获取城市数据
        uni.request({
          url: `https://xxx.xxx.com/api/cities/${this.provinceCode}`,
          success: (res) => {
            this.cityData = res.data.data;
            this.cities = this.cityData.map((item) => item.name);
            this.onCityChange();
          },
        });
      },
      onCityChange(e) {
        const index = e ? e.detail.value : 0;
        this.cityIndex = index;
        this.cityCode = this.cityData[index].code;
        // 获取地区数据
        uni.request({
          url: `https://xxx.xxx.com/api/areas/${this.provinceCode}/${this.cityCode}`,
          success: (res) => {
            this.areaData = res.data.data;
            this.areas = this.areaData.map((item) => item.name);
            this.onAreaChange();
          },
        });
      },
      onAreaChange(e) {
        const index = e ? e.detail.value : 0;
        this.areaIndex = index;
        this.areaCode = this.areaData[index].code;
      },
    },
  };
</script>

<style scoped>
  .picker-wrap {
    display: flex;
    align-items: center;
  }

  .picker-item {
    margin-right: 10px;
  }

  .picker-label {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .picker {
    width: 100%;
  }
</style>

在上述代码中，我们通过uni.request异步请求后台接口获取省市区数据，并通过picker组件来实现三级联动效果。同时，我们也将当前选中的省份、城市、地区的code值保存在组件的data对象中，方便后续处理。

注意：上述代码中的接口URL以及数据格式仅为示例，具体实现需要根据实际情况进行调整。