调通地址管理及新增接口，调整树形区域组件

Liuyi

2024-09-28 77c2bdd45ca70e57667b346585edc5034cbd821e

调通地址管理及新增接口，调整树形区域组件

 api/index.js

@@ -10,7 +10,16 @@
export function getUserInfo(){
    return request('/user/loginUser',{},'GET')
}
//
//省市区域
export function getRegionApi(code){
    return request(`/sysRegion/getListChild?code=${code}`,{},'GET')
}
//创建用户档案、送水地址
export function creatUserArchive(data){
    return request('/userArchives/realName',data,'POST')
}
//查询送水地址列表
export function searchAddress(data){
    return request('/userAddress/search',data,'POST')
}


 pages.json

@@ -1,12 +1,6 @@
{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path" : "pages/addressAdd/index",
            "style": {
                "navigationStyle":"custom"
            }
        },
        {
            "path": "pages/index/index",
            "style": {
                "navigationStyle":"custom"
@@ -54,17 +48,23 @@
                "navigationStyle":"custom"
            }
        },
        // {
        //     "path" : "pages/addressAdd/index",
        //     "style": {
        //         "navigationStyle":"custom"
        //     }
        // },
        {
            "path" : "pages/addressAdd/index",
            "style": {
                "navigationStyle":"custom"
            }
        },
        {
            "path" : "pages/addressLocate/index",
            "style": {
                "navigationStyle":"custom"
            }
        },
        {
            "path" : "pages/success/index",
            "style": {
                "navigationStyle":"custom"
            }
        }
    ],
    "globalStyle": {

 pages/address/index.vue

@@ -1,16 +1,24 @@
<script setup>
    import { ref ,onMounted } from 'vue'
    const addressList = ref([
        {name:'张大左',phone:'13512334002',address:'重庆 重庆市 北碚区 互联网产业生态园 2-5-1',checked:true,id:'12'},
        {name:'张大左',phone:'13512334002',address:'重庆 重庆市 北碚区 互联网产业生态园 2-5-1',checked:true,id:'12'},
        {name:'张大左',phone:'13512334002',address:'重庆 重庆市 北碚区 互联网产业生态园 2-5-1',checked:true,id:'12'},
        {name:'张大左',phone:'13512334002',address:'重庆 重庆市 北碚区 互联网产业生态园 2-5-1',checked:true,id:'12'},
        {name:'张大左',phone:'13512334002',address:'重庆 重庆市 北碚区 互联网产业生态园 2-5-1',checked:true,id:'12'},
        {name:'张大左',phone:'13512334002',address:'重庆 重庆市 北碚区 互联网产业生态园 2-5-1',checked:true,id:'12'},
        {name:'',phone:'',address:'',checked:false,id:''},
        {name:'',phone:'',address:'',checked:false,id:''},
        {name:'',phone:'',address:'',checked:false,id:''},
    ])
    import { searchAddress } from '../../api/index.js';
    const addressList = ref([])
    async function getAddressList(){
        await searchAddress({limit:100,page:1}).then((res) =>{
            if(res.code == 200){
                res.data.list.forEach((item) =>{
                     res.data.list.forEach((item) =>{
                         if(item.isDefault == 1){
                             item.isDefault = true
                         }else{
                             item.isDefault = false
                         }
                        item.addressWhole = item.regionName.replace(/[,#]/g,' ') + item.address
                     })
                })
                addressList.value = res.data.list
            }
        })
    }
    function navTo(){
        let title = '新增地址'
        let id = 0
@@ -18,6 +26,9 @@
            url:'/pages/addressAdd/index'
        })
    }
    onMounted(()=>{
        getAddressList()
    })
</script>
<template>
    <view class="container">
@@ -27,14 +38,14 @@
                <block v-for="(item,index) in addressList">
                    <view class="address-item">
                        <view class="user-info">
                            <text>{{item.name}}</text>
                            <text>{{item.phone}}</text>
                            <text>{{item.userName}}</text>
                            <text>{{item.userPhone}}</text>
                        </view>
                        <view class="address-info">{{item.address}}</view>
                        <view class="address-info">{{item.addressWhole}}</view>
                        <view class="address-divide"></view>
                        <view class="handel">
                            <view class="handel-left">
                                 <radio color = "#4996E3" :value="item.id" :checked="item.checked"></radio>
                                 <radio color = "#4996E3" :value="item.id" :checked="item.isDefault"></radio>
                                <text>设为默认</text>
                            </view>
                            <view class="handel-right">

 pages/addressAdd/index.vue

@@ -1,8 +1,12 @@
<script setup>
    import { onMounted, ref }  from 'vue';
    import { getRegionApi } from '../../api/index.js';
    import { getRegionApi,creatUserArchive } from '../../api/index.js';
	
    const DaTreeRef = ref()
    const treeListData = ref([])
    const selectRegionName = ref()
    const isExpandIcon = ref(false)
    const regionName = ref('上海市')
    const regionName = ref('')
    function expandRegion(){
        if(isExpandIcon.value){
            isExpandIcon.value = false
@@ -22,21 +26,43 @@
            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)
        })
        selectRegionName.value = nameList
        regionName.value = selectRegionName.value.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 +71,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,16 +86,34 @@
            DaTreeRef.value.setExpandedKeys([item.key],true)
        }
    }
    const DaTreeRef = ref()
    const isDefault =ref(false)
    const isCheckedDefault =ref(false)
    const form = ref({
        name:'',
        phone:'',
        region:'',
        address:'',
        userName:'',
        userPhone:'',
        listRegion:[],
        userAddress:'',
        isDefault:null,
    })
    function submit(){
		
    //提交表单数据
    async function submit(){
        console.log('form',form.value)
        await creatUserArchive(form.value).then((res) =>{
            if(res.code == 200){
                uni.showToast({
                    title: '新增成功',
                    image: '../../static/images/other/success.svg',
                    duration:500     
                })
                setTimeout(() =>{
                    uni.navigateBack()
                    form.value = {}
                },500)
            }
        })
    }
    function change(e){
        console.log('e',e)
        form.value.isDefault = e.detail.value ? 1 : null
    }
    onMounted(async() =>{
        await getRegion()
@@ -83,24 +126,24 @@
            <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 +151,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 +213,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;

 pages/index/index.vue

@@ -20,7 +20,7 @@
        if(res.data.userInfo.waterCardNumber){
            let res1 = await getVipInfoApi()
            vipInfo.value = res1.data
            isVip.value = true
            isVip.value = false
        }else{
            isVip.value = false
        }

 pages/success/index.vue

对比新文件
@@ -0,0 +1,104 @@
<script  setup>
    import { ref } from 'vue'
    import { onShow } from '@dcloudio/uni-app';

    const title = ref(1) 
    const back = () => {
        uni.navigateBack()
    }
    const toIndex = () => {
        uni.navigateTo({
            url:"/pages/index/index"
        })
    }
    // const toRecord = () => {
    //     uni.navigateTo({
    //         url:"/pages/function/paymentRecord/index"
    //     })
    // }

</script>
<template>
    <view :class="title == 1?'contbox':'contbox2'">
        <navbar title ='新增地址'></navbar>
        <view class="main-box">
            <view class="success-img">
                <img src="../../static/images/other/success.svg" alt=""/>
            </view>
            <view class="txt1">缴费成功</view>
            <view class="txt2">
                缴费成功，您可去
                <text class="txt-hl" @click="toRecord()">缴费记录</text>
                中查看充值详情
            </view>
            <view class="button-box">
                <button class="button1" @click="back()">继续缴费</button>
                <button class="button2" @click="toIndex()">返回首页</button>
            </view>
        </view>
    </view>
</template>


<style lang="scss" scoped>
    .h-cl-777 {
        color: #777777;
    }
    .contbox {
        width: 750rpx;
        height: 1624rpx;
        // background: linear-gradient(1deg, #FFFFFF 0%, #E8F9FF 100%);
        margin: 0 auto;
        box-sizing: border-box;
    }
    .contbox2 {
        width: 750rpx;
        height: 1624rpx;
        // background: linear-gradient(1deg, #FFFFFF 0%, #F5F5F5 100%);
        margin: 0 auto;
        box-sizing: border-box;
    }
    .main-box {
        text-align: center;
    }
    .success-img {
        width: 150rpx;
        margin: 130rpx auto 20rpx;
        img {
            width: 100%;
        }
    }
    .txt1 {
        font-size: 36rpx;
        margin-bottom: 20rpx;
    }
    .txt2 {
        font-size: 28rpx;
    }
    .txt-hl {
        color: #5CBCE6;
        margin: 0 5rpx;
        text-decoration: underline;
    }
    .button-box {
        display: flex;
        justify-content: center;
        margin-top: 130rpx;
        button {
            width: 300rpx;
            height: 85rpx;
            line-height: 85rpx;
            margin: 10rpx;
        }
        .button1 {
            background-color: #5CBCE6;
            color: #ffffff;
        }
        .button2 {
            background-color: #ffffff;
            color: #5CBCE6;
            border: 1px solid #5CBCE6;
        }
    }
	
</style>

 static/images/other/success.svg

对比新文件
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1717572565890" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6375" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M510.645654 959.349561c-247.25636 0-447.691345-200.446241-447.691345-447.700555 0-247.24715 200.436008-447.692369 447.691345-447.692369 247.25636 0 447.693392 200.445218 447.693392 447.692369C958.339046 758.90332 757.902014 959.349561 510.645654 959.349561zM784.191774 354.236883l-14.387685-14.387685c-7.949043-7.949043-20.826328-7.949043-28.77537 0L442.600909 632.086006 333.044724 517.430686c-3.597945-3.596921-12.958126-0.060375-20.908192 7.888667l-14.387685 14.389732c-7.949043 7.949043-11.465123 17.309224-7.869225 20.895913L436.064029 713.574948c3.576455 3.597945 12.936637 0.049119 20.886703-7.888667l14.368242-14.388708c2.542916-2.523473 4.411473-5.136997 5.960759-7.710612l306.913065-300.56345C792.142863 375.083677 792.142863 362.185926 784.191774 354.236883z" fill="#5CBCE6" p-id="6376"></path></svg>

 unpackage/dist/dev/mp-weixin/api/index.js

@@ -12,7 +12,15 @@
function getRegionApi(code) {
  return util_request.request(`/sysRegion/getListChild?code=${code}`, {}, "GET");
}
function creatUserArchive(data) {
  return util_request.request("/userArchives/realName", data, "POST");
}
function searchAddress(data) {
  return util_request.request("/userAddress/search", data, "POST");
}
exports.creatUserArchive = creatUserArchive;
exports.getRegionApi = getRegionApi;
exports.getUserInfo = getUserInfo;
exports.getVipInfoApi = getVipInfoApi;
exports.searchAddress = searchAddress;
exports.wxLoginApi = wxLoginApi;

 unpackage/dist/dev/mp-weixin/app.js

@@ -3,7 +3,6 @@
const common_vendor = require("./common/vendor.js");
const api_index = require("./api/index.js");
if (!Math) {
  "./pages/addressAdd/index.js";
  "./pages/index/index.js";
  "./pages/addCard/index.js";
  "./pages/balanceRecord/index.js";
@@ -12,7 +11,9 @@
  "./pages/preSendWater/index.js";
  "./pages/address/index.js";
  "./pages/addressEdit/index.js";
  "./pages/addressAdd/index.js";
  "./pages/addressLocate/index.js";
  "./pages/success/index.js";
}
const _sfc_main = {
  __name: "App",

 unpackage/dist/dev/mp-weixin/app.json

@@ -1,6 +1,5 @@
{
  "pages": [
    "pages/addressAdd/index",
    "pages/index/index",
    "pages/addCard/index",
    "pages/balanceRecord/index",
@@ -9,7 +8,9 @@
    "pages/preSendWater/index",
    "pages/address/index",
    "pages/addressEdit/index",
    "pages/addressLocate/index"
    "pages/addressAdd/index",
    "pages/addressLocate/index",
    "pages/success/index"
  ],
  "window": {
    "navigationStyle": "custom"

 unpackage/dist/dev/mp-weixin/common/assets.js

@@ -1,6 +1,5 @@
"use strict";
const _imports_0$4 = "/static/images/address/expand.png";
const _imports_0$3 = "/static/images/index/code1.png";
const _imports_0$5 = "/static/images/index/code1.png";
const _imports_1$1 = "/static/images/index/vip-add.png";
const _imports_2 = "/static/images/index/hend1.png";
const _imports_3 = "/static/images/index/back.png";
@@ -10,15 +9,18 @@
const _imports_7 = "/static/images/index/icon51.png";
const _imports_8 = "/static/images/index/more-info5.png";
const _imports_9 = "/static/images/index/notice5.png";
const _imports_0$2 = "/static/images/addCard/code.png";
const _imports_0$1 = "/static/images/address/edit.png";
const _imports_0$4 = "/static/images/addCard/code.png";
const _imports_0$3 = "/static/images/address/edit.png";
const _imports_1 = "/static/images/address/delete.png";
const _imports_0$2 = "/static/images/address/expand.png";
const _imports_0$1 = "/static/images/other/success.svg";
const _imports_0 = "/static/images/addCard/back.png";
exports._imports_0 = _imports_0;
exports._imports_0$1 = _imports_0$4;
exports._imports_0$2 = _imports_0$3;
exports._imports_0$3 = _imports_0$2;
exports._imports_0$4 = _imports_0$1;
exports._imports_0$1 = _imports_0$5;
exports._imports_0$2 = _imports_0$4;
exports._imports_0$3 = _imports_0$3;
exports._imports_0$4 = _imports_0$2;
exports._imports_0$5 = _imports_0$1;
exports._imports_1 = _imports_1$1;
exports._imports_1$1 = _imports_1;
exports._imports_2 = _imports_2;

 unpackage/dist/dev/mp-weixin/pages/addCard/index.js

@@ -31,7 +31,7 @@
        }),
        b: form.value.waterCardNumber,
        c: common_vendor.o(($event) => form.value.waterCardNumber = $event.detail.value),
        d: common_assets._imports_0$3,
        d: common_assets._imports_0$2,
        e: form.value.waterCardNumber,
        f: common_vendor.o(($event) => form.value.waterCardNumber = $event.detail.value),
        g: form.value.waterCardNumber,

 unpackage/dist/dev/mp-weixin/pages/address/index.js

@@ -1,6 +1,7 @@
"use strict";
const common_vendor = require("../../common/vendor.js");
const common_assets = require("../../common/assets.js");
const api_index = require("../../api/index.js");
if (!Array) {
  const _easycom_navbar2 = common_vendor.resolveComponent("navbar");
  _easycom_navbar2();
@@ -12,22 +13,32 @@
const _sfc_main = {
  __name: "index",
  setup(__props) {
    const addressList = common_vendor.ref([
      { name: "张大左", phone: "13512334002", address: "重庆 重庆市 北碚区 互联网产业生态园 2-5-1", checked: true, id: "12" },
      { name: "张大左", phone: "13512334002", address: "重庆 重庆市 北碚区 互联网产业生态园 2-5-1", checked: true, id: "12" },
      { name: "张大左", phone: "13512334002", address: "重庆 重庆市 北碚区 互联网产业生态园 2-5-1", checked: true, id: "12" },
      { name: "张大左", phone: "13512334002", address: "重庆 重庆市 北碚区 互联网产业生态园 2-5-1", checked: true, id: "12" },
      { name: "张大左", phone: "13512334002", address: "重庆 重庆市 北碚区 互联网产业生态园 2-5-1", checked: true, id: "12" },
      { name: "张大左", phone: "13512334002", address: "重庆 重庆市 北碚区 互联网产业生态园 2-5-1", checked: true, id: "12" },
      { name: "", phone: "", address: "", checked: false, id: "" },
      { name: "", phone: "", address: "", checked: false, id: "" },
      { name: "", phone: "", address: "", checked: false, id: "" }
    ]);
    const addressList = common_vendor.ref([]);
    async function getAddressList() {
      await api_index.searchAddress({ limit: 100, page: 1 }).then((res) => {
        if (res.code == 200) {
          res.data.list.forEach((item) => {
            res.data.list.forEach((item2) => {
              if (item2.isDefault == 1) {
                item2.isDefault = true;
              } else {
                item2.isDefault = false;
              }
              item2.addressWhole = item2.regionName.replace(/[,#]/g, " ") + item2.address;
            });
          });
          addressList.value = res.data.list;
        }
      });
    }
    function navTo() {
      common_vendor.index.navigateTo({
        url: "/pages/addressAdd/index"
      });
    }
    common_vendor.onMounted(() => {
      getAddressList();
    });
    return (_ctx, _cache) => {
      return {
        a: common_vendor.p({
@@ -35,14 +46,14 @@
        }),
        b: common_vendor.f(addressList.value, (item, index, i0) => {
          return {
            a: common_vendor.t(item.name),
            b: common_vendor.t(item.phone),
            c: common_vendor.t(item.address),
            a: common_vendor.t(item.userName),
            b: common_vendor.t(item.userPhone),
            c: common_vendor.t(item.addressWhole),
            d: item.id,
            e: item.checked
            e: item.isDefault
          };
        }),
        c: common_assets._imports_0$4,
        c: common_assets._imports_0$3,
        d: common_assets._imports_1$1,
        e: common_vendor.o(($event) => navTo())
      };

 unpackage/dist/dev/mp-weixin/pages/index/index.js

@@ -18,7 +18,7 @@
      if (res.data.userInfo.waterCardNumber) {
        let res1 = await api_index.getVipInfoApi();
        vipInfo.value = res1.data;
        isVip.value = true;
        isVip.value = false;
      } else {
        isVip.value = false;
      }
@@ -48,7 +48,7 @@
      return common_vendor.e({
        a: isVip.value
      }, isVip.value ? {
        b: common_assets._imports_0$2
        b: common_assets._imports_0$1
      } : {
        c: common_assets._imports_1,
        d: common_vendor.o(($event) => navTo("/pages/addCard/index"))