125 lines
4.1 KiB
Vue
125 lines
4.1 KiB
Vue
<script lang="ts" setup>
|
|
import { NButton } from 'naive-ui'
|
|
import { useRouter } from 'vue-router'
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
import { Local } from "@/utils/storage/storage";
|
|
const router = useRouter()
|
|
const ms = useMessage()
|
|
const startX = ref(0)
|
|
const startY = ref(0)
|
|
const endX = ref(0)
|
|
const endY = ref(0)
|
|
|
|
function goBack() {
|
|
router.go(-1)
|
|
}
|
|
|
|
function handleTouchStart(e) {
|
|
startX.value = e.touches[0].pageX
|
|
startY.value = e.touches[0].pageY
|
|
}
|
|
|
|
function handleTouchMove(e) {
|
|
endX.value = e.touches[0].pageX
|
|
endY.value = e.touches[0].pageY
|
|
if (endX.value - startX.value > 50 && Math.abs(endY.value - startY.value) < 50) {
|
|
goBack()
|
|
}
|
|
}
|
|
function showTips() {
|
|
ms.warning('请拨打客服电话18051299227进行注销')
|
|
}
|
|
function logOut() {
|
|
Local.clear()
|
|
router.push('/login')
|
|
}
|
|
onMounted(() => {
|
|
document.addEventListener('touchstart', handleTouchStart, false)
|
|
document.addEventListener('touchmove', handleTouchMove, false)
|
|
})
|
|
onUnmounted(() => {
|
|
document.removeEventListener('touchstart', handleTouchStart, false)
|
|
document.removeEventListener('touchmove', handleTouchMove, false)
|
|
})
|
|
// 跳转服务协议
|
|
const goServeInfo = () => {
|
|
router.push('/serveInfo')
|
|
};
|
|
// 跳转隐私权政策
|
|
const goPrivateInfo = () => {
|
|
router.push('/privateInfo')
|
|
};
|
|
const userInfo = ref(JSON.parse(localStorage.getItem('userInfo')))
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex h-full">
|
|
<div class="header">
|
|
<n-page-header subtitle="" @back="goBack"></n-page-header>
|
|
</div>
|
|
<div class="w-full bg-white shadow-lg rounded-2xl dark:bg-gray-800 mt-40 ">
|
|
<div class="flex flex-col items-center justify-center p-4 -mt-16">
|
|
<a href="#" class="relative block">
|
|
<img alt="profil" :src="userInfo.Avatar" class="mx-auto object-cover rounded-full h-16 w-16 " />
|
|
</a>
|
|
<p class="mt-2 text-xl font-medium text-gray-800 dark:text-white">
|
|
{{ userInfo.NickName }}
|
|
</p>
|
|
<p class="flex items-center text-xs text-gray-400">
|
|
<svg width="10" height="10" fill="currentColor" class="w-4 h-4 mr-2" viewBox="0 0 1792 1792"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z">
|
|
</path>
|
|
</svg>
|
|
{{ userInfo.JobNum }}
|
|
</p>
|
|
<p class="text-xs text-gray-400">
|
|
{{ userInfo.DepartmentName }}
|
|
</p>
|
|
<div class="flex items-center justify-between w-full gap-4 mt-8">
|
|
<button type="button" style="background-color:#f0a020 ;" @click="logOut"
|
|
class="py-2 px-4 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg ">
|
|
退出登录
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center justify-between w-full gap-4 mt-8">
|
|
<button type="button" style="background-color: #FF0000;" @click="showTips"
|
|
class="py-2 px-4 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg ">
|
|
注销账号
|
|
</button>
|
|
</div>
|
|
<div class="txt">
|
|
<text class="col" @click="goServeInfo">《平台服务协议》</text>
|
|
<text class="col" @click="goPrivateInfo">《隐私权政策》</text>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.header {
|
|
width: 100%;
|
|
position: fixed;
|
|
z-index: 999;
|
|
padding: 50px 20px 10px 20px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
.check {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.txt {
|
|
font-size: 22rpx;
|
|
margin-left: 5px;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.col {
|
|
color: #5c9fff;
|
|
}
|
|
</style> |