444 lines
12 KiB
Vue
444 lines
12 KiB
Vue
<script setup lang="ts">
|
||
import type { ScrollViewOnScrollEvent } from '@uni-helper/uni-app-types'
|
||
import { computed, defineComponent, reactive, ref, watch } from 'vue'
|
||
import { CHANGE_EVENT, CLOSE_EVENT, PREFIX, SELECTED_EVENT, UPDATE_MODEL_EVENT, UPDATE_VISIBLE_EVENT } from '../_constants'
|
||
import { getMainClass } from '../_utils'
|
||
import requestAniFrame from '../_utils/raf'
|
||
import { useTranslate } from '../../locale'
|
||
import NutElevator from '../elevator/elevator.vue'
|
||
import NutIcon from '../icon/icon.vue'
|
||
import NutPopup from '../popup/popup.vue'
|
||
import { addressEmits, addressProps } from './address'
|
||
import type { AddressExistRegionData, AddressRegionData, CustomRegionData } from './type'
|
||
|
||
const props = defineProps(addressProps)
|
||
const emit = defineEmits(addressEmits)
|
||
|
||
const classes = computed(() => {
|
||
return getMainClass(props, componentName)
|
||
})
|
||
|
||
const showPopup = ref(props.visible)
|
||
const privateType = ref(props.type)
|
||
const tabIndex = ref(0)
|
||
const prevTabIndex = ref(0)
|
||
const tabName = ref(['province', 'city', 'country', 'town'])
|
||
const scrollDis = ref([0, 0, 0, 0])
|
||
const scrollTop = ref(0)
|
||
const regionData = reactive<Array<AddressRegionData[]>>([])
|
||
|
||
const regionList = computed(() => {
|
||
switch (tabIndex.value) {
|
||
case 0:
|
||
return props.province
|
||
case 1:
|
||
return props.city
|
||
case 2:
|
||
return props.country
|
||
default:
|
||
return props.town
|
||
}
|
||
})
|
||
|
||
function transformData(data: AddressRegionData[]) {
|
||
if (!Array.isArray(data))
|
||
throw new TypeError('params muse be array.')
|
||
|
||
if (!data.length)
|
||
return []
|
||
|
||
data.forEach((item: AddressRegionData) => {
|
||
if (!item.title)
|
||
console.warn('[NutUI] <Address> 请检查数组选项的 title 值是否有设置 ,title 为必填项 .')
|
||
})
|
||
|
||
const newData: CustomRegionData[] = []
|
||
|
||
data = data.sort((a: AddressRegionData, b: AddressRegionData) => {
|
||
return a.title.localeCompare(b.title)
|
||
})
|
||
|
||
data.forEach((item: AddressRegionData) => {
|
||
const index = newData.findIndex((value: CustomRegionData) => value.title === item.title)
|
||
if (index <= -1) {
|
||
newData.push({
|
||
title: item.title,
|
||
list: ([] as any).concat(item),
|
||
})
|
||
}
|
||
else {
|
||
newData[index].list.push(item)
|
||
}
|
||
})
|
||
|
||
return newData
|
||
}
|
||
|
||
const selectedRegion = ref<AddressRegionData[]>([])
|
||
|
||
let selectedExistAddress = reactive({}) // 当前选择的地址
|
||
|
||
const closeWay = ref<'self' | 'mask' | 'cross'>('self')
|
||
|
||
// 设置选中省市县
|
||
function initCustomSelected() {
|
||
regionData[0] = props.province || []
|
||
regionData[1] = props.city || []
|
||
regionData[2] = props.country || []
|
||
regionData[3] = props.town || []
|
||
|
||
const defaultValue = props.modelValue
|
||
const num = defaultValue.length
|
||
if (num > 0) {
|
||
tabIndex.value = num - 1
|
||
if (regionList.value.length === 0) {
|
||
tabIndex.value = 0
|
||
return
|
||
}
|
||
for (let index = 0; index < num; index++) {
|
||
const arr: AddressRegionData[] = regionData[index]
|
||
selectedRegion.value[index] = arr.filter((item: AddressRegionData) => item.id === defaultValue[index])[0]
|
||
}
|
||
scrollTo()
|
||
}
|
||
}
|
||
|
||
function getTabName(item: AddressRegionData | null, index: number) {
|
||
if (item && item.name)
|
||
return item.name
|
||
if (tabIndex.value < index && item)
|
||
return item.name
|
||
|
||
else
|
||
return props.columnsPlaceholder[index] || translate('select')
|
||
}
|
||
|
||
// 手动关闭 点击叉号(cross)，或者蒙层(mask)
|
||
function handClose(type = 'self') {
|
||
closeWay.value = type === 'cross' ? 'cross' : 'self'
|
||
|
||
showPopup.value = false
|
||
}
|
||
|
||
// 点击遮罩层关闭
|
||
function clickOverlay() {
|
||
closeWay.value = 'mask'
|
||
}
|
||
|
||
// 切换下一级列表
|
||
function nextAreaList(item: AddressRegionData) {
|
||
const tab = tabIndex.value
|
||
prevTabIndex.value = tabIndex.value
|
||
const callBackParams: {
|
||
next?: string
|
||
value?: AddressRegionData
|
||
custom: string
|
||
} = {
|
||
custom: tabName.value[tab],
|
||
}
|
||
|
||
selectedRegion.value[tab] = item
|
||
|
||
// 删除右边已选择数据
|
||
selectedRegion.value.splice(tab + 1, selectedRegion.value.length - (tab + 1))
|
||
|
||
callBackParams.value = item
|
||
|
||
if (regionData[tab + 1]?.length > 0) {
|
||
tabIndex.value = tab + 1
|
||
|
||
callBackParams.next = tabName.value[tabIndex.value]
|
||
|
||
scrollToTop()
|
||
}
|
||
else {
|
||
handClose()
|
||
emit(UPDATE_MODEL_EVENT)
|
||
}
|
||
emit(CHANGE_EVENT, callBackParams)
|
||
}
|
||
// 切换地区Tab
|
||
function changeRegionTab(item: AddressRegionData, index: number) {
|
||
prevTabIndex.value = tabIndex.value
|
||
if (getTabName(item, index)) {
|
||
tabIndex.value = index
|
||
scrollTo()
|
||
}
|
||
}
|
||
|
||
function scrollChange(e: ScrollViewOnScrollEvent) {
|
||
scrollDis.value[tabIndex.value] = e.detail.scrollTop
|
||
}
|
||
|
||
function scrollToTop() {
|
||
// scrollTop 不会实时变更。当再次赋值时，scrollTop无变化时，不会触发滚动
|
||
scrollTop.value += 1
|
||
requestAniFrame(() => {
|
||
setTimeout(() => {
|
||
// 直接设置为0无效
|
||
scrollTop.value = 0.01
|
||
}, 100)
|
||
})
|
||
}
|
||
|
||
function scrollTo() {
|
||
// scrollTop 不会实时变更。当再次赋值时，scrollTop无变化时，不会触发滚动
|
||
scrollTop.value += 1
|
||
requestAniFrame(() => {
|
||
setTimeout(() => {
|
||
scrollTop.value = scrollDis.value[tabIndex.value]
|
||
}, 10)
|
||
})
|
||
}
|
||
|
||
// 选择现有地址
|
||
function selectedExist(item: AddressExistRegionData) {
|
||
const copyExistAdd = props.existAddress
|
||
let prevExistAdd: AddressExistRegionData = {} as AddressExistRegionData
|
||
|
||
copyExistAdd.forEach((list: AddressExistRegionData) => {
|
||
if (list && list.selectedAddress)
|
||
prevExistAdd = list
|
||
list.selectedAddress = false
|
||
})
|
||
|
||
item.selectedAddress = true
|
||
|
||
selectedExistAddress = item
|
||
|
||
emit(SELECTED_EVENT, prevExistAdd, item, copyExistAdd)
|
||
|
||
handClose()
|
||
}
|
||
// 初始化
|
||
function initAddress() {
|
||
selectedRegion.value = []
|
||
tabIndex.value = 0
|
||
scrollTo()
|
||
}
|
||
|
||
// 关闭
|
||
function close() {
|
||
const data = {
|
||
addressIdStr: '',
|
||
addressStr: '',
|
||
province: selectedRegion.value[0],
|
||
city: selectedRegion.value[1],
|
||
country: selectedRegion.value[2],
|
||
town: selectedRegion.value[3],
|
||
}
|
||
|
||
const callBackParams = {
|
||
data: {},
|
||
type: privateType.value,
|
||
}
|
||
|
||
if (['custom', 'custom2'].includes(privateType.value)) {
|
||
[0, 1, 2, 3].forEach((i) => {
|
||
const item = selectedRegion.value[i]
|
||
data.addressIdStr += `${i ? '_' : ''}${(item && item.id) || 0}`
|
||
data.addressStr += (item && item.name) || ''
|
||
})
|
||
|
||
callBackParams.data = data
|
||
}
|
||
else {
|
||
callBackParams.data = selectedExistAddress
|
||
}
|
||
|
||
initAddress()
|
||
|
||
if (closeWay.value === 'self')
|
||
emit(CLOSE_EVENT, callBackParams)
|
||
else
|
||
emit('closeMask', { closeWay: closeWay.value })
|
||
|
||
emit(UPDATE_VISIBLE_EVENT, false)
|
||
}
|
||
|
||
// 选择其他地址
|
||
function switchModule() {
|
||
const type = privateType.value
|
||
privateType.value = type === 'exist' ? 'custom' : 'exist'
|
||
initAddress()
|
||
emit('switchModule', { type: privateType.value })
|
||
}
|
||
|
||
function handleElevatorItem(key: string, item: AddressRegionData) {
|
||
nextAreaList(item)
|
||
}
|
||
|
||
watch(
|
||
() => props.visible,
|
||
(value) => {
|
||
showPopup.value = value
|
||
},
|
||
)
|
||
|
||
watch(
|
||
() => showPopup.value,
|
||
(value) => {
|
||
if (value)
|
||
initCustomSelected()
|
||
},
|
||
)
|
||
</script>
|
||
|
||
<script lang="ts">
|
||
const componentName = `${PREFIX}-address`
|
||
const { translate } = useTranslate(componentName)
|
||
|
||
export default defineComponent({
|
||
name: componentName,
|
||
options: {
|
||
virtualHost: true,
|
||
addGlobalClass: true,
|
||
styleIsolation: 'shared',
|
||
},
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<NutPopup
|
||
v-model:visible="showPopup"
|
||
:z-index="zIndex"
|
||
position="bottom"
|
||
:lock-scroll="lockScroll"
|
||
:round="round"
|
||
@close="close"
|
||
@click-overlay="clickOverlay"
|
||
@open="closeWay = 'self'"
|
||
>
|
||
<view :class="classes" :style="customStyle">
|
||
<view class="nut-address__header">
|
||
<view class="nut-address__header-back" @click="switchModule">
|
||
<slot v-if="type === 'exist' && privateType === 'custom'" name="backIcon">
|
||
<NutIcon name="left" size="14px" />
|
||
</slot>
|
||
</view>
|
||
|
||
<view class="nut-address__header__title">
|
||
{{
|
||
privateType === 'custom'
|
||
? customAddressTitle || translate('selectRegion')
|
||
: existAddressTitle || translate('deliveryTo')
|
||
}}
|
||
</view>
|
||
|
||
<view class="nut-address__header-close" @click="handClose('cross')">
|
||
<slot name="closeIcon">
|
||
<NutIcon name="close" custom-color="#cccccc" size="14px" />
|
||
</slot>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 请选择 -->
|
||
<view v-if="['custom', 'custom2'].includes(privateType)" class="nut-address__custom">
|
||
<view class="nut-address__region">
|
||
<view
|
||
v-for="(item, index) in selectedRegion"
|
||
:key="index"
|
||
class="nut-address__region-item "
|
||
:class="[index === tabIndex ? 'active' : '']"
|
||
@click="changeRegionTab(item, index)"
|
||
>
|
||
<view>{{ getTabName(item, index) }} </view>
|
||
<view class="nut-address__region-line--mini" :class="{ active: index === tabIndex }" />
|
||
</view>
|
||
<view v-if="tabIndex === selectedRegion.length" class="active nut-address__region-item">
|
||
<view>{{ getTabName(null, selectedRegion.length) }} </view>
|
||
<view class="nut-address__region-line--mini active" />
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="privateType === 'custom'" class="nut-address__detail">
|
||
<div class="nut-address__detail-list">
|
||
<scroll-view
|
||
:scroll-y="true"
|
||
:style="{ height: '100%' }"
|
||
:scroll-top="scrollTop"
|
||
@scroll="scrollChange"
|
||
>
|
||
<div
|
||
v-for="(item, index) in regionList"
|
||
:key="index"
|
||
class="nut-address__detail-item"
|
||
:class="[selectedRegion[tabIndex]?.id === item.id ? 'active' : '']"
|
||
@click="nextAreaList(item)"
|
||
>
|
||
<view>
|
||
<slot v-if="selectedRegion[tabIndex]?.id === item.id" name="icon">
|
||
<NutIcon name="Check" custom-class="nut-address-select-icon" width="13px" />
|
||
</slot>{{ item.name }}
|
||
</view>
|
||
</div>
|
||
</scroll-view>
|
||
</div>
|
||
</view>
|
||
|
||
<view v-else class="nut-address__elevator-group">
|
||
<NutElevator
|
||
:height="height"
|
||
:index-list="transformData(regionList)"
|
||
@click-item="handleElevatorItem"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 配送至 -->
|
||
<view v-else-if="privateType === 'exist'" class="nut-address__exist">
|
||
<div class="nut-address__exist-group">
|
||
<ul class="nut-address__exist-group-list">
|
||
<li
|
||
v-for="(item, index) in existAddress"
|
||
:key="index"
|
||
class="nut-address__exist-group-item"
|
||
:class="[item.selectedAddress ? 'active' : '']"
|
||
@click="selectedExist(item)"
|
||
>
|
||
<slot v-if="!item.selectedAddress" name="unselectedIcon">
|
||
<NutIcon name="location2" custom-class="nut-address-select-icon" width="13px" />
|
||
</slot>
|
||
|
||
<slot v-if="item.selectedAddress" name="icon">
|
||
<NutIcon name="Check" custom-class="nut-address-select-icon" width="13px" />
|
||
</slot>
|
||
|
||
<div class="nut-address__exist-item-info">
|
||
<div v-if="item.name && item.phone" class="nut-address__exist-item-info-top">
|
||
<div class="nut-address__exist-item-info-name">
|
||
{{ item.name }}
|
||
</div>
|
||
<div class="nut-address__exist-item-info-phone">
|
||
{{ item.phone }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nut-address__exist-item-info-bottom">
|
||
<view>
|
||
{{ item.provinceName + item.cityName + item.countyName + item.townName + item.addressDetail }}
|
||
</view>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div v-if="isShowCustomAddress" class="nut-address__exist-choose" @click="switchModule">
|
||
<div class="nut-address__exist-choose-btn">
|
||
{{
|
||
customAndExistTitle || translate('chooseAnotherAddress')
|
||
}}
|
||
</div>
|
||
</div>
|
||
<template v-if="!isShowCustomAddress">
|
||
<slot name="bottom" />
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</NutPopup>
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
@import './index';
|
||
</style>
|