xjc-vue/src/views/xjc-integratedmachine/components/head_component.vue

<template>
  <div class="contenter">
    <div class="head-left">
      <img
        class="head-icon"
        src="@/assets/images/login/login-return.png"
        @click="backTo"
        alt="404"
      />
    </div>
    <!-- 等UI图更新继续画     <div>-->
    <div class="head-title">
      <div v-if="headinfo.title">{{ headinfo.title }}</div>
    </div>
    <div class="contrast-box">
      <img
        class="contrast"
        v-show="headinfo.contrast"
        src="@/assets/images/environment/contrast-btn.png"
        @click="contrastTo"
      />
      <p class="text" v-show="headinfo.contrast">{{ contrastSize }}</p>
    </div>
    <div class="head-right" v-if="!headinfo.isLogin">
      <div class="right-user">
        <img src="@/assets/images/wakeup/user.png" @click="gotoPersonCenter" alt="404" />
      </div>
      <el-button class="head-right-btn1" v-if="headinfo.isHome"
        >使用说明</el-button
      >
      <el-button class="head-right-btn1" v-else @click="homeUrlTo"
        >首页</el-button
      >
      <el-button class="head-right-btn2" @click="exit">退出登录</el-button>
    </div>
  </div>
  <!-- 等UI图更新继续画     <div>-->
  <!-- <div class="head-title">
    <div v-if="headinfo.title">{{ headinfo.title }}</div>
  </div>
  <div class="contrast-box">
    <img
      v-show="headinfo.contrast"
      class="contrast"
      src="@/assets/images/environment/contrast-btn.png"
      @click="contrastTo"
    />
  </div> -->
  <!-- <div class="head-right" v-if="!headinfo.isLogin">
    <div class="right-user">
      <img src="@/assets/images/wakeup/user.png" @click="backTo" alt="404" />
    </div>
    <el-button class="head-right-btn1" v-if="headinfo.isHome"
      >使用说明</el-button
    >
    <el-button class="head-right-btn1" v-else @click="homeUrlTo"
      >首页</el-button
    >
    <el-button class="head-right-btn2" @click="exit">退出登录</el-button>
  </div> -->
</template>

<script setup>
import { ElMessage } from "element-plus";
import { getCompareSize } from "@/api/xjc-integratedmachine/environment/common.js";
import { defineEmits } from "vue";
const { proxy } = getCurrentInstance();
const router = useRouter();
const props = defineProps({
  headinfo: {},
});
const contrastSize = ref(null);
const emit = defineEmits(["childEvent"]);
function backTo() {
  clear();
  if (props.headinfo.backUrlUse) {
    router.push({
      path: props.headinfo.backUrl,
      query: {
        code: props.headinfo.backQuery,
      },
    });
  } else {
    router.go(-1);
  }
  emit("childEvent");
}
function clear() {
  if (props.headinfo.contrastPage) {
    // clearData()
  }
}
function homeUrlTo() {
  router.push({
    path: props.headinfo.homeUrl,
  });
}
//跳转对比页面
function contrastTo() {
  console.log("contrastSize.value", contrastSize.value);
  if (contrastSize.value === 2) {
    console.log("props.headinfo.contrastType", props.headinfo.contrastType);
    if (props.headinfo.contrastType === 2) {
      router.push({
        path: "/xjc-integratedmachine/environment/contrast_major",
      });
    } else if (props.headinfo.contrastType === 1) {
      router.push({
        path: "/xjc-integratedmachine/environment/contrast_university",
      });
    } else if (props.headinfo.contrastType === 3) {
      router.push({
        path: "/xjc-integratedmachine/environment/contrast_career",
      });
    }
  } else {
    ElMessage({
      type: "info",
      message: "对比列表不满两组数据",
    });
    return;
  }
}

function exit() {
  proxy.$modal
    .confirm("您确认退出吗")
    .then(function () {
      router.push({
        path: "/xjc_login",
      });
    })
    .then(() => {})
    .catch(() => {});
}
//拿到对比数量
function getCompareSizeData(num) {
  console.log("num", num);
  setTimeout(() => {
    getCompareSize({
      type: props.headinfo.contrastType || num,
    }).then((resp) => {
      contrastSize.value = resp.data;
    });
  }, 500);
}

// 前往个人中心
function gotoPersonCenter(){
  router.push({
    path: "/xjc-integratedmachine/personcenter/index",
  });
}

onMounted(() => {
  // getCompareSizeData()
});
defineExpose({
  getCompareSizeData,
});
</script>

<style scoped lang="scss">
.contenter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  background-color: rgba(251, 252, 253, 0.5);
  justify-content: space-between;
  .head-left {
    width: 750px;
  }
  .head-icon {
    width: 74px;
    height: 74px;
    margin-left: 74px;
  }
  .head-title {
    width: 464px;
    //margin: ;
    text-align: center;
    font-weight: bold;
    font-size: 48px;
    color: #060606;
  }
  .contrast-box {
    width: 209px;
    height: 80px;
    position: relative;
    img {
      width: 209px;
      height: 80px;
    }
    .text {
      position: absolute;
      bottom: 3px;
      left: 107px;
      font-size: 20px;
      color: #2bc17b;
      font-size: 20px;
      color: #2bc17b;
      line-height: 31px;
      bottom: -7px;
    }
  }
  .head-right {
    width: 750px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 464px;
    .head-right-btn1 {
      width: 136px;
      height: 74px;
      background: #2bc17b;
      border-radius: 10px 10px 10px 10px;
      font-weight: 400;
      font-size: 24px;
      color: #ffffff;
    }
    .head-right-btn2 {
      width: 136px;
      height: 74px;
      background: #fb5451;
      border-radius: 10px 10px 10px 10px;
      font-weight: 400;
      font-size: 24px;
      color: #ffffff;
      margin-right: 48px;
    }
    .right-user {
      cursor: pointer;
      img {
        width: 85px;
        height: 85px;
      }
    }
  }
}
</style>