<script setup>
|
import { onMounted, ref, watchEffect } from 'vue';
|
import { getRegionApi,creatUserArchive,getAddressApi,editAddressApi } from '../../api/index.js';
|
import { onLoad } from "@dcloudio/uni-app"
|
|
const addressId = ref()
|
const pageTitle = ref('新增地址')
|
const isCheckedDefault =ref(false)
|
const form = ref({
|
id:'',
|
userName:'',
|
userPhone:'',
|
listRegion:[],
|
userAddress:'',
|
isDefault:null,
|
})
|
//获取地址
|
async function getAddress(){
|
if(addressId.value){
|
pageTitle.value = "编辑地址"
|
await getAddressApi(addressId.value).then((res) =>{
|
form.value.id = res.data.id
|
form.value.userName = res.data.userName
|
form.value.userPhone = res.data.userPhone
|
form.value.listRegion = res.data.region.replace(/#/g,'').split(',')
|
form.value.userAddress = res.data.address
|
form.value.isDefault = res.data.isDefault
|
regionName.value = res.data.regionName.replace(/[#,]/g,' ')
|
isCheckedDefault.value = form.value.isDefault == 1 ? true : false
|
console.log('form',form.value)
|
})
|
}else{
|
console.log('xiznzeng')
|
}
|
}
|
onLoad(async(option)=>{
|
addressId.value = option.id
|
console.log('1')
|
})
|
onMounted(()=>{
|
getAddress()
|
})
|
function change(e){
|
form.value.isDefault = e.detail.value ? 1 : 0
|
}
|
//提交表单数据
|
async function submit(){
|
//修改地址
|
if(form.value.id){
|
await editAddressApi(form.value).then((res) =>{
|
if(res.code == 200){
|
uni.showToast({
|
title: '修改成功',
|
duration:500
|
})
|
setTimeout(() =>{
|
uni.navigateBack()
|
form.value = {}
|
},500)
|
}
|
})
|
}else{
|
//新增地址
|
form.value.id = JSON.parse(uni.getStorageSync('userInfo')).id
|
await creatUserArchive(form.value).then((res) =>{
|
if(res.code == 200){
|
uni.showToast({
|
title: '新增成功',
|
duration:1000
|
})
|
setTimeout(() =>{
|
uni.navigateBack()
|
form.value = {}
|
},1000)
|
}
|
})
|
}
|
}
|
|
const DaTreeRef = ref()
|
const treeListData = ref([])
|
const isExpandIcon = ref(false)
|
const regionName = ref('')
|
//展开关闭选择框
|
function expandRegion(){
|
if(isExpandIcon.value){
|
isExpandIcon.value = false
|
}else{
|
isExpandIcon.value = true
|
}
|
}
|
//请求行政区域数据
|
async function getRegion(){
|
await getRegionApi('').then((res) =>{
|
res.data.forEach((item)=>{
|
if(item.children == null){
|
item.children = [{}]
|
}
|
})
|
treeListData.value = res.data
|
console.log(res)
|
})
|
}
|
//设置选中区域名
|
function setRegionName(){
|
let nodeList
|
let nameList = []
|
//判断选中是否根节点，根节点直接取选中node值
|
if(DaTreeRef.value.getHalfCheckedNodes()){
|
nodeList = DaTreeRef.value.getHalfCheckedNodes().concat(DaTreeRef.value.getCheckedNodes())
|
console.log('ban',DaTreeRef.value.getHalfCheckedNodes(),DaTreeRef.value.getCheckedNodes())
|
}else{
|
nodeList = DaTreeRef.value.getCheckedNodes()
|
}
|
nodeList.forEach((item)=>{
|
nameList.push(item.label)
|
})
|
regionName.value = nameList.join()
|
}
|
//选中区域
|
function handleTreeChange(e,e2){
|
isExpandIcon.value = false
|
if(DaTreeRef.value.getHalfCheckedKeys()){
|
form.value.listRegion = DaTreeRef.value.getHalfCheckedKeys().concat(DaTreeRef.value.getCheckedKeys())
|
}else{
|
form.value.listRegion = DaTreeRef.value.getCheckedKeys()
|
}
|
setRegionName()
|
console.log('select',form.value.listRegion,regionName.value)
|
}
|
//遍历树形数据，给展开子节点数据赋值
|
function setTreeData(data,id,childData){
|
let treeList = data
|
treeList.forEach((item) =>{
|
if(item.id === id){
|
item.children = childData
|
}else{
|
if(item.children && item.children.length > 0){
|
setTreeData(item.children,id,childData);
|
}
|
}
|
})
|
return treeList
|
}
|
//展开节点，请求节点数据
|
async function handleExpandChange(isExpand,item){
|
if(item.children[0].key != undefined){
|
}else{
|
let treeList = treeListData.value
|
let childData = []
|
await getRegionApi(item.originItem.code).then((res) =>{
|
res.data.forEach((item)=>{
|
if((item.children == null) && item.level!=4){
|
item.children = [{}]
|
}
|
})
|
childData = res.data
|
})
|
treeListData.value = setTreeData(treeList,item.key,childData)
|
DaTreeRef.value.setExpandedKeys([item.key],true)
|
}
|
}
|
|
onMounted(async() =>{
|
await getRegion()
|
})
|
</script>
|
<template>
|
<view class="container">
|
<navbar :title ='pageTitle'></navbar>
|
<view class="content">
|
<view class="main">
|
<view class="item">
|
<text>联系人</text>
|
<input v-model="form.userName" placeholder="请输入联系人" />
|
</view>
|
<view class="item">
|
<text>联系电话</text>
|
<input v-model="form.userPhone" placeholder="请输入联系电话" />
|
</view>
|
<view class=" item tree-item">
|
<text>送水区域</text>
|
<view class="tree-select" @click="expandRegion()">
|
<text v-if="!isExpandIcon && !regionName" class="tree-placehoder">省市区域</text>
|
<view v-if="regionName" class="tree-name">{{regionName}}</view>
|
<image :class="isExpandIcon ? 'tree-img' : 'tree-img-fold'" src="../../static/images/address/expand.png"></image>
|
</view>
|
<view v-if='isExpandIcon' class="tree">
|
<DaTree ref="DaTreeRef"
|
:data="treeListData"
|
labelField="name"
|
valueField="id"
|
:showRadioIcon='false'
|
@change="handleTreeChange"
|
@expand="handleExpandChange"></DaTree>
|
</view>
|
</view>
|
<view class="item">
|
<text>送水地址</text>
|
<input v-model="form.userAddress" placeholder="请输入详细地址" />
|
</view>
|
</view>
|
|
<view class="default">
|
<view>设为默认收货地址</view>
|
<switch :checked='isCheckedDefault' @change="change" color="#1890FF"/>
|
</view>
|
<view class="subBtn" @click="submit()">提交信息</view>
|
</view>
|
</view>
|
</template>
|
|
<style lang="scss">
|
.container{
|
width: 100%;
|
height: 100vh;
|
.content{
|
width: 100%;
|
height:calc(100vh - 176rpx - 20rpx);
|
background:linear-gradient(to top,#FFFFFF,#E8EFFF);
|
padding:94rpx 32rpx 0;
|
box-sizing: border-box;
|
.main{
|
width: 100%;
|
height:565rpx;
|
// background: #E8EFFF;
|
.item{
|
width:100%;
|
height:93rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items:center;
|
margin-bottom:20rpx;
|
text{
|
font-weight:light;
|
font-size: 32rpx;
|
color: #000000;
|
}
|
input{
|
padding-left:36rpx;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
border-radius:22rpx;
|
height:100%;
|
width:534rpx;
|
box-shadow:0 0 7rpx 1rpx rgba(85, 170, 255, 0.3);
|
}
|
.tree-select{
|
// padding-left:36rpx;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
width:534rpx;
|
height:100%;
|
border-radius:22rpx;
|
box-shadow:0 0 5rpx 2rpx rgba(85, 170, 255, 0.5);
|
.tree-placehoder{
|
height: 100%;
|
line-height:93rpx;
|
color: #868686;
|
margin-left:36rpx;
|
}
|
.tree-name{
|
height: 100%;
|
width:400rpx;
|
line-height:93rpx;
|
color: #000;
|
margin-left:36rpx;
|
overflow-x:hidden;
|
}
|
.tree-img-fold{
|
width:36rpx;
|
height:36rpx;
|
position: absolute;
|
right:40rpx;
|
top:30rpx;
|
}
|
.tree-img{
|
width:36rpx;
|
height:36rpx;
|
position: absolute;
|
right:40rpx;
|
top:30rpx;
|
transform: rotate(180deg);
|
}
|
}
|
}
|
.tree-item{
|
position: relative;
|
.tree{
|
padding-top:30rpx;
|
width:534rpx;
|
height:600rpx;
|
background: #FFFFFF;
|
// border:1px solid #72757d;
|
z-index:100;
|
position: absolute;
|
top:95rpx;
|
right:0;
|
border-radius:12rpx;
|
// border:1px solid rgba(93, 163, 255, 0.3);
|
box-shadow: 0 0 5rpx 1rpx rgba(93, 163, 255, 0.3);
|
}
|
}
|
}
|
.default{
|
width:100%;
|
box-sizing: border-box;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 100rpx;
|
background: #FFFFFF;
|
border-radius:16rpx;
|
view{
|
margin-left:24rpx;
|
font-weight: 300;
|
font-size: 32rpx;
|
color: #000000;
|
}
|
}
|
.subBtn{
|
width: 100%;
|
height: 98rpx;
|
background-color:#5EA1FA;
|
border-radius: 50rpx;
|
font-weight: 300;
|
font-size: 36rpx;
|
color: #FFFFFF;
|
text-align: center;
|
line-height:98rpx;
|
margin-top:520rpx;
|
letter-spacing:2px;
|
}
|
}
|
}
|
</style>
|
