gxtyzx-business/src/views/Home.vue

<template>
  <el-container class="w-screen h-screen relative">
    <div class="w-screen h-screen absolute left-0 top-0 bg"/>
    <el-header class="z-10">
      <div class="flex justify-between items-center bg-white w-full px-4 rounded-full mt-2">
        <el-space>
          <div class="flex flex-col justify-start items-start z-10 text-sm">
            <span>欢迎您, {{ username }}</span>
            <span class="mt-2">{{ time }}</span>
          </div>
          <div class="ml-4 flex justify-start items-center" v-if="activeIndex !== 'Index'">
            <div
              class="cursor-pointer flex flex-col justify-center items-center p-1 rounded my-0.5 mx-2 bg-emerald-400 text-white"
              style="width: 100px" @click="showNewCard = true">
              <el-icon size="32">
                <CreditCard></CreditCard>
              </el-icon>
              <span class="text-sm">开卡</span>
            </div>
            <div
              class="cursor-pointer flex flex-col justify-center items-center p-1 rounded my-0.5 mx-2 bg-emerald-400 text-white"
              style="width: 100px" @click="showReNewCard = true">
              <el-icon size="32">
                <Money></Money>
              </el-icon>
              <span class="text-sm">续卡</span>
            </div>
            <div
              class="cursor-pointer flex flex-col justify-center items-center p-1 rounded my-0.5 mx-2 bg-emerald-400 text-white"
              style="width: 100px" @click="showSiteList = true">
              <el-icon size="32">
                <Football></Football>
              </el-icon>
              <span class="text-sm">预定场地</span>
            </div>
            <div
              class="cursor-pointer flex flex-col justify-center items-center p-1 rounded my-0.5 mx-2 bg-emerald-400 text-white"
              style="width: 100px" @click="showDeposit = true">
              <el-icon size="32">
                <Sell></Sell>
              </el-icon>
              <span class="text-sm">收取押金</span>
            </div>
            <!--            <el-button round plain type="primary" @click="showNewCard = true">开卡</el-button>-->
            <!--            <el-button round plain type="primary" @click="showReNewCard = true">续卡</el-button>-->
            <!--            <el-button round plain type="primary" @click="showSiteList = true">预定场地</el-button>-->
            <!--            <el-button round plain type="success" @click="showDeposit = true">收取押金</el-button>-->
            <!--            <el-button round plain type="success">我的报表</el-button>-->
            <!--            <el-button round plain type="success">转卡服务</el-button>-->
          </div>
        </el-space>
        <div class="rounded-full pr-10">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            :ellipsis="false"
            @select="selectMenu"
            active-text-color="#27AB49"
          >
            <el-menu-item index="Index">主页</el-menu-item>
            <el-menu-item index="IcCard">卡号列表</el-menu-item>
            <el-menu-item index="ReNewIcCard">续卡列表</el-menu-item>
            <el-menu-item index="Order">订单列表</el-menu-item>
            <el-menu-item index="UsersVip">VIP购卡记录列表</el-menu-item>
            <!--            <el-sub-menu index="4">-->
            <!--              <template #title>电子卡列表</template>-->
            <!--              <el-menu-item index="UsersVip">VIP购卡记录列表</el-menu-item>-->
            <!--              <el-menu-item index="VipCardLog">VIP卡消费流水</el-menu-item>-->
            <!--            </el-sub-menu>-->
            <el-menu-item index="Deposit">押金列表</el-menu-item>
            <el-menu-item index="ChangePwd">修改密码</el-menu-item>
            <el-menu-item index="Logout">
              <el-button type="danger" size="large" round>退出登录</el-button>
            </el-menu-item>
            <el-menu-item>
              <span class="text-sm">当前版本:{{ version }}</span>
            </el-menu-item>
          </el-menu>
        </div>
      </div>
    </el-header>
    <el-main class="flex flex-col z-20" style="padding: 0">
      <keep-alive>
        <component ref="ComponentRef" :is="activeIndex" :keep-alive="true" class="w-full"/>
      </keep-alive>
    </el-main>
  </el-container>
  <NewCard v-model="showNewCard" v-if="showNewCard"></NewCard>
  <ReNewCard v-model="showReNewCard" v-if="showReNewCard"></ReNewCard>
  <SelectSite v-model="showSiteList" v-if="showSiteList"></SelectSite>
  <ChangePwd v-model="showChangePwd" v-if="showChangePwd"></ChangePwd>
  <Deposite v-model="showDeposit" v-if="showDeposit"></Deposite>
</template>

<script>
import Index from '@/pages/index/Index.vue'
import Order from '@/pages/Order.vue'
import IcCard from '@/pages/IcCard.vue'
import ReNewIcCard from '@/pages/ReNewIcCard.vue'
import Deposit from '@/pages/Deposit.vue'
import UsersVip from '@/pages/UsersVip.vue'
import VipCardLog from '@/pages/VipCardLog.vue'

export default {
  components: {
    Index,
    Order,
    IcCard,
    ReNewIcCard,
    Deposit,
    UsersVip,
    VipCardLog,
  }
}
</script>

<script setup>
import {ref, watch, onMounted, nextTick, reactive} from 'vue'
import {clearUserInfo, getUserInfo} from '@/api/common.js'
import {useRoute, useRouter} from 'vue-router'
import {ElMessageBox} from "element-plus";
import dayjs from "dayjs";
import NewCard from "@/components/NewCard.vue";
import ReNewCard from "@/components/ReNewCard.vue";
import SelectSite from "@/components/SelectSite.vue";
import ChangePwd from "@/components/ChangePwd.vue";
import Deposite from "@/components/Deposite.vue";

const version = ref('250119')

const route = useRoute()
const router = useRouter()

const currentView = ref(null)
const activeIndex = ref('Index')
const username = getUserInfo().username

const time = ref()
const setCurrentTime = () => {
  time.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
  setTimeout(() => {
    setCurrentTime()
  }, 1000)
}
setCurrentTime()

watch(route, (path) => {
  currentView.value = path.path
  activeIndex.value = currentView.value.split('/')[1]
  console.log(activeIndex.value)
  // getDotData()
})

const showChangePwd = ref(false)

const selectMenu = menu => {
  switch (menu) {
    case 'Logout' : {
      ElMessageBox.confirm('您确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        clearUserInfo()
        router.push(`/Login`)
      }).catch(() => {
        // console.log('取消');
      });
    }
      break;
    case 'ChangePwd' : {
      showChangePwd.value = true
    }
      break;
    default : {
      router.push(`/${menu}`)
    }
  }
}

const showNewCard = ref(false)
const showReNewCard = ref(false)
const showSiteList = ref(false)
const showDeposit = ref(false)

onMounted(async () => {
  if (!getUserInfo().token) {
    await clearUserInfo()
    await router.push(`/Login`)
  }
  const urlArr = window.location.href.split('/')
  activeIndex.value = urlArr[urlArr.length - 1]
  if (!activeIndex.value) await router.push(`/Index`)
})
</script>


<style scoped>
.bg {
  z-index: 0;
  background: linear-gradient(to bottom, #27ABAB44, #27AB4944), url("@/assets/bg.jpg") no-repeat 100% 100%;
  opacity: .9;
}
</style>