|
|
|
<template>
|
|
|
|
<view class="addressadd-bg">
|
|
|
|
<view class="list-forms">
|
|
|
|
<view class="list-item">
|
|
|
|
<view class="list-item-title">姓名</view>
|
|
|
|
<view class="list-item-input"><input type="text" v-model="username" placeholder="请输入姓名" /></view>
|
|
|
|
</view>
|
|
|
|
<view class="list-item">
|
|
|
|
<view class="list-item-title">手机号</view>
|
|
|
|
<view class="list-item-input"><input type="number" v-model="mobile" placeholder="请输入手机号" maxlength="11"
|
|
|
|
/></view>
|
|
|
|
</view>
|
|
|
|
<view class="list-item" style="position: relative;">
|
|
|
|
<view class="list-item-title">选择地区</view>
|
|
|
|
<view class="list-item-input3" style="flex: 1;">
|
|
|
|
<picker mode="multiSelector" :range="newProvinceDataList" range-key="name" @change="changeArea" @columnchange="pickerColumnchange"
|
|
|
|
style="position: relative;z-index: 2;">
|
|
|
|
<input type="text" readonly style="font-size: 35rpx;position: relative;z-index: -1;"
|
|
|
|
v-model="citySeld" disabled="true" placeholder="请选择地区"/>
|
|
|
|
</picker>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="list-item">
|
|
|
|
<view class="list-item-title">详细地址</view>
|
|
|
|
<view class="list-item-input"><input type="text" v-model="detailAddr" placeholder="请输入详细地址" /></view>
|
|
|
|
</view>
|
|
|
|
<view class="list-item" style="border-bottom: 0;">
|
|
|
|
<view class="list-item-title">设为默认</view>
|
|
|
|
<view class="list-item-switch">
|
|
|
|
<switch :checked="idDefault" @change="switchChange" color="#6A8A2D"/>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- <view class="list-item-btn">
|
|
|
|
<view class="list-item-post" @click="postSave()">保存</view>
|
|
|
|
</view> -->
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import District from 'ydui-district/dist/jd_province_city_area_id';
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
username: '',
|
|
|
|
mobile: '',
|
|
|
|
citySeld: '',
|
|
|
|
detailAddr: '',
|
|
|
|
idDefault: false,
|
|
|
|
title: '新增收货地址',
|
|
|
|
show: false,
|
|
|
|
district: District, //数据
|
|
|
|
|
|
|
|
province: null,
|
|
|
|
city: null,
|
|
|
|
area: '',
|
|
|
|
provinceId: null,
|
|
|
|
cityId: null,
|
|
|
|
areaId: null,
|
|
|
|
columns: [],
|
|
|
|
id: '',
|
|
|
|
newProvinceDataList:[
|
|
|
|
[],[],[]
|
|
|
|
],
|
|
|
|
multiIndex: [0, 0, 0],
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onLoad(option){
|
|
|
|
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
init(option) {
|
|
|
|
this.id = null
|
|
|
|
this.username = ''
|
|
|
|
this.mobile = ''
|
|
|
|
this.citySeld = ''
|
|
|
|
this.detailAddr = ''
|
|
|
|
this.idDefault = false
|
|
|
|
this.province = null
|
|
|
|
this.city = null
|
|
|
|
this.area = ''
|
|
|
|
this.provinceId = null
|
|
|
|
this.cityId = null
|
|
|
|
this.areaId = null
|
|
|
|
this.multiIndex = [0, 0, 0]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (option.id > 0) {
|
|
|
|
console.log(option)
|
|
|
|
this.title = '编辑收货地址'
|
|
|
|
this.id = option.id
|
|
|
|
this.username = option.name
|
|
|
|
this.mobile = option.tel
|
|
|
|
this.idDefault = option.is_default == 1 ? true : false
|
|
|
|
this.provinceId = option.province_id
|
|
|
|
this.cityId = option.city_id
|
|
|
|
this.areaId = option.district_id
|
|
|
|
// this.citySeld = option.addresss
|
|
|
|
this.detailAddr = option.detail_addr;
|
|
|
|
this.getSeldCityList();
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
this.getSeldCityList()
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
switchChange(e){
|
|
|
|
this.idDefault = e.detail.value
|
|
|
|
},
|
|
|
|
changeArea(e){
|
|
|
|
// 数组内的下标
|
|
|
|
this.multiIndex = e.detail.value;
|
|
|
|
this.citySeld = this.newProvinceDataList[0][this.multiIndex[0]].name + this.newProvinceDataList[1][this.multiIndex[1]].name + this.newProvinceDataList[2][this.multiIndex[2]].name
|
|
|
|
this.provinceId = this.newProvinceDataList[0][this.multiIndex[0]].id
|
|
|
|
this.cityId = this.newProvinceDataList[1][this.multiIndex[1]].id
|
|
|
|
this.areaId = this.newProvinceDataList[2][this.multiIndex[2]].id
|
|
|
|
},
|
|
|
|
getSeldCityList() {
|
|
|
|
if (this.columns.length>0) {
|
|
|
|
this.handleColumns()
|
|
|
|
return
|
|
|
|
}
|
|
|
|
let that = this
|
|
|
|
that.Post({}, '/api/uservice/user/getAreas').then(res => {
|
|
|
|
if (res.code === 1) {
|
|
|
|
var data = res.data;
|
|
|
|
var result = {};
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
|
var item = data[i];
|
|
|
|
if (!item.pid) {
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
//获取省
|
|
|
|
if (item.pid == "100000") {
|
|
|
|
result[item.id.toString()] = {};
|
|
|
|
result[item.id.toString()].children = []
|
|
|
|
result[item.id.toString()].name = item.name;
|
|
|
|
result[item.id.toString()].id = item.id;
|
|
|
|
} else if (result[item.pid.toString()]) {
|
|
|
|
//填充市
|
|
|
|
var t = {
|
|
|
|
id: item.id,
|
|
|
|
name: item.name,
|
|
|
|
children: []
|
|
|
|
}
|
|
|
|
result[item.pid.toString()].children.push(t)
|
|
|
|
} else {
|
|
|
|
//填充区
|
|
|
|
var k = {
|
|
|
|
id: item.id,
|
|
|
|
name: item.name
|
|
|
|
}
|
|
|
|
for (var j = 0; j < result[item.pid.toString().substr(0, 2) + "0000"].children
|
|
|
|
.length; j++) {
|
|
|
|
if (result[item.pid.toString().substr(0, 2) + "0000"].children[j].id == item
|
|
|
|
.pid) {
|
|
|
|
result[item.pid.toString().substr(0, 2) + "0000"].children[j].children.push(k)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
var r = [];
|
|
|
|
//将Object转为Array
|
|
|
|
for (var i in result) {
|
|
|
|
r.push(result[i]);
|
|
|
|
}
|
|
|
|
//将数据赋值给省市区联动选择器
|
|
|
|
that.district = r;
|
|
|
|
that.columns = r
|
|
|
|
this.handleColumns()
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
handleColumns () {
|
|
|
|
this.newProvinceDataList= [
|
|
|
|
this.columns.map(v=>{return {name: v.name, id: v.id}}),
|
|
|
|
this.columns[0].children.map(v=>{return {name: v.name, id: v.id}}),
|
|
|
|
this.columns[0].children[0].children.map(v=>{return {name: v.name, id: v.id}}),
|
|
|
|
]
|
|
|
|
// this.provinceId = option.province_id
|
|
|
|
// this.cityId = option.city_id
|
|
|
|
// this.areaId = option.district_id
|
|
|
|
// 如果有省市区
|
|
|
|
if (this.provinceId) {
|
|
|
|
// todo 错误处理
|
|
|
|
try {
|
|
|
|
let index1 = this.columns.findIndex(v=>v.id==this.provinceId)
|
|
|
|
let index2 = this.columns[index1].children.findIndex(v=>v.id==this.cityId)
|
|
|
|
let index3 = this.columns[index1].children[index2].children.findIndex(v=>v.id==this.areaId)
|
|
|
|
this.citySeld = this.columns[index1].name + this.columns[index1].children[index2].name + this.columns[index1].children[index2].children[index3].name
|
|
|
|
|
|
|
|
} catch (e) {
|
|
|
|
console.log(e)
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
// 滑动
|
|
|
|
pickerColumnchange(e){
|
|
|
|
// 第几列滑动
|
|
|
|
// console.log(e.detail.column);
|
|
|
|
// 第几列滑动的下标
|
|
|
|
// console.log(e.detail.value)
|
|
|
|
// 第一列滑动
|
|
|
|
if(e.detail.column === 0){
|
|
|
|
this.multiIndex[0] = e.detail.value
|
|
|
|
// console.log('第一列滑动');
|
|
|
|
// this.newProvinceDataList[1] = [];
|
|
|
|
this.newProvinceDataList[1] = this.columns[this.multiIndex[0]].children.map((item,index)=>{
|
|
|
|
// console.log(item)
|
|
|
|
return item
|
|
|
|
})
|
|
|
|
// console.log(this.multiIndex)
|
|
|
|
if(this.columns[this.multiIndex[0]].children.length === 1){
|
|
|
|
this.newProvinceDataList[2] = this.columns[this.multiIndex[0]].children[0].children.map((item,index)=>{
|
|
|
|
// console.log(item)
|
|
|
|
return item
|
|
|
|
})
|
|
|
|
}else{
|
|
|
|
this.newProvinceDataList[2] = this.columns[this.multiIndex[0]].children[this.multiIndex[1]].children.map((item,index)=>{
|
|
|
|
// console.log(item)
|
|
|
|
return item
|
|
|
|
})
|
|
|
|
}
|
|
|
|
// 第一列滑动 第二列 和第三列 都变为第一个
|
|
|
|
this.multiIndex.splice(1, 1, 0)
|
|
|
|
this.multiIndex.splice(2, 1, 0)
|
|
|
|
}
|
|
|
|
// 第二列滑动
|
|
|
|
if(e.detail.column === 1){
|
|
|
|
this.multiIndex[1] = e.detail.value
|
|
|
|
// console.log('第二列滑动');
|
|
|
|
// console.log(this.multiIndex)
|
|
|
|
this.newProvinceDataList[2] = this.columns[this.multiIndex[0]].children[this.multiIndex[1]].children.map((item,index)=>{
|
|
|
|
// console.log(item)
|
|
|
|
return item
|
|
|
|
})
|
|
|
|
// 第二列 滑动 第三列 变成第一个
|
|
|
|
this.multiIndex.splice(2, 1, 0)
|
|
|
|
}
|
|
|
|
// 第三列滑动
|
|
|
|
if(e.detail.column === 2){
|
|
|
|
this.multiIndex[2] = e.detail.value
|
|
|
|
// console.log('第三列滑动')
|
|
|
|
// console.log(this.multiIndex)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
async postSave() {
|
|
|
|
this.username = this.username.trim()
|
|
|
|
this.mobile = this.mobile.trim()
|
|
|
|
this.detailAddr = this.detailAddr.trim()
|
|
|
|
if (this.username.length < 1) {
|
|
|
|
uni.showToast({
|
|
|
|
title: '请输入姓名',
|
|
|
|
icon: 'none'
|
|
|
|
})
|
|
|
|
return
|
|
|
|
}
|
|
|
|
if (this.username.length > 6) {
|
|
|
|
uni.showToast({
|
|
|
|
title: '姓名最多6个字',
|
|
|
|
icon: 'none'
|
|
|
|
})
|
|
|
|
return
|
|
|
|
}
|
|
|
|
if (!this.IsTel(this.mobile)) {
|
|
|
|
uni.showToast({
|
|
|
|
title: '请输入正确的手机号',
|
|
|
|
icon: 'none'
|
|
|
|
})
|
|
|
|
return
|
|
|
|
}
|
|
|
|
if (this.citySeld.length < 1) {
|
|
|
|
uni.showToast({
|
|
|
|
title: '请选择地区',
|
|
|
|
icon: 'none'
|
|
|
|
})
|
|
|
|
return
|
|
|
|
}
|
|
|
|
if (this.detailAddr.length < 2) {
|
|
|
|
uni.showToast({
|
|
|
|
title: '请输入具体地址',
|
|
|
|
icon: 'none'
|
|
|
|
})
|
|
|
|
return
|
|
|
|
}
|
|
|
|
let api = '/api/uservice/user/addNewConsignee'
|
|
|
|
if (this.id>0) {
|
|
|
|
api = "/api/uservice/user/editConsignee"
|
|
|
|
}
|
|
|
|
let res = await this.Post({
|
|
|
|
username: this.username,
|
|
|
|
mobile: this.mobile,
|
|
|
|
is_default: this.idDefault ? '1' : '0',
|
|
|
|
province_id: this.provinceId,
|
|
|
|
city_id: this.cityId,
|
|
|
|
district_id: this.areaId,
|
|
|
|
detail_addr: this.detailAddr,
|
|
|
|
id: this.id || null
|
|
|
|
},api)
|
|
|
|
|
|
|
|
if(res.code == '1'){
|
|
|
|
// uni.setStorageSync('addressNow',JSON.stringify(res.data))
|
|
|
|
uni.showModal({
|
|
|
|
title: '提示',
|
|
|
|
content: this.id>0?'编辑成功':'添加成功',
|
|
|
|
showCancel: false,
|
|
|
|
})
|
|
|
|
this.$emit("changeAddress")
|
|
|
|
}else{
|
|
|
|
uni.showModal({
|
|
|
|
title: '提示',
|
|
|
|
content: res.msg,
|
|
|
|
showCancel: false,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
return {...res,data: {id: this.id}}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.addressadd-bg {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
.list-forms {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
box-sizing: content-box
|
|
|
|
}
|
|
|
|
|
|
|
|
.list-item {
|
|
|
|
display: flex;
|
|
|
|
border-bottom: 1rpx solid #D8D8D8;
|
|
|
|
padding: 30rpx 0;
|
|
|
|
height: 60rpx;
|
|
|
|
align-items: center;
|
|
|
|
box-sizing: content-box
|
|
|
|
}
|
|
|
|
|
|
|
|
.list-item-title {
|
|
|
|
width: 150rpx;
|
|
|
|
font-size: 31rpx;
|
|
|
|
margin-right: 20rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
.list-item-input {
|
|
|
|
flex: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.list-item-input input {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
padding: 0;
|
|
|
|
margin: 0;
|
|
|
|
border: 0;
|
|
|
|
background-color: transparent;
|
|
|
|
line-height: 31rpx;
|
|
|
|
font-size: 31rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
.list-item-input input::placeholder {
|
|
|
|
font-size: 26rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
.list-item-switch {
|
|
|
|
display: flex;
|
|
|
|
flex: 1;
|
|
|
|
justify-content: flex-end;
|
|
|
|
}
|
|
|
|
|
|
|
|
.list-item-btn {
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
margin-top: 20rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
.list-item-post {
|
|
|
|
display: flex;
|
|
|
|
color: #FFFFFF;
|
|
|
|
font-size: 36rpx;
|
|
|
|
width: 697rpx;
|
|
|
|
height: 73rpx;
|
|
|
|
background: linear-gradient(90deg, #F84A56, #FF9834);
|
|
|
|
border-radius: 37rpx;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
margin-top: 725rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|