im-uniapp/pages/profile/index/index.vue

<template>
  <view class="page_container">
    <view class="self_info_row"></view>

    <view class="info_card">
      <my-avatar :src="selfInfo.faceURL || '/static/images/default_avatar.png'" :desc="selfInfo.nickname" size="46" />

      <view class="id_row">
        <text class="nickname">{{ selfInfo.nickname }}</text>
        <view class="id_row_copy" @click="copy">
          <text class="id">{{ selfInfo.userID }}</text>
          <image style="width: 32rpx; height: 32rpx" src="@/static/images/id_copy.png" mode="" />
        </view>
      </view>

      <view class="qr" @click="toSelfQr">
        <img src="static/images/self_info_qr.png" alt="" />
        <img src="static/images/common_right.png" alt="" />
      </view>
    </view>

    <view class="action_box">
      <view @click="profileMenuClick(item)" class="profile_menu_item" v-for="item in profileMenus" :key="item.idx">
        <view class="menu_left">
          <image style="width: 48rpx; height: 48rpx" :src="item.icon" mode="" />
          <text>{{ item.title }}</text>
        </view>
        <u-icon name="arrow-right" size="16" color="#999"></u-icon>
      </view>
    </view>

    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import IMSDK from "openim-uniapp-polyfill";
import MyAvatar from "@/components/MyAvatar/index.vue";
export default {
  components: {
    MyAvatar,
  },
  data() {
    return {
      profileMenus: [
        {
          idx: 0,
          title: "我的信息",
          icon: require("static/images/profile_menu_info.png"),
        },
        {
          idx: 2,
          title: "账号设置",
          icon: require("static/images/profile_menu_account.png"),
        },
        {
          idx: 3,
          title: "关于我们",
          icon: require("static/images/profile_menu_about.png"),
        },
        {
          idx: 4,
          title: "应用更新",
          icon: require("static/images/profile_menu_about.png"),
        },
        {
          idx: 5,
          title: '测试推送',
          icon: require("static/images/profile_menu_about.png")
        },
        {
          idx: 6,
          title: "清除缓存",
          icon: require("static/images/profile_menu_account.png"),
        },
        {
          idx: 7,
          title: "退出登录",
          icon: require("static/images/profile_menu_logout.png"),
        },
      ],
    };
  },
  computed: {
    selfInfo() {
      const info = this.$store.getters.storeSelfInfo;
      console.log('头像URL:', info.faceURL); // 添加这行调试
      return info;
    },
  },
  methods: {
    copy() {
      uni.setClipboardData({
        showToast: false,
        data: this.selfInfo.userID,
        success: function () {
          uni.showToast({
            icon: "none",
            title: "复制成功",
          });
        },
      });
    },
    logoutConfirm() {
      IMSDK.asyncApi(IMSDK.IMMethods.Logout, IMSDK.uuid())
        .then(() => {
          uni.removeStorage({
            key: "IMToken",
          });
          uni.removeStorage({
            key: "BusinessToken",
          });
          uni.removeStorage({
            key: 'oaToken'
          })
        })
        .catch((err) => console.log(err))
        .finally(() => {
          uni.$u.route("/pages/login/index");
        });
    },
    profileMenuClick({ idx }) {
      switch (idx) {
        case 0:
          uni.navigateTo({
            url: "/pages/profile/selfInfo/index",
          });
          break;
        case 1:
          uni.navigateTo({
            url: "/pages/profile/messageNotification/index",
          });
          break;
        case 2:
          uni.navigateTo({
            url: "/pages/profile/accountSetting/index",
          });
          break;
        case 3:
          uni.navigateTo({
            url: "/pages/profile/about/index",
          });
          break;
        case 4:
          this.showUpdateOptions();
          break;
        case 5:
          uni.createPushMessage({
            content: '今天还没有报工哦',
            title: "报工提醒",
            success() {
              console.log('推送成功')
            },
            fail() {
              console.log("推送失败")
            }
          });
          break;
        case 6:
          this.clearCache();
          break;
        case 7:
          uni.showModal({
            title: "提示",
            content: "确定要退出当前账号吗？",
            confirmText: "确认",
            cancelText: "取消",
            success: (res) => {
              if (res.confirm) {
                this.logoutConfirm();
              }
            },
          });
          break;
        default:
          break;
      }
    },
    toSelfQr() {
      uni.navigateTo({
        url: `/pages/common/userOrGroupQrCode/index`,
      });
    },
    clearCache() {
      uni.showModal({
        title: "提示",
        content: "确定要清除缓存吗？这将清除oaToken等缓存数据。",
        confirmText: "确认",
        cancelText: "取消",
        success: (res) => {
          if (res.confirm) {
            // 清除oaToken
            uni.removeStorage({
              key: 'oaToken',
              success: () => {
                console.log('oaToken已清除');
              },
              fail: (err) => {
                console.log('清除oaToken失败:', err);
              }
            });
            
            // 可以在这里添加其他需要清除的缓存
            // 例如清除其他相关的存储数据
            
            uni.showToast({
              icon: "success",
              title: "缓存清除成功",
            });
          }
        },
      });
    },
    showUpdateOptions() {
      const ignoredVersion = uni.$updateManager.getIgnoredVersion();
      let content = '选择更新操作：';
      if (ignoredVersion) {
        content += `\n当前忽略版本：${ignoredVersion}`;
      }

      uni.showActionSheet({
        itemList: ['检查更新', '清除忽略版本', '取消'],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              // 检查更新（强制检查）
              uni.$updateManager.checkUpdate(true);
              break;
            case 1:
              // 清除忽略版本
              uni.showModal({
                title: '确认操作',
                content: '确定要清除忽略的版本设置吗？清除后将重新提示所有版本更新。',
                success: (modalRes) => {
                  if (modalRes.confirm) {
                    uni.$updateManager.clearIgnoredVersion();
                    uni.showToast({ title: '已清除忽略版本设置' });
                  }
                }
              });
              break;
            case 2:
              // 取消
              break;
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page_container {
  background-color: #f8f9fa;

  .self_info_row {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 276rpx;
    background-image: url("@/static/images/profile_top_bg.png");
    background-repeat: round;
  }

  .info_card {
    width: 640rpx;
    height: 196rpx;
    border-radius: 6px;
    background: #fff;
    margin: -120rpx auto 0 auto;
    padding: 0 36rpx;
    color: #0c1c33;
    display: flex;
    align-items: center;

    .id_row {
      @include vCenterBox();
      display: flex;
      height: 46px;
      margin-left: 16rpx;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      flex: 1;
      font-size: 28rpx;

      &_copy {
        @include vCenterBox();
      }

      .nickname {
        @include nomalEllipsis();
        max-width: 400rpx;
        font-weight: 500;
        font-size: 34rpx;
      }

      .id {
        color: #8e9ab0;
      }
    }

    img {
      width: 18px;
      height: 18px;
    }
  }

  .action_box {
    margin: 24rpx 24rpx 0 24rpx;
    background: #fff;
    border-radius: 6px;
  }

  .profile_menu_item {
    @include btwBox();
    padding: 24rpx 36rpx;

    .menu_left {
      @include vCenterBox();
      color: $uni-text-color;

      image {
        margin-right: 24rpx;
      }
    }
  }
}
</style>