|
|
@@ -8,13 +8,15 @@ |
|
|
|
<text class="tit">手机号</text> |
|
|
|
<input class="input" type="number" v-model="addressData.mobile" placeholder="收货人手机号码" placeholder-class="placeholder" /> |
|
|
|
</view> |
|
|
|
<view class="row b-b"> |
|
|
|
<text class="tit">地址</text> |
|
|
|
<input class="input" type="text" v-model="addressData.address" placeholder="详细地址,楼号" placeholder-class="placeholder" /> |
|
|
|
<view class="row b-b" v-on:click="showCityPicker()"> |
|
|
|
<text class="tit">地区</text> |
|
|
|
<view class="input"> |
|
|
|
{{cityLebel}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="row b-b"> |
|
|
|
<text class="tit">邮箱</text> |
|
|
|
<input class="input" type="text" v-model="addressData.email" placeholder="邮箱" placeholder-class="placeholder" /> |
|
|
|
<text class="tit">详细</text> |
|
|
|
<input class="input" type="text" v-model="addressData.address" placeholder="详细地址,楼号" placeholder-class="placeholder" /> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="row default-row"> |
|
|
@@ -22,33 +24,46 @@ |
|
|
|
<switch :checked="addressData.is_default" color="#fa436a" @change="switchChange" /> |
|
|
|
</view> |
|
|
|
<button class="add-btn" @click="confirm">提交</button> |
|
|
|
|
|
|
|
<mpvue-city-picker @onChange="onChange" @onCancel="onCancel" |
|
|
|
@onConfirm="onConfirm" ref="mpvueCityPicker" ></mpvue-city-picker> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import mpvueCityPicker from '@/node_modules/mpvue-citypicker/src/mpvueCityPicker.vue'; |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
mpvueCityPicker |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
addressData: { |
|
|
|
name: '', |
|
|
|
mobile: '', |
|
|
|
address: '', |
|
|
|
email: '', |
|
|
|
province_id: 0, |
|
|
|
city_id: 0, |
|
|
|
area_id: 0, |
|
|
|
is_default: false |
|
|
|
} |
|
|
|
}, |
|
|
|
pickerValueDefault: [0, 0, 0] ,//城市选择器默认值 省市区id |
|
|
|
cityLebel:'请选择地区', |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(option) { |
|
|
|
let title = '新增收货地址'; |
|
|
|
if (option.type === 'edit') { |
|
|
|
|
|
|
|
|
|
|
|
this.getInfo(option.id); |
|
|
|
|
|
|
|
|
|
|
|
title = '编辑收货地址' |
|
|
|
} else { |
|
|
|
|
|
|
|
this.$refs.mpvueCityPicker.creat(this.pickerValueDefault); |
|
|
|
} |
|
|
|
this.manageType = option.type; |
|
|
|
uni.setNavigationBarTitle({ |
|
|
|
uni.setNavigationBarTitle({ |
|
|
|
title |
|
|
|
}) |
|
|
|
}, |
|
|
@@ -58,10 +73,40 @@ |
|
|
|
let addressData = await this.$api.request(`/address/info?id=${id}`); |
|
|
|
if (addressData) { |
|
|
|
console.log(addressData); |
|
|
|
|
|
|
|
|
|
|
|
this.addressData = addressData; |
|
|
|
let pickerValueDefault = []; |
|
|
|
pickerValueDefault.push(addressData.province_id); |
|
|
|
pickerValueDefault.push(addressData.city_id); |
|
|
|
pickerValueDefault.push(addressData.area_id); |
|
|
|
this.pickerValueDefault = pickerValueDefault; |
|
|
|
|
|
|
|
this.$refs.mpvueCityPicker.creat(pickerValueDefault); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 城市选择器 |
|
|
|
showCityPicker() { |
|
|
|
this.$refs.mpvueCityPicker.show(); |
|
|
|
}, |
|
|
|
// 城市选择器改变值 |
|
|
|
onChange(e) { |
|
|
|
// console.log('选择的值') |
|
|
|
// console.log(e); |
|
|
|
}, |
|
|
|
// 城市选择器关闭 |
|
|
|
onCancel(e) { |
|
|
|
//console.log(e); |
|
|
|
}, |
|
|
|
// 城市选择器确定 |
|
|
|
onConfirm(e) { |
|
|
|
//console.log(e); |
|
|
|
this.cityLebel = e.label; |
|
|
|
this.pickerValueDefault = e.value; |
|
|
|
|
|
|
|
this.addressData.province_id = this.pickerValueDefault[0]; |
|
|
|
this.addressData.city_id = this.pickerValueDefault[1]; |
|
|
|
this.addressData.area_id = this.pickerValueDefault[2]; |
|
|
|
}, |
|
|
|
//默认地址 |
|
|
|
switchChange(e) { |
|
|
|
this.addressData.is_default = e.detail.value; |
|
|
|