dou_platform_applet/pages/my/my.vue

<template>
  <view class="page-wrap" :style="{ 'padding-top': `${pageContentTop}px;` }">
    <!-- S 用户信息 -->
    <view class="user-wrap">
      <view class="lt-wrap">
        <image class="avatar" :src="appLogo" />
      </view>
      <view class="rt-wrap">
        <view class="name">登录账号</view>
        <view class="id">ID：{{ userInfo.name || "-" }}</view>
      </view>
    </view>
    <!-- E 用户信息 -->

    <view class="line"></view>

    <!-- S 菜单入口 -->
    <view class="menu-wrap">
      <block v-for="menu in menuList" :key="menu.id">
        <view class="menu-item-wrap" @click="onClickMenu(menu.id)">
          <view class="lt">
            <image class="icon" :src="menu.icon" />
            <text class="label">{{ menu.label }}</text>
          </view>
          <view class="rt">
            <image class="arrow" src="/static/imgs/icon-jt.png" />
          </view>

          <!-- 联系客服入口 -->
          <button
            v-if="menu.id === 'lxkf' && imId"
            open-type="im"
            :data-im-id="imId"
            class="im-btn"
            @im="onImSuccess"
            @error="onImError"
          >
            跳转 IM
          </button>
        </view>
      </block>
    </view>
    <!-- E 菜单入口 -->
  </view>
</template>

<script>
const app = getApp();
export default {
  components: {},
  data() {
    return {
      appName: app.globalData.$appInfo.appName,
      appLogo: app.globalData.$appInfo.appLogo,
      pageContentTop: app.globalData.pageContentTop,
      menuList: [
        { id: "gkls", label: "观看历史", icon: "/static/imgs/icon-ls.png" },
        { id: "wxhd", label: "我喜欢的", icon: "/static/imgs/icon-sc.png" },
        { id: "lxkf", label: "联系客服", icon: "/static/imgs/icon-kf.png" },
      ],
      userInfo: {
        name: "",
      },
      imId: "", // 客服抖音号
    };
  },
  onLoad() {
    app.handleSetNavTitle();
    this.handleGetImId();
  },
  onShow() {
    this.handleGetUserInfo();
  },
  methods: {
    async handleGetImId() {
      try {
        const url = this.$api.my_getService;
        const params = {};
        const { data: res = {} } = await this.$postJSON(url, params);
        console.log('res => ', res)
        if (res && res.errno == 0) {
          this.imId = res.rst.account
        } else {
          uni.showToast({ title: res.err || "操作失败", icon: "none" });
        }
      } catch (error) {
        console.log('error => ', error)
      } finally {
      }
    },
    async handleGetUserInfo() {
      const openid = uni.getStorageSync("openid") || "";
      if (openid) {
        this.userInfo.name = openid.slice(-6); // 展示后六位字符
      } else {
        const { openid } = await app.handleLogin();
        this.userInfo.name = openid.slice(-6); // 展示后六位字符
      }
    },
    onClickMenu(menuId) {
      if (menuId === "gkls") {
        // 观看历史
        uni.navigateTo({
          url: "/pages/subPackages/history/index",
        });
      } else if (menuId === "wxhd") {
        // 我喜欢的
        uni.navigateTo({
          url: "/pages/subPackages/like/index",
        });
      } else if (menuId === "lxkf") {
        // 联系客服
        if (!this.imId) uni.showToast({ title: "敬请期待", icon: "none" });
      }
    },

    onImSuccess(e) {
      console.log("onImSuccess => e", e);
    },
    onImError(e) {
      console.log("onImError => ", e);
      uni.showToast({ title: `异常：${e.detail.errMsg}`, icon: "none" });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-wrap {
  min-height: 100vh;
  background: url(https://dou-smallapp.oss-cn-beijing.aliyuncs.com/static/bg-01.png)
    #ffffff no-repeat;
  background-size: 750rpx 524rpx;
  background-color: #fff;
  .user-wrap {
    display: flex;
    align-items: center;
    margin: 60rpx 0 0 40rpx;
    .lt-wrap {
      width: 168rpx;
      height: 168rpx;
      .avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .rt-wrap {
      margin-left: 36rpx;
      .name {
        font-weight: 600;
        font-size: 34rpx;
        color: #000000;
        line-height: 48rpx;
        font-style: normal;
      }
      .id {
        margin-top: 30rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        line-height: 40rpx;
        font-style: normal;
      }
    }
  }
  .line {
    margin: 64rpx 68rpx 0;
    width: 614rpx;
    height: 2rpx;
    background: #e6e6e6;
  }
  .menu-wrap {
    padding: 96rpx 70rpx 0;
    .menu-item-wrap {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 70rpx;
      .lt {
        display: flex;
        align-items: center;
        .icon {
          width: 48rpx;
          height: 48rpx;
        }
        .label {
          margin-left: 16rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
          line-height: 40rpx;
          font-style: normal;
        }
      }
      .rt {
        .arrow {
          width: 38rpx;
          height: 38rpx;
        }
      }
      .im-btn {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }
  }
}
</style>