menduner-uniapp/pages/index/my.vue

<template>
  <view>
		<Navbar title="我的" />
		<layout-page>
			<view :style="{'padding-top': navbarHeight + 'px'}">
				<view class="commonBackground"></view>
				<view class="defaultBgc" style="padding-bottom: 100rpx;">
					<view class="ss-p-x-30 d-flex justify-space-between align-center" @tap="handleTap">
						<view class="img-box" :class="vip ? 'vipBox' : ''">
							<img :src="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)" alt="" class="img default-border">
							<image v-if="vip" src="/static/svg/vip.svg" class="vipIcon" @click.stop="handleToLink({path: '/pagesA/vip/index'})"></image>
						</view>
						<view  style="z-index: 1 !important;">
							<view v-if="!useUserStore.isLogin" class="">
								<view class="MiSans-Medium default-text-color font-size-28rpx">点击登录/注册</view>
								<view class="MiSans-Normal color-666 ss-m-t-10" style="font-size: 24rpx;">Hi 欢迎登录门墩儿</view>
							</view>
							<view v-else class="MiSans-Medium font-size-20 default-text-color">{{ baseInfo?.name || userInfo?.phone }}</view>
						</view>
					</view>
				
					<view class="d-flex justify-space-between align-center">
						<resume-status style="flex: 1" />
						<view style="width: 100px; z-index: 1;" class="ss-m-r-30">
							<image 
								src="https://minio.menduner.com/dev/fe9890be9b1176f84f2aa282b0f6adce300b133f65eb3d7b45ae057aa5698324.png" 
								style="width: 93px; height: 40px;"
							></image>
						</view>
					</view>
					
					<view class="d-flex" style="margin: 30rpx; border-radius: 20rpx;">
						<view v-for="(item, index) in itemList" :key="index" @tap="handleToLink(item)" class="parent">
							<view class="d-flex align-center">
								<image :src="item.src" mode="" style="width: 70rpx; height: 60rpx;"></image>
								<text class="ss-m-l-30 default-text-color">{{ item.title }}</text>
							</view>
						</view>
					</view>
						
						
					<view class="list-card">
						<uni-list>
							<uni-list-item
								v-for="item in list"
								:clickable="true"
								:key="item.title"
								:title="item.title"
								showArrow
								:thumb="item.src"
								thumb-size="sm"
								: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>
						
					<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 class="ss-m-b-10 MiSans-Normal">请前往网页版{{ dialogType ? '门墩儿招聘' : '门墩儿商城' }}</view>
							<uni-link class="MiSans-Normal" :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 ResumeStatus from '@/components/ResumeStatus'
import { userStore } from '@/store/user'
import { getUserAvatar } from '@/utils/avatar'
import { getAccessToken, showNecessaryInfoPopup } from '@/utils/request'
import layoutPage from '@/layout'
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 baseInfo = computed(() => useUserStore?.baseInfo)
const userInfo = computed(() => useUserStore?.userInfo)
const vip = computed(() => new Date().getTime() < useUserStore?.userInfo?.vipExpireDate)

const popup = ref()
const itemList = [
	{ title: "我的关注", path: "/pagesA/collect/index", src: "https://minio.menduner.com/dev/0490f8bd7d4894d6eb3001ba6a6c9080bbc3623113bf0050342466cdb44ccec6.png" },
	{ title:'关注我的', path:'/pagesA/seenMe/index', src:'https://minio.menduner.com/dev/f6079be237dd39aa0929db31b7b35835e109b448ba0e1f278df64fa9391e6634.png' }
]

const defaultList = [
	{	title: '在线简历',	path: '/pagesA/resumeOnline/index', src: 'https://minio.menduner.com/dev/ec05228053a844dfa89d3bcb3750aaf2571bff4c8e04a5de6dbee2e68200e792.png'	},					
	{	title: '附件简历',	path: '/pagesA/resume/index', src: 'https://minio.menduner.com/dev/d2687a2081847b092fc839880dd12fd7f374c58afeb07d567ae7cdfe8d68ce54.png'	},					
	{ title: '学生专区', path: '/pagesA/student/index', key: 'student', defaultHide: true, src: 'https://minio.menduner.com/dev/ec05228053a844dfa89d3bcb3750aaf2571bff4c8e04a5de6dbee2e68200e792.png' },
	{ title: '面试管理', path: '/pagesA/interview/index', src: 'https://minio.menduner.com/dev/747122b480d8358096e5848d0039cce0c8b8cf2a52f0409d073cc733cf4c0224.png' },
	{	title: '会员套餐', path: '/pagesA/vipPackage/index', src: 'https://minio.menduner.com/dev/4e9f86f6a48b78c1aca7a6a6b3c5971044275a7f890f73d7c3b981f125378a0f.png'	},		
	{	title: '我的分享码',	path: '/pagesB/sharePoster/index', src: 'https://minio.menduner.com/dev/32e78eca5e003bb0136d874a973b582581eb4f9d3c746fb11ed3cc7f41a9b0e9.png'	},					
	{	title: '新用户邀请记录',	path: '/pagesB/inviteRecord/index', src: 'https://minio.menduner.com/dev/53c36e2fb4cb3b7852bcb9ce7584d9f4c1daaed034a065c33fdb4acd2f4b89b8.png'	},
	{ title: '门墩儿商城', appId: 'wx6decdf12f9e7a061', src: 'https://minio.menduner.com/dev/1f83900522317f36618b4b8314c2b6263c30d43ff1c0e8738903f85996f165d3.png' },
	{ title: '我要招聘', key: 'recruit', src:'https://minio.menduner.com/dev/c8e7d358858eaf9bfe197473751d04d1bc79598b9ce6ecf882ec61c79b0d3bae.png' },
	{ title: '联系我们', path: '/pagesB/contactUs/index', src: 'https://minio.menduner.com/dev/747122b480d8358096e5848d0039cce0c8b8cf2a52f0409d073cc733cf4c0224.png' },
	{ title: '协议中心', path: '/pagesB/agreement/index', open: true, src: 'https://minio.menduner.com/dev/58cc8847965aaa4e80064732a2024b690ff2285aa57cc4d133846a1e06a23478.png' }
]
const list = ref(defaultList.filter(e => !e.defaultHide))

watch(
  () => baseInfo.value, 
  (newVal) => {
		if (newVal) {
			list.value = defaultList.map(e => { // 不改变原数组，退出登录需要重置菜单
				let hide = e.defaultHide
				if (e?.key === 'student' && newVal.type === '1') hide = false // 学生信息管理。 type:0是求职者，1是学生
				return hide ? null : e
			}).filter(Boolean)
		}
  },
  { immediate: true },
  // { deep: true }
)

watch(
  () => vip.value, 
  (newVal) => {
		if (newVal) list.value.splice(3, 0, {	title: 'vip权益', key: 'vip',	path: '/pagesA/vip/index'	})
		else list.value = list.value.filter(e => !e.key || e.key !== 'vip')
  },
  { immediate: true },
  // { deep: true }
)

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 openSubscribe = (path) => {
  wx.requestSubscribeMessage({
    tmplIds: ['2dByiI4wf6D3ZmxDH1QywH264F3N-9ysnvsS7xQm4PE'],
    success:(res)=>{
      console.log(res, 'uni.requestSubscribeMessage-res')
			uni.navigateTo({
				url: path
			})
    },
    fail:(err)=>{
      console.log('订阅失败', err)
			uni.navigateTo({
				url: path
			})
    }
  })
}

// 列表跳转
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
		// uni.showToast({
		// 	title: '请前往网页版门墩儿商城',
		// 	icon: 'none'
		// })
		dialogType.value = 0
		inputDialog.value.open()
	}
	if (item.key === 'recruit') {
		dialogType.value = 1
		inputDialog.value.open()
	}
	if (!item.path) return
  if (!getAccessToken()) {
		uni.showToast({
			title: '请先登录',
			icon: 'none'
		})
		showAuthModal()
		return
	}
  if (showNecessaryInfoPopup()) {
		uni.showToast({
			title: '请先完善基本信息',
			icon: 'none'
		})
		showAuthModal('necessaryInfo')
		return
	}
	// 点击在线简历需调起订阅消息
	if (item.title === '在线简历'){
		openSubscribe(item.path)
		return
	}
	uni.navigateTo({
		url: item.path
	})
}

// 登录
const handleTap = () => {
	if (!useUserStore.isLogin) {
		showAuthModal()
		return
	}
	uni.navigateTo({
		url: '/pagesA/resumeOnline/index'
	})
}

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

<style scoped lang="scss">
.font-size-28rpx {
	font-size: 28rpx;
}
.list-card {
	background-color: #fff;
	border-radius: 20rpx;
	margin: 30rpx;
}
.img-box {
	position: relative;
	display: flex;
	justify-content: center;
	.img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
}
.vipBox {
	color: #a18a0f;
	.img {
    border: 1px solid gold;
	}
	.vipIcon {
		position: absolute;
		width: 45px;
		height: 24px;
		bottom: 1px;
		left: 50%;
	}
}
:deep(.uni-list-item) {
	height: 120rpx !important;
	line-height: 120rpx !important;
	&:first-child {
		border-radius: 20rpx 20rpx 0 0;
	}
	&:last-child {
		border-radius: 0 0 20rpx 20rpx;
	}
}
:deep(.uni-list-item__content-title) {
	font-size: 28rpx !important;
	font-family: MiSans-Medium;
}
:deep(.uniui-arrowright) {
	color: #0E100F !important;
}
.parent{
	width: 50%;
	border-radius: 20rpx;
	background-color: #fff;
	padding: 30rpx;
	z-index: 1;
}
.parent:first-child{
	margin-right: 20rpx;
}
.shareQrCodePopupContent {
	width: 75vw;
	padding: 40rpx;
	margin-bottom: 20rpx;
	text-align: center;
	background-color: #fff;
	border-radius: 20rpx;
	.text {
		margin-bottom: 20px;
	}
	.qrCode {
		margin-left: 4px;
	}
	.saveImg {
		text-align: center;
		margin-top: 10px;
		color: #999;
	}
}
</style>