ykt-team-wxapp/pages/mine/mine.vue

<template>
  <view class="page-container">
    <!-- Blue background area for header -->
    <view class="header-bg"></view>
    
    <!-- User Card -->
    <view class="user-card">
      <view class="avatar-container">
        <uni-icons type="person-filled" size="60" color="#cccccc" class="default-avatar"></uni-icons>
      </view>
      <view class="user-info">
        <text class="nickname">微信用户</text>
        <text class="phone">{{ maskedPhone }}</text>
      </view>
    </view>

    <!-- Menu List -->
    <view class="menu-container">
      <uni-list>
        <uni-list-item title="联系客服" link to="/pages/mine/contact" clickable>
			<template v-slot:header>
				<view class="item-icon">
					<uni-icons type="headphones" size="22" color="#000"></uni-icons>
				</view>
			</template>
		</uni-list-item>
        <uni-list-item title="隐私保护政策" link to="/pages/common/privacy" clickable>
			<template v-slot:header>
				<view class="item-icon">
					<uni-icons type="locked" size="22" color="#000"></uni-icons>
				</view>
			</template>
		</uni-list-item>
        <uni-list-item title="用户注册协议" link to="/pages/common/agreement" clickable>
			<template v-slot:header>
				<view class="item-icon">
					<uni-icons type="paperclip" size="22" color="#000"></uni-icons>
				</view>
			</template>
		</uni-list-item>
        <uni-list-item title="退出登录" link @click="handleLogout">
			<template v-slot:header>
				<view class="item-icon">
					<uni-icons type="undo" size="22" color="#000"></uni-icons>
				</view>
			</template>
		</uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import accountStore from "@/store/account";

const store = accountStore();

const maskedPhone = computed(() => {
  const account = uni.getStorageSync('account');
  const mobile = account?.mobile || store.account?.mobile || '';
  if (!mobile) return '';
  return mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
});

const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: function (res) {
      if (res.confirm) {
        // Clear login info
        uni.removeStorageSync('account');
        uni.removeStorageSync('openid');
        store.account = null;
        
        // Redirect to login or home
        uni.reLaunch({
            url: '/pages/login/login'
        });
      }
    }
  });
};

</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}

.page-container {
  position: relative;
}

.header-bg {
  height: 50px;
  background-color: #065bd6;
}

.user-card {
  position: relative;
  margin: -40px 15px 15px;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);

  .avatar-container {
    width: 60px;
    height: 60px;
    background-color: #eee;
    border-radius: 50%;
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .user-info {
    display: flex;
    flex-direction: column;
    
    .nickname {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      margin-bottom: 5px;
    }
    
    .phone {
      font-size: 14px;
      color: #666;
    }
  }
}

.menu-container {
  background-color: #fff;
  margin-top: 10px;
}

.item-icon {
	margin-right: 10px;
	display: flex;
	align-items: center;
}
</style>