<template> 
 | 
  <PageLayout title="设置" class="setting-page-wrapper" hasBorder> 
 | 
    <List> 
 | 
      <!-- <ListItem title="登录账号"> 
 | 
        <template #extra> 
 | 
          <div class="user-account"> 
 | 
            {{ userAccount }} 
 | 
          </div> 
 | 
        </template> 
 | 
      </ListItem> --> 
 | 
      <ListItem title="用户协议" @click="goMineUserPolicy"></ListItem> 
 | 
      <ListItem title="隐私政策" @click="goPrivacyPolicy"></ListItem> 
 | 
      <ListItem title="退出登录" @click="handleLoginout"></ListItem> 
 | 
    </List> 
 | 
  </PageLayout> 
 | 
</template> 
 | 
  
 | 
<script setup lang="ts"> 
 | 
import { PageLayout } from '@/components'; 
 | 
import { List, ListItem } from '@12333/components'; 
 | 
import { addStarForString, Message } from '@12333/utils'; 
 | 
import { useUserStore } from '@/stores/modules/user'; 
 | 
import { useQueryClient } from '@tanstack/vue-query'; 
 | 
import Taro from '@tarojs/taro'; 
 | 
  
 | 
defineOptions({ 
 | 
  name: 'setting', 
 | 
}); 
 | 
  
 | 
const userStore = useUserStore(); 
 | 
const queryClient = useQueryClient(); 
 | 
  
 | 
const userAccount = computed(() => { 
 | 
  return addStarForString(userStore?.userDetail?.userName, 4, 8); 
 | 
}); 
 | 
  
 | 
function goMineUserPolicy() { 
 | 
  Taro.navigateTo({ 
 | 
    url: RouterPath.mineUserPolicy, 
 | 
  }); 
 | 
} 
 | 
function goPrivacyPolicy() { 
 | 
  Taro.navigateTo({ 
 | 
    url: RouterPath.privacyPolicy, 
 | 
  }); 
 | 
} 
 | 
  
 | 
async function handleLoginout() { 
 | 
  try { 
 | 
    await Message.confirm({ 
 | 
      message: '确定要退出登录吗?', 
 | 
    }); 
 | 
    userStore.logoutAndToHome(); 
 | 
    queryClient.removeQueries({ 
 | 
      predicate: (query) => !query.queryKey.includes('taskServices/getOpenTaskInfos'), 
 | 
    }); 
 | 
  } catch (error) {} 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style lang="scss"> 
 | 
@import '@/styles/common.scss'; 
 | 
  
 | 
.user-account { 
 | 
  color: boleGetCssVar('text-color', 'regular'); 
 | 
  font-size: 24px; 
 | 
} 
 | 
</style> 
 |