wangxiaowei/chazhi_h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善H5的页面

Browse Source
This commit is contained in:
wangxiaowei
2025-09-26 17:04:39 +08:00
parent e9519b32db
commit bdfa0a90f4
58 changed files with 22564 additions and 605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

286
src/pages/index/index.vue
View File

@ -10,94 +10,131 @@
<template>
<view class="home-bg">
<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
<view class="home-bg sticky top-0 left-0 z-50 pb-16rpx">
<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 class="flex items-center">
<view class="text-36rpx leading-50rpx text-#303133 mr-38rpx">
预约茶艺师
</view>
<view class="flex items-center line-1" @click="Home.toCity">
<view class="">
<wd-icon name="location" size="32rpx"></wd-icon>
</view>
<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>
</view>
</template>
</wd-navbar>
<view class="search-box relative">
<wd-search placeholder="茶艺师名称" cancel-txt="搜索" placeholder-left hide-cancel custom-input-class="!h-72rpx">
</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">
搜索
</view>
</view>
<view class="mx-30rpx flex items-center">
<view class="flex items-center mr-14rpx">
<wd-img width="160rpx" height="36rpx" :src="`${OSS}images/h5/home/home_image1.png`" />
</view>
<view class="flex items-center mr-14rpx">
<view class="flex items-center">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_safe2.png`" />
</view>
<view class="font-400 text-22rpx leading-32rpx text-#818CA9">专业资质</view>
</view>
<view class="flex items-center">
<view class="flex items-center">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_safe2.png`" />
</view>
<view class="font-400 text-22rpx leading-32rpx text-#818CA9">定制方案</view>
</view>
</view>
</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/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/home_image2.png`" mode="scaleToFill" />
<view>
<view class="mt-16rpx relative w-690rpx h-260rpx mx-30rpx">
<wd-img width="690rpx" height="260rpx" :src="`${OSS}images/h5/home/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="relative mt-44rpx h-44rpx mx-30rpx">
<view class="absolute ele-center" >
<wd-img width="252.04rpx" height="24.43rpx" :src="`${OSS}images/home/home_image3.png`" mode="aspectFit" />
</view>
<view class="text-32rpx text[#303133] font-500 absolute top-0 ele-center">预约茶室</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" 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/home_image4.png`"/>
</view>
<!-- 茶艺师等级筛选 -->
<view class="flex items-center text-#303133 overflow-x-auto whitespace-nowrap ml-30rpx my-30rpx tea-level-scrollbar">
<view
class="h-64rpx rounded-12rpx px-24rpx py-12rpx flex items-center justify-center font-400 text-28rpx mr-20rpx"
:class="selectedLevel.includes(item.value) ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#FFF] text-[#606266]'"
v-for="(item, index) in TeaSpecialistLevels" :key="index"
@click="Home.handleToggleTeaSpecialistLevel(item.value)">
{{ item.label }}
</view>
</view>
<view class="mx-30rpx p-30rpx flex bg-white rounded-10rpx">
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/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>
<mescroll-body @init="mescrollInit" @down="downCallback" @up="Home.upCallback"
:fixed="true">
<view class="flex items-center bg-white p-20rpx rounded-10rpx mx-30rpx mb-20rpx" v-for="(item, index) in 100" :key="index" @click="Home.handleToReserveTeaSpecialist(item)">
<view class="mr-28rpx relative">
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
<view class="tea-specialist-time absolute top-6rpx left-0 text-[#fff] font-400 text-18rpx leading-26rpx flex items-center justify-center">
可约9:00
</view>
</view>
<view class="flex-1">
<view class="flex items-center">
<view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">
茶艺师昵称
</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>
<tea-specialist-level :level="'junior'"></tea-specialist-level>
</view>
</view>
<view class="flex items-center">
<view class="mr-12rpx">
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">上门服务</wd-tag>
</view>
<view class="mr-12rpx">
<wd-tag color="#F55726" bg-color="#F55726" plain>到点服务</wd-tag>
</view>
<view class="mr-12rpx">
<wd-tag color="#818CA9" bg-color="#F3F3F3">28岁</wd-tag>
</view>
<view class="flex items-center mt-8rpx">
<wd-img :src="`${OSS}icon/icon_woman.png`" width="28rpx" height="28rpx"></wd-img>
<!-- <wd-img :src="`${OSS}icon/icon_man.png`" width="28rpx" height="28rpx"></wd-img> -->
</view>
</view>
<view class="flex items-center justify-between mt-18rpx">
<view class="flex items-center mr-20rpx">
<view class="flex items-center">
<wd-img :src="`${OSS}icon/icon_store_cert.png`" width="36rpx" height="36rpx"></wd-img>
</view>
<text class="ml-8rpx font-400 text-24rpx leading-4rpx text-#303133">商家认证</text>
</view>
<view class="flex items-center font-400 text-24rpx leading-34rpx text-#92928C">距您14km</view>
</view>
<view class="font-400 text-[#FF5951] text-26rpx leading-40rpx flex items-center justify-between mt-4rpx">
<view class="">
<text class="text-32rpx">￥180</text>
<text class="text-24rpx">/小时</text>
</view>
<view class="font-400 text-22rpx leading-32rpx text-#92928C">最快30分钟到达</view>
</view>
</view>
</view>
</mescroll-body>
@ -108,26 +145,23 @@
<script lang="ts" setup>
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
import {TeaSpecialistLevels} from '@/utils/teaSpecialist'
import TeaSpecialistLevel from '@/components/TeaSpecialistLevel.vue'
import { OrderSource, OrderStatus } from '@/utils/order'
const OSS = inject('OSS')
const navbarHeight = inject('navbarHeight')
/** 轮播图 **/
const swiperList = ref<string[]>([
`${OSS}images/banner1.png`,
`${OSS}images/banner1.png`,
`${OSS}images/banner1.png`
])
const current = ref<number>(0)
/** 结束 **/
// 茶艺师等级
const selectedLevel = ref<Array<any>>([]) // 选择茶艺师的点击等级
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
onLoad(() => {
})
const home = {
const Home = {
toCity: () => {
uni.navigateTo({
url: '/pages/city/city'
@ -172,68 +206,70 @@
console.log('Clicked item:', item)
},
onChange: (e: any) => {
// 设置 current.value 为当前轮播索引
current.value = e.current
// 跳转到预约茶艺师页面
handleToReserveTeaSpecialist: (id: number = 1) => {
uni.navigateTo({
url: `/pages/index/detail`
})
},
handleToReserveRoom: (id: number = 1) => {
// 跳转到预约茶室页面
uni.navigateTo({
url: `/bundle/tea-room/room?id=${id}`
})
// 选择茶艺师等级
handleToggleTeaSpecialistLevel: (value: any) => {
// 切换茶艺师等级
const index = selectedLevel.value.indexOf(value);
if (index > -1) {
// 如果已经选择了该等级，则取消选择
selectedLevel.value.splice(index, 1);
} else {
// 如果未选择该等级，则添加选择
selectedLevel.value.push(value);
}
}
}
</script>
<style lang="scss">
page {
background-color: $cz-page-background;
}
page {
background-color: $cz-page-background;
}
.home-bg {
background-color: $cz-page-background;
background-image: url(#{$OSS}images/home/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;
// 隐藏横向滚动条
.tea-level-scrollbar {
&::-webkit-scrollbar {
display: none;
}
-ms-overflow-style: none;
scrollbar-width: none;
}
.wd-search__block {
background-color: #fff !important;
}
.home-bg {
background-color: $cz-page-background;
background-image: url(#{$OSS}images/home/home_bg.png);
background-size: 100%;
background-repeat: no-repeat;
}
.wd-search__input {
// #ifdef MP
padding-left: 32px !important;
padding-right: 32px !important;
// #endif
// #ifndef MP
padding-right: 0 !important;
// #endif
.search-box {
:deep() {
.wd-search {
background: transparent !important;
}
}
}
}
.rounded {
border-radius: 20rpx 0rpx 20rpx 0rpx;
}
.rounded {
border-radius: 20rpx 0rpx 20rpx 0rpx;
}
.ele-center {
left: 50%;
transform: translateX(-50%);
}
.ele-center {
left: 50%;
transform: translateX(-50%);
}
.tea-specialist-time {
width: 106rpx;
height: 38rpx;
background-image: url(#{$OSS}images/collect/collect_image1.png);
background-size: 100% 100%;
}
</style>