ebike-ui/ebike-user/pages/user/mine/MePage.vue

<template>
  <view class="container">
    <!-- 用户信息区域 -->
    <view class="user-info padding">
      <view class="user-avatar">
        <image
          :src="wechat_user.avatar || `${imgPath}static/userui/wxtouxiang.png`"
          mode="aspectFill"
        ></image
        ><!-- 头像 -->
      </view>
      <view class="user-details">
        <view class="nickname">{{ wechat_user.nickname || "微信用户" }}</view>
        <view class="phone-number">{{
          hidePhoneNumber(wechat_user.mobile)
        }}</view>
      </view>
    </view>

    <!-- 账户明细区域 -->
    <view
      class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius"
    >
      <view
        v-for="(item, index) in menuItems"
        :key="index"
        class="cu-item arrow"
        @click="navigateTo(item.link)"
      >
        <view class="content flex">
          <view class="icon-container">
            <image class="icon-size" :src="item.icon"></image>
          </view>
          <text class="text-black">{{ item.label }}</text>
        </view>
      </view>
      <view class="flex flex-direction">
        <button
          @click="logout"
          style="height: 45px"
          class="cu-btn bg-white margin-tb-sm lg text-red text-bold"
        >
          退出登录
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import config from "@/utils/config";
import { onLoad } from "@dcloudio/uni-app";
import { useUserInfoStore } from "@/stores/userInfo";

const store = useUserInfoStore();
const imgPath = config.imgPath;
const wechat_user = ref({
  url: `${imgPath}static/userui/wxtouxiang.png`,
  nickname: "",
  mobile: "",
});
onLoad((options) => {
  wechat_user.value = store.getWechatUser();
});
// 隐藏电话号码中间部分
const hidePhoneNumber = (phoneNumber) => {
  if (!phoneNumber || phoneNumber.length !== 11) {
    return phoneNumber; // 如果不是有效的手机号，直接返回原始手机号
  }
  const firstPart = phoneNumber.substring(0, 3); // 前三位
  const lastPart = phoneNumber.substring(7); // 后四位
  return `${firstPart}****${lastPart}`; // 拼接隐藏的手机号
};

const menuItems = ref([
  {
    icon: `${imgPath}static/userui/icon/zhhanghu.png`,
    label: "订单明细",
    link: "/pages/user/login/AccountDetails",
  },
  {
    icon: `${imgPath}static/userui/icon/baoxiujilu.png`,
    label: "故障反馈",
    link: "/pages/user/login/TroubleReportUser?bikeCode=250306001002&orderCode=12039219893712864",
  },
  {
    icon: `${imgPath}static/userui/icon/baoxiujilu.png`,
    label: "报修记录",
    link: "/pages/user/login/RepairReport",
  },
  {
    icon: `${imgPath}static/userui/icon/shiminrenzheng.png`,
    label: "微信登录",
    link: "/pages/user/login/wx_login",
  },
  {
    icon: `${imgPath}static/userui/icon/jilu.png`,
    label: "申请还车记录",
    link: "/pages/user/login/return-point-records",
  },
  {
    icon: `${imgPath}static/userui/icon/helpinfo.png`,
    label: "帮助中心",
    link: "/pages/user/HelpPage/HelpPage",
  },
  {
    icon: `${imgPath}static/userui/icon/helpinfo.png`,
    label: "微信支付反馈",
    link: "/pages/user/views/PaymentFeedback",
  },
  {
    icon: `${imgPath}static/userui/icon/loginout.png`,
    label: "账号注销",
    link: "/pages/user/login/userLogout",
  },
]);
// 退出登录的方法
const logout = () => {
  uni.showModal({
    title: "退出登录",
    content: "是否确认退出并清除缓存？",
    success: function (res) {
      if (res.confirm) {
        // 清除缓存
        store.clearWechatUser();
        // 弹出成功提示
        uni.showToast({
          title: "退出成功", // 提示内容
          icon: "success", // 图标类型
          duration: 2000, // 持续时间（单位：毫秒）
        });
        setTimeout(() => {
          backHome();
        }, 2000);
      } else if (res.cancel) {
        // 用户取消退出，做相应处理（可选）
        console.log("用户取消退出");
      }
    },
  });
};

function backHome() {
  const pages = getCurrentPages();
  const targetPageIndex = pages.findIndex(
    (page) => page.route === "pages/user/home/home"
  );

  if (targetPageIndex !== -1) {
    const delta = pages.length - 1 - targetPageIndex;
    uni.navigateBack({
      delta: delta,
    });
  } else {
    // 目标页面不在栈中，重新跳转
    uni.switchTab({
      url: "/pages/user/home/home",
    });
  }
}

const navigateTo = (link) => {
  if (link == "") return;
  uni.navigateTo({
    url: link,
  });
};
</script>

<style>
/* 容器 */
.container {
  background-color: rgb(248, 248, 248);
  height: 100vh;
  /* 给容器添加内边距 */
}

/* 用户信息部分 */
.user-info {
  display: flex;
  margin-bottom: 20px;
  /* 用户信息区域底部间距 */
  align-items: center;
}

/* 用户头像 */
.user-avatar {
  margin-right: 15px;
  /* 头像与其他信息之间的间距 */
}

.user-avatar image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

/* 用户信息 */
.user-details {
  display: flex;
  flex-direction: column;
}

.nickname {
  font-weight: bold;
  font-size: 16px;
}

.phone-number {
  color: #888;
  font-size: 14px;
}

/* 账户明细部分 */
.account-details {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
}

.account-details .flex {
  display: flex;
  align-items: center;
}

.icon {
  width: 30px;
  height: 30px;
  background-color: #ddd;
  border-radius: 50%;
  margin-right: 10px;
}

.account-info {
  font-size: 16px;
  font-weight: bold;
}

.icon-container {
  margin-right: 15px;
}

.icon-size {
  width: 15px;
  height: 15px;
}
</style>