new-hjb-pc/hjb_pc/components/layoutHeader.vue

<template>
  <div class="w-100%"
    style="background-color: #fff;position: fixed;z-index: 999;    box-shadow: 0px 10px 15px -3px rgb(229 81 163 / 10%);">
    <div class="nav" style="background-color: #fff; width: 6.5rem;">
      <div class="menu">

        <ul>
          <li style="display: flex;" >
            <img style="margin: auto; width: 80%;border-radius: 0%; cursor: auto;" src="../assets/images/left.jpg" alt="">
          </li>
          <!-- :style="index ==0 ?{width:'calc(0.4688rem - 40px)',marginLeft:'calc(40px/2)'}:{}" -->
          <li v-for="(obj, index) in header" :class="{ active: index + 1 == userIndex.active }" :key="index"
            @click="()=>{obj.click?obj.click():goTo(index + 1, obj.url)}">
            <template v-if="index==0" >首&nbsp;&nbsp;页</template>
            <template v-else>{{ obj.con }}</template>
            <div v-if="index + 1 == userIndex.active" class="active-border"></div>
            <!-- <div v-if="index + 1 == userIndex.active" class="active-border" :style="index ==0 ?{width:'calc(0.4688rem - 40px)'}:{}"></div> -->
          </li>
          <!-- <li :class="userIndex.active == 1 ? 'active' : ''" @click="goTo(1,'/')">首页 <div v-if="userIndex.active == 1" class="active-border"></div> </li>
          <li :class="userIndex.active == 2 ? 'active' : ''" @click="goTo(2,'/')">首页 <div v-if="userIndex.active == 2" class="active-border"></div> </li>
          <li :class="userIndex.active == 3 ? 'active' : ''"  @click="goTo(3,'/homeIndex/placeOrder')">下订单 <div v-if="userIndex.active == 3" class="active-border"></div></li>
          <li :class="userIndex.active == 4 ? 'active' : ''"  @click="goTo(4,'/homeIndex/receivingorders')">接订单<div v-if="userIndex.active == 4" class="active-border"></div></li>
          <li :class="userIndex.active == 5 ? 'active' : ''"  @click="goTo(5,'/homeIndex/lockflorist')">找花店<div v-if="userIndex.active == 5" class="active-border"></div></li>
          <li :class="userIndex.active == 6 ? 'active' : ''"  @click="goTo(6)">找蛋糕店<div v-if="userIndex.active == 6" class="active-border"></div></li>
          <li :class="userIndex.active == 7 ? 'active' : ''"  @click="goTo(7,'/homeIndex/orderMap')">地图找店<div v-if="userIndex.active == 7" class="active-border"></div></li>
          <li :class="userIndex.active == 8 ? 'active' : ''"  @click="goTo(9)">服务中心<div v-if="userIndex.active == 8" class="active-border"></div></li>
          <li :class="userIndex.active == 9 ? 'active' : ''"  @click="goTo(10)">下载中心<div v-if="userIndex.active == 9" class="active-border"></div></li> -->
          <!-- <li ref="active" class="active"></li> -->
          <!-- <nuxt-link to="homeIndex/placeOrder" exact>
    点击跳转到 About 页面
  </nuxt-link> -->
        </ul>
      </div>

      <div v-if="!userStore.isLogin" class="login-btn" style="font-size: 0.0833rem;">
        <div class="login" @click="login">登录</div>
        <div class="registered" @click="login">注册</div>
      </div>
      <div v-else class="user-info" style="font-size: 0.0833rem">
        <div @click="handelSj" style="cursor: pointer;">
          商家中心
        </div>
        <el-dropdown style="margin: 0 .0521rem;" @command="handleCommand">
          <span class="el-dropdown-link" style="cursor:pointer;">
            {{ userStore.$state.userInfos.nikeName }}
            <!-- <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon> -->
          </span>
          <template #dropdown>
            <el-dropdown-menu>

            <!--  <el-dropdown-item command="b">个人资料</el-dropdown-item>-->
              <el-dropdown-item command="c">个人后台</el-dropdown-item>
              <el-dropdown-item command="a">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <div>
          <svg t="1713341575624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2610" width="30" height="30"><path d="M37.486 174.572l420.217 420.214c15.204 14.389 35.722 23.231 58.314 23.231 21.458 0 41.039-7.981 55.991-21.115 2.761-2.425 422.332-422.331 422.332-422.331h-956.853z" p-id="2611" fill="#cdcdcd"></path><path d="M325.518 493.255l-304.395 304.391v-608.793z" p-id="2612" fill="#cdcdcd"></path><path d="M516.028 641.914c-26 0-50.735-9.849-69.645-27.738l-0.323-0.318-107.145-107.14-307.35 307.348h968.697l-307.265-307.262c-63.747 63.739-108.969 108.9-110.1 109.897-18.506 16.259-42.255 25.212-66.868 25.212z" p-id="2613" fill="#cdcdcd"></path><path d="M1011.233 797.647v-608.793l-304.397 304.401z" p-id="2614" fill="#cdcdcd"></path></svg>
        </div>
      </div>
    </div>
    <!--登录弹窗-->
    <user-login ref="userLoginRef" @on-login-succeeded="onLoginSucceeded"></user-login>

  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useUserStore } from '@/stores/user'
import { loginLogout } from '~/server/userApi'
import { linkNavigateTo } from '~/utils/util'
import { useCounterStore } from '@/stores/nav'
const config = useRuntimeConfig();
const userIndex = useCounterStore()
const userStore = useUserStore()
// const active = ref(sessionStorage.getItem('index') || 1)
const userLoginRef = shallowRef()
const props = defineProps({
  //列表数据
  pcHomeCon: {
    type: Object,
    default: null,
  },
})
const { pcHomeCon } = toRefs(props)
console.log(pcHomeCon, 6);

const goToLinkUrl = async (url: any) => {
  // console.log('/activity/information_info?informationId=1');
  const res = url.split('?')
  const link = res[0]
  const id = res[1].split('=')[1]
  await linkNavigateTo(link, { informationId: id })
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}
import { ElMessage } from 'element-plus'
function handleBtn() {
  if (userStore.$state.token) location.assign(`${config.public.adminUrl}/takeOrders/takeOrderManagement`)
  else ElMessage({
    showClose: true,
    message: '您还未登录，请先登录',
    type: 'warning',
  })
}
const header = ref([
  { con: '首页', url: '/' },
  { con: '关于我们', url: '/homeIndex/AboutUs' },
  { con: '立即下单', url: '/homeIndex/placeOrder' },
  { con: '开始接单', url: '/homeIndex/receivingorders' },
  // { con: '找鲜花店', url: '/homeIndex/lockflorist' },
  { con: '找鲜花店', url: '/homeIndex/FindFlowerShop' },
  { con: '找蛋糕店', url: '/homeIndex/FindCakeShop' },
  { con: '地图找店', url: '/homeIndex/orderMap' },
  { con: '在线发单', url: '',click:handleBtn },
  { con: '下载中心', url: '/homeIndex/downloadCenter' },
  { con: '联系我们', url: '/homeIndex/connectUs' },
])
const goTo = async (index: number, url?: string) => {
  // console.log(index,url);

  userIndex.increment(index)
  // active.value = index
  // sessionStorage.setItem('index',index)
  await linkNavigateTo(url)
  //  console.log(active.value.offsetWidth);
  //  const width = active.value.offsetWidth
  //   active.value.style.left = (index - 1) * width + 'px'

}
const login = () => {
  if (userStore.isLogin) {
    // await linkNavigateTo('/forum/create')
  } else {
    //data.backUrl = '/forum/create'
    userLoginRef.value.open()
  }
}
// /users/user_info
const handleCommand = async (val: string) => {
  if (val === 'a') {
    loginLogout()
    userStore.logout()
    feedback.msgSuccess('退出登录成功')
    //
  } else if (val === 'b') {
    await linkNavigateTo('/users/user_info')
  } else {

    // console.log(config.public.adminUrl)
    location.assign(`${config.public.adminUrl}?code=` + userStore.$state.userInfos.adminToken);
  }

}
const handelSj = ()=>{location.assign(`${config.public.adminUrl}?code=` + userStore.$state.userInfos.adminToken)}
const handlerNuxtLink = async (url: string, type: number) => {

  if (userStore.token) {
    await linkNavigateTo(url, { type: type })
  } else {
    userLoginRef.value.open()
  }
}
</script>

<style lang="scss" scoped>
.rule-center {
  position: relative;

  .con {
    clip-path: inset(0% 0% 100% 0%);
    transition: 0.5s;
    background-color: rgb(78, 78, 78);
    color: #A8AAB0;
    display: flex;
    flex-direction: column;

    span {
      height: 30px;
      line-height: 30px;
    }

    span:hover {
      color: white;
    }
  }

}

.rule-center:hover {
  .con {
    clip-path: inset(0% 0% 0% 0%);
  }
}

.nav {
  display: flex;
  justify-content: space-between;
  width: 6.25rem;
  margin: auto;
  height: .5208rem;
  background-color: #fff;

  ul {

    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    height: 100%;

    li {
      position: relative;
      font-size: .0833rem;
      width: .4688rem;
      list-style: none;
      text-align: center;
      cursor: pointer;
      height: 100%;
      line-height: .5208rem;
    }

    li:hover {
      color: #ff518f;
    }

    .active {
      color: #ff518f;
      // transition: width 5s linear 0s;
    }

    .active-border {
      position: absolute;
      bottom: 0;
      left: 0;
      width: .4688rem;
      height: .0365rem;
      background: linear-gradient(270deg, #ffd4ac 0%, #ff94d4 53%, #ff518f 100%);
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
    }
  }

  .login-btn {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: .0729rem;

    .login {
      width: .4219rem;
      height: .1563rem;
      border-radius: .125rem;
      color: #000;
      text-align: center;
      line-height: .1563rem;
      transition: transform .3s;
      cursor: pointer;
    }

    .login:hover {
      transform: translateY(-3px);
    }

    .registered {
      width: .4219rem;
      height: .1563rem;
      border-radius: .125rem;
      background: linear-gradient(270deg, #ffd4ac 0%, #ff94d4 53%, #ff518f 100%);
      color: #fff;
      text-align: center;
      line-height: .1563rem;
      cursor: pointer;
      transition: transform .3s;
    }

    .registered:hover {
      transform: translateY(-3px);
    }
  }

  .user-info {
    display: flex;
    align-items: center;
  }
}
</style>