uni-app城市组件代码

以下是一个简单的 uni-app 城市选择组件代码：

<template>
  <view>
    <input type="text" v-model="selectedCity" placeholder="请选择城市" @click="showPicker" />
    <picker-view :value="value" @change="onChange">
      <picker-view-column :key="index" v-for="(item, index) in cityData">
        <view v-for="(subItem, subIndex) in item.children" :key="subIndex">{{subItem.name}}</view>
      </picker-view-column>
    </picker-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cityData: [], // 城市数据
      value: [], // 当前选中的值
      selectedCity: '', // 当前选中的城市
    };
  },
  mounted() {
    // 获取城市数据
    uni.request({
      url: 'https://xxx.com/cityData.json', // 城市数据接口
      success: (res) => {
        this.cityData = res.data;
      },
    });
  },
  methods: {
    showPicker() {
      // 显示城市选择器
      uni.showPickerView({
        value: this.value,
      });
    },
    onChange(e) {
      // 当城市选择器的值发生改变时触发
      this.value = e.detail.value;
      let provinceName = this.cityData[this.value[0]].name;
      let cityName = this.cityData[this.value[0]].children[this.value[1]].name;
      let districtName = this.cityData[this.value[0]].children[this.value[1]].children[this.value[2]].name;
      this.selectedCity = `${provinceName} ${cityName} ${districtName}`;
    },
  },
};
</script>

此代码使用了 `picker-view` 组件来展示城市选择器，通过在 `mounted` 钩子函数中发起请求获取城市数据，然后在 `onChange` 方法中将选中的值转化为城市名称显示在输入框中。你需要将接口地址替换成你自己的城市数据接口。