126 lines
4.2 KiB
Vue
126 lines
4.2 KiB
Vue
<route lang="jsonc" type="page">
|
|
{
|
|
"needLogin": true,
|
|
"layout": "default",
|
|
"style": {
|
|
"navigationStyle": "custom"
|
|
}
|
|
}
|
|
</route>
|
|
|
|
<template>
|
|
<view class="">
|
|
<view>
|
|
<navbar title="门店列表" custom-class='!bg-[#fff]' :leftArrow="false"></navbar>
|
|
</view>
|
|
|
|
<view class="search-box relative">
|
|
<wd-search placeholder="门店名称" cancel-txt="搜索" placeholder-left hide-cancel custom-input-class="!h-72rpx" v-model="storeName" >
|
|
</wd-search>
|
|
<view
|
|
class="absolute top-1/2 -translate-y-1/2 right-34rpx w-142rpx h-64rpx leading-64rpx text-center rounded-32rpx bg-#4C9F44 text-#fff font-400 text-32rpx"
|
|
@click="Store.handleSearch">
|
|
搜索
|
|
</view>
|
|
</view>
|
|
|
|
<view class="mt-40rpx">
|
|
<mescroll-body @init="mescrollInit" @down="downCallback" @up="Store.upCallback" :up="upOption">
|
|
<view class="mx-56rpx" v-for="(item, index) in list" :key="index" @click="Store.handleChooseStore(item)">
|
|
<view class="flex items-center justify-between mb-66rpx">
|
|
<view class="mr-32rpx">
|
|
<wd-img width="80rpx" height='80rpx' :src="`${OSS}icon/icon_location3.png`"></wd-img>
|
|
</view>
|
|
<view class="flex-1">
|
|
<view>{{ item.name }}</view>
|
|
<view class="text-28rpx leading-40rpx text-[#909399] flex items-center mt-10rpx">
|
|
<view class="w-136rpx line-1">距您{{item.distance}}km</view>
|
|
<view>
|
|
<wd-divider vertical />
|
|
</view>
|
|
<view class="w-300rpx line-1">{{ item.address }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</mescroll-body>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
|
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
|
import type { ITeaHouseListResult } from '@/api/types/tea'
|
|
import { router } from '@/utils/tools'
|
|
import { getHomeTeaStoreList } from '@/api/tea-room'
|
|
|
|
const OSS = inject('OSS')
|
|
|
|
// 来自哪个页面
|
|
const from = ref<string>('')
|
|
|
|
// 门店列表
|
|
const list = ref<Array<any>>([]) // 茶艺师列表
|
|
|
|
// 分页相关
|
|
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
|
const storeName = ref<string>('') // 搜索的门店名称
|
|
const upOption = {
|
|
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
|
|
}
|
|
|
|
onLoad((args) => {
|
|
if (args.from) {
|
|
from.value = args.from as string
|
|
}
|
|
})
|
|
|
|
onUnload(() => {
|
|
uni.$off('refreshAddressList')
|
|
})
|
|
|
|
const Store = {
|
|
// 搜索
|
|
handleSearch: () => {
|
|
list.value = []
|
|
getMescroll().resetUpScroll()
|
|
},
|
|
|
|
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
|
|
upCallback: (mescroll) => {
|
|
const filter = {
|
|
page: mescroll.num,
|
|
size: mescroll.size,
|
|
latitude: uni.getStorageSync('latitude') || import.meta.env.VITE_DEFAULT_LATITUDE,
|
|
longitude: uni.getStorageSync('longitude') || import.meta.env.VITE_DEFAULT_LONGITUDE,
|
|
search: storeName.value
|
|
}
|
|
|
|
getHomeTeaStoreList(filter).then((res: ITeaHouseListResult) => {
|
|
const curPageData = res.list || [] // 当前页数据
|
|
if(mescroll.num == 1) list.value = [] // 第一页需手动制空列表
|
|
list.value = list.value.concat(curPageData) //追加新数据
|
|
mescroll.endSuccess(curPageData.length, Boolean(res.more))
|
|
}).catch(() => {
|
|
mescroll.endErr() // 请求失败, 结束加载
|
|
})
|
|
},
|
|
|
|
// 选择门店
|
|
handleChooseStore: (item: ITeaHouseListResult) => {
|
|
if (from.value === 'reserve') {
|
|
uni.$emit('chooseTeaHouse', item)
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #fff;
|
|
}
|
|
</style>
|