459 lines
17 KiB
Vue
459 lines
17 KiB
Vue
<route lang="jsonc" type="page">
|
|
{
|
|
"layout": "tabbar",
|
|
"style": {
|
|
"navigationStyle": "custom"
|
|
}
|
|
}
|
|
</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">{{ isVip ? '茶址会员' : '品茶爱好者' }}</view>
|
|
</view>
|
|
</view>
|
|
<!-- TODO 暂时隐藏 -->
|
|
<!-- <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]">{{ expireTime }}到期</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 h-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">￥{{ user.last_month }}</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">{{ item.type_id == 1 ? '茶艺师券' : '茶室券' }}</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" @click="router.navigateTo('/bundle/vip/benefits')">
|
|
<view class="text-[#EDCE91]">会员可以享受预定折扣</view>
|
|
<view class="vip-btn text-[#251C1C] font-bold text-center mt-20rpx w-244rpx h-56rpx text-center leading-56rpx rounded-26rpx">立即成为会员</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, getUserMember } from '@/api/user'
|
|
import type { IUserResult } from '@/api/types/user'
|
|
|
|
const OSS = inject('OSS')
|
|
const navbarHeight = inject('navbarHeight')
|
|
const rightPadding = inject('capsuleOffset')
|
|
|
|
// 登录信息相关
|
|
const userInfo = ref<any>(null)
|
|
const user = ref<IUserResult>({
|
|
id: 0,
|
|
sn: 0,
|
|
sex: "未知",
|
|
account: "",
|
|
nickname: "",
|
|
real_name: "",
|
|
avatar: "",
|
|
collect_count: 0,
|
|
coupon_count: 0,
|
|
create_time: "",
|
|
has_auth: false,
|
|
has_password: false,
|
|
member: 0,
|
|
mobile: "",
|
|
user_money: "0.00",
|
|
version: "",
|
|
last_month: 0
|
|
})
|
|
const isLogin = ref<boolean>(false)
|
|
const isVip = ref<boolean>(true)
|
|
|
|
// 茶室订单
|
|
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 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 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 showPompoCodePopup = ref<boolean>(false)
|
|
|
|
// 客服电话
|
|
const showServiceMobile = ref<boolean>(false)
|
|
const sheetMenu = ref<{ name: string}[]>([])
|
|
|
|
// 领取优惠券
|
|
const couponList = ref<any[]>([])
|
|
|
|
// 过期时间
|
|
const expireTime = ref<string>('')
|
|
|
|
onShow(() => {
|
|
const userStore = useUserStore()
|
|
isLogin.value = userStore.isLoggedIn
|
|
if (isLogin.value) {
|
|
// 获取用户详情信息接口
|
|
getUserInfo().then(res => {
|
|
user.value = res
|
|
if (res.member === 1) {
|
|
isVip.value = true
|
|
}
|
|
})
|
|
} else {
|
|
Object.keys(user.value).forEach(key => {
|
|
user.value[key] = ''
|
|
})
|
|
}
|
|
})
|
|
|
|
onLoad(() => {
|
|
isVip.value = false
|
|
|
|
uni.$on('clearUser', () => {
|
|
const userStore = useUserStore()
|
|
isLogin.value = userStore.isLoggedIn
|
|
|
|
Object.keys(user.value).forEach(key => {
|
|
user.value[key] = ''
|
|
})
|
|
})
|
|
|
|
My.handleInit()
|
|
})
|
|
|
|
onUnload(() => {
|
|
uni.$off('clearUser')
|
|
})
|
|
|
|
const My = {
|
|
/**
|
|
* 初始化
|
|
*/
|
|
handleInit: () => {
|
|
const userStore = useUserStore()
|
|
if (userStore.isLoggedIn) {
|
|
getMyCoupon().then(res => {
|
|
couponList.value = Array.isArray(res) ? res : []
|
|
})
|
|
}
|
|
|
|
// 获取会员过期时间
|
|
getUserMember().then(res => {
|
|
expireTime.value = res.data.expiration_time
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 领取优惠券
|
|
*/
|
|
handleClaimCoupon: async (id: number) => {
|
|
await claimMyCoupon({id})
|
|
toast.info('领取成功')
|
|
My.handleInit()
|
|
getUserInfo().then(res => {
|
|
user.value = res
|
|
})
|
|
},
|
|
|
|
// 跳转到个人信息
|
|
handleToProfile: () => {
|
|
if (isLogin.value) {
|
|
router.navigateTo('/bundle/profile/profile')
|
|
} else {
|
|
router.navigateTo('/pages/login/login')
|
|
}
|
|
},
|
|
|
|
// 点击显示客服电话
|
|
handleShowService: () => {
|
|
showServiceMobile.value = true
|
|
sheetMenu.value = [
|
|
{ name: '400-800-8888' },
|
|
]
|
|
},
|
|
|
|
// 选择菜单-拨打客服电话
|
|
handleSelectMenu: (item: any) => {
|
|
uni.makePhoneCall({
|
|
phoneNumber: item.item.name
|
|
})
|
|
},
|
|
|
|
// 显示推广码
|
|
handleShowPromoCode: () => {
|
|
if (isLogin.value) {
|
|
showPompoCodePopup.value = true
|
|
} else {
|
|
toast.info('请先登录')
|
|
router.navigateTo('/pages/login/login', 800)
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
|
|
.service-badge {
|
|
background: linear-gradient( 315deg, #F4C99A 0%, #FFE3BA 100%);
|
|
}
|
|
|
|
.vip-btn {
|
|
background: linear-gradient(180deg, #fff 0%, #F0BA6A 100%);
|
|
}
|
|
</style>
|