完善页面
This commit is contained in:
@ -1,16 +1,18 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
}</route>
|
||||
</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.handleToService">
|
||||
<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>
|
||||
@ -20,16 +22,16 @@
|
||||
<view class="pb-74rpx" :style="{ paddingTop: navbarHeight + 'px' }">
|
||||
<!-- 账号昵称显示 -->
|
||||
<view class="ml-60rpx flex items-center">
|
||||
<view class="">
|
||||
<view>
|
||||
<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 @click="my.handleToProfile">
|
||||
<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 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>
|
||||
@ -37,9 +39,9 @@
|
||||
</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 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>
|
||||
@ -80,7 +82,7 @@
|
||||
<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="flex items-center leading-34rpx" @click="my.handleToVipBenefits">
|
||||
<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>
|
||||
@ -109,8 +111,9 @@
|
||||
<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 class="font-400 text-20rpx w-126rpx h-40rpx rounded-20rpx mt-18rpx leading-40rpx mx-auto"
|
||||
:class="isClaimCoupon ? 'bg-[#E6E3DF]' : 'bg-[#FCCA84]'" @click="isClaimCoupon = true">
|
||||
{{ isClaimCoupon ? '已领取' : '立即领取' }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@ -202,17 +205,45 @@
|
||||
</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 {toast} from '@/utils/toast'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const navbarHeight = inject('navbarHeight')
|
||||
const rightPadding = inject('capsuleOffset')
|
||||
|
||||
// 登录信息相关
|
||||
const userInfo = ref<any>(null)
|
||||
const isLogin = ref<boolean>(false)
|
||||
const isLogin = ref<boolean>(true)
|
||||
const isVip = ref<boolean>(true)
|
||||
|
||||
|
||||
@ -240,29 +271,79 @@
|
||||
{ id: 3, title: '合创合伙人', icon: `${OSS}icon/icon_service_partner.png`, badge: '赚佣金', url: '' },
|
||||
])
|
||||
|
||||
// 推广码弹窗
|
||||
const showPompoCodePopup = ref<boolean>(false)
|
||||
|
||||
// 客服电话
|
||||
const showServiceMobile = ref<boolean>(false)
|
||||
const sheetMenu = ref<{ name: string}[]>([])
|
||||
|
||||
// 领取优惠券
|
||||
const isClaimCoupon = ref<boolean>(false)
|
||||
|
||||
onLoad(() => {
|
||||
|
||||
})
|
||||
|
||||
const my = {
|
||||
// 跳转抖音团购
|
||||
handleToDouYinGroupBuying() {
|
||||
handleToDouYinGroupBuying: () => {
|
||||
uni.navigateTo({
|
||||
url: '/bundle/order/douyin/order-list'
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转到个人信息
|
||||
handleToProfile: () => {
|
||||
|
||||
uni.navigateTo({
|
||||
url: '/bundle/profile/profile'
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转平台团购
|
||||
handleToPlatformGroupBuying() {
|
||||
handleToPlatformGroupBuying: () => {
|
||||
uni.navigateTo({
|
||||
url: '/bundle/order/platform/order-list'
|
||||
})
|
||||
},
|
||||
|
||||
handleToService: () => {
|
||||
uni.navigateTo({
|
||||
url: '/src/pages/my/service/service'
|
||||
// 点击显示客服电话
|
||||
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('请先登录')
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}, 800)
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转到会员权益
|
||||
handleToVipBenefits: () => {
|
||||
if (isLogin.value) {
|
||||
uni.navigateTo({
|
||||
url: '/bundle/vip-benefits/vip-benefits'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user