From 9a139cc25da8396c1b257ccf99eb8d2fedfbc94d Mon Sep 17 00:00:00 2001
From: Liuyi <candymxq888@outlook.com>
Date: 星期三, 23 十月 2024 17:24:35 +0800
Subject: [PATCH] 添加校验，修改头像
---
pages/addressAdd/index.vue | 157 ++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 127 insertions(+), 30 deletions(-)
diff --git a/pages/addressAdd/index.vue b/pages/addressAdd/index.vue
index 28591f9..3276ff9 100644
--- a/pages/addressAdd/index.vue
+++ b/pages/addressAdd/index.vue
@@ -1,8 +1,87 @@
<script setup>
- import { onMounted, ref } from 'vue';
- import { getRegionApi } from '../../api/index.js';
+ 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('上海市')
+ const regionName = ref('')
+ //展开关闭选择框
function expandRegion(){
if(isExpandIcon.value){
isExpandIcon.value = false
@@ -22,21 +101,42 @@
console.log(res)
})
}
- const treeListData = ref([])
+ //设置选中区域名
+ 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){
- regionName.value = e
isExpandIcon.value = false
- console.log('change',e,e2)
+ 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,code,childData){
+ function setTreeData(data,id,childData){
let treeList = data
treeList.forEach((item) =>{
- if(item.code === code){
+ if(item.id === id){
item.children = childData
}else{
if(item.children && item.children.length > 0){
- setTreeData(item.children,code,childData);
+ setTreeData(item.children,id,childData);
}
}
})
@@ -45,11 +145,10 @@
//展开节点，请求节点数据
async function handleExpandChange(isExpand,item){
if(item.children[0].key != undefined){
- console.log('1',isExpand,item,item.children[0].key)
}else{
let treeList = treeListData.value
let childData = []
- await getRegionApi(item.key).then((res) =>{
+ await getRegionApi(item.originItem.code).then((res) =>{
res.data.forEach((item)=>{
if((item.children == null) && item.level!=4){
item.children = [{}]
@@ -61,46 +160,36 @@
DaTreeRef.value.setExpandedKeys([item.key],true)
}
}
- const DaTreeRef = ref()
- const isDefault =ref(false)
- const form = ref({
- name:'',
- phone:'',
- region:'',
- address:'',
- })
- function submit(){
-
- }
+
onMounted(async() =>{
await getRegion()
})
</script>
<template>
<view class="container">
- <navbar title ='新增地址'></navbar>
+ <navbar :title ='pageTitle'></navbar>
<view class="content">
<view class="main">
<view class="item">
<text>联系人</text>
- <input v-model="form.name" placeholder="请输入联系人" />
+ <input v-model="form.userName" placeholder="请输入联系人" />
</view>
<view class="item">
<text>联系电话</text>
- <input v-model="form.phpne" placeholder="请输入联系电话" />
+ <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>
- <text v-if="regionName" class="tree-placehoder">{{regionName}}</text>
+ <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="code"
+ valueField="id"
:showRadioIcon='false'
@change="handleTreeChange"
@expand="handleExpandChange"></DaTree>
@@ -108,13 +197,13 @@
</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>
@@ -170,6 +259,14 @@
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;
--
Gitblit v1.9.3