@tplc/business 0.0.26 → 0.0.28

package/CHANGELOG.md

@@ -2,6 +2,62 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.28](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.1.13...v0.0.28) (2024-10-19)
+
+
+### ✨ Features | 新功能
+
+* a ([98179b6](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/98179b669c589bfa475f7ca2e28bd806e2710ea5))
+* cahec ([9d3fc53](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/9d3fc53421c46e9ffb4833ec5f300fdd2b4e9e7d))
+* city ([ae7f3d4](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/ae7f3d4a94dc7b83e4b9e74e8f692a052e0f0431))
+* city select ([c11e6a2](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/c11e6a2cf11bf47ebac66a083f8e8942add21105))
+* data数据 ([36f3e4b](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/36f3e4bcc1a70c81e588339b58c7e8a05199ed89))
+* icon ([c1cd815](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/c1cd81542df16f0f799f1217f0eefd33b84e18fb))
+* status 变更 ([c745aa7](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/c745aa77b4ce3d27f6b037cee7584e38e41db84a))
+* upload version ([e5b2bec](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/e5b2bec9e00beda4873a01b5ae41211b8e26a733))
+* 列表调整 ([3a4dc00](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/3a4dc00d55c74840e979545c5f2817953bfcddf8))
+* 历史 ([108d5e6](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/108d5e6a00deb0c21b25cef8441ea75058c77859))
+* 城市 ([0c9ea36](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/0c9ea36b11aed6c147b7a83ad933d224a53748c1))
+* 处理问题 ([832cd7b](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/832cd7beedd12b4d88af131e482b22ec3b9878bb))
+* 完成城市选择 ([7a6b8e6](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/7a6b8e698b001bb65bfc6fcdf6d22e0660753d82))
+* 支持search ([6303a47](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/6303a4771c03a051f1e188f30b6212fa9a50246b))
+* 支持token ([01e0594](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/01e059414d80d3f59baf12dd1461990a7e86d641))
+* 新增cell ([7d11105](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/7d1110518832ce6a32f418361b67fd24646b4805))
+* 新增history ([11d1ddb](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/11d1ddbdad4340bb2c2a5b996b182621d7016d0e))
+* 新增list ([4ee981e](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/4ee981ed2b1e870aafedbe7c6295a0c67960b3bf))
+* 更换字体 ([72b717e](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/72b717eab197eb6bf8a6e9e62b3410d42362b049))
+* 省市区选择器 ([d566a2a](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/d566a2ad24911f17da2ed85a547ca0ca0394705b))
+* 背景颜色调整 ([96a47ff](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/96a47fff5dd1e1a043cca4e7a3c0c129ff2190e9))
+* 调整icon ([a24baaa](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/a24baaa5ef466247d455303c7287e399f5695066))
+* 调整字体大小 ([3a8b1be](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/3a8b1be88b051b0bc5e35885b30786984919878f))
+* 过滤 ([e006ffb](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/e006ffb48240903af1ec860725e917f4906e97c4))
+* 过滤列表 ([405d86c](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/405d86cb3c0fe9dbed6cd4da7c04c6843e602269))
+* 选择城市 ([7eeb263](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/7eeb263982a70f7ca837144f4ae77b85d5c02e6e))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 修复slider 选择快捷没有变更值 ([c800d52](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/c800d524b5c6256add0620a21d3abe321a9342a6))
+* 修改选择地区定位错误问题 ([77586e6](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/77586e6253174ab92f61635c4eefdabf3d1fdce3))
+* 选择城市定位问题 ([0a1bc9e](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/0a1bc9e01ab353eab8d531f4ab6aacdcd12b302a))
+
+### [0.0.27](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.1.12...v0.0.27) (2024-10-10)
+
+
+### ✨ Features | 新功能
+
+* location ([bbb81cf](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/bbb81cf655d2b4d8ec7d70a7b7cf6fc46e8eb370))
+* search ([ab5bbe7](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/ab5bbe7eae9980295cd6b9948ff02b25ed115361))
+* updateVersion ([62d5c5e](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/62d5c5e485675414085fb9c153473dc1265f5760))
+* 完善过滤组件 ([1b3b69e](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/1b3b69ed67c8203c21b70c99816be9914e1cd025))
+* 新增title更多 ([2ab8a64](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/2ab8a64a63f768717dab13c921a8ff0262580176))
+* 新增城市选择 ([0c54f77](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/0c54f77c56721bb79222f5b6cd98bf3a40451900))
+* 日历 ([b3a6c8f](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/b3a6c8fe24dacdb007322d49e08696a6a26f1eaa))
+* 日历search ([c08044b](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/c08044bdc2e45923f63faa97ce1a8fc737c61c74))
+* 日历默认9个月 ([28638e7](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/28638e7bb6c16cf77357b167f2bdd104442f0600))
+* 更新地址 ([76998fd](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/76998fd84cacc3ec4c8abcb147a08509b1b3dbcb))
+* 调整类型 ([ea64183](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/ea64183b5421158c4580e2200d3abd52201dc728))
+
 ### [0.0.26](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.1.10...v0.0.26) (2024-09-27)
 
 

package/components/lcb-area-picker/api/index.ts

@@ -0,0 +1,45 @@
+// /api/provinces/provinceCityArea
+export interface ProvinceCityArea {
+  cityList: CityList[]
+  provinceId: string
+  provinceName: string
+}
+
+interface CityList {
+  areaList?: AreaList[]
+  cityId: string
+  cityName: string
+  provinceId: string
+}
+
+interface AreaList {
+  areaId: string
+  areaName: string
+  cityId: string
+}
+export interface AreaOptions {
+  label: string
+  value: string
+  children?: AreaOptions[]
+}
+export const getProvinceCityArea = async () => {
+  const { data } = await uni.$lcb.http.post<ProvinceCityArea[]>('/provinces/provinceCityArea')
+  return data.map(({ provinceId, provinceName, cityList }) => {
+    return {
+      label: provinceName,
+      value: provinceId,
+      children: cityList.map(({ cityId, cityName, areaList }) => {
+        return {
+          label: cityName,
+          value: cityId,
+          children: areaList?.map(({ areaId, areaName }) => {
+            return {
+              label: areaName,
+              value: areaId,
+            }
+          }),
+        }
+      }),
+    }
+  })
+}

package/components/lcb-area-picker/lcb-area-picker.vue

@@ -0,0 +1,77 @@
+<template>
+  <wd-col-picker
+    v-model="valueModel"
+    :columns="area"
+    :column-change="columnChange"
+    :use-default-slot="true"
+    @confirm="handleConfirm"
+  >
+    <slot :text="areaText" />
+  </wd-col-picker>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import { LcbAreaPickerProps } from './types'
+import { AreaOptions, getProvinceCityArea } from './api'
+import { ColPickerColumnChangeOption } from '@tplc/wot/types/components/wd-col-picker/types'
+defineOptions({
+  name: 'LcbAreaPicker',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+withDefaults(defineProps<LcbAreaPickerProps>(), {})
+const emits = defineEmits<{
+  (event: 'confirm', payload: AreaOptions[]): void
+}>()
+const valueModel = defineModel<string[]>({
+  default: [],
+})
+const area = ref<AreaOptions[][]>([])
+const areaText = ref<string[]>()
+const columnChange = ({ selectedItem, resolve, finish }: ColPickerColumnChangeOption) => {
+  if (selectedItem.children) {
+    resolve(selectedItem.children)
+  } else {
+    finish()
+  }
+}
+onMounted(async () => {
+  const data = await getProvinceCityArea()
+  area.value = [data]
+})
+const stopWatch = watch(
+  [valueModel, area],
+  ([value, areas]) => {
+    if (value.length !== 0 && areas.length !== 0) {
+      let list = [...areas]
+      areaText.value = value.reduce((acc, cur) => {
+        const item = list[0].find((item) => item.value === cur)
+        if (item) {
+          acc.push(item.label)
+          list = item.children ? [item.children] : []
+        }
+        return acc
+      }, [] as string[])
+      const cityItem = areas[0].find((item) => item.value === value[0])
+      const areaItem = cityItem?.children?.find((item) => item.value === value[1])
+      if (cityItem?.children && areaItem?.children)
+        area.value = [areas[0], cityItem.children, areaItem.children]
+      stopWatch()
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+function handleConfirm({ selectedItems }: { selectedItems: AreaOptions[] }) {
+  emits('confirm', selectedItems)
+  areaText.value = selectedItems.map((item) => item.label)
+}
+</script>
+
+<style lang="scss" scoped></style>

package/components/lcb-area-picker/types.ts

@@ -0,0 +1,3 @@
+export interface LcbAreaPickerProps {
+  // Define the component's prop types here
+}

package/components/lcb-banner-block/lcb-banner-block.vue

@@ -9,7 +9,7 @@
             <view class="text-#999 text-22rpx mt-2">{{ hint }}</view>
           </view>
         </view>
-        <wd-icon class-prefix="iconfont" name="a-xingzhuang97" size="24rpx" color="#666666" />
+        <wd-icon class-prefix="lcb" name="a-xingzhuang97" size="24rpx" color="#666666" />
       </view>
       <scroll-view scroll-x class="w-full whitespace-nowrap pb-24rpx">
         <lcb-action-view v-for="(item, index) in items" :key="index" v-bind="item.link">
@@ -39,7 +39,7 @@
       />
       <view class="p-24rpx text-30rpx text-#333 flex justify-between items-center">
         <view>{{ title }}</view>
-        <wd-icon class-prefix="iconfont" name="a-xingzhuang103" size="30rpx" color="#666" />
+        <wd-icon class-prefix="lcb" name="a-xingzhuang103" size="30rpx" color="#666" />
       </view>
     </view>
   </lcb-block>

package/components/lcb-calendar/api/index.ts

@@ -0,0 +1,17 @@
+export interface LcbHistoryResult {
+  date: string
+  topText: string
+  centerText: string
+  bottomText: string
+  dateName: string
+  price: number
+  status: number
+}
+
+export const queryHolidayInfoList = (data: {
+  startDate: string
+  endDate: string
+  /** 日历数据类型·住宿··hotel..门票·ticket */
+  businessType?: string
+  businessId?: string
+}) => uni.$lcb.http.post<LcbHistoryResult[]>('/holiday/queryHolidayInfoList', data)

package/components/lcb-calendar/lcb-calendar.vue

@@ -0,0 +1,116 @@
+<template>
+  <wd-calendar
+    v-model="value"
+    @confirm="handleConfirm"
+    type="daterange"
+    use-default-slot
+    allow-same-day
+    :formatter="formatter"
+    :min-date="minDate"
+    :max-date="maxDate"
+  >
+    <slot />
+  </wd-calendar>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@tplc/wot'
+import dayjs from 'dayjs/esm'
+import { ref } from 'vue'
+import { LcbHistoryResult, queryHolidayInfoList } from './api'
+const { translate } = useTranslate()
+
+defineOptions({
+  name: 'LcbCalendar',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const holidayInfo = ref<Record<string, LcbHistoryResult>>({})
+
+const props = defineProps({
+  customClass: {
+    type: String,
+    default: '',
+  },
+  minDate: {
+    type: Number,
+    default: dayjs().startOf('day').valueOf(),
+  },
+  maxDate: {
+    type: Number,
+    default: dayjs().add(9, 'month').startOf('day').valueOf(),
+  },
+  defaultValue: {
+    type: Array<number>,
+    /** 最近三个月 number[] */
+    default: () => [
+      dayjs().startOf('day').valueOf(),
+      dayjs().add(1, 'day').startOf('day').valueOf(),
+    ],
+  },
+})
+const value = ref(props.defaultValue)
+const model = defineModel<number[]>()
+const getDayInfo = async () => {
+  const { data } = await queryHolidayInfoList({
+    /** 本月的第一天 */
+    startDate: dayjs(props.minDate).startOf('month').format('YYYY-MM-DD HH:mm:ss'),
+    /** 第三个月最后一天 */
+    endDate: dayjs(props.maxDate).endOf('month').format('YYYY-MM-DD HH:mm:ss'),
+  })
+  holidayInfo.value = data.reduce(
+    (acc, cur) => {
+      acc[cur.date] = cur
+      return acc
+    },
+    {} as Record<string, LcbHistoryResult>,
+  )
+}
+getDayInfo()
+const formatter = (day: any) => {
+  const date = new Date(day.date)
+  const now = new Date()
+
+  const year = date.getFullYear()
+  const month = date.getMonth()
+  const da = date.getDate()
+  const nowYear = now.getFullYear()
+  const nowMonth = now.getMonth()
+  const nowDa = now.getDate()
+
+  const info = holidayInfo.value[dayjs(day.date).format('YYYY-MM-DD')]
+  if (info?.topText) {
+    day.topInfo = info.topText
+  }
+  if (info?.bottomText) {
+    day.bottomInfo = info.bottomText
+  }
+  if (info?.centerText) {
+    day.text = info.centerText
+  }
+  if (year === nowYear && month === nowMonth && da === nowDa) {
+    day.topInfo = translate('今天')
+  }
+
+  if (day.type === 'start') {
+    day.topInfo = translate('开始')
+  }
+
+  if (day.type === 'end') {
+    day.topInfo = translate('结束')
+  }
+
+  if (day.type === 'same') {
+    day.bottomInfo = translate('开始/结束')
+  }
+
+  return day
+}
+const handleConfirm = ({ value }: { value: number[] }) => {
+  model.value = value
+}
+</script>
+<style lang="scss" scoped></style>

package/components/lcb-calendar-search/lcb-calendar-search.vue

@@ -0,0 +1,72 @@
+<template>
+  <lcb-block v-bind="$props" customClass="flex items-center">
+    <view
+      class="flex flex-1 text-#333 rounded-16rpx bg-#F5F5F7 h-78rpx flex items-center px-3 text-[28rpx]"
+    >
+      <lcb-city-select :location="userLocation" v-model="addressCity">
+        <view class="font-bold max-w-13 truncate">{{ addressCity?.addr || '附近' }}</view>
+      </lcb-city-select>
+      <view class="v-line"></view>
+      <lcb-calendar v-model="dayRange">
+        <view class="flex items-center flex-col text-22rpx">
+          <view class="flex">
+            <view class="title">{{ dayjs(dayRange[0]).format('MM-DD') }}</view>
+            <view class="hint ml-2">{{ translate('入住') }}</view>
+          </view>
+          <view class="flex">
+            <view class="title">{{ dayjs(dayRange[1]).format('MM-DD') }}</view>
+            <view class="hint ml-2">{{ translate('离店') }}</view>
+          </view>
+        </view>
+      </lcb-calendar>
+
+      <view class="v-line"></view>
+      <view class="flex-1 flex items-center gap-2">
+        <wd-icon name="search" size="34rpx" color="#999999" />
+        <view class="text-#999999">{{ placeholder }}</view>
+      </view>
+    </view>
+    <wd-icon name="search" size="36rpx" color="#333" custom-class="ml-4" />
+  </lcb-block>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@tplc/wot'
+import dayjs from 'dayjs/esm'
+import useLocation from '../../hooks/useLocation'
+import { ref } from 'vue'
+import { LcbCalendarSearchProps } from './types'
+import { ChildHotAddress } from '../lcb-city-select/api'
+defineOptions({
+  name: 'LcbCalendarSearch',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+withDefaults(defineProps<LcbCalendarSearchProps>(), {
+  marginHorizontal: 24,
+  radius: 16,
+  placeholder: '城市|地点|品牌',
+})
+const addressCity = ref<ChildHotAddress>()
+
+const dayRange = ref([dayjs().valueOf(), dayjs().add(1, 'day').valueOf()])
+const { translate } = useTranslate()
+const { getLocation, userLocation } = useLocation()
+getLocation()
+</script>
+
+<style lang="scss" scoped>
+.v-line {
+  width: 1rpx;
+  height: 40rpx;
+  background: #999999;
+  opacity: 0.5;
+  margin: 0 20rpx;
+}
+.hint {
+  color: #999;
+}
+</style>

package/components/lcb-calendar-search/types.ts

@@ -0,0 +1,6 @@
+import { LcbBlockProps } from '../lcb-block/types'
+
+export interface LcbCalendarSearchProps extends LcbBlockProps {
+  // Define the component's prop types here
+  placeholder?: string
+}

package/components/lcb-city-select/api/index.ts

@@ -0,0 +1,34 @@
+export interface HotAddress {
+  categoryName: string
+  hint?: string
+  childHotAddress: ChildHotAddress[]
+}
+
+export interface ChildHotAddress {
+  addr: string
+  addrFlag: boolean
+  area: string
+  categoryName: string
+  createDate?: string
+  hotAddressId: string
+  lastModifyDate?: string
+  latitude?: string
+  longitude?: string
+  weightSort: string
+  addressInfo?: string
+}
+export const getHotAddress = () => uni.$lcb.http.post<HotAddress[]>('/hotAddress/categoryList', {})
+export interface LcbAddress {
+  addr: string
+  addrFlag: boolean
+  categoryName: string
+  cityId: string
+  hotAddressId: string
+  provinceCityName: string
+  area: string
+  weightSort: string
+}
+export const getAddressList = (addr: string) =>
+  uni.$lcb.http.post<LcbAddress[]>('/hotAddress/list', {
+    addr,
+  })

package/components/lcb-city-select/components/lcb-city-letter/index.vue

@@ -0,0 +1,171 @@
+<template>
+  <view class="h-0 flex-1 pb-3" v-if="letterList.length">
+    <wd-index-bar ref="indexBarRef">
+      <view v-for="item in indexBars" :key="item.categoryName">
+        <wd-index-anchor
+          :index="item.categoryName.slice(0, 2)"
+          icon="./images/anchor.png"
+          customClass="!bg-transparent !pt-32rpx !pb-0 font-bold !text-28rpx !pl-28rpx"
+        >
+          <view class="flex items-center">
+            <image
+              src="../../images/hot.png"
+              class="w-4 h-4 mr-1"
+              v-if="item.categoryName.includes('热门')"
+            />
+            <view class="text-3 text-#333 font-500">
+              {{ item.hint || item.categoryName }}
+            </view>
+          </view>
+        </wd-index-anchor>
+        <view
+          class="grid grid-cols-4 gap-3 pt-20rpx pl-28rpx pr-10 box-border"
+          :class="item.categoryName.includes('字母') ? 'grid-cols-8' : 'grid-cols-4'"
+        >
+          <view
+            class="address-tag"
+            :class="{
+              'current-address': modelValue && modelValue.hotAddressId === city.hotAddressId,
+            }"
+            v-for="city in item.childHotAddress"
+            :key="city.addr"
+            @click="onAddrClick(city, item.categoryName.includes('字母'))"
+            :style="{
+              fontSize: city.addr.length > 4 ? '20rpx' : '24rpx',
+            }"
+          >
+            {{ city.addr }}
+          </view>
+        </view>
+      </view>
+    </wd-index-bar>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { LcbCitySelectProps } from '../../../lcb-city-select/types'
+import { ChildHotAddress, getHotAddress, HotAddress } from '../../../lcb-city-select/api'
+import { computed, onMounted, ref, watch } from 'vue'
+
+defineOptions({
+  name: 'LcbCityLetter',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const props = withDefaults(defineProps<LcbCitySelectProps>(), {})
+const indexBarRef = ref<{ scrollToIndex: (index: string) => void }>()
+const addressRef = ref<HotAddress[]>([])
+const letterList = ref<string[]>([])
+const historyAddress = ref<ChildHotAddress[]>([])
+const modelValue = defineModel<ChildHotAddress>()
+onMounted(async () => {
+  const { data } = await getHotAddress()
+  letterList.value = data
+    .filter((v) => !v.categoryName.includes('热门'))
+    .map((item) => item.categoryName)
+  addressRef.value = data
+  historyAddress.value = JSON.parse(uni.getStorageSync('historyAddress') || '[]')
+})
+const locationAddress = computed<HotAddress[]>(() => {
+  return props.location
+    ? ([
+        {
+          categoryName: '定位',
+          hint: '当前位置',
+          childHotAddress: [
+            {
+              addressInfo: props.location.addressInfo,
+              addr: props.location.cityName,
+              hotAddressId: props.location.cityId,
+            },
+          ],
+        },
+      ] as HotAddress[])
+    : []
+})
+
+const historyList = computed<HotAddress[]>(() => {
+  return historyAddress.value.length
+    ? [
+        {
+          categoryName: '历史',
+          hint: '历史选择',
+          childHotAddress: historyAddress.value,
+        },
+      ]
+    : []
+})
+watch(
+  () => historyAddress.value,
+  (val) => {
+    if (val.length) {
+      uni.setStorageSync('historyAddress', JSON.stringify(val))
+    }
+  },
+)
+const onAddrClick = (city: ChildHotAddress, letter = false) => {
+  if (letter) {
+    indexBarRef.value?.scrollToIndex(city.addr)
+    return
+  }
+  modelValue.value = city
+  historyAddress.value = historyAddress.value.filter(
+    (item) => item.hotAddressId !== city.hotAddressId,
+  )
+  if (historyAddress.value.length === 8) {
+    historyAddress.value = [city, ...historyAddress.value.slice(0, 7)]
+  } else {
+    historyAddress.value = [city, ...historyAddress.value]
+  }
+}
+const indexBars = computed<HotAddress[]>(() => {
+  const letters = letterList.value.length
+    ? ([
+        {
+          categoryName: '字母索引',
+          childHotAddress: letterList.value.map((v) => {
+            return {
+              addr: v,
+              hotAddressId: v,
+            }
+          }),
+        },
+      ] as HotAddress[])
+    : ([] as HotAddress[])
+  return [...locationAddress.value, ...historyList.value, ...letters, ...addressRef.value]
+})
+</script>
+<style lang="scss" scoped>
+@import '@tplc/wot/components/common/abstracts/variable';
+.address-tag {
+  background: #f7f7f7;
+  height: 68rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 16rpx;
+  border-radius: 10rpx;
+  font-size: 24rpx;
+  text-align: center;
+  overflow: hidden;
+}
+.current-address {
+  color: $-color-theme;
+  background: transparent;
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    background: $-color-theme;
+    opacity: 0.1;
+  }
+}
+</style>