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

<template>
  <Page title="我的" styleReset="backNone">
    <template v-slot:body>
      <div class="w-full h-full flex flex-col">
        <div class="px-4 py-6 flex justify-between items-center">
          <div class="flex items-center">
            <div class="bg-[#065985] text-[#fff] flex items-center justify-center profilePicture">
              <TranslationComponent :openId="userInfo.userInfo.name" />
            </div>
            <div class="ml-8 profilePicture-text">
              <TranslationComponent :openId="userInfo.userInfo.name" />
            </div>
          </div>
          <div class="profilePicture-img">
            <!-- <img src="/src/assets/image/rightArrow.png"> -->
          </div>
        </div>

        <!-- 列表 -->
        <div class="bg-white flex justify-between px-6 py-2 mb-1">
          <div>当前版本</div>
          <div class="text-[#999]">{{ ['', '专业版本', '旗舰版本'][userInfo.userInfo?.company?.versionControl] }}</div>
        </div>
        <div class="bg-white flex justify-between px-6 py-2 mb-1">
          <div>公司名称</div>
          <div class="text-[#999]">{{ userInfo.userInfo?.company?.companyName }}</div>
        </div>
        <div class="bg-white flex justify-between px-6 py-2 mb-1">
          <div>账号角色</div>
          <div class="text-[#999]">{{ userInfo.userInfo?.roleName }}</div>
        </div>
        <div class="bg-white flex justify-between px-6 py-2 mb-1" v-if="userInfo.userInfo.userNameNeedTranslate != '1' && (isCorpWX || isWX)" @click="bindWeiXin">
          <div>{{ `绑定${isCorpWX ? '企业' : ''}微信` }}</div>
          <div class="text-[#999]">
            (
              <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="bg-white flex justify-between px-6 py-2 mb-1">
          <div>有效日期</div>
          <div class="text-[#999]">{{ userInfo.userInfo?.company?.expirationDate }}</div>
        </div>
        <div class="bg-white flex justify-between px-6 py-2 mb-1" @click="instructions()">
          <div>使用说明</div>
          <div class="list-imgs">
            <img src="/src/assets/image/rightArrow.png">
          </div>
        </div>
        <!-- <div class="bg-white flex justify-between px-6 py-2 mb-1">
          <div>在线客服</div>
          <div class="list-imgs">
            <img src="/src/assets/image/rightArrow.png">
          </div>
        </div> -->
        <div class="bg-white flex justify-between px-6 py-2 mb-1" @click="applicationMarket()">
          <div>应用市场</div>
          <div class="list-imgs">
            <img src="/src/assets/image/rightArrow.png">
          </div>
        </div>

        <!-- 退出登录 -->
        <div class="w-full mb-40 px-24 mt-20" v-if="!isCorpWX">
          <van-button type="primary" @click="signOut" class="w-full">退出登录</van-button>
        </div>
      </div>
    </template>

    <template v-slot:footer>
      <Footer />
    </template>
  </Page>
</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>
.backNone {
  background: linear-gradient(to bottom, #E0EFFF, #F8F8F8 30%) !important;

  :deep(.van-nav-bar) {
    background: none;
  }
}

.headPortrait {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: relative;
  margin-top: 20px;
  margin-bottom: 10px;

  &::after {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url('@/assets/image/camera.png');
    background-size: cover;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

.xinming {
  color: #000000;
  font-family: PingFang SC;
  font-weight: semibold;
  font-size: 18px;
  line-height: normal;
  letter-spacing: 0px;
  text-align: left;
  margin-bottom: 6px;
  text-align: center;
}

.profilePicture {
  width: 60px; 
  height: 60px;
  border-radius: 50%;
  font-size: 16px;
}
.profilePicture-text {
  font-size: 16px;
  color: #065985;
  font-weight: bold;
}
.profilePicture-img {
  width: 24px;
}
.list-imgs {
  width: 14px;
}
</style>