deming/components/mine/address-active/index.vue

248 lines
5.5 KiB
Vue
Raw Normal View History

2020-06-03 09:14:04 +08:00
<template>
<view class="address-active">
<view class="user-info">
<view>
2020-06-23 17:21:01 +08:00
<input type="text" placeholder="收货人" v-model="name" />
2020-06-03 09:14:04 +08:00
</view>
<view>
2020-06-23 17:21:01 +08:00
<input type="text" placeholder="手机号" maxlength="11" v-model="phone" />
2020-06-03 09:14:04 +08:00
</view>
2020-06-22 17:45:17 +08:00
<view class="area" @click="show=true">
2020-06-23 17:21:01 +08:00
<input type="text" placeholder="省市区" v-model="address" disabled />
<view>
<image src="/static/image/mine/24.png"></image>
<text>定位</text>
</view>
2020-06-03 09:14:04 +08:00
</view>
<view>
2020-06-23 17:21:01 +08:00
<input type="text" placeholder="详细地址" v-model="area" />
2020-06-03 09:14:04 +08:00
</view>
<view class="set-default">
<view>设为默认地址</view>
<view>
2020-06-04 08:21:34 +08:00
<u-switch v-model="checked" active-color="#FF770F" inactive-color="#A9A7A7" size="35"></u-switch>
2020-06-03 09:14:04 +08:00
</view>
</view>
</view>
2020-06-23 17:21:01 +08:00
<view class="edit-btn" @click="confirmBtn">保存地址</view>
<u-select v-model="show"
mode="mutil-column-auto"
:list="areaList"
value-name="area_id"
label-name="area_name"
child-name="_child"
@confirm="setArea">
</u-select>
<u-toast ref="uToast" />
2020-06-03 09:14:04 +08:00
</view>
</template>
<script>
export default {
data() {
return {
2020-06-22 17:45:17 +08:00
show: false,
2020-06-23 17:21:01 +08:00
areaList: [],
checked: false, // 是否设为默认地址
name: '',
phone: '',
address: '', // 选择地址
area: '', // 详细地址
area_id: '', // 地区id 省
city_id: '', // 城市id
2020-06-22 17:45:17 +08:00
}
},
2020-06-23 17:21:01 +08:00
props: {
info: Object
},
2020-06-22 17:45:17 +08:00
mounted() {
2020-06-23 17:21:01 +08:00
this.getAreaData();
},
created() {
2020-06-24 16:39:31 +08:00
console.log(typeof this.info);
2020-06-23 17:21:01 +08:00
this.initAddressInfo();
2020-06-22 17:45:17 +08:00
},
methods: {
2020-06-23 17:21:01 +08:00
// 判断是不是编辑页面 数据初始化
initAddressInfo() {
2020-06-24 16:39:31 +08:00
if(this.info) {
2020-06-23 17:21:01 +08:00
[this.name, this.phone, this.address, this.area, this.area_id, this.city_id] = [
this.info.address_realname,
this.info.address_mob_phone,
this.info.area_info,
this.info.address_detail,
this.info.area_id,
this.info.city_id
]
this.checked = this.info.address_is_default == '0' ? false : true;
}
},
// 判断是不是编辑页面 调用接口
confirmBtn() {
2020-06-24 16:39:31 +08:00
this.info ? this.editAddress() : this.addAddress();
2020-06-23 17:21:01 +08:00
},
// 验证
validateValue() {
if(this.$u.test.isEmpty(this.name)) {
this.showToast('姓名不能为空', 'warning');
return false;
}
if(this.$u.test.isEmpty(this.phone)) {
this.showToast('手机号不能为空', 'warning');
return false;
}
if(!this.$u.test.mobile(this.phone)) {
this.showToast('手机号错误', 'warning');
return false;
}
if(this.$u.test.isEmpty(this.address)) {
this.showToast('地址不能为空', 'warning');
return false;
}
if(this.$u.test.isEmpty(this.area)) {
this.showToast('详细地址不能为空', 'warning');
return false;
}
return true;
2020-06-22 17:45:17 +08:00
},
2020-06-23 17:21:01 +08:00
addAddress() {
if(!this.validateValue()) return false;
this.$u.api.addressAdd({
area_id: this.area_id,
city_id: this.city_id,
is_default: this.checked ? 1 : 0,
area_info: this.address,
address: this.area,
true_name: this.name,
mobile_phone: this.phone,
// longitude,
// latitude,
2020-06-22 17:45:17 +08:00
}).then((res)=>{
2020-06-23 17:21:01 +08:00
if (res.errCode == 0) {
this.$refs.uToast.show({
title: res.message,
type: 'success',
2020-06-30 18:06:50 +08:00
// url: '/pageE/more/Address',
callback() {
uni.redirectTo({
url: '/pageE/more/Address'
});
}
2020-06-23 17:21:01 +08:00
})
} else {
this.showToast(res.message, 'warning');
}
2020-06-22 17:45:17 +08:00
})
2020-06-23 17:21:01 +08:00
},
editAddress() {
if(!this.validateValue()) return false;
this.$u.api.addressEdit({
address_id: this.info.address_id,
area_id: this.area_id,
city_id: this.city_id,
is_default: this.checked ? 1 : 0,
area_info: this.address,
address: this.area,
true_name: this.name,
mobile_phone: this.phone,
// longitude,
// latitude,
}).then((res)=>{
if (res.errCode == 0) {
this.$refs.uToast.show({
title: res.message,
type: 'success',
2020-06-30 18:06:50 +08:00
// url: '/pageE/more/Address',
callback() {
uni.redirectTo({
url: '/pageE/more/Address'
});
}
2020-06-23 17:21:01 +08:00
})
} else {
this.showToast(res.message, 'warning');
}
})
},
getAreaData() {
this.$u.api.getArea().then((res)=>{
if (res.errCode == 0) {
this.areaList = res.data;
}
})
},
setArea(area) {
// console.log(area);
this.area_id = area[0].value;
this.city_id = area[1].value;
let temp = '';
area.forEach(e => {
temp += e.label;
});
this.address = temp;
},
showToast(message, type) {
this.$refs.uToast.show({
title: message,
type: type,
})
},
2020-06-03 09:14:04 +08:00
},
}
</script>
<style lang="scss" scoped>
.address-active {
.user-info {
border-top: 1rpx solid rgba(235,235,235,1);
> view {
height: 98rpx;
padding: 30rpx;
border-bottom: 2rpx solid rgba(235,235,235,1);
> input {
font-size: 30rpx;
outline: none;
}
}
.set-default {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 30rpx;
color: rgba(51,51,51,1);
}
2020-06-23 17:21:01 +08:00
.area {
padding: 0 30rpx;
display: flex;
> input {
padding: 30rpx 0;
flex: 1;
}
> view {
margin-left: 30rpx;
width: 50rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 22rpx;
color: rgba(255,120,15,1);
> image {
width: 26rpx;
height: 32rpx;
margin-bottom: 10rpx;
}
}
}
2020-06-03 09:14:04 +08:00
}
.edit-btn {
margin: 122rpx auto 0;
width: 690rpx;
height: 98rpx;
background: rgba(255,119,15,1);
border-radius: 49rpx;
font-size: 36rpx;
color:rgba(255,255,255,1);
line-height: 98rpx;
text-align: center;
}
}
</style>