form.js
5.29 KB
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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
let app = getApp();
// 联通专属
import area from '/const/area-lt';
Component({
mixins: [],
data: {
queryForm: {
selectMobilePhone: "", // 从父组件中传入
name: "", // 姓名
mobilePhone: "", // 用户手机号
identNo: "", // 证件号
province: "", // 省
provinceCode: "", // 省编号
city: "", // 市
cityCode: "", // 市编号
district: "", // 区
districtCode: "", // 区编号
address: "", // 收货地址
},
areaStr: "",
fold: true
},
props: {
item: {
type: Object,
value: null,
},
// 发送自定义事件 onChange 貌似为固定值
onChange(data) {},
},
didMount() {
// console.log("area:", area);
// let res = app.func.addressToTree(area);
// console.log("res:", res);
},
didUpdate() {},
didUnmount() {},
methods: {
onBlur() {
if (this.data.queryForm.name && this.data.queryForm.mobilePhone) {
this.setData({
fold: false,
})
}
},
// 封装 my.multiLevelSelect
// - 对于传入的数据,只向底层接口传递 name 和 subList
// - 对于选中的结果,替换成对应的完整数据条目再回调
multiLevelSelect({
title,
list,
success,
fail,
complete
}) {
const clean = ({
name,
subList
}) => {
return {
name,
subList: subList && subList.map(clean)
};
};
const lookup = (array, index, pool) => {
if (array && index < array.length) {
array[index] = pool.filter(x => x.name === array[index].name)[0];
lookup(array, index + 1, array[index].subList);
delete array[index].subList; // 方便回调中的 my.alert 演示。真实代码请删除此行,避免副作用
}
};
const wrap = func =>
func &&
(res => {
res.success && lookup(res.result, 0, list);
func(res);
});
return my.multiLevelSelect({
title,
list: list.map(clean),
success: wrap(success),
fail,
complete: wrap(complete),
});
},
// 选择地址
onPickerArea() {
let areas = app.func.addressToTree(area);
console.log("areas:", areas);
let updateList = []
areas.forEach(element => {
if (element.id == "440000") {
updateList.push(element);
}
});
this.multiLevelSelect({
title: '请选择所在地区',
list: updateList,
success: res => {
let region = res.result;
console.log(region)
this.setData({
'queryForm.province': region[0].name,
'queryForm.city': region[1].name,
'queryForm.district': region[2].name,
'queryForm.provinceCode': region[0].id,
'queryForm.cityCode': region[1].id,
'queryForm.districtCode': region[2].id,
'areaStr': region[0].name + region[1].name + region[2].name
})
},
fail: error => {
// console.error('multiLevelSelect fail: ', JSON.stringify(error));
},
});
},
// 显示地址tips
onAddressTips() {
my.showToast({
content: "请输入详细准确的地址,字数不少于4字(例如:**街身份证* 道…),且不能包含特殊符号(例如:? !/0等,可以输入小写-号)"
})
},
/**
* input绑定
* 多输入文本绑定
* 在input/texarea中设置 data-name="属性值即可"
*/
inputEdit(e) {
let dataset = e.currentTarget.dataset;
let value = e.detail.value;
let name = dataset.name;
this.setData({
[name]: value
});
},
/**
* 检查表单
*/
checkSubmit() {
return new Promise((resolve, reject) => {
let {
name,
mobilePhone,
identNo,
district,
address
} = this.data.queryForm;
console.log("this.data.queryForm:", this.data.queryForm);
if (!name) {
app.toast("请输入姓名")
return;
}
if (!app.util.checkMobile(mobilePhone)) {
app.toast("请输入正确的手机号码")
return;
}
if (!app.util.checkIdentNo(identNo)) {
app.toast("请输入正确的身份证号码")
return;
}
if (!district) {
app.toast("请选择所在地区")
return;
}
if (!address) {
app.toast("请输入详细地址")
return;
}
resolve(this.data.queryForm)
});
},
/**
* 提交表单
*/
onSubmit() {
this.checkSubmit().then((params) => {
params.selectMobilePhone = this.props.item.mobile;
console.log("params:", params)
my.showLoading({
content: '稍等片刻,订单提交中',
mask: true
});
app.post({
url: app.api.createOrder,
data: params,
}).then((result) => {
// 发送自定义事件 onChange 貌似为固定值
this.props.onChange({
name: "_evt_submit_complete"
})
my.hideLoading();
}).catch((err) => {
my.hideLoading();
});
});
},
},
});