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">
      <view class="px-15 py-12 flex items-center border-b" @click="toPage('/pages/mine/contact')">
        <view class="flex-shrink-0 item-icon">
          <uni-icons type="headphones" size="22" color="#000"></uni-icons>
        </view>
        <view class="mr-10 flex-grow w-0 truncate text-lg text-dark">联系客服</view>
        <view class="flex-shrink-0">
          <uni-icons type="right" size="18" color="#999"></uni-icons>
        </view>
      </view>
      <view class="px-15 py-12 flex items-center border-b" @click="toPage('/pages/login/agreement?type=privacyPolicy')">
        <view class="flex-shrink-0 item-icon">
          <uni-icons type="locked" size="22" color="#000"></uni-icons>
        </view>
        <view class="mr-10 flex-grow w-0 truncate text-lg text-dark">隐私保护政策</view>
        <view class="flex-shrink-0">
          <uni-icons type="right" size="18" color="#999"></uni-icons>
        </view>
      </view>
      <view class="px-15 py-12 flex items-center border-b" @click="toPage('/pages/login/agreement?type=userAgreement')">
        <view class="flex-shrink-0 item-icon">
          <uni-icons type="locked" size="22" color="#000"></uni-icons>
        </view>
        <view class="mr-10 flex-grow w-0 truncate text-lg text-dark">用户注册协议</view>
        <view class="flex-shrink-0">
          <uni-icons type="right" size="18" color="#999"></uni-icons>
        </view>
      </view>
      <view class="px-15 py-12 flex items-center" @click="handleLogout()">
        <view class="flex-shrink-0 item-icon">
          <uni-icons type="undo" size="22" color="#000"></uni-icons>
        </view>
        <view class="mr-10 flex-grow w-0 truncate text-lg text-dark">退出登录</view>
        <view class="flex-shrink-0">
          <uni-icons type="right" size="18" color="#999"></uni-icons>
        </view>
      </view>
    </view>
    <!-- <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'
        });
      }
    }
  });
};

function toPage(url) {
  uni.navigateTo({
    url: url
  });
}

</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>