menduner-uniapp/pages/index/my.vue

<template>
  <layout-page>
		<view class="pb-120">
			<view class="text-center" @tap="handleTap">
				<img :src="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)" alt="" class="img-box">
				<view v-if="!useUserStore.isLogin" class="font-weight-bold font-size-20">点击登录</view>
				<view v-else class="font-weight-bold font-size-20">{{ baseInfo?.name || userInfo?.phone }}</view>
			</view>
			<view style="padding: 40rpx 0 0 0;">
				<resume-status></resume-status>
			</view>
			
			<view class="d-flex">
				<view v-for="(item, index) in itemList" :key="index" @tap="handleToLink(item)" class="parent">
					<view class="d-flex justify-space-around align-center">
						<uni-icons color="#00897B" :type="item.icon" size="30"/>
						<text class="itemText">{{ item.title }}</text>
					</view>
				</view>
			</view>
	
			<view style="height: 20rpx; background-color: #f8f8fa;"></view>
	
			<view class="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 ss-m-b-30" @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="shareQrCodePopup" type="dialog">
				<view class="shareQrCodePopupContent">
					<view class="color-primary text">邀请用户注册领50积分</view>
					<view class="qrCode">
						<image :src="shareUrl" style="width: 200px;height: 200px;"></image>
					</view>
					<!-- <button v-if="shareUrl" class="send-button ss-m-b-30" @tap="handleSaveShareUrl">保存</button> -->
				</view>
			</uni-popup>
		</view>
	</layout-page>
</template>

<script setup>
import { ref, computed } from 'vue'
import ResumeStatus from '@/components/ResumeStatus'
import { userStore } from '@/store/user'
import { getUserAvatar } from '@/utils/avatar'
import { getAccessToken } from '@/utils/request'
import layoutPage from '@/layout'
import { showAuthModal } from '@/hooks/useModal'
import { onShow } from '@dcloudio/uni-app'
import { getJobAdvertisedShareQrcode } from '@/api/user'
// import { base64src } from '@/utils/base64src.js'
// 设置自定义tabbar选中值
onShow(() => {
    const currentPage = getCurrentPages()[0];  // 获取当前页面实例
    const currentTabBar = currentPage?.getTabBar?.();

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

const useUserStore = userStore()
const baseInfo = computed(() => useUserStore?.baseInfo)
const userInfo = computed(() => useUserStore?.userInfo)
const popup = ref()
const shareQrCodePopup = ref()
const itemList = [
	{ title: "我的关注", path: "/pagesA/collect/index", icon: "list" },
	{ title:'关注我的', path:'/pagesA/seenMe/index', icon:'staff' }
]

const list = [
	{	title: '我的分享码',	path: 'shareQrCode'	},					
	{	title: '在线简历',	path: '/pagesA/resumeOnline/index'	},					
	{	title: '附件简历',	path: '/pagesA/resume/index'	},					
	{ title: '面试管理', path: '/pagesA/interview/index' },
	{ title: '门墩儿商城', appId: 'wx6decdf12f9e7a061' },
	{ title: '我要招聘', key: 'recruit' }
]

// 列表跳转
const handleToLink = (item) => {
	if (item.appId) {
		// uni.navigateToMiniProgram({
		// 	appId: item.appId,
		// })
		// return
		uni.showToast({
			title: '请前往网页版门墩儿商城',
			icon: 'none'
		})
	}
	if (item.key === 'recruit') {
		uni.showToast({
			title: '请前往网页版门墩儿招聘',
			icon: 'none'
		})
	}
	if (!item.path) return
  if (!getAccessToken()) {
		uni.showToast({
			title: '请先登录',
			icon: 'none'
		})
		showAuthModal()
		return
	}
  if (item.path === 'shareQrCode') {
		handleShareCode()
		return
	}
	uni.navigateTo({
		url: item.path
	})
}

const shareUrl = ref()
// 生成分享二维码
const handleShareCode = async () => {
	const userId = useUserStore?.accountInfo?.userId || ''
	if (!userId) {
		uni.showToast({
			title: '请先登录',
			icon: 'none'
		})
	}
	const query = {
		scene: 'shareId=' + userId,
		path: 'pages/login/index',
		width: 200,
		autoColor: false,
		checkPath: true,
		hyaline: true
	}
	const res = await getJobAdvertisedShareQrcode(query)
	shareUrl.value = res?.data ? 'data:image/png;base64,' + res.data : ''
	shareQrCodePopup.value.open()
}

// 保存到本地
const handleSaveShareUrl = async () => {
	const convertData = await base64src(shareUrl.value, '我的分享码')
}

// 登录
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 = () => {
  useUserStore.handleLogout()
}
</script>

<style scoped lang="scss">
.pb-120 {
	padding-bottom: 120rpx;
}
.img-box {
  width: 150rpx;
  height: 150rpx;
  border: 2rpx solid #ccc;
  border-radius: 50%;
}
:deep(.uni-list-item) {
	height: 120rpx !important;
	line-height: 120rpx !important;
}
:deep(.uni-list-item__content-title) {
	font-size: 32rpx !important;
	font-weight: 500;
}
.colors{
	font-size: 24rpx;
	color: #606266;
}
.size-16{
	color: #3f424f;
	font-size: 32rpx;
	margin: 13rpx 0 5rpx 0;
}
.itemText {
	color: #3f424f;
	font-size: 36rpx;
}
.parent{
	width: 50%;
	border: 1px solid #f4f4f4;
	border-radius: 10rpx;
	margin: 0 30rpx 20rpx 30rpx;
	padding: 20rpx;
}
.parent:first-child{
	margin: 0 0 20rpx 30rpx;
}
.shareQrCodePopupContent {
	// width: 80vw;
	// display: flex;
	// flex-direction: column;
	margin: 30rpx;
	padding: 50rpx;
	text-align: center;
	background-color: #fff;
	.text {
		margin-bottom: 20px;
	}
	.qrCode {
		margin-left: 4px;
	}
}
</style>