menduner-uniapp/pages/index/my.vue

<template>
  <view class="ss-p-b-30">
    <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 class="d-flex" style="margin-top: 80rpx;">
      <view v-for="(item, index) in itemList" :key="index" @tap="handleToLink(item)" class="parent">
				<view class="d-flex justify-space-between">
					<view>
						<view class="colors">
							<span>查看更多</span>
							<uni-icons color="#c8c5c4" type="right" size="15" class="ml"/>
						</view>
						<view class="size-16">{{ item.title }}</view>
					</view>
					<view>
						<uni-icons color="#00897B" :type="item.icon" size="45"/>
					</view>
				</view>
			</view>
    </view>

    <view style="height: 10rpx; 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" @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>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { userStore } from '@/store/user'
import { getUserAvatar } from '@/utils/avatar'
import { getAccessToken } from '@/utils/request'

const useUserStore = userStore()
const baseInfo = computed(() => useUserStore?.baseInfo)
const userInfo = computed(() => useUserStore?.userInfo)
const popup = ref()
const itemList = [
	{ title: "面试管理", path: "/pagesA/interview/index", icon: "list" },
	{ title:'谁看过我', path:'/pagesA/seenMe/index', icon:'staff' }
]

const list = [
	{	title: '附件简历',	path: '/pagesA/resume/index'	},					
	{ title: '我的收藏', path: '/pagesA/collect/index' },
	{ title: '前往门墩儿甄选商城', appId: 'wx6decdf12f9e7a061' },
	{ title: '切换为求职者', rightTex: '我要找工作' }
]

// 列表跳转
const handleToLink = (item) => {
	if (item.appId) {
		uni.navigateToMiniProgram({
			appId: item.appId,
			// extraData: {} // 要传递的数据
		})
		return
	}
	if (!item.path) return
  if (!getAccessToken()) {
		uni.showToast({
			title: '请先登录'
		})
		uni.navigateTo({
			url: '/pages/login/index'
		})
		return
	}
	uni.navigateTo({
		url: item.path
	})
}

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

// 退出登录
const handleLogout = () => {
  popup.value.open()
}
const handleLogoutClose = () => {
  popup.value.close()
}
const handleLogoutConfirm = () => {
  useUserStore.handleLogout()
}
</script>

<style scoped lang="scss">
.img-box {
  width: 150rpx;
  height: 150rpx;
  border: 2rpx solid #ccc;
  border-radius: 50%;
}
::v-deep .uni-list-item{
	height: 140rpx !important;
	line-height: 140rpx !important;
}
::v-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;
}
.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;
}
</style>