328 lines
8.1 KiB
Vue
328 lines
8.1 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="content-top">
|
|
<view class='hs_box'>
|
|
<view class='hs-row '>
|
|
<view class='hs-row-hd'>
|
|
姓名
|
|
</view>
|
|
<view class='hs-row-bd' style="width: 95%;">
|
|
<input type="text" class='hs-input' placeholder='请填写姓名' v-model="name" ></input>
|
|
</view>
|
|
</view>
|
|
<view class='hs-row '>
|
|
<view class='hs-row-hd'>
|
|
手机号
|
|
</view>
|
|
<view class='hs-row-bd' style="width: 95%;">
|
|
<input type="number" class='hs-input' placeholder='请填写手机号' v-model="mobile" ></input>
|
|
</view>
|
|
</view>
|
|
<view class='hs-row '>
|
|
<view class='hs-row-hd'>
|
|
省市区
|
|
</view>
|
|
<view class='hs-row-bd'style="width: 95%;">
|
|
<uni-data-picker placeholder="请选择省市区" popup-title="请选择省市区" :localdata="dataTree" :clear-icon="false" v-model="classes"
|
|
@change="onchangearea">
|
|
</uni-data-picker></view>
|
|
</view>
|
|
|
|
<view class='hs-row '>
|
|
<view class='hs-row-hd'>
|
|
地址
|
|
</view>
|
|
<view class='hs-row-bd' style="width: 95%;">
|
|
<view class="hs-input" style="width:78%">{{address}} </view>
|
|
<view @click="getLocation" style="position: absolute;right: 10px;line-height: 24px;color: #000;">
|
|
选择位置
|
|
<image class="fr icon" src="/static/img/right.png">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class='hs-row '>
|
|
<view class='hs-row-hd'>
|
|
详细地址
|
|
</view>
|
|
<view class='hs-row-bd' style="width: 95%;">
|
|
<input type="text" class='hs-input' placeholder='如:楼号/门牌号' v-model="room_number"></input>
|
|
</view>
|
|
</view>
|
|
<view class='hs-row' @click="defaultChange">
|
|
<view class='hs-row-hd'>
|
|
设为默认
|
|
</view>
|
|
<view class='lidiv-ft' >
|
|
<label class="radio" ><radio value="1" :checked="checked" color="#FF7159"/></label>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="button-bottom">
|
|
|
|
<button class="btn btn-primary" @click="delAddress" v-if="id && id != 0" :disabled='submitStatus' :loading='submitStatus'>删除</button>
|
|
|
|
<button class="btn btn-success" @click="saveAddress" :disabled='submitStatus' :loading='submitStatus'>保存</button>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {
|
|
},
|
|
data() {
|
|
return {
|
|
dataTree: [],
|
|
classes:'',
|
|
id: 0,
|
|
name: '',
|
|
mobile: '',
|
|
room_number: '',
|
|
longitude:'',
|
|
latitude:'',
|
|
region: ['', '', ''],
|
|
areaId: 0,
|
|
address: '',
|
|
is_def: 2,
|
|
checked: false,
|
|
pickerValue: '',
|
|
submitStatus: false
|
|
}
|
|
},
|
|
computed: {},
|
|
onLoad(e) {
|
|
if(e.address_id){
|
|
this.id = e.address_id;
|
|
this.getAddressInfo();
|
|
}else{
|
|
uni.setNavigationBarTitle({
|
|
title: '添加地址'
|
|
});
|
|
}
|
|
//获取地区信息
|
|
this.$api.getarealist({}, res => {
|
|
if (res.code ==1) {
|
|
this.dataTree = res.data
|
|
uni.setStorageSync('areaList', res.data );
|
|
}
|
|
});
|
|
},
|
|
methods: {
|
|
getLocation(){
|
|
uni.chooseLocation({
|
|
success: (e) => {
|
|
this.address = e.name;
|
|
this.longitude = e.longitude
|
|
this.latitude = e.latitude
|
|
},
|
|
fail:(e)=>{
|
|
console.log(e);
|
|
uni.showToast({
|
|
title:'右上角三个点设置位置授权',
|
|
icon:'none',
|
|
})
|
|
}
|
|
})
|
|
},
|
|
onchangearea(e) {
|
|
this.areaId = e.detail.value[2].value
|
|
},
|
|
onConfirm(e) {
|
|
let province_name = e[0].name;
|
|
let city_name = e[1].name;
|
|
let county_name = e[2].name;
|
|
this.pickerValue = e[0].name+ " "+ e[1].name+" "+e[2].name
|
|
let data = {
|
|
province_name: province_name,
|
|
city_name: city_name,
|
|
county_name: county_name
|
|
}
|
|
let regionName = [province_name, city_name, county_name];
|
|
this.$api.getAreaId(data, res => {
|
|
if (res.code ==1) {
|
|
this.areaId = res.data
|
|
} else {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '地区选择出现问题，请重新选择地区',
|
|
showCancel: false
|
|
});
|
|
}
|
|
});
|
|
},
|
|
// 信息验证
|
|
checkData (data) {
|
|
this.submitStatus = false;
|
|
if (!data.name) {
|
|
uni.showToast({ title: '请输入姓名' , icon: 'none' })
|
|
return false
|
|
} else if (!data.mobile) {
|
|
uni.showToast({ title: '请输入手机号' , icon: 'none' })
|
|
return false
|
|
} else if (data.mobile.length !== 11) {
|
|
uni.showToast({ title: '手机号格式不正确' , icon: 'none' })
|
|
return false
|
|
} else if (!data.area_id) {
|
|
uni.showToast({ title: '请选择地区信息' , icon: 'none' })
|
|
return false
|
|
} else if (!data.address) {
|
|
uni.showToast({ title: '请选择地址' , icon: 'none' })
|
|
return false
|
|
} else if (!data.room_number) {
|
|
uni.showToast({ title: '请输入详细地址' , icon: 'none' })
|
|
return false
|
|
} else {
|
|
return true
|
|
}
|
|
},
|
|
//默认
|
|
defaultChange(){
|
|
if(this.checked){
|
|
this.checked = false;
|
|
this.is_def = 2;
|
|
}else{
|
|
this.checked = true;
|
|
this.is_def = 1;
|
|
}
|
|
},
|
|
getAddressInfo() {
|
|
let data = {
|
|
'id': this.id
|
|
}
|
|
this.$api.detail(data, res => {
|
|
if(res.code ==1){
|
|
let region = res.data.area_name.split(" ");
|
|
this.name = res.data.name;
|
|
this.mobile = res.data.mobile;
|
|
this.region = region;
|
|
this.areaId = res.data.area_id;
|
|
this.classes= res.data.area_id;
|
|
this.room_number = res.data.room_number;
|
|
this.longitude = res.data.longitude;
|
|
this.latitude = res.data.latitude;
|
|
|
|
this.address = res.data.address;
|
|
this.is_def = res.data.is_def;
|
|
if(res.data.is_def == 1){
|
|
this.checked = true;
|
|
}else{
|
|
this.checked = false;
|
|
}
|
|
}else{
|
|
uni.showToast({ title: '获取收货地址信息出现问题' , icon: 'none' })
|
|
}
|
|
},res => {
|
|
this.submitStatus = false;
|
|
});
|
|
},
|
|
delAddress() {
|
|
this.submitStatus = true;
|
|
this.$api.removeAddress({'id': this.id}, res => {
|
|
if(res.code ==1){
|
|
|
|
let user_address = uni.getStorageSync('user_address');
|
|
if(user_address.id==this.id){
|
|
let data={}
|
|
this.$store.commit("user_address",data)
|
|
}
|
|
uni.showToast({ title: res.msg , icon: 'success' })
|
|
setTimeout(function() {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
},2000);
|
|
}else{
|
|
uni.showToast({ title: res.msg , icon: 'none' }) ;
|
|
}
|
|
},res => {
|
|
this.submitStatus = false;
|
|
});
|
|
},
|
|
saveAddress() {
|
|
this.submitStatus = true;
|
|
let data = {
|
|
name: this.name,
|
|
address: this.address,
|
|
mobile: this.mobile,
|
|
is_def: this.is_def,
|
|
room_number : this.room_number,
|
|
longitude : this.longitude,
|
|
latitude : this.latitude,
|
|
area_id: this.areaId
|
|
}
|
|
if(this.id && this.id != 0){
|
|
data.id = this.id
|
|
|
|
if (this.checkData(data)) {
|
|
this.$api.editaddress(data, res => {
|
|
if(res.code ==1){
|
|
uni.showToast({ title: res.msg , icon: 'success' })
|
|
setTimeout(function() {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
},2000);
|
|
}else{
|
|
uni.showToast({ title: res.msg , icon: 'none' }) ;
|
|
this.submitStatus = false;
|
|
}
|
|
},res => {
|
|
this.submitStatus = false;
|
|
});
|
|
}
|
|
}else{
|
|
if (this.checkData(data)) {
|
|
this.$api.editaddress(data, res => {
|
|
if(res.code ==1 ){
|
|
uni.showToast({ title: res.msg , icon: 'success' })
|
|
setTimeout(function() {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
},2000);
|
|
}else{
|
|
uni.showToast({ title: res.msg , icon: 'none' }) ;
|
|
}
|
|
},res => {
|
|
this.submitStatus = false;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.user-head{
|
|
height: 100upx;
|
|
}
|
|
.user-head-img{
|
|
height: 90upx;
|
|
width: 90upx;
|
|
border-radius: 50%;
|
|
}
|
|
.hs-row-hd{
|
|
width: 180rpx;
|
|
}
|
|
.hs-row-bd{
|
|
color: #666;
|
|
font-size: 26upx;
|
|
}
|
|
.button-bottom .btn {
|
|
width: 50%;
|
|
}
|
|
.hs-input{
|
|
width: 100%;
|
|
}
|
|
.lidiv-ft{
|
|
right: 26rpx;
|
|
}
|
|
.input-value{padding:0px ! important}
|
|
.arrow-area{display:none}
|
|
|
|
</style> |