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
<template>
<div class="address">
<mt-header style="background: #F93021" title="添加地址">
<mt-button icon="back" slot="left" @click="closeAdd();buttonClick('返回')">返回</mt-button>
</mt-header>
<div style="padding: 10px">
<mt-field label="收货人" v-model="receiveName"></mt-field>
<mt-field label="手机号" v-model="receiveMobile"></mt-field>
<mt-cell title="所在地区" :value="addressArea" @click.native="showPicker" is-link></mt-cell>
<mt-field label="详细地址" v-model="address"></mt-field>
<div @click="onSave();buttonClick('保存地址')" class="btn">保存并使用</div>
</div>
<my-address :showAddressPicker="showAddressPicker" @save-address="saveAddress" @hide-picker="hidePicker" :init="addressArea">
</my-address>
</div>
</template>
<script>
import MyAddress from '@/components/address-picker/Address.vue'
import {saveAddressApi,getUserAdressApi} from "../../service/api";
import { Toast } from 'vant';
export default {
components: {
MyAddress
},
data () {
return {
receiveName: '',
receiveMobile:JSON.parse(localStorage.getItem('userDesc')).mobile ? JSON.parse(localStorage.getItem('userDesc')).mobile : '',
addressDetail: '',
showAddressPicker: false,
addressArea: '',
addressAreaCode: '6-77-705',
address: ''
}
},
mounted () {
this.getUserAddress()
},
computed: {
courseUrl: function () {
return this[`courseType${this.type}Url`]
}
},
methods: {
closeAdd(){
this.$emit('closeAdd', false)
},
buttonClick(buttonName){
this.$sa.track('buttonClick',{
tabTitle:'商品',
moduleTitle:'地址填写',
buttonType:'功能',
buttonName:buttonName
});
},
onSave: function () {
let values = this.addressAreaCode.split('-')
let labels = this.addressArea.split('-')
if (!this.receiveName) {
Toast('收货人不能为空');
return false
} else if (!this.receiveMobile) {
Toast('手机号不能为空');
return false
} else if (!(/^1\d{10}$/.test(this.receiveMobile))) {
Toast('手机号格式不正确');
return false
} else if (!this.address) {
Toast('详细地址不能为空');
return false
}
let param = {};
param.receive_name = this.receiveName;
param.receive_mobile = this.receiveMobile;
param.address = this.address;
param.province_id = values[0];
param.province_name = labels[0];
param.city_id = values[1];
param.city = labels[1];
param.area_id = values[2];
param.area = labels[2];
saveAddressApi(param).then((res) => {
this.closeAdd()
})
},
onValuesChange: function (picker, values) {
if (values[0] > values[1]) {
picker.setSlotValue(1, values[0])
}
},
hidePicker () {
// 接受子组件关闭popup事件
this.showAddressPicker = false
},
showPicker () {
this.showAddressPicker = !this.showAddressPicker
},
saveAddress (labels, values) {
// 从子组件接受返回所选值 val
this.addressArea = labels
this.addressAreaCode = values
this.showAddressPicker = !this.showAddressPicker
},
getUserAddress: function () {
getUserAdressApi().then((res) => {
let addressInfo = res;
this.receiveName = addressInfo.receive_name ? addressInfo.receive_name : '';
this.receiveMobile = !!JSON.parse(localStorage.getItem('userDesc')).mobile && !!JSON.parse(localStorage.getItem('userDesc')).mobile !== '' ? JSON.parse(localStorage.getItem('userDesc')).mobile :( !!addressInfo.receive_mobile ? addressInfo.receive_mobile :'');
this.address = addressInfo.address;
this.addressArea = `${addressInfo.province_name}-${addressInfo.city}-${addressInfo.area}`;
this.addressAreaCode = `${addressInfo.province_id}-${addressInfo.city_id}-${addressInfo.area_id}`
})
}
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
image[lazy=loading] {
width: 140px;
height: 300px;
margin: auto;
}
.no-select {
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
user-select: none;
}
.address {
.btn{
margin-top: 20vw;
height: 11.73333vw;
line-height: 11.73333vw;
color: #fff;
text-align: center;
background: #F93021;
-webkit-box-shadow: 0 2px 6.66667vw 0 rgba(200, 205, 220, 0.7);
box-shadow: 0 2px 6.66667vw 0 rgba(200, 205, 220, 0.7);
border-radius: 20px;
margin-left: 1rem;
margin-right: 1rem;
width: 85vw;
font-size:14*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(255,255,255,1);
position: absolute;
bottom: 20*@toVw;
z-index: 100;
}
}
</style>