| | |
| | | <script setup> |
| | | import{ref} from 'vue' |
| | | const isDefault =ref(false) |
| | | 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({ |
| | | name:'', |
| | | phone:'', |
| | | region:'', |
| | | address:'', |
| | | id:'', |
| | | userName:'', |
| | | userPhone:'', |
| | | listRegion:[], |
| | | userAddress:'', |
| | | isDefault:null, |
| | | }) |
| | | function submit(){ |
| | | |
| | | //获取地址 |
| | | 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') |
| | | } |
| | | } |
| | | const treeListData = ref([ |
| | | { |
| | | id: '2', |
| | | name: '行政中心', |
| | | children: [ |
| | | { |
| | | id: '21', |
| | | name: '行政部', |
| | | children: [ |
| | | { |
| | | id: '211', |
| | | name: '行政一部', |
| | | children: null, |
| | | }, |
| | | { |
| | | id: '212', |
| | | name: '行政二部', |
| | | children: [], |
| | | disabled: true, |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | id: '22', |
| | | name: '财务部', |
| | | children: [ |
| | | { |
| | | id: '221', |
| | | name: '财务一部', |
| | | children: [], |
| | | disabled: true, |
| | | }, |
| | | { |
| | | id: '222', |
| | | name: '财务二部', |
| | | children: [], |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | id: '23', |
| | | name: '人力资源部', |
| | | children: [ |
| | | { |
| | | id: '231', |
| | | name: '人力一部', |
| | | children: [], |
| | | }, |
| | | { |
| | | id: '232', |
| | | name: '人力二部', |
| | | append: '更多示例,请下载示例项目查看', |
| | | }, |
| | | ], |
| | | }, |
| | | ], |
| | | }, |
| | | ]) |
| | | function handleTreeChange(e){ |
| | | console.log(e) |
| | | onLoad(async(option)=>{ |
| | | addressId.value = option.id |
| | | console.log('1') |
| | | }) |
| | | onMounted(()=>{ |
| | | getAddress() |
| | | }) |
| | | function change(e){ |
| | | form.value.isDefault = e.detail.value ? 1 : 0 |
| | | } |
| | | function handleExpandChange(e){ |
| | | console.log(e) |
| | | //提交表单数据 |
| | | 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 ='新增地址'></navbar> |
| | | <navbar :title ='pageTitle'></navbar> |
| | | <view class="content"> |
| | | <view class="main"> |
| | | <view> |
| | | <view class="item"> |
| | | <text>联系人</text> |
| | | <input v-model="form.name" placeholder="请输入联系人" /> |
| | | <input v-model="form.userName" placeholder="请输入联系人" /> |
| | | </view> |
| | | <view> |
| | | <view class="item"> |
| | | <text>联系电话</text> |
| | | <input v-model="form.phpne" placeholder="请输入联系电话" /> |
| | | <input v-model="form.userPhone" placeholder="请输入联系电话" /> |
| | | </view> |
| | | <view > |
| | | <view class=" item tree-item"> |
| | | <text>送水区域</text> |
| | | <!-- <da-tree ref="DaTreeRef" |
| | | :data="treeListData" |
| | | labelField="name" |
| | | valueField="id" |
| | | defaultExpandAll |
| | | showCheckbox |
| | | @change="handleTreeChange" |
| | | @expand="handleExpandChange"></da-tree> --> |
| | | |
| | | <input v-model="form.phpne" placeholder="请选择区域" /> |
| | | <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> |
| | | <view class="item"> |
| | | <text>送水地址</text> |
| | | <input v-model="form.address" placeholder="请输入详细地址" /> |
| | | <input v-model="form.userAddress" placeholder="请输入详细地址" /> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="default"> |
| | | <view>设为默认收货地址</view> |
| | | <switch :checked = 'isDefault' color="#1890FF"/> |
| | | <switch :checked='isCheckedDefault' @change="change" color="#1890FF"/> |
| | | </view> |
| | | <view class="subBtn" @click="submit()">提交信息</view> |
| | | </view> |
| | |
| | | width: 100%; |
| | | height:565rpx; |
| | | // background: #E8EFFF; |
| | | view{ |
| | | .item{ |
| | | width:100%; |
| | | height:93rpx; |
| | | display: flex; |
| | |
| | | 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{ |
| | | width:100%; |
| | | height:93rpx; |
| | | background: #FFFFFF; |
| | | border-radius:22rpx; |
| | | da-tree{ |
| | | width:543rpx; |
| | | height:93rpx; |
| | | .tree-item{ |
| | | position: relative; |
| | | .tree{ |
| | | padding-top:30rpx; |
| | | width:534rpx; |
| | | height:600rpx; |
| | | background: #FFFFFF; |
| | | border-radius:22rpx; |
| | | // 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); |
| | | } |
| | | } |
| | | } |