Skip to content
On this page

地址筛选 address

常用用法

html
<template>
  <button @click="openAddress">点击打开</button>
  {{ addressList }}
  <view>
    <pl-uni-address
      ref="fxAddressRef"
      v-model:value="addressList"
      :api="getArea"
      :params="{ level: 1 }"
      @change="addressChange"
    ></pl-uni-address>
  </view>
</template>

<script lang="ts" setup>
import { toast } from '@/utils/methods'
const addressList = ref<string[] | number[]>([])
const fxAddressRef = ref()
const getArea = (params) => {
  return new Promise((resolve, reject) => {
    const baseURL = 'https://markettest.gree.com/api/upms-manager-test'
    uni.request({
      url:
        baseURL +
        (params.code ? '/upms/v1/address/getAddressByCode' : '/upms/v1/address/getAddressByLevel'),
      data: params.code ? { code: params.code } : params,
      method: 'GET',
      success: (res) => {
        // 请根据实际情况调整
        if (res.statusCode === 200) {
          const { code, data } = res.data as any
          if (!code) {
            resolve(data)
          } else if (code === 1000 || code === 200) {
            resolve(data)
          }
        }
      },
      fail: (error) => {
        if (error.errMsg.includes('timeout')) {
          toast('请求超时')
        } else {
          toast('请求失败')
        }
        reject(new Error('error'))
      }
    })
  })
}
const openAddress = () => {
  fxAddressRef.value.open()
}
const addressChange = (e) => {
  console.log('change', e)
}
</script>

<style lang="scss" scoped></style>

API

参数说明类型默认值
v-model:value地址code码数组Array[]
fieldName字段对应内容名称Object{ code: 'code', name: 'name', disable: 'disable' }
level显示几级地址(1-4级)Number4
api请求接口地址Function--
params请求接口参数Object--
isMaskClick蒙版点击是否关闭弹窗Booleantrue
closePosition蒙版关闭按钮位置(left/right)Stringleft
primaryColor主题颜色String

事件

事件名称说明回调参数
change选择完成后的回调(只有在最后一级点击结束后回调)(newAddress) => void
nodeClick点击任何一级完成回调(newAddress) => void
popupOpened弹窗打开回调事件() => void
popupClosed弹窗关闭回调事件() => void
error失败回调事件(若初始化value含有地址code码,组件会对code码解析,弹窗进而回显地址,但code可能会有错误情况,该事件将错误信息返回)(errCode) => void (备注:返回值 省错误:3000,市错误:3001, 区错误:3002,街道:3003)

方法 ref内部事件(使用通过ref获取内部事件)

事件名称说明回调参数
open打开弹窗--
close关闭弹窗--

Released under the MIT License.