develop my page ui
This commit is contained in:
kaijierepo
27
pnpm-lock.yaml
generated
27
pnpm-lock.yaml
generated
@ -240,15 +240,6 @@ importers:
|
||||
specifier: ^2.2.10
|
||||
version: 2.2.12(typescript@5.9.2)
|
||||
|
||||
src/uni_modules/lime-echart:
|
||||
dependencies:
|
||||
echarts:
|
||||
specifier: ^5.4.1
|
||||
version: 5.6.0
|
||||
zrender:
|
||||
specifier: ^5.4.3
|
||||
version: 5.6.1
|
||||
|
||||
src/uni_modules/mescroll-uni: {}
|
||||
|
||||
src/uni_modules/uni-icons: {}
|
||||
@ -1225,7 +1216,6 @@ packages:
|
||||
'@esbuild/darwin-arm64@0.20.2':
|
||||
resolution: {integrity: sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [arm64]
|
||||
os: [darwin]
|
||||
|
||||
'@esbuild/darwin-arm64@0.23.1':
|
||||
@ -1243,7 +1233,6 @@ packages:
|
||||
'@esbuild/darwin-x64@0.20.2':
|
||||
resolution: {integrity: sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [darwin]
|
||||
|
||||
'@esbuild/darwin-x64@0.23.1':
|
||||
@ -2112,7 +2101,6 @@ packages:
|
||||
|
||||
'@rollup/rollup-darwin-x64@4.46.2':
|
||||
resolution: {integrity: sha512-SSj8TlYV5nJixSsm/y3QXfhspSiLYP11zpfwp6G/YDXctf3Xkdnk4woJIF5VQe0of2OjzTt8EsxnJDCdHd2xMA==}
|
||||
cpu: [x64]
|
||||
os: [darwin]
|
||||
|
||||
'@rollup/rollup-freebsd-arm64@4.46.2':
|
||||
@ -3442,9 +3430,6 @@ packages:
|
||||
eastasianwidth@0.2.0:
|
||||
resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
|
||||
|
||||
echarts@5.6.0:
|
||||
resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}
|
||||
|
||||
echarts@6.0.0:
|
||||
resolution: {integrity: sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==}
|
||||
|
||||
@ -6459,9 +6444,6 @@ packages:
|
||||
resolution: {integrity: sha512-RcDeKFoCQB51dmrrTb1PMIazjTqGuAbFmjPS0/N5hdUNTCRvxGOOBTBFolvIxUcsWhrocI9C0mYDgUwXT6Dwcg==}
|
||||
engines: {HBuilderX: ^3.0.7}
|
||||
|
||||
zrender@5.6.1:
|
||||
resolution: {integrity: sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==}
|
||||
|
||||
zrender@6.0.0:
|
||||
resolution: {integrity: sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==}
|
||||
|
||||
@ -10585,11 +10567,6 @@ snapshots:
|
||||
|
||||
eastasianwidth@0.2.0: {}
|
||||
|
||||
echarts@5.6.0:
|
||||
dependencies:
|
||||
tslib: 2.3.0
|
||||
zrender: 5.6.1
|
||||
|
||||
echarts@6.0.0:
|
||||
dependencies:
|
||||
tslib: 2.3.0
|
||||
@ -14175,10 +14152,6 @@ snapshots:
|
||||
|
||||
z-paging@2.8.7: {}
|
||||
|
||||
zrender@5.6.1:
|
||||
dependencies:
|
||||
tslib: 2.3.0
|
||||
|
||||
zrender@6.0.0:
|
||||
dependencies:
|
||||
tslib: 2.3.0
|
||||
|
||||
@ -1,67 +1,14 @@
|
||||
{
|
||||
"name": "",
|
||||
"appid": "",
|
||||
"description": "",
|
||||
"versionName": "1.0.0",
|
||||
"versionCode": "100",
|
||||
"transformPx": false,
|
||||
"app-plus": {
|
||||
"usingComponents": true,
|
||||
"nvueStyleCompiler": "uni-app",
|
||||
"compilerVersion": 3,
|
||||
"splashscreen": {
|
||||
"alwaysShowBeforeRender": true,
|
||||
"waiting": true,
|
||||
"autoclose": true,
|
||||
"delay": 0
|
||||
},
|
||||
"modules": {},
|
||||
"distribute": {
|
||||
"android": {
|
||||
"permissions": []
|
||||
},
|
||||
"ios": {},
|
||||
"sdkConfigs": {}
|
||||
}
|
||||
},
|
||||
"quickapp": {},
|
||||
"mp-weixin": {
|
||||
"appid": "",
|
||||
"setting": {
|
||||
"urlCheck": false
|
||||
},
|
||||
"usingComponents": true
|
||||
},
|
||||
"mp-alipay": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"mp-baidu": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"mp-toutiao": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"uniStatistics": {
|
||||
"enable": false
|
||||
},
|
||||
"vueVersion": "3",
|
||||
"default": {
|
||||
"name": "茶址",
|
||||
"appid": "__UNI__D1E5001",
|
||||
"description": "",
|
||||
"versionName": "1.0.0",
|
||||
"versionCode": "100",
|
||||
"transformPx": false,
|
||||
"h5": {
|
||||
"router": {}
|
||||
},
|
||||
"app-plus": {
|
||||
"usingComponents": true,
|
||||
"nvueStyleCompiler": "uni-app",
|
||||
"compilerVersion": 3,
|
||||
"compatible": {
|
||||
"ignoreVersion": true
|
||||
},
|
||||
"splashscreen": {
|
||||
"alwaysShowBeforeRender": true,
|
||||
"waiting": true,
|
||||
@ -71,12 +18,6 @@
|
||||
"modules": {},
|
||||
"distribute": {
|
||||
"android": {
|
||||
"minSdkVersion": 30,
|
||||
"targetSdkVersion": 30,
|
||||
"abiFilters": [
|
||||
"armeabi-v7a",
|
||||
"arm64-v8a"
|
||||
],
|
||||
"permissions": [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
@ -93,6 +34,12 @@
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
],
|
||||
"minSdkVersion": 30,
|
||||
"targetSdkVersion": 30,
|
||||
"abiFilters": [
|
||||
"armeabi-v7a",
|
||||
"arm64-v8a"
|
||||
]
|
||||
},
|
||||
"ios": {},
|
||||
@ -129,6 +76,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"compatible": {
|
||||
"ignoreVersion": true
|
||||
}
|
||||
},
|
||||
"quickapp": {},
|
||||
@ -139,13 +89,13 @@
|
||||
"es6": true,
|
||||
"minified": true
|
||||
},
|
||||
"usingComponents": true,
|
||||
"requiredPrivateInfos": [
|
||||
"getLocation"
|
||||
],
|
||||
"optimization": {
|
||||
"subPackages": true
|
||||
},
|
||||
"usingComponents": true,
|
||||
"permission": {
|
||||
"scope.userLocation": {
|
||||
"desc": "我们需要获取您的位置，以方便推荐附近茶室给您"
|
||||
@ -165,6 +115,8 @@
|
||||
"uniStatistics": {
|
||||
"enable": false
|
||||
},
|
||||
"vueVersion": "3"
|
||||
"vueVersion": "3",
|
||||
"h5": {
|
||||
"router": {}
|
||||
}
|
||||
}
|
||||
BIN
src/pages/my/img/bg.png
Normal file
BIN
src/pages/my/img/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/pages/my/img/modify.png
Normal file
BIN
src/pages/my/img/modify.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 664 B |
BIN
src/pages/my/img/修改 (1).png
Normal file
BIN
src/pages/my/img/修改 (1).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 394 B |
BIN
src/pages/my/img/头像.png
Normal file
BIN
src/pages/my/img/头像.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/pages/my/img/播放 (5).png
Normal file
BIN
src/pages/my/img/播放 (5).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 734 B |
BIN
src/pages/my/img/组 116095.png
Normal file
BIN
src/pages/my/img/组 116095.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 266 B |
BIN
src/pages/my/img/组 116107.png
Normal file
BIN
src/pages/my/img/组 116107.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
@ -7,368 +7,126 @@
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<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.handleShowService">
|
||||
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_service.png`"></wd-img>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
</view>
|
||||
|
||||
<view class="pb-74rpx" :style="{ paddingTop: navbarHeight + 'px' }">
|
||||
<!-- 账号昵称显示 -->
|
||||
<view class="ml-60rpx flex items-center">
|
||||
<view>
|
||||
<wd-img width="120rpx" height="120rpx" :src="isLogin ? user.avatar : `${OSS}icon/icon_avatar.png`" mode="aspectFill" round />
|
||||
</view>
|
||||
<view class="flex-1 ml-22rpx flex justify-between items-center">
|
||||
<view @click="My.handleToProfile">
|
||||
<view class="text-[#303133] text-36rpx leading-50rpx ml-8rpx">{{ isLogin ? user.nickname : '立即登录' }}</view>
|
||||
<view v-if="isLogin" class="flex justify-center items-center vip-bg mt-10rpx">
|
||||
<!-- 会员显示图标 -->
|
||||
<view v-if="isVip" class="flex items-center mr-12rpx">
|
||||
<wd-img width="36rpx" height="36rpx" mode="aspectFill" :src="`${OSS}icon/icon_crown.png`" round></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" @click="My.handleShowPromoCode">
|
||||
<view class="flex items-center mr-8rpx">
|
||||
<wd-img width="32rpx" height="32rpx" 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>
|
||||
|
||||
<!-- 余额显示 -->
|
||||
<view class="mt-16rpx mx-30rpx flex justify-between">
|
||||
<view class="flex items-center">
|
||||
<view class="w-160rpx text-[#303133] text-center" @click="router.navigateTo('/bundle/coupon/my-coupon')">
|
||||
<view class="font-bold text-36rpx leading-50rpx"> {{ isLogin ? user.coupon_count : '- -' }}</view>
|
||||
<view class="text-24rpx leading-34rpx">优惠券</view>
|
||||
</view>
|
||||
<view class="w-160rpx text-[#303133] text-center" @click="router.navigateTo('/bundle/collect/collect')">
|
||||
<view class="font-bold text-36rpx leading-50rpx"> {{ isLogin ? user.collect_count : '- -' }}</view>
|
||||
<view class="text-24rpx leading-34rpx">收藏</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="relative" @click="router.navigateTo('/bundle/wallet/wallet')">
|
||||
<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 text-center">
|
||||
<view class="text-30rpx leading-36rpx font-bold">{{ isLogin ? user.user_money : '- -' }}</view>
|
||||
<view class="text-20rpx leading-28rpx ml-10rpx">平台余额</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 消费金额显示 -->
|
||||
<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" @click="router.navigateTo('/bundle/vip/benefits')">
|
||||
<view class="font-400 text-24rpx ml-12rpx mr-20rpx text-[#EECC99]">{{ isLogin ? '会员到期时间' : '- -' }}</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">￥{{ isLogin ? '上月消费金额显示' : '- -' }}</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 couponList" :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">{{ item.coupon_price }}</text>
|
||||
</view>
|
||||
<view class="font-400 text-20rpx leading-28rpx text-[#1C1C1D]">{{ item.name }}</view>
|
||||
<view class="font-400 text-20rpx w-126rpx h-40rpx rounded-20rpx mt-18rpx leading-40rpx mx-auto"
|
||||
:class="item.use == 1 ? 'bg-[#E6E3DF]' : 'bg-[#FCCA84]'" @click="My.handleClaimCoupon(item.id)">
|
||||
{{ item.use == 1 ? '已领取' : '立即领取' }}
|
||||
</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 class="bg-white rounded-16rpx mx-30rpx mt-28rpx px-56rpx py-48rpx flex items-center justify-between">
|
||||
<view class="flex items-center" @click="router.navigateTo('/bundle/order/douyin/order-list')">
|
||||
<view class="w-40rpx h-40rpx ">
|
||||
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_douyin.png`"></wd-img>
|
||||
</view>
|
||||
<view class="ml-20rpx">
|
||||
<text class="font-bold text-30rpx text-[#303133] leading-42rpx mr-6rpx">抖音团购</text>
|
||||
<wd-icon name="arrow-right" size="24rpx" color="#B3B3B3"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<wd-divider vertical />
|
||||
</view>
|
||||
<view class="flex items-center" @click="router.navigateTo('/bundle/order/platform/order-list')">
|
||||
<view class="w-40rpx h-40rpx ">
|
||||
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_platform.png`"></wd-img>
|
||||
</view>
|
||||
<view class="ml-20rpx">
|
||||
<text class="font-bold text-30rpx text-[#303133] leading-42rpx mr-6rpx">平台团购</text>
|
||||
<wd-icon name="arrow-right" size="24rpx" color="#B3B3B3"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 茶室订单 -->
|
||||
<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx pb-34rpx">
|
||||
<view class="px-30rpx pt-30rpx py-24rpx">茶室订单</view>
|
||||
<view class="flex relative px-30rpx">
|
||||
<view v-for="(item, index) in roomMenuList" :key="index">
|
||||
<navigator :url="`/bundle/order/tea-room/order-list?orderStatus=${item.status}`" hover-class="none">
|
||||
<view class="w-96rpx text-center flex flex-col items-center justify-center mr-30rpx">
|
||||
<view class="w-36rpx h-36rpx flex items-center justify-center">
|
||||
<wd-img width="100%" height="100%" :src="item.icon"></wd-img>
|
||||
</view>
|
||||
<view class="font-400 text-24rpx text-[#303133] leading-34rpx mt-8rpx">{{ item.title }}</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 茶艺师订单 -->
|
||||
<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx pb-34rpx">
|
||||
<view class="px-30rpx pt-30rpx py-24rpx">茶艺师订单</view>
|
||||
<view class="flex relative px-30rpx">
|
||||
<view v-for="(item, index) in teaReserveMenuList" :key="index">
|
||||
<navigator :url="`/bundle/order/tea-specialist/order-list?orderStatus=${item.status}`" hover-class="none">
|
||||
<view class="w-96rpx text-center flex flex-col items-center justify-center mr-30rpx">
|
||||
<view class="w-36rpx h-36rpx flex items-center justify-center">
|
||||
<wd-img width="100%" height="100%" :src="item.icon"></wd-img>
|
||||
</view>
|
||||
<view class="font-400 text-24rpx text-[#303133] leading-34rpx mt-8rpx">{{ item.title }}</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 更多服务 -->
|
||||
<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx pb-34rpx">
|
||||
<view class="px-30rpx pt-30rpx py-24rpx">更多服务</view>
|
||||
<view class="flex px-30rpx">
|
||||
<view v-for="(item, index) in serviceMenuList" :key="index">
|
||||
<navigator :url="item.url" hover-class="none">
|
||||
<view class="text-center flex flex-col items-center justify-center mr-30rpx relative" :class="item.badge ? 'w-180rpx ml-[-10rpx]' : 'w-120rpx'">
|
||||
<view class="w-60rpx h-60rpx flex items-center justify-center">
|
||||
<wd-img width="100%" height="100%" :src="item.icon"></wd-img>
|
||||
</view>
|
||||
<view class="font-400 text-24rpx text-[#303133] leading-34rpx mt-8rpx">{{ item.title }}</view>
|
||||
<view class="service-badge rounded-18rpx text-[#63300E] text-16rpx leading-20rpx w-72rpx h-28rpx text-center leading-28rpx absolute top-0 right-0" v-if="item.badge">
|
||||
{{item.badge}}
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 推广码 -->
|
||||
<wd-overlay :show="showPompoCodePopup" @click="showPompoCodePopup = false">
|
||||
<view class="h-full relative">
|
||||
<view class="absolute-center h-926rpx">
|
||||
<wd-img width="600rpx" height="800rpx" :src="`${OSS}images/my/my_image7.png`"></wd-img>
|
||||
<view class="absolute bottom-158rpx flex items-center w-full ml-110rpx">
|
||||
<view class="mr-70rpx w-160rpx h-160rpx">
|
||||
<wd-img width="160rpx" height="160rpx" :src="`${OSS}images/reserve_room/reserve_room_image3.png`" mode="scaleToFill"></wd-img>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="font-bold text-30rpx leading-42rpx text-[#303133]">我的推广码</view>
|
||||
<view class="text-40rpx leading-56rpx text-[#4C9F44] mt-20rpx">3486</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="absolute bottom-0 left-1/2 -translate-x-1/2" @click="showPompoCodePopup = false">
|
||||
<wd-img width="72rpx" height="72rpx" :src="`${OSS}icon/icon_close2.png`"></wd-img>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-overlay>
|
||||
|
||||
<!-- 客服电话 -->
|
||||
<wd-action-sheet v-model="showServiceMobile" :actions="sheetMenu" cancel-text="取消" @close="showServiceMobile = false" @select="My.handleSelectMenu" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { OrderStatus } from '@/utils/order'
|
||||
import { toast } from '@/utils/toast'
|
||||
import { router } from '@/utils/tools'
|
||||
import { useUserStore } from '@/store'
|
||||
import { getUserInfo, getMyCoupon, claimMyCoupon } from '@/api/user'
|
||||
import type { IUserResult } from '@/api/types/user'
|
||||
import type { IUserResult } from '@/api/types/user'
|
||||
import { getUserInfo } from '@/api/user'
|
||||
import { useUserStore } from '@/store'
|
||||
import { router } from '@/utils/tools'
|
||||
import headerBgImg from './img/bg.png'
|
||||
import modifyBgImg from './img/modify.png'
|
||||
import editIconImg from './img/修改 (1).png'
|
||||
import defaultAvatarImg from './img/头像.png'
|
||||
import playIconImg from './img/播放 (5).png'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const navbarHeight = inject('navbarHeight')
|
||||
const rightPadding = inject('capsuleOffset')
|
||||
const OSS = inject('OSS')
|
||||
const navbarHeight = inject('navbarHeight')
|
||||
const rightPadding = inject('capsuleOffset')
|
||||
|
||||
// 登录信息相关
|
||||
const userInfo = ref<any>(null)
|
||||
const user = ref<IUserResult>({
|
||||
// 本地图片资源
|
||||
const defaultAvatar = defaultAvatarImg as string
|
||||
const editIcon = editIconImg as string
|
||||
const playIcon = playIconImg as string
|
||||
const headerBg = headerBgImg as string
|
||||
const modifyBg = modifyBgImg as string
|
||||
|
||||
// 调试：检查背景图片路径
|
||||
console.log('headerBg:', headerBg)
|
||||
|
||||
// 登录信息相关
|
||||
const user = ref<IUserResult>({
|
||||
id: 0,
|
||||
sn: 0,
|
||||
sex: "未知",
|
||||
account: "",
|
||||
nickname: "",
|
||||
real_name: "",
|
||||
avatar: "",
|
||||
sex: '未知',
|
||||
account: '',
|
||||
nickname: '',
|
||||
real_name: '',
|
||||
avatar: '',
|
||||
collect_count: 0,
|
||||
coupon_count: 0,
|
||||
create_time: "",
|
||||
create_time: '',
|
||||
has_auth: false,
|
||||
has_password: false,
|
||||
member: 0,
|
||||
mobile: "",
|
||||
user_money: "0.00",
|
||||
version: ""
|
||||
})
|
||||
const isLogin = ref<boolean>(false)
|
||||
const isVip = ref<boolean>(true)
|
||||
mobile: '',
|
||||
user_money: '0.00',
|
||||
version: '',
|
||||
})
|
||||
const isLogin = ref<boolean>(false)
|
||||
|
||||
// 茶室订单
|
||||
const roomMenuList = reactive([
|
||||
{ id: 1, title: '全部订单', icon: `${OSS}icon/icon_room_all_order.png`, badge: '', status: 'all' },
|
||||
{ id: 2, title: '待付款', icon: `${OSS}icon/icon_room_wait_pay_order.png`, badge: '', status: OrderStatus.Pending },
|
||||
{ id: 3, title: '预约单', icon: `${OSS}icon/icon_room_reserve_order.png`, badge: '', status: OrderStatus.Reserved },
|
||||
{ id: 4, title: '已完结', icon: `${OSS}icon/icon_room_finish_order.png`, badge: '', status: OrderStatus.Finished },
|
||||
])
|
||||
// 客服电话
|
||||
const showServiceMobile = ref<boolean>(false)
|
||||
const sheetMenu = ref<{ name: string }[]>([])
|
||||
|
||||
// 茶艺师订单
|
||||
const teaReserveMenuList = reactive([
|
||||
{ id: 1, title: '全部订单', icon: `${OSS}icon/icon_tea_all_order.png`, badge: '', status: 'all' },
|
||||
{ id: 2, title: '待付款', icon: `${OSS}icon/icon_tea_wait_pay_order.png`, badge: '', status: OrderStatus.Pending },
|
||||
{ id: 3, title: '预约单', icon: `${OSS}icon/icon_tea_reserve_order.png`, badge: '', status: OrderStatus.Reserved },
|
||||
{ id: 4, title: '待确认', icon: `${OSS}icon/icon_tea_wait_confirm_order.png`, badge: '', status: OrderStatus.Confirm },
|
||||
{ id: 4, title: '已完结', icon: `${OSS}icon/icon_tea_finish_order.png`, badge: '', status: OrderStatus.Finished },
|
||||
])
|
||||
// 门店信息
|
||||
const storeInfo = ref({
|
||||
douyin_uid: '236598984587',
|
||||
address: '上海浦东新区新金桥路58号新银东大厦 15楼F室',
|
||||
business_hours: '08:00-22:00',
|
||||
contact_phone: '021-8888888',
|
||||
})
|
||||
|
||||
// 更多服务
|
||||
const serviceMenuList = reactive([
|
||||
{ id: 1, title: '申请茶馆', icon: `${OSS}icon/icon_service_teahouse.png`, badge: '', url: '/bundle/settle-in/tea-room' },
|
||||
{ id: 2, title: '申请茶艺师', icon: `${OSS}icon/icon_service_tea.png`, badge: '', url: '/bundle/settle-in/tea-specialist' },
|
||||
{ id: 3, title: '合创合伙人', icon: `${OSS}icon/icon_service_partner.png`, badge: '赚佣金', url: '/bundle/settle-in/parten' },
|
||||
])
|
||||
// 门店媒体列表（视频/图片）
|
||||
const storeMediaList = ref([
|
||||
{ type: 'video', url: `${OSS}images/my/store_video_thumb.jpg`, overlay: null },
|
||||
{ type: 'image', url: `${OSS}images/my/store_image1.jpg`, overlay: null },
|
||||
{ type: 'image', url: `${OSS}images/my/store_image2.jpg`, overlay: null },
|
||||
{ type: 'image', url: `${OSS}images/my/store_image3.jpg`, overlay: null },
|
||||
{ type: 'image', url: `${OSS}images/my/store_image4.jpg`, overlay: null },
|
||||
{ type: 'image', url: `${OSS}images/my/store_image5.jpg`, overlay: 8 },
|
||||
])
|
||||
|
||||
// 推广码弹窗
|
||||
const showPompoCodePopup = ref<boolean>(false)
|
||||
// 格式化账号显示（152****3412格式）
|
||||
function formatAccount(account: string) {
|
||||
if (!account)
|
||||
return ''
|
||||
if (account.length <= 7)
|
||||
return account
|
||||
return `${account.substring(0, 3)}****${account.substring(account.length - 4)}`
|
||||
}
|
||||
|
||||
// 客服电话
|
||||
const showServiceMobile = ref<boolean>(false)
|
||||
const sheetMenu = ref<{ name: string}[]>([])
|
||||
|
||||
// 领取优惠券
|
||||
const couponList = ref<any[]>([])
|
||||
|
||||
onShow(() => {
|
||||
onShow(() => {
|
||||
const userStore = useUserStore()
|
||||
isLogin.value = userStore.isLoggedIn
|
||||
console.log("🚀 ~ isLogin.value:", 1)
|
||||
console.log('🚀 ~ isLogin.value:', 1)
|
||||
if (isLogin.value) {
|
||||
console.log("🚀 ~ isLogin.value:", 3)
|
||||
console.log('🚀 ~ isLogin.value:', 3)
|
||||
// 获取用户详情信息接口
|
||||
getUserInfo().then(res => {
|
||||
getUserInfo().then((res) => {
|
||||
user.value = res
|
||||
})
|
||||
} else {
|
||||
console.log("🚀 ~ isLogin.value:", 4)
|
||||
Object.keys(user.value).forEach(key => {
|
||||
}
|
||||
else {
|
||||
console.log('🚀 ~ isLogin.value:', 4)
|
||||
Object.keys(user.value).forEach((key) => {
|
||||
user.value[key] = ''
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
onLoad(() => {
|
||||
uni.$on('clearUser', () => {
|
||||
console.log("🚀 ~ isLogin.value:", 2)
|
||||
console.log('🚀 ~ isLogin.value:', 2)
|
||||
|
||||
const userStore = useUserStore()
|
||||
isLogin.value = userStore.isLoggedIn
|
||||
|
||||
Object.keys(user.value).forEach(key => {
|
||||
Object.keys(user.value).forEach((key) => {
|
||||
user.value[key] = ''
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
My.handleInit()
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
onUnload(() => {
|
||||
uni.$off('clearUser')
|
||||
})
|
||||
|
||||
const My = {
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
handleInit: () => {
|
||||
getMyCoupon().then(res => {
|
||||
couponList.value = Array.isArray(res) ? res : []
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 领取优惠券
|
||||
*/
|
||||
handleClaimCoupon: async (id: number) => {
|
||||
await claimMyCoupon({id})
|
||||
toast.info('领取成功')
|
||||
My.handleInit()
|
||||
},
|
||||
})
|
||||
|
||||
const My = {
|
||||
// 跳转到个人信息
|
||||
handleToProfile: () => {
|
||||
if (isLogin.value) {
|
||||
router.navigateTo('/bundle/profile/profile')
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
router.navigateTo('/pages/login/login')
|
||||
}
|
||||
},
|
||||
@ -384,55 +142,197 @@
|
||||
// 选择菜单-拨打客服电话
|
||||
handleSelectMenu: (item: any) => {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: item.item.name
|
||||
phoneNumber: item.item.name,
|
||||
})
|
||||
},
|
||||
|
||||
// 显示推广码
|
||||
handleShowPromoCode: () => {
|
||||
if (isLogin.value) {
|
||||
showPompoCodePopup.value = true
|
||||
} else {
|
||||
toast.info('请先登录')
|
||||
router.navigateTo('/pages/login/login', 800)
|
||||
}
|
||||
// 跳转到设置页面
|
||||
handleToSettings: () => {
|
||||
// TODO: 跳转到设置页面
|
||||
console.log('跳转到设置页面')
|
||||
},
|
||||
|
||||
// 编辑门店信息
|
||||
handleEditStore: () => {
|
||||
// TODO: 编辑门店信息
|
||||
console.log('编辑门店信息')
|
||||
},
|
||||
|
||||
// 预览媒体（视频/图片）
|
||||
handlePreviewMedia: (index: number) => {
|
||||
const item = storeMediaList.value[index]
|
||||
if (item.type === 'video') {
|
||||
// TODO: 播放视频
|
||||
console.log('播放视频', item.url)
|
||||
}
|
||||
else {
|
||||
// 预览图片
|
||||
const urls = storeMediaList.value
|
||||
.filter(i => i.type === 'image' && !i.overlay)
|
||||
.map(i => i.url)
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls,
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view class="home-bg fixed left-0 top-0 w-[100%]" :style="{ backgroundImage: headerBg ? `url('${headerBg}')` : 'none' }">
|
||||
<wd-navbar safe-area-inset-top :bordered="false" custom-style="background-color: transparent !important;">
|
||||
<template #left>
|
||||
<view class="ml-16rpx flex items-center" @click="My.handleToSettings" />
|
||||
</template>
|
||||
<template #right>
|
||||
<view class="right-slot mr-16rpx flex">
|
||||
<view class="mr-16rpx flex flex-col" @click="My.handleShowService">
|
||||
<wd-icon name="setting" color="#fff" size="16px" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
</view>
|
||||
|
||||
<view class="pb-0rpx" :style="{ paddingTop: `${navbarHeight}px` }">
|
||||
<!-- 账号昵称显示 -->
|
||||
<view class="user-info-bg relative z-10 ml-30rpx mr-30rpx flex items-center" :style="{ backgroundImage: headerBg ? `url('${headerBg}')` : 'none' }">
|
||||
<view class="relative z-10">
|
||||
<wd-img width="120rpx" height="120rpx" :src="(isLogin && user.avatar) ? user.avatar : defaultAvatar" mode="aspectFill" round />
|
||||
</view>
|
||||
<view class="relative z-10 ml-22rpx flex flex-1 items-center justify-between">
|
||||
<view class="flex-1" @click="My.handleToProfile">
|
||||
<view class="ml-8rpx flex items-center text-36rpx leading-50rpx" style="color: #fff;">
|
||||
{{ isLogin ? user.nickname : '立即登录' }}
|
||||
<wd-icon v-if="isLogin" name="arrow-right" size="24rpx" color="#fff" class="ml-8rpx" />
|
||||
</view>
|
||||
<view v-if="isLogin" class="ml-8rpx mt-8rpx text-24rpx leading-34rpx" style="color: #fff;">
|
||||
账号: {{ formatAccount(user.account || user.mobile) }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="relative ml-20rpx" @click="router.navigateTo('/bundle/wallet/wallet')">
|
||||
<view class="h-148rpx w-300rpx">
|
||||
<wd-img width="100%" height="100%" :src="`${OSS}images/my/my_image3.png`" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="absolute bottom-12rpx left-24rpx">
|
||||
<view class="flex items-center">
|
||||
<view class="text-30rpx text-[#303133] font-bold leading-36rpx">
|
||||
￥{{ isLogin ? user.user_money : '0.00' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="ml-0rpx mt-4rpx text-20rpx text-[#909399] leading-28rpx">
|
||||
钱包余额
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 门店信息区域 -->
|
||||
<view class="store-info-card mt-28rpx bg-white py-30rpx pl-30rpx">
|
||||
<view class="mb-24rpx text-32rpx text-[#303133] font-bold leading-44rpx">
|
||||
门店茶址24小时智能茶室(中新店)地址
|
||||
</view>
|
||||
<view class="mb-16rpx flex items-center text-24rpx text-[#606266] leading-40rpx">
|
||||
<text class="w-140rpx">抖音uid:</text>
|
||||
<text class="flex-1 text-[#000]">{{ storeInfo.douyin_uid || '236598984587' }}</text>
|
||||
</view>
|
||||
<view class="mb-16rpx flex items-center text-24rpx text-[#606266] leading-40rpx">
|
||||
<text class="w-140rpx">门店地址:</text>
|
||||
<text class="flex-1 text-[#000]">{{ storeInfo.address || '上海浦东新区新金桥路58号新银东大厦 15楼F室' }}</text>
|
||||
</view>
|
||||
<view class="relative mb-16rpx flex items-center">
|
||||
<view class="flex items-center text-24rpx text-[#606266] leading-40rpx">
|
||||
<text class="w-140rpx">营业时间:</text>
|
||||
<text class="flex-1 text-[#000]">{{ storeInfo.business_hours || '08:00-22:00' }}</text>
|
||||
</view>
|
||||
<view class="modify-btn absolute right-0 flex items-center px-20rpx py-8rpx" :style="{ backgroundImage: modifyBg ? `url('${modifyBg}')` : 'none' }" @click="My.handleEditStore">
|
||||
<wd-img width="24rpx" height="24rpx" :src="editIcon" class="mr-8rpx" />
|
||||
<text class="text-24rpx text-[#fff]">修改</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex items-center text-24rpx text-[#606266] leading-40rpx">
|
||||
<text class="w-140rpx">联系电话:</text>
|
||||
<text class="flex-1 text-[#000]">{{ storeInfo.contact_phone || '021-8888888' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 门店视频/图片区域 -->
|
||||
<view class="bg-white px-30rpx">
|
||||
<view class="mb-24rpx text-32rpx text-[#303133] font-bold leading-44rpx">
|
||||
门店视频/图片
|
||||
</view>
|
||||
<view class="grid grid-cols-3 gap-16rpx">
|
||||
<view
|
||||
v-for="(item, index) in storeMediaList"
|
||||
:key="index"
|
||||
class="relative aspect-square w-full overflow-hidden rounded-8rpx"
|
||||
@click="My.handlePreviewMedia(index)"
|
||||
>
|
||||
<wd-img
|
||||
width="100%"
|
||||
height="100%"
|
||||
:src="item.url"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<!-- 视频播放图标 -->
|
||||
<view v-if="item.type === 'video'" class="absolute inset-0 flex items-center justify-center">
|
||||
<wd-img width="60rpx" height="60rpx" :src="playIcon" />
|
||||
</view>
|
||||
<!-- +8 遮罩 -->
|
||||
<view v-if="item.overlay" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50">
|
||||
<text class="text-32rpx text-[#fff] font-bold">+{{ item.overlay }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 客服电话 -->
|
||||
<wd-action-sheet v-model="showServiceMobile" :actions="sheetMenu" cancel-text="取消" @close="showServiceMobile = false" @select="My.handleSelectMenu" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
page, home-bg{
|
||||
background: $cz-page-background url(#{$OSS}images/my/my_image1.png) 0 0 no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.right-slot {
|
||||
.home-bg {
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top center;
|
||||
min-height: 450rpx;
|
||||
}
|
||||
|
||||
.user-info-bg {
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top center;
|
||||
padding-top: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
min-height: 200rpx;
|
||||
}
|
||||
|
||||
.store-info-card {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
}
|
||||
|
||||
.modify-btn {
|
||||
position: absolute;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
min-width: 160rpx;
|
||||
height: 90rpx;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.service-badge {
|
||||
background: linear-gradient( 315deg, #F4C99A 0%, #FFE3BA 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user