Appearance
地址筛选 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级) | Number | 4 |
api | 请求接口地址 | Function | -- |
params | 请求接口参数 | Object | -- |
isMaskClick | 蒙版点击是否关闭弹窗 | Boolean | true |
closePosition | 蒙版关闭按钮位置(left/right) | String | left |
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 | 关闭弹窗 | -- |