horz_cygx_zs/src/views/index.vue

<script setup>
import { reactive, toRefs, onMounted, ref, unref } from "vue";
import { Button, Toast } from "vant";
import "vant/es/toast/style";
import { getWxSign, getUser } from "@/api/api.js";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();

/**
 * 获取用户详情
 */
const userInfo = ref({});
const permissionList = ref([]);
const getUse = async () => {
  // if (localStorage.getItem("Authorization")) {
  let res = await getUser({
    Token: "b0e0cb73b728d57c3895ec3817af1429",
  });
  console.log(res);
  if (res.Ret === 200) {
    userInfo.value = res.Data;
    permissionList.value = userInfo.value.Permission.split(",") || [];
  }
  // }
};

/**
 * 微信js_sdk
 */
const wxconfig = async () => {
  const res = await getWxSign({ Url: window.location.href });
  if (res.Ret === 200) {
    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: res.Data.AppId, // 必填，公众号的唯一标识
      timestamp: res.Data.Timestamp, // 必填，生成签名的时间戳
      nonceStr: res.Data.NonceStr, // 必填，生成签名的随机串
      signature: res.Data.Signature, // 必填，签名
      jsApiList: ["hideAllNonBaseMenuItem", "onMenuShareTimeline"],
      openTagList: ["wx-open-launch-weapp"], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
    });
    wx.ready(function () {
      wx.hideAllNonBaseMenuItem();
    });
  }
};
/**
 * 点击跳转推送规则
 */
const goChangeTag = () => {
  router.push("/revamp");
};
/**
 * 点击跳转小程序
 */
const handleLaunchFn = () => {
  console.log("sss");
  // alert('11')
};

const handleErrorFn = () => {
  // alert('ff')
  console.log("eee");
};

getUse();
// wxconfig();
onMounted(() => {
  document.title = "登录";
  var btn = document.getElementById("launch-btn");
  btn.addEventListener("launch", function (e) {
    console.log("success");
  });
  btn.addEventListener("error", function (e) {
    console.log("fail", e.detail);
  });
  btn.addEventListener("ready", function (e) {
    console.log("ready	");
  });
});
</script>

<template>
  <div class="container-index">
    <div class="content">
      <p class="is-info" v-if="userInfo.HasPermission && userInfo.HasPermission != 3">您已登录成功！</p>
      <p class="is-info" v-else>暂无您的客户信息</p>
      <div class="synopsis">
        <p v-if="userInfo.HasPermission && userInfo.HasPermission != 3">我们将为您推送近期所有的研究更新与活动提醒</p>
      </div>
      <div class="personal-details">
        <div class="head-portrait">
          <img :src="userInfo.Headimgurl" v-if="userInfo.Headimgurl" />
          <img src="@/assets/img/init_imgurl.png" v-else />
        </div>
        <div class="details-item">
          <template v-if="userInfo.HasPermission == 1 || userInfo.HasPermission == 2">
            <p class="name">{{ userInfo.RealName }}</p>
            <p class="phone">{{ userInfo.Mobile }}</p>
            <p class="company">{{ userInfo.CompanyName }}</p>
          </template>
        </div>
      </div>
      <div class="authority">
        <template v-if="userInfo.HasPermission == 1">
          <div class="item" v-for="item in permissionList" :key="item">{{ item }}</div>
        </template>
        <template v-else-if="userInfo.HasPermission == 2">
          <div class="item">暂无权限</div>
        </template>
      </div>
      <div class="bottom-box">
        <p class="inform" v-if="userInfo.HasPermission == 1">您亦可在【推送规则】中更改您关注的赛道，让小助手更好地理解您的需求，为您降噪哦~</p>
        <p class="inform" v-else-if="userInfo.HasPermission == 2">当前无行业权限，可前往【查研观向】小程序申请开通试用权限</p>
        <p class="inform" v-else-if="userInfo.HasPermission == 3">请先前往【查研观向】小程序绑定您的联系方式并申请开通试用权限</p>
        <div class="bottom-btn" v-if="userInfo.HasPermission == 2" @click="goChangeTag">去更改</div>
        <div class="bottom-btn" v-else>
          去小程序
          <wx-open-launch-weapp id="launch-btn" class="wx-app" username="gh_a9d3744e1072" path="pages/index/index.html">
            <div v-is="'script'" type="text/wxtag-template">
              <div class="btn">去小程序</div>
            </div>
          </wx-open-launch-weapp>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container-index {
  width: 100%;
  height: 100vh;
  background: url("@/assets/img/bg_icon.png") no-repeat;
  background-size: 100% 100%;
  padding: 25% 15px 0;
  .content {
    width: 100%;
    height: 842px;
    padding: 60px 35px 0;
    background: url("@/assets/img/card_bg.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
    .is-info {
      font-size: 61px;
      font-weight: 500;
    }
    .synopsis {
      font-size: 28px;
      padding: 10px 0;
      height: 80px;
    }
    .personal-details {
      display: flex;
      .head-portrait {
        width: 126px;
        height: 126px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .details-item {
        margin-left: 30px;
        font-size: 28px;
        .name {
          font-size: 34px;
          font-weight: 500;
        }
        .phone {
          padding: 10px 0 5px;
        }
      }
    }
    .authority {
      height: 238px;
      width: 105%;
      overflow: hidden;
      padding-top: 10px;
      .item {
        width: 148px;
        height: 34px;
        font-size: 24px;
        border-radius: 4px;
        display: inline-block;
        margin: 20px 20px 0 0;
        text-align: center;
        line-height: 32px;
        border: 1px solid #e5cfb1;
        font-weight: 400;
        color: #e5cfb1;
      }
    }
    .bottom-box {
      font-size: 28px;
      color: #fff;
      text-align: center;
      .inform {
        margin-bottom: 50px;
      }
      .bottom-btn {
        width: 337px;
        height: 62px;
        background: linear-gradient(180deg, #e5cfb1 0%, #caaf8b 100%);
        border-radius: 78px;
        margin: 0 auto;
        line-height: 62px;
        font-size: 32px;
        font-weight: 500;
        color: #3e3d3c;
        position: relative; // 相对定位
        z-index: 0;
      }
      .wx-app {
        position: absolute; // 绝对定位
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        opacity: 0;
        .btn {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>