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

制作我的页面和优化

Browse Source
This commit is contained in:
wangxiaowei
2025-08-29 17:45:32 +08:00
parent 38f0dbcbe2
commit 6ac45bef6b
8 changed files with 197 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/bundle/reserve-room/room.vue
View File

@ -98,7 +98,7 @@
<wd-popup v-model="showServicePopup" lock-scroll custom-style="border-radius:30rpx;" @close="showServicePopup = false">
<view class="text-center w-440rpx h-560rpx flex flex-col justify-center items-center">
<view class="w-240rpx h-240rpx" @click="room.handleOpenServiceSheet">
<wd-img width='100%' height='100%' :src="`${OSS}images/reserve_room_image3.png`"></wd-img>
<wd-img width='100%' height='100%' :src="`${OSS}images/reserve_room/reserve_room_image3.png`"></wd-img>
</view>
<view class="text-36rpx text-[#303133] leading-50rpx mt-54rpx">门店客服</view>
<view class="text-28rpx text-[#818CA9] leading-50rpx mt-22rpx">点击二维码添加客服</view>
@ -317,7 +317,7 @@
width: 60rpx !important;
height: 16rpx !important;
background-color: transparent !important;
background-image: url(#{$OSS}images/reserve_room_image1.png) !important;
background-image: url(#{$OSS}images/reserve_room/reserve_room_image1.png) !important;
background-size: cover !important;
}
}

2
src/components/coupon/GroupCoupon.vue
View File

@ -2,7 +2,7 @@
<view class="p-30rpx rounded-16rpx mb-20rpx bg-white" @click="onCheck(coupon.id)">
<view class="flex justify-between items-start relative ">
<view class="w-180rpx h-180rpx">
<wd-img width="100%" height="100%" :src="`${OSS}images/home_image5.png`"></wd-img>
<wd-img width="100%" height="100%" :src="`${OSS}images/home/home_image5.png`"></wd-img>
</view>
<view class="flex-1 ml-32rpx line-1" :class="canUse ? '' : 'opacity-40'">
<view class="text-32rpx text-[#303133] leading-44rpx line-1 w-350rpx">这是团购券套餐名称这是团购券套餐名称</view>

20
src/components/navbar.vue
View File

@ -4,15 +4,15 @@
<template #left>
<view class="h-48rpx flex items-center" @click="navbar.back">
<wd-img width="48rpx" height="48rpx" :src="`${OSS}icon/icon_arrow_left.png`" class="mt-6rpx"></wd-img>
<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx">{{ title }}</view>
<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx" v-if="!layoutLeft">{{ title }}</view>
<!-- 开启左侧自定义布局 -->
<slot name="left" v-if="layoutLeft"></slot>
</view>
</template>
<template #center>
<view class="h-48rpx flex items-center">
<wd-img width="48rpx" height="48rpx" :src="`${OSS}icon/icon_arrow_left.png`" class="mt-6rpx"></wd-img>
<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx">预约茶室</view>
</view>
<slot name="center"></slot>
</template>
<template #right>
@ -33,21 +33,31 @@
})
const props = defineProps({
// 标题
title: {
type: String,
default: ''
},
// 是否开启左侧自定义布局
layoutLeft: {
type: Boolean,
default: false
},
// 自定义类名
customClass: {
type: String,
default: ''
},
// 是否固定在顶部
fixed: {
type: Boolean,
default: true
},
// z-index 层级
zIndex: {
type: Number,
default: 1

2
src/components/notice/Reserve.vue
View File

@ -1,7 +1,7 @@
<template>
<view class="text-center">
<view class="w-300rpx h-300rpx mx-auto">
<wd-img width="300rpx" height="300rpx" mode="aspectFill" :src="`${OSS}images/reserve_room_image4.png`"></wd-img>
<wd-img width="300rpx" height="300rpx" mode="aspectFill" :src="`${OSS}images/reserve_room/reserve_room_image4.png`"></wd-img>
</view>
<view class="mt-60rpx text-center">
<view class="text-[#303133] text-36rpx leading-50rpx">{{ title }}</view>

2
src/components/reserve/RoomList.vue
View File

@ -2,7 +2,7 @@
<view v-for="(item, index) in 10" :key="index">
<view class="flex items-center">
<view class="w-200rpx h-200rpx">
<wd-img width="100%" height="100%" :src="`${OSS}images/reserve_room_image2.png`"
<wd-img width="100%" height="100%" :src="`${OSS}images/reserve_room/reserve_room_image2.png`"
radius="10rpx"/>
</view>
<view class="flex-1 ml-32rpx" v-if="!isGroupBuying">

3
src/pages.json
View File

@ -111,8 +111,7 @@
"type": "page",
"layout": "tabbar",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "我的"
"navigationStyle": "custom"
}
},
{

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

@ -36,12 +36,12 @@
</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" />
<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_image2.png`" mode="scaleToFill" />
<wd-img width="690rpx" height="180rpx" :src="`${OSS}images/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" />
@ -50,7 +50,7 @@
<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" />
<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>
@ -60,11 +60,11 @@
: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`"/>
<wd-img width="110rpx" height="110rpx" :src="`${OSS}images/home/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" />
<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">
@ -107,12 +107,12 @@
</template>
<script lang="ts" setup>
import { getNavBarHeight } from '@/utils/index'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
const navbarHeight = ref<number>(0)
const OSS = inject('OSS')
const navbarHeight = inject('navbarHeight')
const swiperList = ref<string[]>([
`${OSS}images/banner1.png`,
`${OSS}images/banner1.png`,
@ -123,7 +123,6 @@
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
onLoad(() => {
navbarHeight.value = getNavBarHeight()
})
const home = {
@ -192,7 +191,7 @@ page {
.home-bg {
background-color: $cz-page-background;
background-image: url(#{$OSS}images/home_bg.png);
background-image: url(#{$OSS}images/home/home_bg.png);
background-size: 100%;
background-repeat: no-repeat;
}

265
src/pages/my/my.vue
View File

@ -1,120 +1,189 @@
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="page">{
"layout": "tabbar",
"style": {
// 'custom' 表示开启自定义导航栏，默认 'default'
"navigationStyle": "custom",
"navigationBarTitleText": "我的"
"navigationStyle": "custom"
}
}</route>
<template>
<view class="bg-white px-4 pt-2" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
<view class="mt-10">
<image src="/static/logo.svg" alt="" class="mx-auto block h-28 w-28" />
</view>
<view class="mt-4 text-center text-4xl text-[#d14328]">
unibest
</view>
<view class="mb-8 mt-2 text-center text-2xl">
最好用的 uniapp 开发模板
<view class="">
<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">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_service.png`"></wd-img>
</view>
</template>
</wd-navbar>
</view>
<view class="m-auto mb-2 max-w-100 text-justify indent text-4">
{{ description }}
</view>
<view class="mt-4 text-center">
作者：
<text class="text-green-500">
菲鸽
</text>
</view>
<view class="mt-4 text-center">
官网地址：
<text class="text-green-500">
https://unibest.tech
</text>
</view>
<view :style="{ paddingTop: navbarHeight + 'px' }">
<!-- 账号昵称显示 -->
<view class="ml-60rpx flex items-center">
<view class="">
<wd-img width="120rpx" height="120rpx" :src="`${OSS}icon/icon_avatar.png`" mode="aspectFill" round />
</view>
<view class="flex-1 ml-22rpx flex justify-between items-center">
<view>
<view class="text-[#303133] text-36rpx leading-50rpx ml-8rpx">{{ isLogin ? '王大帅' : '立即登录' }}</view>
<view v-if="isLogin" class="flex justify-center items-center vip-bg mt-10rpx">
<!-- 会员显示图标 -->
<view v-if="isVip" class="w-36rpx h-36rpx flex items-center mr-12rpx">
<wd-img width="100%" height="100%" mode="aspectFill" :src="`${OSS}icon/icon_crown.png`"></wd-img>
</view>
<!-- 这里要根据用户身份显示不同的文字 -->
<view class="text-24rpx text-[#675649] leading-34rpx flex items-center">茶址会员</view>
</view>
</view>
<view class="w-178rpx h-80rpx relative">
<wd-img width="100%" height="100%" mode="aspectFill" :src="`${OSS}images/my/my_image2.png`"></wd-img>
<view class="absolute left-36rpx top-28rpx flex items-center">
<view class="w-32rpx h-32rpx flex items-center mr-8rpx">
<wd-img width="100%" height="100%" mode="aspectFill" :src="`${OSS}icon/icon_ercode.png`"></wd-img>
</view>
<view class="font-bold text-[#fff] text-24rpx leading-34rpx mt--6rpx">推广码</view>
</view>
</view>
</view>
</view>
<!-- #ifdef H5 -->
<view class="mt-4 text-center">
<a href="https://unibest.tech/base/3-plugin" target="_blank" class="text-green-500">
新手请看必看章节1：
</a>
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="mt-4 text-center">
新手请看必看章节1：
<text class="text-green-500">
https://unibest.tech/base/3-plugin
</text>
</view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="mt-4 text-center">
<a href="https://unibest.tech/base/14-faq" target="_blank" class="text-green-500">
新手请看必看章节2：
</a>
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="mt-4 text-center">
新手请看必看章节2：
<text class="text-green-500">
https://unibest.tech/base/14-faq
</text>
</view>
<!-- #endif -->
<!-- 余额显示 -->
<view class="mt-16rpx mx-30rpx flex justify-between">
<view class="flex items-center">
<view class="w-160rpx text-[#303133] text-center">
<view class="font-bold text-36rpx leading-50rpx"> {{ isLogin ? 51 : '- -' }}</view>
<view class="text-24rpx leading-34rpx">优惠券</view>
</view>
<view class="w-160rpx text-[#303133] text-center">
<view class="font-bold text-36rpx leading-50rpx"> {{ isLogin ? 51 : '- -' }}</view>
<view class="text-24rpx leading-34rpx">收藏</view>
</view>
</view>
<view class="relative">
<view class="w-300rpx h-148rpx">
<wd-img width="100%" height="100%" :src="`${OSS}images/my/my_image3.png`" mode="aspectFill"></wd-img>
</view>
<view class="text-[#303133] absolute bottom-12rpx left-24rpx">
<view class="text-30rpx leading-36rpx fon-bold">￥2106.3623</view>
<view class="text-20rpx leading-28rpx ml-10rpx">平台余额</view>
</view>
</view>
</view>
<view class="mt-4 text-center">
<wd-button type="primary">
UI组件按钮
</wd-button>
</view>
<view class="mt-4 text-center">
UI组件官网：<text class="text-green-500">
https://wot-design-uni.cn
</text>
<!-- 消费金额显示 -->
<view class="mx-30rpx">
<!-- 会员下的状态 -->
<view v-if="isVip" class="vip-level mt-32rpx pb-28rpx">
<view class="pt-32rpx mx-40rpx">
<view class="flex items-center justify-between">
<view class="flex items-center">
<view class="w-40rpx h-36rpx flex items-center">
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_vip.png`" mode="aspectFill"></wd-img>
</view>
<view class="flex items-center leading-34rpx ">
<view class="font-400 text-24rpx ml-12rpx mr-20rpx text-[#EECC99]">2026.03.06到期</view>
<view class="flex items-center mt-4rpx">
<wd-icon name="arrow-right" size="24rpx" color="#EECC99"></wd-icon>
</view>
</view>
</view>
<view class="font-400 text-24rpx text-[#EECC99] leading-34rpx">会员预定茶室享受8折</view>
</view>
</view>
<view class="mx-40rpx">
<wd-progress :percentage="60" hide-text color="#EECC99" custom-class="!my-10rpx"></wd-progress>
</view>
<view class="flex items-center justify-between mx-40rpx">
<view class="flex item-center leading-34rpx text-[#EECC99]">
<view class="font-400 text-24rpx mr-18rpx">上月消费</view>
<view class="font-400 text-28rpx mr-18rpx">￥23014.02</view>
</view>
<view class="font-400 text-24rpx text-[#D2D0D0] leading-34rpx">请尽快领取会员权益</view>
</view>
<view class="mt-50rpx ml-24rpx">
<scroll-view class="w-[100%] whitespace-nowrap" :scroll-x="true" scroll-left="120">
<view class="scroll-item mr-20rpx" v-for="(item, index) in 10" :key="index">
<view class="font-bold text-22rpx text-[#AF6400] leading-32rpx mt-6rpx">茶室券</view>
<view class="font-bold text-[#1C1C1D] leading-34rpx mt-8rpx">
<text class="text-24rpx">￥</text>
<text class="text-30rpx">20</text>
</view>
<view class="font-400 text-20rpx leading-28rpx text-[#1C1C1D]">满200可用</view>
<view class="font-400 text-20rpx bg-[#FCCA84] w-126rpx h-40rpx rounded-20rpx mt-18rpx leading-40rpx mx-auto">
立即领取
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 非会员下的状态 -->
<view v-if="!isVip" class="mt-16rpx flex justify-center">
<view class="w-690rpx h-228rpx relative">
<wd-img width="100%" height="100%" :src="`${OSS}images/my/my_image4.png`" mode="aspectFill"></wd-img>
<view class="absolute top-76rpx left-30rpx text-30rpx leading-42rpx">
<view class="text-[#EDCE91]">会员可以享受预定折扣</view>
<view class="vip-btn text-[#251C1C] font-bold text-center mt-20rpx">立即成为会员</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
defineOptions({
name: 'Home',
})
const OSS = inject('OSS')
const navbarHeight = inject('navbarHeight')
const rightPadding = inject('capsuleOffset')
// 获取屏幕边界到安全区域距离
let safeAreaInsets
let systemInfo
// 登录信息相关
const userInfo = ref<any>(null)
const isLogin = ref<boolean>(false)
const isVip = ref<boolean>(true)
// #ifdef MP-WEIXIN
// 微信小程序使用新的API
systemInfo = uni.getWindowInfo()
safeAreaInsets = systemInfo.safeArea
? {
top: systemInfo.safeArea.top,
right: systemInfo.windowWidth - systemInfo.safeArea.right,
bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
left: systemInfo.safeArea.left,
const my = {
handleToService: () => {
uni.navigateTo({
url: '/src/pages/my/service/service'
})
}
}
: null
// #endif
// #ifndef MP-WEIXIN
// 其他平台继续使用uni API
systemInfo = uni.getSystemInfoSync()
safeAreaInsets = systemInfo.safeAreaInsets
// #endif
const author = ref('菲鸽')
const description = ref(
'unibest 是一个集成了多种工具和技术的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite5 + UnoCss + VSCode 构建，模板具有代码提示、自动格式化、统一配置、代码片段等功能，并内置了许多常用的基本组件和基本功能，让你编写 uniapp 拥有 best 体验。',
)
// 测试 uni API 自动引入
onLoad(() => {
console.log('项目作者:', author.value)
})
onLoad(() => {
console.log('index')
})
</script>
<style lang="scss">
page, home-bg{
background: $cz-page-background url(#{$OSS}images/my/my_image1.png) 0 0 no-repeat;
background-size: 100%;
}
.right-slot {
padding-right: v-bind(rightPadding);
}
.vip-bg {
width: 170rpx;
height: 46rpx;
background: linear-gradient( 315deg, #F2E6BC 0%, #FFF8E2 100%);
box-shadow: 10rpx 10rpx 20rpx 2rpx rgba(0, 0, 0, 0.04);
border-radius: 8rpx;
}
.vip-level {
background: url(#{$OSS}images/my/my_image5.png) 0 0 no-repeat;
background-size: 100%;
}
.scroll-item {
display: inline-block;
width: 180rpx;
height: 180rpx;
text-align: center;
background: url(#{$OSS}images/my/my_image6.png) 0 0 no-repeat;
background-size: 180rpx;
}
</style>