menduner-uniapp/pages/index/my.vue

<template>
  <view>
		<Navbar title="我的" />
		<layout-page>
			<view :style="{'padding-top': navbarHeight + 'px'}">
				<view class="commonBackground"></view>
				<view class="pb-150 defaultBgc">
					<view class="text-center ss-p-b-30" :class="vip ? 'vipBox' : 'avatarBox'" @tap="handleLogin" style="position: relative;">
						<img :src="getUserAvatar(userInfo?.avatar, userInfo?.sex)" alt="" class="img-box">
						<image v-if="vip" src="/static/svg/vip.svg" class="vipIcon"></image>
						<view v-if="!useUserStore.isLogin" class="font-weight-bold font-size-20">点击登录</view>
						<view v-else class="ss-m-t-30">
							<view>
								<span class="font-weight-bold font-size-20">{{ userInfo?.name || userInfo?.phone }}</span>
								<uni-icons @tap="handleEdit('/pagesB/staffInfoEdit/index')" class="ss-m-l-10" type="compose" :size="22"></uni-icons>
							</view>
							<view style="color: #0E100F" class="ss-m-t-20">
								<span>{{ formatName(userInfo?.enterpriseAnotherName || userInfo?.enterpriseName) }}</span>
								<uni-icons @tap="handleEdit('/pagesB/companyInfoEdit/index')" class="ss-m-l-10" type="compose" :size="22"></uni-icons>
							</view>
						</view>
					</view>

					<view class="defaultBgc ss-p-t-30">
						<view class="list-card">
							<uni-list>
								<uni-list-item
									v-for="item in list"
									:clickable="true"
									:key="item.title"
									:title="item.title"
									showArrow
									:rightText="item.rightTex || ''"
									@click="handleToLink(item)"
								>
								</uni-list-item>
							</uni-list>
						</view>
				
						<button v-if="useUserStore.isLogin" class="send-button" style="margin-bottom: 50px;" @tap="handleLogout">退出登录</button>
					</view>
			
					<uni-popup ref="popup" type="dialog">
						<uni-popup-dialog type="warn" cancelText="取消" confirmText="确定" title="系统提示" content="确认退出账号？" @confirm="handleLogoutConfirm"
							@close="handleLogoutClose"></uni-popup-dialog>
					</uni-popup>

					<uni-popup ref="inputDialog" type="dialog">
						<view class="shareQrCodePopupContent">
							<view>请前往网页版{{ dialogType ? '门墩儿招聘' : '门墩儿商城' }}</view>
							<uni-link class="ss-m-t-10" :href="dialogType ? 'https://www.menduner.com' : 'https://www.menduner.com/mall'" text="点击复制网页地址" color="#00B760" fontSize="16" copyTips="已复制，请在电脑端打开"></uni-link>
						</view>
					</uni-popup>
				</view>
			</view>
		</layout-page>
	</view>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { userStore } from '@/store/user'
import { getUserAvatar } from '@/utils/avatar'
import { getAccessToken } from '@/utils/request'
import layoutPage from '@/layout'
import { formatName } from '@/utils/getText'
import { showAuthModal } from '@/hooks/useModal'
import { onShow, onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import Navbar from '@/components/Navbar'

const navbarHeight = ref(uni.getStorageSync('navbarHeight'))

// 设置自定义tabbar选中值
onShow(() => {
    const currentPage = getCurrentPages()[0];  // 获取当前页面实例
    const currentTabBar = currentPage?.getTabBar?.();

    // 设置当前tab页的下标index
    currentTabBar?.setData({ selected: 4 });
})

const inputDialog = ref()
const useUserStore = userStore()
const userInfo = computed(() => useUserStore?.userInfo)

const vip = computed(() => new Date().getTime() < useUserStore?.userInfo?.vipExpireDate)

const popup = ref()

const defaultList = [
	{ title: '简历管理', path: '/pagesA/resume/index' },
	{ title: '面试管理', path: '/pagesA/interview/index' },
	{ title: '修改密码', path: '/pagesA/editPassword/index' },
	{ title: '联系我们', path: '/pagesB/contactUs/index' },
	{ title: '协议中心', path: '/pagesB/agreement/index', open: true },
	{ title: '我要求职', appId: 'wx5dd538ccc752b03a' },
]
const list = ref(defaultList.filter(e => !e.defaultHide))

onLoad(() => {
  wx.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
  })
  onShareAppMessage(() => {
    return {
      title: '门墩儿 专注顶尖招聘',
      path: '/pages/index/position',
			imageUrl: '../../static/img/share-poster.jpg'
    }
  })
	onShareTimeline(() => {
    return {
      title: '门墩儿 专注顶尖招聘',
      path: '/pages/index/position',
			imageUrl: '../../static/img/share-poster.jpg'
    }
  })
})

// 列表跳转
const dialogType = ref('')
const handleToLink = (item) => {
	if (item.open && item.path) return uni.navigateTo({ url: item.path })
	if (item.appId) {
		uni.navigateToMiniProgram({
			appId: item.appId,
		})
		return
	}
	if (item?.showDialog) {
		dialogType.value = 0
		inputDialog.value.open()
		return
	}
	if (!item.path) return
  if (!getAccessToken()) {
		uni.showToast({
			title: '请先登录',
			icon: 'none'
		})
		showAuthModal()
		return
	}
	uni.navigateTo({
		url: item.path
	})
}

const handleEdit = (url) => {
	if (!useUserStore.isLogin) {
		showAuthModal()
		return
	}
	if (!url) return
	uni.navigateTo({
		url
	})
}

// 退出登录
const handleLogout = () => {
  popup.value.open()
}
const handleLogoutClose = () => {
  popup.value.close()
}
const handleLogoutConfirm = () => {
	// list.value = defaultList.filter(e => !e.hide) // 重置菜单
  useUserStore.handleLogout()
}
const handleLogin = () => {
  if (!getAccessToken()) {
		showAuthModal()
	}
}
</script>

<style scoped lang="scss">
.list-card {
	margin: 0 30rpx 30rpx 30rpx;
	border-radius: 20rpx;
	overflow: hidden;
}
.pb-150 {
	padding-bottom: 100px;
}
.img-box {
  width: 150rpx;
  height: 150rpx;
  border: 2rpx solid #ccc;
  border-radius: 50%;
}
.vipBox {
	color: #a18a0f;
	.img-box {
    border: 1px solid gold;
	}
	.vipIcon {
		position: absolute;
		width: 45px;
		height: 24px;
		top: 60px;
		left: 50%;
	}
}
:deep(.uni-list-item) {
	height: 120rpx !important;
	line-height: 120rpx !important;
}
:deep(.uni-list-item__content-title) {
	font-size: 28rpx !important;
}

:deep(.uniui-arrowright) {
	color: #0E100F !important;
}
.shareQrCodePopupContent {
	width: 75vw;
	padding: 40rpx;
	margin-bottom: 20rpx;
	text-align: center;
	background-color: #fff;
	.text {
		margin-bottom: 20px;
	}
	.qrCode {
		margin-left: 4px;
	}
	.saveImg {
		text-align: center;
		margin-top: 10px;
		color: #999;
	}
}
</style>