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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
| import { locations, defaultValue, getTownValue } from '../../../common/dataLocation';
|
| Component({
| options: {
| addGlobalClass: true,
| multipleSlots: true,
| },
| properties: {
| /**
| * 结果文本展示模式
| * address: 地址模式，所选区域自动合并成地址描述
| * selector: 选项模式，所选区域每个级别单独展示
| */
| textMode: {
| type: String,
| value: 'address',
| },
| /**
| * 选项框展示模式
| * cell: 单元格模式，以一行单元格形式展示
| * picker: 下拉框模式，以文本加箭头模式展示
| */
| styleMode: {
| type: String,
| value: 'cell',
| },
| pickerClass: {
| type: String,
| value: '',
| },
| color: {
| type: String,
| value: 'black',
| },
| // 外部设定当前选项值
| location: {
| type: Object,
| observer(v) {
| let note = '';
| note += v.provinceText ? v.provinceText : '';
| note += v.provinceText == v.cityText ? '' : v.cityText ? `/${v.cityText}` : '';
| note += v.districtText ? `/${v.districtText}` : '';
| note += v.townText ? `/${v.townText}` : '';
| const value = v.value
| ? v.value
| : getTownValue([v.provinceText, v.cityText, v.districtText, v.townText], 'label');
| this.setData({
| value,
| provinceText: v.provinceText ? v.provinceText : '全部省份',
| cityText: v.cityText ? v.cityText : '全部城市',
| districtText: v.districtText ? v.districtText : '全部区县',
| townText: v.townText ? v.townText : '全部街镇',
| note,
| });
| },
| },
| },
|
| data: {
| subTitles: ['请选择省份', '请选择城市', '请选择区/县', '请选择街镇'],
| options: locations(),
| visible: false,
| value: '',
| provinceText: undefined,
| cityText: undefined,
| districtText: undefined,
| townText: undefined,
| },
|
| lifetimes: {
| attached: function () {
| // 在组件实例进入页面节点树时执行
| const values = defaultValue();
| if (values.length == 4) {
| this.setData({
| value: values[3].value,
| provinceText: values[0].label,
| cityText: values[1].label,
| districtText: values[2].label,
| townText: values[3].label,
| note: this._note(values),
| });
| const param = this._getEventParams(values);
| this.triggerEvent('locationInitValue', param);
| }
| },
| detached: function () {
| // 在组件实例被从页面节点树移除时执行
| },
| },
|
| methods: {
| showCascader() {
| this.setData({ visible: true });
| },
| onPick(e) {
| // console.log(e.detail);
| },
| onChange(e) {
| const { selectedOptions, value } = e.detail;
| const provinceText = selectedOptions[0].label;
| const cityText = selectedOptions[1].label;
| const districtText = selectedOptions[2].label;
| const townText = selectedOptions[3].label;
| let note = this._note(selectedOptions);
| this.setData({
| value,
| provinceText,
| cityText,
| districtText,
| townText,
| note,
| });
|
| this._triggerEvent(selectedOptions);
| },
|
| // 获取传递事件中的传递值
| _getEventParams(selectedOptions) {
| const setText = p => (p.value > 0 ? p.label : null);
| const setValue = p => (p.value > 0 ? p.value : null);
| const param = {
| provinceText: setText(selectedOptions[0]),
| cityText: setText(selectedOptions[1]),
| districtText: setText(selectedOptions[2]),
| townText: setText(selectedOptions[3]),
| provinceValue: setValue(selectedOptions[0]),
| cityValue: setValue(selectedOptions[1]),
| districtValue: setValue(selectedOptions[2]),
| townValue: setValue(selectedOptions[3]),
| locationValue: selectedOptions[3].value,
| };
| return param;
| },
|
| _triggerEvent(selectedOptions) {
| const param = this._getEventParams(selectedOptions);
| this.triggerEvent('onChange', param);
| },
| /**
| * 将行政区域组合为地址描述
| * 1. 直辖市的名称只展示一次
| * 2. 当有行政区域选择为"全部"时（配置表中对应的value值都为负数），省略不展示
| */
| _note(v) {
| let note = '';
| v.forEach(o => {
| if (note != o.label && o.value > 0) {
| if (note != '') {
| note += '/';
| }
| note += o.label;
| }
| });
| return note;
| },
| },
| });
|
|
