添加区域选择树形组件

Liuyi

2024-09-27 9ac5049e08ba842663761a432b41d36d3d1b2089

添加区域选择树形组件

 api/index.js

@@ -1,12 +1,16 @@
import { request } from "../util/request";

//登录
export function wxLoginApi(data){
    return request('/user/wxLogin',data,'POST')
}

//首页
export function getVipInfoApi(){
    return request('/waterCard/getUserCard',{},'GET')
}
export function getUserInfo(){
    return request('/user/loginUser',{},'GET')
}
//
export function getRegionApi(code){
    return request(`/sysRegion/getListChild?code=${code}`,{},'GET')
}

 main.js

@@ -1,10 +1,11 @@
import App from './App'
import navbar from './components/navbar/navbar.vue'
import DaTree from '@/components/da-tree/index.vue'
import { createSSRApp } from 'vue'

export function createApp() {
    const app = createSSRApp(App)
    app.component('navbar', navbar)
    app.component('navbar', navbar).component('DaTree', DaTree)
      return {
        app
      }

 pages.json

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

 pages/addressAdd/index.vue

@@ -1,5 +1,67 @@
<script setup>
    import{ref} from 'vue'
    import { onMounted, ref }  from 'vue';
    import { getRegionApi } from '../../api/index.js';
    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)
        })
    }
    const treeListData = ref([])
    function handleTreeChange(e,e2){
        regionName.value = e
        isExpandIcon.value = false
        console.log('change',e,e2)
    }
    //遍历树形数据，给展开子节点数据赋值
    function setTreeData(data,code,childData){
        let treeList = data
        treeList.forEach((item) =>{
            if(item.code === code){
                item.children = childData
            }else{
                if(item.children && item.children.length > 0){
                    setTreeData(item.children,code,childData);
                }
            }
        })
        return treeList
    }
    //展开节点，请求节点数据
    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) =>{
                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)
        }
    }
    const DaTreeRef = ref()
    const isDefault =ref(false)
    const form = ref({
        name:'',
@@ -10,103 +72,46 @@
    function submit(){
        
    }
    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)
    }
    function handleExpandChange(e){
        console.log(e)
    }
    const DaTreeRef = ref()
    onMounted(async() =>{
        await getRegion()
    })
</script>
<template>
    <view class="container">
        <navbar title ='新增地址'></navbar>
        <view class="content">
            <view class="main">
                <view>
                <view class="item">
                    <text>联系人</text>
                    <input v-model="form.name" placeholder="请输入联系人" />
                </view>
                <view>
                <view class="item">
                    <text>联系电话</text>
                    <input v-model="form.phpne" 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>
                        <text v-if="regionName" class="tree-placehoder">{{regionName}}</text>
                        <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"
                            :showRadioIcon='false'
                            @change="handleTreeChange"
                            @expand="handleExpandChange"></DaTree>
                    </view>
                </view>
                <view>
                <view class="item">
                    <text>送水地址</text>
                    <input v-model="form.address" placeholder="请输入详细地址" />
                </view>
            </view>
			
            <view class="default">
                <view>设为默认收货地址</view>
                <switch :checked = 'isDefault' color="#1890FF"/>
@@ -130,7 +135,7 @@
                width: 100%;
                height:565rpx;
                // background: #E8EFFF;
                view{
                .item{
                    width:100%;
                    height:93rpx;
                    display: flex;
@@ -149,18 +154,54 @@
                        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-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);
                    }
                }
            }

 static/images/address/expand-icon.png

 static/images/address/expand.png

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

@@ -9,6 +9,10 @@
function getUserInfo() {
  return util_request.request("/user/loginUser", {}, "GET");
}
function getRegionApi(code) {
  return util_request.request(`/sysRegion/getListChild?code=${code}`, {}, "GET");
}
exports.getRegionApi = getRegionApi;
exports.getUserInfo = getUserInfo;
exports.getVipInfoApi = getVipInfoApi;
exports.wxLoginApi = wxLoginApi;

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

@@ -3,6 +3,7 @@
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";
@@ -10,6 +11,8 @@
  "./pages/sendWater/index.js";
  "./pages/preSendWater/index.js";
  "./pages/address/index.js";
  "./pages/addressEdit/index.js";
  "./pages/addressLocate/index.js";
}
const _sfc_main = {
  __name: "App",
@@ -41,9 +44,10 @@
  }
};
const navbar = () => "./components/navbar/navbar.js";
const DaTree = () => "./components/da-tree/index.js";
function createApp() {
  const app = common_vendor.createSSRApp(_sfc_main);
  app.component("navbar", navbar);
  app.component("navbar", navbar).component("DaTree", DaTree);
  return {
    app
  };

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

@@ -1,17 +1,21 @@
{
  "pages": [
    "pages/addressAdd/index",
    "pages/index/index",
    "pages/addCard/index",
    "pages/balanceRecord/index",
    "pages/recharge/index",
    "pages/sendWater/index",
    "pages/preSendWater/index",
    "pages/address/index"
    "pages/address/index",
    "pages/addressEdit/index",
    "pages/addressLocate/index"
  ],
  "window": {
    "navigationStyle": "custom"
  },
  "usingComponents": {
    "navbar": "/components/navbar/navbar"
    "navbar": "/components/navbar/navbar",
    "da-tree": "/components/da-tree/index"
  }
}

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

@@ -1,3 +1 @@

    /*每个页面公共css */
page{--status-bar-height:25px;--top-window-height:0px;--window-top:0px;--window-bottom:0px;--window-left:0px;--window-right:0px;--window-magin:0px}[data-c-h="true"]{display: none !important;}

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

@@ -1,6 +1,7 @@
"use strict";
const _imports_0$2 = "/static/images/index/code1.png";
const _imports_1 = "/static/images/index/vip-add.png";
const _imports_0$4 = "/static/images/address/expand.png";
const _imports_0$3 = "/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";
const _imports_4 = "/static/images/index/home21.png";
@@ -9,12 +10,17 @@
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$1 = "/static/images/addCard/code.png";
const _imports_0$2 = "/static/images/addCard/code.png";
const _imports_0$1 = "/static/images/address/edit.png";
const _imports_1 = "/static/images/address/delete.png";
const _imports_0 = "/static/images/addCard/back.png";
exports._imports_0 = _imports_0;
exports._imports_0$1 = _imports_0$2;
exports._imports_0$2 = _imports_0$1;
exports._imports_1 = _imports_1;
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_1 = _imports_1$1;
exports._imports_1$1 = _imports_1;
exports._imports_2 = _imports_2;
exports._imports_3 = _imports_3;
exports._imports_4 = _imports_4;

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

@@ -92,8 +92,8 @@
  });
};
const looseToNumber = (val) => {
  const n = parseFloat(val);
  return isNaN(n) ? val : n;
  const n2 = parseFloat(val);
  return isNaN(n2) ? val : n2;
};
let _globalThis;
const getGlobalThis = () => {
@@ -128,6 +128,26 @@
    }
  });
  return ret;
}
function normalizeClass(value) {
  let res = "";
  if (isString(value)) {
    res = value;
  } else if (isArray(value)) {
    for (let i = 0; i < value.length; i++) {
      const normalized = normalizeClass(value[i]);
      if (normalized) {
        res += normalized + " ";
      }
    }
  } else if (isObject(value)) {
    for (const name in value) {
      if (value[name]) {
        res += name + " ";
      }
    }
  }
  return res.trim();
}
const toDisplayString = (val) => {
  return isString(val) ? val : val == null ? "" : isArray(val) || isObject(val) && (val.toString === objectToString || !isFunction(val.toString)) ? JSON.stringify(val, replacer, 2) : String(val);
@@ -990,7 +1010,7 @@
  }
  if (!isArray(name))
    name = [name];
  name.forEach((n) => emitter.off(n, callback));
  name.forEach((n2) => emitter.off(n2, callback));
}, OffProtocol);
const $emit = defineSyncApi(API_EMIT, (name, ...args) => {
  emitter.emit(name, ...args);
@@ -1277,8 +1297,8 @@
    appVersion: "1.0.0",
    appVersionCode: "100",
    appLanguage: getAppLanguage(hostLanguage),
    uniCompileVersion: "4.24",
    uniRuntimeVersion: "4.24",
    uniCompileVersion: "4.28",
    uniRuntimeVersion: "4.28",
    uniPlatform: "mp-weixin",
    deviceBrand,
    deviceModel: model,
@@ -4214,6 +4234,15 @@
    warn$1(`inject() can only be used inside setup() or functional components.`);
  }
}
/*! #__NO_SIDE_EFFECTS__ */
// @__NO_SIDE_EFFECTS__
function defineComponent(options, extraOptions) {
  return isFunction(options) ? (
    // #8326: extend call and options.name access are considered side-effects
    // by Rollup, so we have to wrap it in a pure-annotated IIFE.
    /* @__PURE__ */ (() => extend({ name: options.name }, extraOptions, { setup: options }))()
  ) : options;
}
const isKeepAlive = (vnode) => vnode.type.__isKeepAlive;
function onActivated(hook, target) {
  registerKeepAliveHook(hook, "a", target);
@@ -6790,12 +6819,18 @@
  }
  return ret;
}
function setRef(ref2, id, opts = {}) {
  const { $templateRefs } = getCurrentInstance();
  $templateRefs.push({ i: id, r: ref2, k: opts.k, f: opts.f });
}
const o = (value, key) => vOn(value, key);
const f = (source, renderItem) => vFor(source, renderItem);
const s = (value) => stringifyStyle(value);
const e = (target, ...sources) => extend(target, ...sources);
const n = (value) => normalizeClass(value);
const t = (val) => toDisplayString(val);
const p = (props) => renderProps(props);
const sr = (ref2, id, opts) => setRef(ref2, id, opts);
function createApp$1(rootComponent, rootProps = null) {
  rootComponent && (rootComponent.mpType = "app");
  return createVueApp(rootComponent, rootProps).use(plugin);
@@ -7633,19 +7668,26 @@
const onShow = /* @__PURE__ */ createHook(ON_SHOW);
const onHide = /* @__PURE__ */ createHook(ON_HIDE);
const onLaunch = /* @__PURE__ */ createHook(ON_LAUNCH);
const onLoad = /* @__PURE__ */ createHook(ON_LOAD);
exports._export_sfc = _export_sfc;
exports.createSSRApp = createSSRApp;
exports.defineComponent = defineComponent;
exports.e = e;
exports.f = f;
exports.index = index;
exports.n = n;
exports.o = o;
exports.onHide = onHide;
exports.onLaunch = onLaunch;
exports.onLoad = onLoad;
exports.onMounted = onMounted;
exports.onShow = onShow;
exports.p = p;
exports.ref = ref;
exports.resolveComponent = resolveComponent;
exports.s = s;
exports.sr = sr;
exports.t = t;
exports.unref = unref;
exports.watch = watch;
exports.wx$1 = wx$1;

 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$2,
        d: common_assets._imports_0$3,
        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,6 @@
"use strict";
const common_vendor = require("../../common/vendor.js");
const _sfc_main = {};
const common_assets = require("../../common/assets.js");
if (!Array) {
  const _easycom_navbar2 = common_vendor.resolveComponent("navbar");
  _easycom_navbar2();
@@ -9,12 +9,44 @@
if (!Math) {
  _easycom_navbar();
}
function _sfc_render(_ctx, _cache) {
  return {
    a: common_vendor.p({
      title: "地址管理"
    })
  };
}
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
wx.createPage(MiniProgramPage);
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: "" }
    ]);
    function navTo() {
      common_vendor.index.navigateTo({
        url: "/pages/addressAdd/index"
      });
    }
    return (_ctx, _cache) => {
      return {
        a: common_vendor.p({
          title: "地址管理"
        }),
        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),
            d: item.id,
            e: item.checked
          };
        }),
        c: common_assets._imports_0$4,
        d: common_assets._imports_1$1,
        e: common_vendor.o(($event) => navTo())
      };
    };
  }
};
wx.createPage(_sfc_main);

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

@@ -1 +1 @@
<view class="container"><navbar wx:if="{{a}}" u-i="696da406-0" bind:__l="__l" u-p="{{a}}"></navbar><view class="content"><view class="main"></view></view></view>
<view class="container"><navbar wx:if="{{a}}" u-i="696da406-0" bind:__l="__l" u-p="{{a}}"></navbar><view class="content"><view class="main"><block wx:for="{{b}}" wx:for-item="item"><view class="address-item"><view class="user-info"><text>{{item.a}}</text><text>{{item.b}}</text></view><view class="address-info">{{item.c}}</view><view class="address-divide"></view><view class="handel"><view class="handel-left"><radio color="#4996E3" value="{{item.d}}" checked="{{item.e}}"></radio><text>设为默认</text></view><view class="handel-right"><view><image src="{{c}}" alt=""></image><text>编辑</text></view><view><image src="{{d}}" alt=""></image><text>删除</text></view></view></view></view></block></view><view class="subBtn" bindtap="{{e}}">新增收货地址</view></view></view>

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

@@ -29,13 +29,100 @@
}
.container .content {
  width: 100%;
  height: calc(100vh - 176rpx);
  height: calc(100vh - 176rpx - 20rpx);
  background: linear-gradient(to top, #FFFFFF, #E8EFFF);
  padding-top: 20rpx;
}
.container .content .main {
  width: 686rpx;
  height: 1262rpx;
  background: #ffaaff;
  height: 1162rpx;
  margin: 0 auto;
  overflow-y: scroll;
}
.container .content .main .address-item {
  width: 100%;
  height: 254rpx;
  padding: 20rpx 0 26rpx;
  box-sizing: border-box;
  margin-bottom: 20rpx;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.container .content .main .address-item .user-info {
  width: 100%;
  padding: 0 65rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  font-weight: 300;
  font-size: 32rpx;
  color: #000000;
}
.container .content .main .address-item .address-info {
  padding: 0 65rpx;
  box-sizing: border-box;
  font-weight: 300;
  font-size: 28rpx;
  color: #646464;
}
.container .content .main .address-item .address-divide {
  width: 100%;
  height: 1rpx;
  border-bottom: 2rpx dashed #D5DDE0;
}
.container .content .main .address-item .handel {
  width: 100%;
  padding: 0 65rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.container .content .main .address-item .handel .handel-left radio {
  color: #000000;
}
.container .content .main .address-item .handel .handel-left text {
  font-weight: 300;
  font-size: 32rpx;
  color: #0088FF;
  line-height: 28rpx;
}
.container .content .main .address-item .handel .handel-right {
  width: 35%;
  height: 48rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container .content .main .address-item .handel .handel-right view {
  display: flex;
  align-items: center;
}
.container .content .main .address-item .handel .handel-right view image {
  width: 28rpx;
  height: 28rpx;
  margin-right: 10rpx;
}
.container .content .main .address-item .handel .handel-right view text {
  font-weight: 300;
  font-size: 24rpx;
  color: #373737;
}
.container .content .subBtn {
  width: 686rpx;
  height: 98rpx;
  padding: 0 26rpx;
  box-sizing: border-box;
  background-color: #5EA1FA;
  border-radius: 50rpx;
  font-weight: 300;
  font-size: 36rpx;
  color: #FFFFFF;
  line-height: 98rpx;
  text-align: center;
  letter-spacing: 2rpx;
  margin: 100rpx auto 0;
}

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

@@ -48,7 +48,7 @@
      return common_vendor.e({
        a: isVip.value
      }, isVip.value ? {
        b: common_assets._imports_0$1
        b: common_assets._imports_0$2
      } : {
        c: common_assets._imports_1,
        d: common_vendor.o(($event) => navTo("/pages/addCard/index"))