manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/tabbar/my/index.vue

<template>
  <div class="personalCenter">
    <div class="personalCenter-top flex flex-col">
      <div class="px-4 flex justify-between items-center avatarSection">
        <div class="flex items-center">
          <div
            class="bg-[#fff] text-[#333] flex items-center justify-center profilePicture"
          >
            <TranslationComponent :openId="userInfo.userInfo.name" />
          </div>
          <div class="ml-8 profilePicture-text">
            <TranslationComponent :openId="userInfo.userInfo.name" /> <br />
            <div class="jobIdEtc">工号：{{ userInfo.userInfo.jobNumber }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-1 overflow-y-auto personalCenter-content">
      <div class="flex flex-row items-center justify-between">
        <div class="list-tile flex">
          <img src="../../../assets/image/dqbb.png" alt="" />
          <div class="list-tile-text">当前版本</div>
        </div>
        <div class="list-text">{{ ['', '专业版本', '旗舰版本'][userInfo.userInfo?.company?.versionControl] }}</div>
      </div>
      <div class="flex flex-row items-center justify-between" v-if="userInfo.userInfo.userNameNeedTranslate != '1' && (isCorpWX || isWX)" @click="bindWeiXin">
        <div class="list-tile flex">
          <img src="../../../assets/image/dqbb.png" alt="" />
          <div class="list-tile-text">{{ `绑定${isCorpWX ? '企业' : ''}微信` }}</div>
        </div>
        <div class="list-text">
          (
            <span v-if="(isCorpWX && userInfo.userInfo.corpwxUserid == null) || (isWX && userInfo.userInfo.wxOpenid == null)">未绑定</span>
            <span v-if="(isCorpWX && userInfo.userInfo.corpwxUserid != null) || (isWX && userInfo.userInfo.wxOpenid != null)">已绑定</span>
          )
        </div>
      </div>
      <div class="flex flex-row items-center justify-between mt-3">
        <div class="list-tile flex">
          <img src="../../../assets/image/gsmc.png" alt="" />
          <div class="list-tile-text">公司名称</div>
        </div>
        <div class="list-text">{{ userInfo.userInfo?.company?.companyName }}</div>
      </div>
      <div class="flex flex-row items-center justify-between mt-3">
        <div class="list-tile flex">
          <img src="../../../assets/image/dqzh.png" alt="" />
          <div class="list-tile-text">账号角色</div>
        </div>
        <div class="list-text">{{ userInfo.userInfo?.roleName }}</div>
      </div>
      <div class="flex flex-row items-center justify-between mt-3">
        <div class="list-tile flex">
          <img src="../../../assets/image/yxrq.png" alt="" />
          <div class="list-tile-text">有效日期</div>
        </div>
        <div class="list-text">{{ userInfo.userInfo?.company?.expirationDate }}</div>
      </div>
      <div class="flex flex-row items-center justify-between mt-3" @click="instructions()">
        <div class="list-tile flex">
          <img src="../../../assets/image/sysm.png" alt="" />
          <div class="list-tile-text">使用说明</div>
        </div>
        <img src="../../../assets/image/rightArrow.png" class="list-text-img"></img>
      </div>
      <div class="flex flex-row items-center justify-between mt-3" @click="applicationMarket()">
        <div class="list-tile flex">
          <img src="../../../assets/image/yysc.png" alt="" />
          <div class="list-tile-text">应用市场</div>
        </div>
        <img src="../../../assets/image/rightArrow.png" class="list-text-img"></img>
      </div>
    </div>
    <div><Footer /></div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useLifecycle } from "@hooks/useCommon.js";
import useRouterStore from "@store/useRouterStore.js";
import useInfoStore from "@store/useInfoStore.js";
import Footer from "@components/page/footer.vue";

const router = useRouterStore();
const userInfo = useInfoStore();
const isCorpWX = ref(false);
const isWX = ref(false);

function instructions() {
  router.navigateTo({
    pathName: "pdfPreview",
  });
}

function bindWeiXin() {
  //企业微信
  if (isCorpWX.value && userInfo.userInfo.corpwxUserid != null) {
    return;
  }
  //微信
  else if (isWX.value && userInfo.userInfo.wxOpenid != null) {
    return;
  }

  var appId = "wx1c1d8fc81bc073a8"; //智能客户管家公众号
  var url =
    "https://mobcrm.ttkuaiban.com/api/wechat/bindWeiXin2?userId=" +
    userInfo.userInfo.id; //工时管家公众号授权回调页面
  if (isCorpWX.value) {
    appId = "ww4e237fd6abb635af"; //企业微信第三方的SUIT ID
    url =
      "https://crm.ttkuaiban.com/api/wxcorp/bindCorpWeiXin?userId=" +
      userInfo.userInfo.id; //授权回调页面
  }

  var weixinUrl =
    "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
    appId +
    "&redirect_uri=" +
    encodeURI(url) +
    "&response_type=code&scope=snsapi_base&state=0#wechat_redirect";
  window.location.href = weixinUrl;
}

function signOut() {
  router.redirectTo({
    pathName: "login",
    success: () => {
      localStorage.clear();
      sessionStorage.clear();
      window.location.reload();
    },
  });
}

function judgingTheEnvironment() {
  const currentEnvironment = navigator.userAgent.toLowerCase();
  isCorpWX.value = currentEnvironment.indexOf("wxwork") > 0 ? true : false;
  isWX.value = currentEnvironment.indexOf("micromessenger") > 0 ? true : false;
}

const applicationMarket = () => {
  window.location.href = "https://www.ttkuaiban.com/appMarket.html";
  // window.open('https://www.ttkuaiban.com/appMarket.html', '_blank');
};

useLifecycle({
  load: () => {
    judgingTheEnvironment();
  },
});
</script>

<style lang="scss" scoped>
.profilePicture {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: bold;
}
.profilePicture-text {
  font-size: 18px;
  color: #fff;
}
.profilePicture-img {
  width: 24px;
}
.list-imgs {
  width: 14px;
}
.personalCenter {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.personalCenter-top {
  width: 100%;
  height: 180px;
  background-image: url("../../../assets/image/grzxbjs.png");
  background-size: cover;
}
.avatarSection {
  padding: 52px 30px 0 30px;
}
.jobIdEtc {
  font-size: 13px;
  color: #92bdee;
  margin-top: 4px;
}
.personalCenter-content {
  width: 100%;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color: #fff;
  position: relative;
  padding: 20px 26px 0 26px;
  top: -18px;
}
.list-text {
  color: #A6A6A6;
  font-weight: medium;
  font-size: 12px;
  line-height: normal;
  position: relative;
  top: -3px;
}
.list-tile {
  color: #000000;
  font-weight: medium;
  font-size: 12px;
  line-height: normal;
}
.list-tile img {
  width: 28px;
}
.list-tile-text{
  position: relative;
  top: 2px;
  margin-left: 10px;
}
.list-text-img {
  width: 16px;
  position: relative;
  top: -3px;
}
</style>