create.vue
4.72 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
<template>
<view class="container">
<view class="address-box">
<u--form labelPosition="left" :model="formData" :rules="rules" ref="form">
<u-form-item label="收件人名称" prop="name" labelWidth="90" borderBottom ref="item-name">
<u-input type="text" maxlength="11" v-model="formData.name" clearable placeholder="请填写收件人名称" border="none"></u-input>
</u-form-item>
<u-form-item label="手机号" prop="mobile" labelWidth="90" borderBottom ref="item-mobile">
<u-input type="number" maxlength="11" v-model="formData.mobile" clearable placeholder="请填写手机号" border="none"></u-input>
</u-form-item>
<u-form-item label="省市地区" prop="areaText" labelWidth="90" borderBottom @click=" regionVisible = true; hideKeyboard()" ref="item-areaText">
<u--input v-model="formData.areaText" disabled disabledColor="#ffffff" placeholder="请选择省市地区" border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
<w-picker :visible.sync="regionVisible" mode="region" :value="defaultRegion" default-type="value" :hide-area="false" @confirm="onConfirm($event, 'region')" @cancel="onCancel" ref="region"></w-picker>
</u-form-item>
<u-form-item label="详细地址" prop="detail" labelWidth="90" borderBottom ref="item-detail">
<u--textarea placeholder="请输入街道门牌号不低于6个字" v-model="formData.detail" count></u--textarea>
</u-form-item>
<u-form-item label="默认地址" prop="type" labelWidth="90" borderBottom ref="item-type">
<u-radio-group v-model="formData.type">
<u-radio :customStyle="{ marginRight: '16px' }" v-for="(item, index) in typeList" :key="index" :label="item.name" :name="item.value"></u-radio>
</u-radio-group>
</u-form-item>
<view class="btn-group">
<u-button type="primary" text="保存地址" customStyle="margin-top: 50px" @click="handleSubmit"></u-button>
</view>
</u--form>
</view>
</view>
</template>
<script>
import { createAddress } from '../../api/address'
export default {
data() {
return {
regionVisible: false,
defaultRegion: ['110000', '110100', '110101'],
typeList: [
{
name: '是',
value: 1
},
{
name: '否',
value: 2
}
],
formData: {
name: '',
mobile: '',
areaText: '',
areaCode: '',
detail: '',
detailAddress: '',
type: 1
},
rules: {
name: [
{
type: 'string',
min: 2,
max: 12,
required: true,
message: '请填写收件人名称',
trigger: ['blur', 'change']
},
{
message: '收件人名称不能为空',
// 触发器可以同时用blur和change
trigger: ['change', 'blur']
}
],
mobile: [
{
type: 'integer',
required: true,
message: '请填写手机号',
trigger: ['blur', 'change']
},
{
// 自定义验证函数，见上说明
validator: (rule, value, callback) => {
// 上面有说，返回true表示校验通过，返回false表示不通过
// uni.$u.test.mobile()就是返回true或者false的
return uni.$u.test.mobile(value)
},
message: '手机号码不正确',
// 触发器可以同时用blur和change
trigger: ['change', 'blur']
}
],
areaText: {
type: 'string',
required: true,
message: '请选择省市地区',
trigger: ['blur', 'change']
},
detailAddress: {
type: 'string',
min: 6,
max: 30,
required: true,
message: '请填写详细地址',
trigger: ['blur', 'change']
}
}
}
},
onLoad() {},
methods: {
onConfirm(res) {
this.formData.areaText = res.result
this.formData.areaCode = res.value[2]
},
onCancel() {},
hideKeyboard() {
uni.hideKeyboard()
},
handleSubmit() {
this.$refs.form.validate().then(res => {
this.formData.detailAddress = this.formData.areaText + this.formData.detail
console.log(this.formData)
createAddress(this.formData).then(res => {
uni.$u.toast('地址已保存')
setTimeout(() => {
uni.navigateBack()
}, 300)
})
})
}
}
}
</script>
<style lang="scss" scoped>
.address-box {
width: 690rpx;
margin: 0 auto;
padding-top: 30rpx;
}
</style>