Ui

yfx

2026-03-13 1525f160216c8b672a32868598a22b2a1be5f25b

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<template>
  <view>
    <uv-picker :immediateChange="false" visibleItemCount="5" round="16" ref="Dome" :columns="addressList" :loading="loading" keyName="title" @change="change" @confirm="confirm" ></uv-picker>
  </view>
</template>
<script>
import {getCityList} from "@/api/modules/user";
 
export default {
  data() {
    return {
      loading: true,
      provinces: [], //省
      citys: [], //市
      areas: [], //区
      pickerValue: [0, 0],
      defaultValue: [0, 0]
    }
  },
  created() {
    this.getData();
  },
  computed: {
    addressList() {
      return [this.provinces, this.citys];
    }
  },
  methods: {
    getData() {
      const _this = this;
      uni.request({
        url: _this.$webHost + "/api/v2/city/getCityList",
        success(res) {
          this.provinces = data.sort((left, right) => (Number(left.code) > Number(right.code) ? 1 : -1));
          this.handlePickValueDefault();
          this.loading = false;
        }
      })
    },
    handlePickValueDefault() {
      // 设置省
      const provinceIndex = this.provinces.findIndex(item => Number(item.id) === this.defaultValue[0]);
      this.pickerValue[0] = provinceIndex >= 0 ? provinceIndex : 0;
 
      // 设置市
      const cityList = this.provinces[this.pickerValue[0]]?.children || [];
      const cityIndex = cityList.findIndex(item => Number(item.id) === this.defaultValue[1]);
      this.citys = cityList;
      this.pickerValue[1] = cityIndex >= 0 ? cityIndex : 0;
 
      // 设置区
      const areaList = cityList[this.pickerValue[1]]?.children || [];
      const areaIndex = areaList.findIndex(item => Number(item.id) === this.defaultValue[2]);
      this.areas = areaList;
      // this.pickerValue[2] = areaIndex >= 0 ? areaIndex : 0;
 
      // 重置下位置
      this.$refs.Dome.setIndexs(this.pickerValue, true);
    },
    change(e) {
      if (this.loading) return;
      const { columnIndex, index, indexs } = e;
 
      if (columnIndex === 0) {
        this.citys = this.provinces[index]?.children || [];
        this.areas = this.citys[0]?.children || [];
        this.$refs.Dome.setIndexs([index, 0, 0], true);
      } else if (columnIndex === 1) {
        this.areas = this.citys[index]?.children || [];
        this.$refs.Dome.setIndexs(indexs, true);
      }
    },
    open() {
      this.$refs.Dome.open();
      this.handlePickValueDefault();
    },
    confirm(e) {
      this.$emit('confirm', e);
    }
  }
}
</script>