hongze_yb_pc/src/layout/component/Header.vue

<script setup>
import { useStore } from "vuex";
import { computed, ref, watch } from "vue";
import moment from "moment";
import { useRouter } from "vue-router";

const router = useRouter();
const store = useStore();
store.dispatch("getUserInfo"); //获取个人信息
const userInfo = computed(() => store.state.userInfo);
const lastTime = computed(() => {
  let timeArr = [];
  store.state.userInfo.permission_list &&
    store.state.userInfo.permission_list.forEach((item) => {
      item.permission_list.forEach((item2) => {
        timeArr.push(new Date(item2.end_date));
      });
    });

  let maxTime = Math.max(...timeArr);
  if (timeArr.length === 0) {
    return "";
  } else {
    return moment(maxTime).format("YYYY.MM.DD");
  }
});
import { apiGetPermissionList } from "@/api/common.js";
let permissionList = ref([]);
const getPermissionList = async () => {
  const res = await apiGetPermissionList();
  if (res.code === 200) {
    permissionList.value = res.data;
  }
};
getPermissionList();

let permission_list_str = computed(() => {
  let hasArr = [];
  store.state.userInfo.permission_list &&
    store.state.userInfo.permission_list.forEach((item) => {
      item.permission_list.forEach((item2) => {
        hasArr.push(item2.name);
      });
    });
  let arr = permissionList.value.filter((item) => {
    if (hasArr.find((e) => e === item.permission_name)) return item;
  });
  let arr2 = arr.map((item) => item.name);

  return arr2.join("/");
});

//我的中点击去申请权限
import { ElMessageBox, ElMessage } from "element-plus";
import { apiLastApplyRecord } from "@/api/user";
const handleGoApplyPermission = async () => {
  const res = await apiLastApplyRecord();
  if (res.code === 200) {
    if (res.data) {
      const htmlStr = `<p style="text-align:center;">您已提交过申请，请耐心等待</p>`;
      ElMessageBox({
        title: "申请提醒",
        message: htmlStr,
        center: true,
        dangerouslyUseHTMLString: true,
        confirmButtonText: "知道了",
        confirmButtonClass: "self-elmessage-confirm-btn",
      });
    } else {
      // 流失客户主动申请一次
      if (userInfo.value.status == "流失") {
        apiApplyPermission({
          company_name: userInfo.value.company_name,
          real_name: userInfo.value.real_name,
          source: 1,
          from_page: "我的",
        }).then((res) => {
          const htmlStr = `<p>申请已提交</p><p>请等待销售人员与您联系</p>`;
          ElMessageBox({
            title: "申请提醒",
            message: htmlStr,
            center: true,
            dangerouslyUseHTMLString: true,
            confirmButtonText: "知道了",
            confirmButtonClass: "self-elmessage-confirm-btn",
          });
        });
        return;
      }
      router.push({
        path: "/apply/permission",
        query: {
          source: 1,
          fromPage: "我的",
        },
      });
    }
  }
};

//我的中点击联系销售
import { apiApplyPermission } from "@/api/user";
const handleContact = async () => {
  const res = await apiApplyPermission({
    company_name: userInfo.value.company_name,
    real_name: userInfo.value.real_name,
    source: 1,
    from_page: "我的",
  });
  if (res.code === 200) {
    console.log("主动申请成功");
  }
  const htmlStr = `<p>请联系对口销售--${userInfo.value.seal_name}：${userInfo.value.seal_mobile}</p>`;
  ElMessageBox({
    title: "申请提醒",
    message: htmlStr,
    center: true,
    dangerouslyUseHTMLString: true,
    confirmButtonText: "知道了",
    confirmButtonClass: "self-elmessage-confirm-btn",
  });
};

// 全局返回按钮
const goBack=()=>{
  if(window.history.state.back){
    console.log('返回上一页');
    router.go(-1)
  }else{
    console.log('返回首页');
    router.push({path:'/'})
  }
}
</script>

<template>
  <div class="clear-float head-wrap">
    <div class="flex-col-center logo-box">
      <img src="@/assets/logo.png" alt="logo" class="logo" />
      <span>弘则研报</span>
    </div>
    <div class="flex-col-center userinfo-wrap">
      <el-popover :width="400" popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
        <template #reference>
          <img class="icon-scan" src="@/assets/icon-scan.png" alt="" />
        </template>
        <template #default>
          <div class="flex" style="justify-content: space-between">
            <div style="flex: 1; text-align: center">
              <img style="width: 121px" src="@/assets/xcx-img.png" alt="" />
              <p>手机扫码<br />体验更多小程序功能</p>
            </div>
            <div style="flex: 1; text-align: center">
              <img style="width: 121px" src="@/assets/gzh-img.png" alt="" />
              <p>关注弘则研报公众号<br />及时获取活动和报告通知</p>
            </div>
          </div>
        </template>
      </el-popover>
      <el-popover :width="400" popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
        <template #reference>
          <el-avatar shape="square" :size="40" :src="$store.state.globalImgUrls.defaultAvatar"></el-avatar>
        </template>
        <template #default>
          <div class="userinfo-box" v-if="userInfo">
            <div class="top">
              <el-avatar shape="square" :size="50" :src="$store.state.globalImgUrls.defaultAvatar"></el-avatar>
              <p style="font-size: 20px">{{ userInfo.real_name || "--" }}</p>
              <p>{{ userInfo.mobile || userInfo.email }}</p>
            </div>
            <div class="flex info-item">
              <div class="label">公司</div>
              <div class="con">{{ userInfo.company_name || "--" }}</div>
            </div>
            <div class="flex info-item">
              <div class="label">品种权限</div>
              <div class="con" v-if="userInfo.status == '冻结' || (userInfo.status == '试用' && userInfo.is_suspend == 1)">
                <span>暂无权限</span>
                <span class="btn" @click="handleContact">联系销售</span>
              </div>
              <div class="con" v-else-if="userInfo.permission_list.length == 0">
                <span>暂无权限</span>
                <span class="btn" @click="handleGoApplyPermission">立即申请</span>
              </div>
              <div class="con" v-else>{{ permission_list_str }}</div>
            </div>
            <div class="flex info-item">
              <div class="label">服务截至日期</div>
              <div class="con">{{ lastTime }}</div>
            </div>
          </div>
        </template>
      </el-popover>
    </div>

    <!-- 头部版心 -->
    <div class="head-main">
      <!-- 面包屑 -->
      <div class="flex-col-center left-breadcrumb-box">
        <img @click="goBack" class="back-icon" src="@/assets/icon-back.png" alt="" v-if="$route.meta.hasBack">
        <span class="breadcrumb-item">研报</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.head-wrap {
  width: 100%;
  height: 100%;
  .logo-box {
    float: left;
    width: 140px;
    height: 100%;
    border-right: 1px solid #f2f2f2;
    .logo {
      width: 32px;
      height: 32px;
      margin-right: 10px;
    }
    span {
      font-size: 18px;
      font-weight: bold;
    }
  }
  .userinfo-wrap {
    float: right;
    width: 120px;
    height: 100%;
    .icon-scan {
      width: 26px;
      height: 26px;
      position: relative;
      margin-right: 20px;
    }
  }
  .head-main{
    width: calc(100% - 280px);
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    .left-breadcrumb-box{
      float: left;
      margin-left: 20px;
      height: 100%;
      .back-icon{
        width: 30px;
        height: 30px;
        margin-right: 20px;
        cursor: pointer;
      }
      .breadcrumb-item{
        font-size: 14px;
        cursor: pointer;
        &::after{
          content: '/';
          display: inline-block;
          margin: 0 5px;
        }
        &:last-child::after{
          content: '';
        }
      }
    }
    
  }
}
.userinfo-box {
  .top {
    text-align: center;
    margin-bottom: 31px;
    p {
      margin: 0;
    }
  }
  .info-item {
    padding: 20px 26px 20px 20px;
    border-top: 1px solid #ebebeb;
    position: relative;
    .label {
      width: 90px;
      margin-right: 19px;
      flex-shrink: 0;
    }
    .con {
      .btn {
        width: 97px;
        height: 30px;
        border-radius: 8px;
        border: 1px solid #dab37c;
        font-size: 16px;
        color: #dab37c;
        display: inline-block;
        text-align: center;
        line-height: 30px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
      }
    }
  }
}
</style>