<template>
|
<view class="box">
|
<view class="list">
|
<view class="list-item">
|
<view class="list-item-label">收件人</view>
|
<view class="list-item-input">
|
<input type="text" placeholder="请输入收件人姓名" v-model="form.name" />
|
</view>
|
</view>
|
<view class="list-item">
|
<view class="list-item-label">联系电话</view>
|
<view class="list-item-input">
|
<input type="text" placeholder="请输入联系电话" v-model="form.phone" />
|
</view>
|
</view>
|
<view class="list-item" @click="show = true">
|
<view class="list-item-label">所在地区</view>
|
<view class="list-item-sele">
|
<text :style="{ color: form.areaName ? '#333333' : '' }">{{form.areaName ? form.areaName : '请选择'}}</text>
|
<u-icon name="arrow-right" color="#B2B2B2" size="16"></u-icon>
|
</view>
|
</view>
|
<view class="list-item">
|
<view class="list-item-label">详细地址</view>
|
<view class="list-item-input">
|
<textarea placeholder="请输入详情地址" v-model="form.addr"></textarea>
|
</view>
|
</view>
|
<view class="list-item" style="display: flex; align-items: center; justify-content: space-between;">
|
<view class="list-item-label">设为默认地址</view>
|
<u-switch v-model="form.isDefault" :activeValue="1" :inactiveValue="0"></u-switch>
|
</view>
|
<view class="box-footer" v-if="type === 1">
|
<view class="btn2" @click="submit">保存</view>
|
</view>
|
<view class="box-footer" v-if="type === 2">
|
<view class="btn1" @click="show1 = true">删除</view>
|
<view class="btn2" @click="submit">保存</view>
|
</view>
|
</view>
|
<!-- 省市区 -->
|
<u-picker
|
:show="show"
|
v-if="areaList && areaList.length > 0"
|
ref="uPicker"
|
confirmColor="#ff2c36"
|
keyName="text"
|
:columns="columns"
|
@confirm="confirm"
|
@change="changeHandler"
|
@cancel="show = false" />
|
<u-modal
|
:show="show1"
|
title="系统提示"
|
content='确认删除当前收货地址吗?'
|
confirmColor="#004096"
|
:showConfirmButton="true"
|
:showCancelButton="true"
|
@confirm="dele"
|
@cancel="show1 = false" />
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
show: false,
|
show1: false,
|
areaList: [],
|
columns: [],
|
|
type: 1,
|
|
form: {
|
id: null,
|
name: '',
|
phone: '',
|
addr: '',
|
areaId: '',
|
areaName: '',
|
isDefault: 1
|
}
|
};
|
},
|
onLoad() {
|
const item = uni.getStorageSync('addr');
|
if (item) {
|
this.type = 2
|
uni.setNavigationBarTitle({
|
title: '编辑收货地址'
|
});
|
this.form.id = item.id
|
this.form.name = item.name
|
this.form.phone = item.phone
|
this.form.addr = item.addr
|
this.form.areaId = item.areaId
|
this.form.areaName = item.areaDetail
|
this.form.isDefault = Number(item.isDefault)
|
uni.removeStorageSync('addr');
|
}
|
this.getArea()
|
},
|
methods: {
|
dele() {
|
this.$u.api.deleteAddr({ id: this.form.id })
|
.then(res => {
|
if (res.code === 200) {
|
uni.showToast({ title: '删除成功', icon: 'success', mask: true, duration: 1500 })
|
setTimeout(() => {
|
uni.navigateBack({
|
delta: 1
|
});
|
}, 1500)
|
}
|
})
|
},
|
submit() {
|
if (this.type === 1) {
|
this.$u.api.createAddr(this.form)
|
.then(res => {
|
if (res.code === 200) {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
})
|
} else {
|
this.$u.api.updateAddr(this.form)
|
.then(res => {
|
if (res.code === 200) {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
})
|
}
|
},
|
// 省市区确定
|
confirm(e) {
|
this.form.areaId = e.value[e.value.length - 1].id
|
this.form.areaName = e.value[0].text + e.value[1].text + e.value[2].text
|
this.show = false
|
},
|
changeHandler(e) {
|
const {
|
columnIndex,
|
value,
|
indexs,
|
values, // values为当前变化列的数组内容
|
index,
|
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
picker = this.$refs.uPicker
|
} = e
|
if (columnIndex === 0) {
|
// 市
|
let city = this.areaList[indexs[0]].childList.map(item => {
|
return {
|
id: item.id,
|
text: item.name
|
}
|
})
|
// 区
|
let qu = this.areaList[indexs[0]].childList[0].childList.map(item => {
|
return {
|
id: item.id,
|
text: item.name
|
}
|
})
|
picker.setColumnValues(1, city)
|
picker.setColumnValues(2, qu)
|
} else if (columnIndex === 1) {
|
// 区
|
let qu = this.areaList[indexs[0]].childList[indexs[1]].childList.map(item => {
|
return {
|
id: item.id,
|
text: item.name
|
}
|
})
|
picker.setColumnValues(2, qu)
|
}
|
},
|
getArea() {
|
this.$u.api.treeList({
|
type: 0,
|
flag: 1
|
}).then(res => {
|
if (res.code === 200) {
|
this.areaList = res.data
|
// 省
|
this.columns[0] = this.areaList.map(item => {
|
return {
|
id: item.id,
|
text: item.name
|
}
|
})
|
// 市
|
this.columns[1] = this.areaList[0].childList.map(item => {
|
return {
|
id: item.id,
|
text: item.name
|
}
|
})
|
// 区
|
this.columns[2] = this.areaList[0].childList[0].childList.map(item => {
|
return {
|
id: item.id,
|
text: item.name
|
}
|
})
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background-color: #F9F9FB;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
.list {
|
width: 100%;
|
padding: 38rpx 30rpx;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,0,0,0.08);
|
border-radius: 16rpx;
|
.box-footer {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-top: 100rpx;
|
.btn1 {
|
flex: 1;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
border-radius: 44rpx;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #E4001D;
|
border: 1rpx solid #E4001D;
|
margin-right: 22rpx;
|
}
|
.btn2 {
|
flex: 1;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
background: #004096;
|
border-radius: 44rpx;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
}
|
}
|
.list-item {
|
width: 100%;
|
padding-bottom: 24rpx;
|
box-sizing: border-box;
|
margin-bottom: 28rpx;
|
border-bottom: 1rpx solid #E5E5E5;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.list-item-label {
|
font-weight: 500;
|
font-size: 28rpx;
|
color: #111111;
|
}
|
.list-item-sele {
|
width: 100%;
|
margin-top: 15rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
text {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #999999;
|
}
|
}
|
.list-item-input {
|
width: 100%;
|
margin-top: 15rpx;
|
input {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #111111;
|
}
|
textarea {
|
width: 100%;
|
height: 130rpx;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
