250 lines
9.1 KiB
Vue
250 lines
9.1 KiB
Vue
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
|
||
<route lang="jsonc" type="home">{
|
||
"layout": "tabbar",
|
||
"style": {
|
||
// 'custom' 表示开启自定义导航栏，默认 'default'
|
||
"navigationStyle": "custom",
|
||
"navigationBarTitleText": "首页"
|
||
}
|
||
}</route>
|
||
|
||
<template>
|
||
<view class="home-bg">
|
||
<view class="home-bg w-[100vw] fixed top-0 left-0 z-100">
|
||
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
|
||
<template #left>
|
||
<view class="flex items-center line-1 w-130rpx" @click="home.toCity">
|
||
<view class="mr-10rpx font-400 leading-44rpx text-32rpx pl-10rpx line-1">上海市</view>
|
||
<wd-img width="14rpx" height="9rpx" :src="`${OSS}icon/icon_arrow_down.png`" />
|
||
</view>
|
||
</template>
|
||
<template #title>
|
||
<view class="search-box flex items-center ml-26rpx" @click="home.toSearch">
|
||
<wd-search placeholder="搜索茶址名称" hide-cancel disabled :placeholder-left="true"
|
||
placeholderStyle="text-align:left;padding-left: 24rpx;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;">
|
||
</wd-search>
|
||
</view>
|
||
</template>
|
||
</wd-navbar>
|
||
</view>
|
||
|
||
<view :style="{ paddingTop: navbarHeight + 'px' }">
|
||
<view class="mt-32rpx mx-30rpx">
|
||
<wd-swiper value-key="image" height="240rpx" indicatorPosition="bottom-left"
|
||
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
|
||
@click="home.handleClick" @change="home.onChange" mode="aspectFit"></wd-swiper>
|
||
</view>
|
||
|
||
<view class="mt-40rpx flex items-center h-36rpx mx-30rpx">
|
||
<wd-img width="160rpx" height="36rpx" :src="`${OSS}images/home_image1.png`" mode="aspectFit" />
|
||
<text class="text-22rpx leading-32rpx text-[#818CA9] ml-36rpx">更多茶艺师点击预约</text>
|
||
</view>
|
||
|
||
<view class="mt-16rpx relative w-690rpx h-180rpx mx-30rpx">
|
||
<wd-img width="690rpx" height="180rpx" :src="`${OSS}images/home_image2.png`" mode="scaleToFill" />
|
||
<view class="h-64rpx absolute bottom-0 right-0 bg-[#4C9F44] text-[#fff] flex items-center px-26rpx rounded">
|
||
<text class="mr-8rpx">一键约</text>
|
||
<wd-img width="22rpx" height="18.06rpx" :src="`${OSS}icon/icon_arrow_right.png`" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="relative mt-40rpx h-44rpx mx-30rpx">
|
||
<view class="absolute ele-center" >
|
||
<wd-img width="252.04rpx" height="24.43rpx" :src="`${OSS}images/home_image3.png`" mode="aspectFit" />
|
||
</view>
|
||
<view class="text-32rpx text[#303133] font-500 absolute top-0 ele-center">预约茶室</view>
|
||
</view>
|
||
|
||
<view>
|
||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="home.upCallback" :up="home.upOption" top="28rpx"
|
||
:fixed="true">
|
||
<view class="relative p-20rp mb-24rpx" v-for="(item, index) in 100" :key="index" @click="home.handleToReserveRoom(item)">
|
||
<view class="absolute top--28rpx left-0 z-1">
|
||
<wd-img width="110rpx" height="110rpx" :src="`${OSS}images/home_image4.png`"/>
|
||
</view>
|
||
|
||
<view class="mx-30rpx p-30rpx flex bg-white rounded-10rpx">
|
||
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home_image5.png`" radius="10rpx" />
|
||
<view class="flex-1 ml-28rpx flex justify-between line-1 items-start relative">
|
||
<view class="line-1">
|
||
<view class="font-bold text-30rpx leading-42rpx line-1">
|
||
凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业</view>
|
||
<view class="flex items-center mt-12rpx leading-34rpx">
|
||
<view class="font-400 text-[#F29747] text-24rpx mr-18rpx">半年预约300+</view>
|
||
<view class="font-400 bg-[#F3F3F3] text-[#818CA9] text-22rpx px-8rpx rounded-4rpx">刚有人预约了</view>
|
||
</view>
|
||
<view class="flex items-center mt-12rpx leading-34rpx">
|
||
<view class="font-400 text-[#606266] text-24rpx mr-10rpx">
|
||
营业时间:00:00-23:59
|
||
</view>
|
||
<view class="font-400 bg-[#FFEEED] text-[#FF5951] text-22rpx px-4rpx rounded-4rpx border-[#F2E2E1]">
|
||
打烊了
|
||
</view>
|
||
</view>
|
||
<view class="flex items-center mt-20rpx">
|
||
<wd-img width="26rpx" height="26rpx" :src="`${OSS}icon/icon_location.png`"
|
||
mode="aspectFit" />
|
||
<view class="ml-4rpx line-1 font-400 text-22rpx text-[#606266] leading-32rpx">
|
||
青浦区仓路478号
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="absolute bottom-0 right-0">
|
||
<view class="flex justify-end">
|
||
<view class="bg-[#4C9F44] w-72rpx h-40rpx rounded-18rpx flex items-center justify-center">
|
||
<wd-icon name="add" color="#fff" size="20rpx" custom-style="font-weight: bold;" />
|
||
</view>
|
||
</view>
|
||
<view class="text-24rpx text-[#92928C] font-400 mt-12rpx">距您14km</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</mescroll-body>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, inject } from 'vue'
|
||
import { getNavBarHeight } from '@/utils/index'
|
||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
|
||
|
||
let navbarHeight = ref<number>(0)
|
||
let OSS = inject('OSS')
|
||
let swiperList = ref<Object>([
|
||
{ id: 1, image: `${OSS}images/banner1.png` },
|
||
{ id: 2, image: `${OSS}images/banner1.png` },
|
||
{ id: 3, image: `${OSS}images/banner1.png` }
|
||
])
|
||
const current = ref<number>(0)
|
||
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||
|
||
onLoad(() => {
|
||
navbarHeight.value = getNavBarHeight()
|
||
})
|
||
|
||
const home = {
|
||
upOption: {
|
||
// page: {
|
||
// num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
|
||
// size: 10 // 每页数据的数量
|
||
// },
|
||
noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
|
||
empty: {
|
||
tip: '~ 搜索无数据 ~', // 提示
|
||
btnText: '去看看'
|
||
}
|
||
},
|
||
|
||
toCity: () => {
|
||
uni.navigateTo({
|
||
url: '/pages/city/city'
|
||
})
|
||
},
|
||
|
||
toSearch: () => {
|
||
uni.navigateTo({
|
||
url: '/pages/search/search'
|
||
})
|
||
},
|
||
|
||
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
|
||
upCallback: (mescroll) => {
|
||
// 需要留一下数据为空的时候显示的空数据图标内容
|
||
|
||
// apiGoods(mescroll.num, mescroll.size).then(res=>{
|
||
// const curPageData = res.list || [] // 当前页数据
|
||
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
|
||
// goods.value = goods.value.concat(curPageData); //追加新数据
|
||
// //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
|
||
// //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
|
||
|
||
// //方法一(推荐): 后台接口有返回列表的总页数 totalPage
|
||
// //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
|
||
|
||
// //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
|
||
// //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
|
||
|
||
// //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
|
||
// //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
|
||
|
||
// //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
|
||
// mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
|
||
// }).catch(()=>{
|
||
mescroll.endErr(); // 请求失败, 结束加载
|
||
// })
|
||
},
|
||
|
||
handleClick: (item: any) => {
|
||
// 处理点击事件
|
||
console.log('Clicked item:', item)
|
||
},
|
||
|
||
onChange: (e: any) => {
|
||
// 设置 current.value 为当前轮播索引
|
||
current.value = e.current
|
||
},
|
||
|
||
handleToReserveRoom: (id: number = 1) => {
|
||
// 跳转到预约茶室页面
|
||
uni.navigateTo({
|
||
url: `/pages-sub/reserve-room/reserve-room?id=${id}`
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: $cz-page-background;
|
||
}
|
||
|
||
.home-bg {
|
||
background-color: $cz-page-background;
|
||
background-image: url(#{$OSS}images/home_bg.png);
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.search-box {
|
||
display: flex;
|
||
height: 100%;
|
||
margin-right: 40px;
|
||
--wot-search-padding: 0;
|
||
--wot-search-side-padding: 0;
|
||
|
||
:deep() {
|
||
.wd-search {
|
||
background: transparent !important;
|
||
width: 100% !important;
|
||
}
|
||
|
||
.wd-search__block {
|
||
background-color: #fff !important;
|
||
}
|
||
|
||
.wd-search__input {
|
||
// #ifdef MP
|
||
padding-left: 32px !important;
|
||
padding-right: 32px !important;
|
||
// #endif
|
||
|
||
// #ifndef MP
|
||
padding-right: 0 !important;
|
||
// #endif
|
||
}
|
||
}
|
||
}
|
||
|
||
.rounded {
|
||
border-radius: 20rpx 0rpx 20rpx 0rpx;
|
||
}
|
||
|
||
.ele-center {
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
</style> |