完善页面
This commit is contained in:
wangxiaowei
@ -11,7 +11,9 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="search-box mx-30rpx mt-30rpx">
|
||||
<wd-search placeholder="请输入城市名称" :placeholder-left="true" placeholderStyle="text-align:left;padding-left: 24rpx;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;"></wd-search>
|
||||
<wd-search
|
||||
placeholder="请输入城市名称"
|
||||
placeholder-left></wd-search>
|
||||
</view>
|
||||
|
||||
<view class="mt-52rpx mx-30rpx">
|
||||
@ -51,7 +53,7 @@
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@ -78,15 +80,10 @@ page {
|
||||
}
|
||||
|
||||
.wd-search__input {
|
||||
// #ifdef MP
|
||||
padding-left: 32px !important;
|
||||
padding-right: 32px !important;
|
||||
// #endif
|
||||
|
||||
// #ifndef MP
|
||||
padding-right: 0 !important;
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -113,13 +113,15 @@
|
||||
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 { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||
|
||||
onLoad(() => {
|
||||
@ -234,4 +236,4 @@ page {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -6,11 +6,11 @@
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view class="">
|
||||
<view>
|
||||
<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
|
||||
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
|
||||
<template #right>
|
||||
<view class="mr-16rpx flex items-center right-slot" @click="my.handleToService">
|
||||
<view class="mr-16rpx flex items-center right-slot" @click="my.handleToService">
|
||||
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_service.png`"></wd-img>
|
||||
</view>
|
||||
</template>
|
||||
@ -128,7 +128,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 团购 -->
|
||||
<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx px-56rpx py-48rpx flex items-center justify-between">
|
||||
<view class="flex items-center" @click="my.handleToDouYinGroupBuying">
|
||||
@ -241,7 +241,7 @@
|
||||
])
|
||||
|
||||
onLoad(() => {
|
||||
|
||||
|
||||
})
|
||||
|
||||
const my = {
|
||||
@ -269,7 +269,7 @@
|
||||
|
||||
<style lang="scss">
|
||||
page, home-bg{
|
||||
background: $cz-page-background url(#{$OSS}images/my/my_image1.png) 0 0 no-repeat;
|
||||
background: $cz-page-background url(#{$OSS}images/my/my_image1.png) 0 0 no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
@ -286,7 +286,7 @@
|
||||
}
|
||||
|
||||
.vip-level {
|
||||
background: url(#{$OSS}images/my/my_image5.png) 0 0 no-repeat;
|
||||
background: url(#{$OSS}images/my/my_image5.png) 0 0 no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
|
||||
@ -2,54 +2,203 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
// 'custom' 表示开启自定义导航栏，默认 'default'
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "首页"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view class="">
|
||||
<wd-navbar safeAreaInsetTop :bordered="false">
|
||||
<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
|
||||
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
|
||||
<template #left>
|
||||
<view class="h-88rpx flex items-center">
|
||||
<view class="text-[#303133] text-36rpx ml-24rpx">预约茶室</view>
|
||||
</view>
|
||||
</template>
|
||||
<template #right>
|
||||
<view class="flex items-center ml-114rpx right-slot">
|
||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc.png`" class="mr-16rpx"></wd-img>
|
||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_kefu.png`"></wd-img>
|
||||
<view class="search-box flex items-center ml-26rpx" @click="reserve.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 class="tabs">
|
||||
<wd-tabs v-model="tab" swipeable slidable="always" @change="reserve.handleChangeTab" :lazy="false">
|
||||
<wd-tab title="茶室预约"></wd-tab>
|
||||
<wd-tab title="茶艺师预约"></wd-tab>
|
||||
</wd-tabs>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mx-30rpx" :style="{ paddingTop: navbarHeight + 'px' }">
|
||||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="reserve.upCallback" :up="upOption">
|
||||
<view v-for="(item, index) in 5" :key="index" >
|
||||
<view class="mb-20rpx" v-if="tab === 0">
|
||||
<combo-card :type="ReserveCategory.TeaRoom" :order-type="ReserveCategoryOrderStatus.Consuming"></combo-card>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { getNavBarHeight } from '@/utils/index'
|
||||
import ComboCard from '@/components/order/ComboCard.vue'
|
||||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||||
import { ReserveCategory, ReserveCategoryOrderStatus } from '@/utils/platformService'
|
||||
|
||||
let navbarHeight = ref<number>(0)
|
||||
let OSS = inject('OSS')
|
||||
const rightPadding = ref<string>('24rpx')
|
||||
const OSS = inject('OSS')
|
||||
const navbarHeight = Number(inject('navbarHeight')) + 42 + 14 // 42为tabs的高度 14是边距值
|
||||
|
||||
/** tab **/
|
||||
const tab = ref<number>(0)
|
||||
const reserveType = ref<number>(0) // 0:茶室预约 1:茶艺师预约
|
||||
/** 结束 **/
|
||||
|
||||
|
||||
/** mescroll **/
|
||||
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||
const upOption = reactive({
|
||||
empty: {
|
||||
icon : OSS + 'icon/icon_reserver_empty.png',
|
||||
}
|
||||
})
|
||||
/** 结束 **/
|
||||
|
||||
onLoad(() => {
|
||||
navbarHeight.value = getNavBarHeight()
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
rightPadding.value = menuButtonInfo.width + 16 + 'px'
|
||||
// #endif
|
||||
})
|
||||
|
||||
const reserve = {
|
||||
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
|
||||
upCallback: (mescroll) => {
|
||||
// 需要留一下数据为空的时候显示的空数据图标内容
|
||||
// list({
|
||||
// page: mescroll.num,
|
||||
// size: mescroll.size
|
||||
// }).then((res: { list: Array<any>, totalPages: Number }) => {
|
||||
// const curPageData = res.list || [] // 当前页数据
|
||||
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
|
||||
// goods.value = goods.value.concat(curPageData); //追加新数据
|
||||
|
||||
// console.log("🚀 ~ goods:", goods)
|
||||
|
||||
// mescroll.endByPage(curPageData.length, res.totalPages); //必传参数(当前页的数据个数, 总页数)
|
||||
|
||||
// }).catch(() => {
|
||||
// mescroll.endErr(); // 请求失败, 结束加载
|
||||
// })
|
||||
// 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(); // 请求失败, 结束加载
|
||||
// })
|
||||
},
|
||||
|
||||
// 搜索
|
||||
toSearch: () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/search/search'
|
||||
})
|
||||
},
|
||||
|
||||
// tab切换获取index
|
||||
handleChangeTab: (item: { index: number }) => {
|
||||
// tabIndexs.value = item.index
|
||||
// scrollToLastY()
|
||||
},
|
||||
|
||||
// 处理点击事件
|
||||
handleClick: (item: any) => {
|
||||
console.log('Clicked item:', item)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
|
||||
.right-slot {
|
||||
padding-right: v-bind(rightPadding);
|
||||
.home-bg {
|
||||
background-color: $cz-page-background;
|
||||
background-image: url(#{$OSS}images/home/home_bg.png);
|
||||
background-size: 100% 280rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top center;
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
:deep() {
|
||||
.wd-tabs,
|
||||
.wd-tabs__nav {
|
||||
background: transparent !important;
|
||||
}
|
||||
.wd-tabs__nav-item {
|
||||
font-size: 32rpx !important;
|
||||
color: #303133 !important;
|
||||
line-height: 42rpx !important;
|
||||
padding: 0 30rpx !important;
|
||||
}
|
||||
|
||||
.wd-tabs__nav-item.is-active {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.wd-tabs__line {
|
||||
bottom: 0 !important;
|
||||
width: 60rpx !important;
|
||||
height: 16rpx !important;
|
||||
background-color: transparent !important;
|
||||
background-image: url(#{$OSS}images/reserve_room/reserve_room_image1.png) !important;
|
||||
background-size: cover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -19,8 +19,8 @@
|
||||
</template>
|
||||
<template #title>
|
||||
<view class="search-box flex items-center ml-26rpx">
|
||||
<wd-search placeholder="搜索茶址名称" hide-cancel :placeholder-left="true"
|
||||
placeholderStyle="text-align:left;padding-left: 24rpx;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;"></wd-search>
|
||||
<wd-search v-model="keywords" placeholder="搜索茶址名称" hide-cancel placeholder-left
|
||||
placeholderStyle="text-align:left;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;"></wd-search>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
@ -40,7 +40,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -50,6 +50,8 @@
|
||||
let navbarHeight = ref(0)
|
||||
let OSS = inject('OSS')
|
||||
|
||||
const keywords = ref<string>('')
|
||||
|
||||
onLoad(() => {
|
||||
navbarHeight.value = getNavBarHeight()
|
||||
})
|
||||
@ -61,7 +63,7 @@
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@ -91,15 +93,10 @@ page {
|
||||
}
|
||||
|
||||
.wd-search__input {
|
||||
// #ifdef MP
|
||||
padding-left: 32px !important;
|
||||
padding-right: 32px !important;
|
||||
// #endif
|
||||
|
||||
// #ifndef MP
|
||||
padding-right: 0 !important;
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user