From 6ac45bef6b33264daedf42280ec81dada52c41f0 Mon Sep 17 00:00:00 2001
From: wangxiaowei <1121133807@qq.com>
Date: Fri, 29 Aug 2025 17:45:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=B6=E4=BD=9C=E6=88=91=E7=9A=84=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=92=8C=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/bundle/reserve-room/room.vue      |   4 +-
 src/components/coupon/GroupCoupon.vue |   2 +-
 src/components/navbar.vue             |  20 +-
 src/components/notice/Reserve.vue     |   2 +-
 src/components/reserve/RoomList.vue   |   2 +-
 src/pages.json                        |   3 +-
 src/pages/index/index.vue             |  17 +-
 src/pages/my/my.vue                   | 267 ++++++++++++++++----------
 8 files changed, 197 insertions(+), 120 deletions(-)

diff --git a/src/bundle/reserve-room/room.vue b/src/bundle/reserve-room/room.vue
index c60a335..e8a07c8 100644
--- a/src/bundle/reserve-room/room.vue
+++ b/src/bundle/reserve-room/room.vue
@@ -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;
             }
         }
diff --git a/src/components/coupon/GroupCoupon.vue b/src/components/coupon/GroupCoupon.vue
index bf1f140..873b072 100644
--- a/src/components/coupon/GroupCoupon.vue
+++ b/src/components/coupon/GroupCoupon.vue
@@ -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>
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index 392285f..b7361ff 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -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
diff --git a/src/components/notice/Reserve.vue b/src/components/notice/Reserve.vue
index eedcdd3..1071021 100644
--- a/src/components/notice/Reserve.vue
+++ b/src/components/notice/Reserve.vue
@@ -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>
diff --git a/src/components/reserve/RoomList.vue b/src/components/reserve/RoomList.vue
index cf34532..d843251 100644
--- a/src/components/reserve/RoomList.vue
+++ b/src/components/reserve/RoomList.vue
@@ -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">
diff --git a/src/pages.json b/src/pages.json
index 84ac340..b04b904 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -111,8 +111,7 @@
       "type": "page",
       "layout": "tabbar",
       "style": {
-        "navigationStyle": "custom",
-        "navigationBarTitleText": "我的"
+        "navigationStyle": "custom"
       }
     },
     {
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index dd692e5..aa99e62 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -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;
 }
diff --git a/src/pages/my/my.vue b/src/pages/my/my.vue
index 47eb572..a44f1a5 100644
--- a/src/pages/my/my.vue
+++ b/src/pages/my/my.vue
@@ -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)
-})
-
-console.log('index')
+	onLoad(() => {
+		
+	})
 </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>