menduner-uniapp/pages/index/my.vue

<template>
  <view class="ss-p-b-30">
    <view class="text-center">
      <img :src="getUserAvatar(userInfo?.avatar, userInfo?.sex)" alt="" class="img-box">
      <view v-if="!useUserStore.isLogin" class="font-weight-bold font-size-20" @tap="handleLogin">点击登录</view>
      <view v-else class="font-weight-bold font-size-20">{{ userInfo.name || userInfo.phone }}</view>
    </view>
    <view style="margin-top: 80rpx;">
      <uni-grid :column="4" :show-border="false">
        <uni-grid-item :index="0" v-for="(val, index) in grid" :key="index" class="text-center">
          <uni-icons :type="val.icon" size="40" color="#00897B"></uni-icons>
          <text class="font-size-13 color-999 mt-5">{{ val.title }}</text>
        </uni-grid-item>
      </uni-grid>
      </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'

const useUserStore = userStore()
const userInfo = computed(() => {
  return useUserStore.userInfo
})
const popup = ref()
const grid = [
  { title: '全部', icon: 'list' },
  { title: '被查看', icon: 'eye-filled' },
  { title: '面试邀约', icon: 'auth-filled' },
  { title: '不合适', icon: 'closeempty' }
]

const list = [
	{	title:'我的简历',	path:'/pagesA/resume/index'	},					
	{ title:'职位收藏', path:'/pagesA/collect/position' },
	{ title:'切换为招聘者', rightTex: '我要招人' }
]

// 列表跳转
const handleToLink = (item) => {
  if (item.path) {
    uni.navigateTo({
      url: item.path
    })
  }
}

// 登录
const handleLogin = () => {
  uni.navigateTo({
    url: '/pages/login/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;
}
</style>