532 lines
13 KiB
Vue
532 lines
13 KiB
Vue
<script setup lang="ts">
|
||
import * as R from "ramda";
|
||
import dayjs from 'dayjs'
|
||
import useEventEmit from "@/hooks/useEventEmit";
|
||
import { EventEnum } from "@/constant/enums";
|
||
import { useConfigStore, useUserStore } from "@/store";
|
||
import MineSkeleton from "./components/mine-skeleton.vue";
|
||
const configStore = useConfigStore();
|
||
const userStore = useUserStore();
|
||
import { Agreement } from "@/constant/enums";
|
||
import Config from '@/config/index'
|
||
import {formatTimestampWithMonthName, loadWeixinService} from "@/utils/utils";
|
||
const { t } = useI18n();
|
||
|
||
const loading = ref(true);
|
||
|
||
const emits = defineEmits<{
|
||
chooseLanguage: [];
|
||
logOut: [];
|
||
inviteUser: [];
|
||
customerService: [];
|
||
changeOrder: [];
|
||
}>();
|
||
interface Tab {
|
||
iconPath: string;
|
||
path: string;
|
||
text: string;
|
||
code: string;
|
||
isLogin: boolean;
|
||
}
|
||
|
||
const tabBarList = ref<Tab[]>([
|
||
{
|
||
iconPath: "/static/images/chef/100201.png",
|
||
path: "/pages-user/pages/coupon/index",
|
||
text: t("pages.mine.discount"),
|
||
code: "discount",
|
||
isLogin: true,
|
||
},
|
||
{
|
||
iconPath: "/static/images/chef/100200.png",
|
||
path: "/pages-user/pages/faqs/index",
|
||
text: t("pages.mine.help"),
|
||
code: "help",
|
||
isLogin: true,
|
||
},
|
||
{
|
||
iconPath: "/static/images/chef/100199.png",
|
||
path: "/pages-user/pages/coupon/index",
|
||
text: t("pages.mine.inviteFriends"),
|
||
code: "inviteFriends",
|
||
isLogin: true,
|
||
},
|
||
{
|
||
iconPath: "/static/images/100203.png",
|
||
path: "/pages-user/pages/invited-person/index",
|
||
text: t('pages.mine.my-invitations'),
|
||
code: "myInvitations",
|
||
isLogin: true,
|
||
},
|
||
{
|
||
iconPath: "/static/images/chef/100198.png",
|
||
path: "/pages-user/pages/store-settle-in/index",
|
||
text: t("pages.mine.storeSettled"),
|
||
code: "storeSettled",
|
||
isLogin: false,
|
||
},
|
||
{
|
||
iconPath: "/static/images/chef/100197.png",
|
||
path: "/pages-user/pages/coupon/index",
|
||
text: t("pages.mine.support"),
|
||
code: "support",
|
||
isLogin: true,
|
||
},
|
||
{
|
||
iconPath: "/static/images/chef/100196.png",
|
||
path: "/pages/agreement/index?code=" + Agreement.CHEF_PLATFORM_AGREEMENT,
|
||
text: t("pages.mine.platformAgreement"),
|
||
code: "platformAgreement",
|
||
isLogin: true,
|
||
},
|
||
{
|
||
iconPath: "/static/images/chef/100195.png",
|
||
path: "/pages/agreement/index?code=" + Agreement.PRIVACY_POLICY,
|
||
text: t("pages.mine.privacyPolicy"),
|
||
code: "privacyPolicy",
|
||
isLogin: true,
|
||
},
|
||
{
|
||
iconPath: "/static/images/chef/100194.png",
|
||
path: "/pages-user/pages/complaints/index",
|
||
text: t("pages.mine.complaintsAndSuggestions"),
|
||
code: "complaintsAndSuggestions",
|
||
isLogin: true,
|
||
},
|
||
{
|
||
iconPath: "/static/images/chef/100192.png",
|
||
path: "/pages-user/pages/setting/index",
|
||
text: t("pages.mine.set"),
|
||
code: "set",
|
||
isLogin: true,
|
||
},
|
||
]);
|
||
|
||
function navigateTo(url: string) {
|
||
if(userStore.checkLogin()) {
|
||
uni.navigateTo({
|
||
url,
|
||
});
|
||
}
|
||
}
|
||
|
||
function checkNeedLogin(isNeedLogin: boolean) {
|
||
return isNeedLogin ? userStore.checkLogin() : true;
|
||
}
|
||
|
||
// 用户会员状态是否已开通
|
||
const isUserMember = computed(()=> {
|
||
if(!userStore.userInfo.userMembershipVo) return false
|
||
if(userStore.userInfo.userMembershipVo && userStore.userInfo.userMembershipVo.expireTime ){
|
||
return dayjs().isBefore(dayjs(Number(userStore.userInfo.userMembershipVo.expireTime)))
|
||
} else {
|
||
return false
|
||
}
|
||
})
|
||
|
||
function handleTabClick(item: Tab) {
|
||
switch (item.code) {
|
||
case "inviteFriends": {
|
||
R.both(
|
||
checkNeedLogin,
|
||
R.pipe(() => emits("inviteUser"), R.T)
|
||
)(item.isLogin);
|
||
break;
|
||
}
|
||
case "support": {
|
||
// emits("customerService");
|
||
loadWeixinService()
|
||
break;
|
||
}
|
||
default: {
|
||
// navigateTo(item.path)
|
||
if (item.code === "set") {
|
||
navigateTo("/pages-user/pages/setting/index");
|
||
} else {
|
||
R.both(
|
||
checkNeedLogin,
|
||
R.pipe(() => navigateTo(item.path), R.T)
|
||
)(item.isLogin);
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
function changeOrderFn() {
|
||
emits("changeOrder");
|
||
}
|
||
|
||
async function initData() {
|
||
loading.value = false;
|
||
// setTimeout(() => {
|
||
// loading.value = false;
|
||
// }, 300);
|
||
userStore.getUserInfo()
|
||
}
|
||
|
||
async function getPlatformDefaultStoreInfo() {}
|
||
|
||
defineExpose({
|
||
initData,
|
||
init: getPlatformDefaultStoreInfo,
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<view
|
||
class="view-bg"
|
||
:style="[
|
||
{
|
||
height: configStore.windowHeight + 'px',
|
||
},
|
||
]"
|
||
>
|
||
<z-paging ref="paging">
|
||
<template #top>
|
||
<status-bar />
|
||
</template>
|
||
<view
|
||
v-show="loading"
|
||
class="animate-in fade-in animate-ease-out animate-duration-300"
|
||
>
|
||
<mine-skeleton />
|
||
</view>
|
||
<view
|
||
v-show="!loading"
|
||
class="animate-in fade-in animate-ease-in animate-duration-300"
|
||
>
|
||
<view class="mine-page ">
|
||
<!-- 顶部用户信息 -->
|
||
<view class="mine-header" @click="navigateTo('/pages-user/pages/user-info/index')">
|
||
<view class="mine-header__left">
|
||
<text class="mine-header__name">
|
||
{{
|
||
userStore.isLogin
|
||
? ([userStore.userInfo.firstName, userStore.userInfo.surname].filter(Boolean).join(' ') ||
|
||
t('common.unknownUser'))
|
||
: t('common.pleaseLogin')
|
||
}}
|
||
</text>
|
||
<view class="mine-header__sub" v-if="userStore.isLogin">
|
||
<text class="mine-header__member">{{ Config.appName }} {{ t('pages.mine.member') }}</text>
|
||
<view class="mine-header__badge" v-if="!isUserMember">
|
||
{{ t('pages.mine.openMember') }}
|
||
</view>
|
||
<text class="mine-header__chev">›</text>
|
||
</view>
|
||
<text class="mine-header__date" v-if="isUserMember && userStore.userInfo.userMembershipVo?.expireTime">
|
||
{{ t('common.expireTime') }}：{{ formatTimestampWithMonthName(userStore.userInfo.userMembershipVo?.expireTime) }}
|
||
</text>
|
||
</view>
|
||
|
||
<image
|
||
v-if="userStore.isLogin"
|
||
:src="userStore.userInfo.avatar"
|
||
class="mine-header__avatar"
|
||
mode="aspectFill"
|
||
/>
|
||
<image v-else class="mine-header__avatar" mode="aspectFill" src="@img/chef/default_avatar.png" />
|
||
</view>
|
||
|
||
<!-- 三项数据胶囊卡 -->
|
||
<view class="mine-stats">
|
||
<view class="mine-stats__item" @click="navigateTo('/pages-user/pages/collection/index')">
|
||
<text class="mine-stats__num">{{ userStore.userInfo.collectNum || 0 }}</text>
|
||
<text class="mine-stats__label">{{ t('pages.mine.collection') }}</text>
|
||
</view>
|
||
<view class="mine-stats__divider" />
|
||
<view class="mine-stats__item" @click="navigateTo('/pages-user/pages/balance/index')">
|
||
<text class="mine-stats__num">{{ userStore.userInfo?.balance || 0 }}</text>
|
||
<text class="mine-stats__label">{{ t('pages.mine.wallet') }}</text>
|
||
</view>
|
||
<view class="mine-stats__divider" />
|
||
<view class="mine-stats__item" @click="changeOrderFn">
|
||
<text class="mine-stats__num">{{ userStore.userInfo.orderNum || 0 }}</text>
|
||
<text class="mine-stats__label">{{ t('pages.mine.order') }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<template v-if="isUserMember">
|
||
<view @click="navigateTo('/pages-user/pages/member/index')" class="member-banner">
|
||
<image src="@img/chef/100203.png" class="member-banner__bg"></image>
|
||
<view class="member-banner__content">
|
||
<view class="member-banner__title">{{ Config.appName }}</view>
|
||
<view class="member-banner__sub">
|
||
{{ t('common.expireTime') }}：{{ formatTimestampWithMonthName(userStore.userInfo.userMembershipVo?.expireTime) }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<view @click="navigateTo('/pages-user/pages/member/index')" class="member-banner">
|
||
<image src="@img/chef/100203.png" class="member-banner__bg"></image>
|
||
<view class="member-banner__content">
|
||
<view class="member-banner__title">
|
||
<template v-if="!userStore.userInfo.userMembershipVo">{{ t('pages.mine.member-title') }}</template>
|
||
<template v-else>{{ t('pages.mine.join') }} {{ Config.appName }}</template>
|
||
</view>
|
||
<view class="member-banner__sub">{{ t('pages.mine.member-desc') }}</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<view style="height: 30rpx;background-color: #f5f5f5;" />
|
||
|
||
<!-- 菜单列表卡片 -->
|
||
<view class="mine-menu">
|
||
<view
|
||
class="mine-menu__row"
|
||
v-for="(item, index) in tabBarList"
|
||
:key="item.code"
|
||
:class="[index === tabBarList.length - 1 ? 'mine-menu__row--last' : '']"
|
||
@click="handleTabClick(item)"
|
||
>
|
||
<view class="mine-menu__left">
|
||
<image class="mine-menu__icon" :src="item.iconPath"></image>
|
||
<text class="mine-menu__text">{{ item.text }}</text>
|
||
</view>
|
||
<image class="mine-menu__arrow" src="@img/chef/100202.png"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mine-bottom-spacer" />
|
||
</view>
|
||
|
||
</view>
|
||
<template #bottom>
|
||
<view class="h-50px"></view>
|
||
<view :style="[configStore.iosSafeBottomPlaceholder]"></view>
|
||
</template>
|
||
</z-paging>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.view-bg {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.mine-page {
|
||
padding-bottom: 20rpx;
|
||
}
|
||
|
||
.mine-header {
|
||
margin: 0 30rpx;
|
||
padding: 32rpx 0 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
&__left {
|
||
min-width: 0;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
&__name {
|
||
font-size: 38rpx;
|
||
line-height: 40rpx;
|
||
font-weight: 700;
|
||
color: #333;
|
||
letter-spacing: 0.04em;
|
||
max-width: 520rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
&__sub {
|
||
margin-top: 12rpx;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
color: #b68b3e;
|
||
font-size: 22rpx;
|
||
line-height: 22rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
&__member {
|
||
color: #b68b3e;
|
||
}
|
||
|
||
&__badge {
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 999rpx;
|
||
background: rgba(182, 139, 62, 0.12);
|
||
color: #b68b3e;
|
||
font-size: 20rpx;
|
||
line-height: 20rpx;
|
||
font-weight: 700;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
&__chev {
|
||
transform: translateY(-1rpx);
|
||
color: #b68b3e;
|
||
font-size: 24rpx;
|
||
line-height: 22rpx;
|
||
}
|
||
|
||
&__date {
|
||
margin-top: 10rpx;
|
||
font-size: 22rpx;
|
||
line-height: 22rpx;
|
||
color: #999;
|
||
font-weight: 500;
|
||
}
|
||
|
||
&__avatar {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
background-color: #eee;
|
||
}
|
||
}
|
||
|
||
.mine-stats {
|
||
margin: 15rpx 35rpx;
|
||
// margin-top: 24rpx;
|
||
background: #fff;
|
||
border-radius: 36rpx;
|
||
height: 120rpx;
|
||
padding: 0 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
box-shadow: 0 12rpx 30rpx rgba(10, 10, 10, 0.06);
|
||
|
||
&__item {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8rpx;
|
||
|
||
}
|
||
|
||
&__num {
|
||
font-size: 32rpx;
|
||
line-height: 30rpx;
|
||
font-weight: 700;
|
||
color: #333;
|
||
}
|
||
|
||
&__label {
|
||
font-size: 26rpx;
|
||
line-height: 28rpx;
|
||
color: #666;
|
||
font-weight: 700;
|
||
letter-spacing: 0.04em;
|
||
// font-weight: 500;
|
||
}
|
||
|
||
&__divider {
|
||
width: 1rpx;
|
||
height: 56rpx;
|
||
background: #eaeaea;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
.member-banner {
|
||
margin: 15rpx 30rpx;
|
||
height: 152rpx;
|
||
position: relative;
|
||
border-radius: 36rpx;
|
||
overflow: hidden;
|
||
|
||
&__bg {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
&__content {
|
||
position: relative;
|
||
z-index: 1;
|
||
height: 100%;
|
||
padding: 22rpx 165rpx 22rpx 28rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
&__title {
|
||
font-size: 32rpx;
|
||
line-height: 32rpx;
|
||
font-weight: 800;
|
||
color: #333;
|
||
}
|
||
|
||
&__sub {
|
||
font-size: 20rpx;
|
||
line-height: 20rpx;
|
||
font-weight: 600;
|
||
color: #935d04;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
}
|
||
|
||
.mine-menu {
|
||
margin:20rpx 30rpx 30rpx;
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
|
||
&__row {
|
||
padding: 28rpx 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1rpx solid #efefef;
|
||
}
|
||
|
||
&__row--last {
|
||
border-bottom: none;
|
||
}
|
||
|
||
&__left {
|
||
min-width: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 18rpx;
|
||
}
|
||
|
||
&__icon {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
&__text {
|
||
font-size: 26rpx;
|
||
line-height: 26rpx;
|
||
color: #333;
|
||
// font-weight: 600;
|
||
letter-spacing: 0.04em;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
&__arrow {
|
||
width: 22rpx;
|
||
height: 30rpx;
|
||
flex-shrink: 0;
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
.mine-bottom-spacer {
|
||
height: 58rpx;
|
||
}
|
||
</style>
|