yufengxing-pc/components/AppFooter.vue

<template>
  <footer class="overflow-hidden pt-4">
    <!-- 间隔 -->

    <div class="sm:h-[3px] h-[15px]" v-if="getPath().startsWith('/passport/login')"></div>
    <div class="sm:h-[30px] h-[15px]" v-else></div>

    <!-- 友情链接 -->
    <div class="f-link bg-gray-200 w-full flex justify-center">
      <div class="xl:w-screen-xl w-auto flex p-4 items-center">
        <span class="font-bold text-gray-600">友情链接：</span>
        <el-space>
          <template v-for="(item,index) in links" :key="index">
            <el-button @click="openUrl(`${item.url}`)">{{ item.name }}</el-button>
          </template>
        </el-space>
      </div>
    </div>

    <div class=" bg-white my-3 w-3/4 m-auto" v-if="config.copyrightForDemoData">
      <el-alert :title="config.copyrightForDemoData" center show-icon type="warning" />
    </div>
    <div class="w-full flex flex-col sm:bg-[#cf1313] justify-between">
      <!-- PC版 -->
      <div class="sub-menu w-full xl:w-screen-xl xl:px-0 px-4 m-auto flex justify-between py-10 text-center hidden-sm-and-down">

        <!-- 底部菜单 -->
          <div class="left flex flex-col sm:flex-row sm:flex-wrap justify-between gap-3xl sm:w-9/12 flex-wrap w-full">
            <template v-for="item in subMenu">
              <div class="sub-menu-item text-left">
                <div class="pb-4">
                  <text class="text-white hover:text-gray-300 font-bold text-[16px]">{{ item.title }}</text>
                </div>
                <template v-if="item.children">
                  <div class="sub-menu-children flex flex-col gap-xs">
                    <template v-for="sub in item.children">
                      <a :href="getSpmUrl(sub)" class="text-gray-200 hover:text-gray-300 cursor-pointer">{{ sub.title }}</a>
                    </template>
                  </div>
                </template>
              </div>
            </template>
          </div>

          <!-- 关注我们 -->
          <div class="right w-3/12  pr-3 text-right flex justify-end" v-if="config.wxQrcode">
            <div class="qrcode flex flex-col items-center">
              <el-image :src="config.wxQrcode" class="w-[100px]" />
              <text class="text-gray-50 py-2">{{ config.wxQrcodeText }}</text>
            </div>
          </div>
        </div>

      <div class="flex pt-1 w-auto sm:hidden px-4 sm:px-0">
        <el-divider><span class="text-gray-400">Footer</span></el-divider>
      </div>
      <div class="mx-3 sm:hidden p-5 bg-white rounded-xl">
        <el-collapse v-model="activeNames" accordion>
          <template v-for="(item,index) in subMenu">
            <el-collapse-item :title="item.title" :name="index">
              <template v-if="item.children">
                <template v-for="sub in item.children">
                  <a :href="getSpmUrl(sub)" class="block cursor-pointer text-gray-600 hover:text-gray-900">{{ sub.title }}</a>
                </template>
              </template>
            </el-collapse-item>
          </template>
        </el-collapse>
      </div>

<!--      <div class="sm:hidden p-4 mt-3">-->
<!--        <el-button type="primary" class="w-full" size="large">联系我们</el-button>-->
<!--      </div>-->

      <!-- 版权信息 -->
<!--      <div class="hidden-sm-and-down sm:hidden w-full xl:w-screen-xl xl:px-0 px-4 w-full m-auto flex sm:flex-row flex-col-reverse sm:justify-between justify-center items-center sm:py-10 pt-6 pb-6 text-center">-->
<!--        <div class="text-gray-200 sm:gap-xl leading-7 flex flex-col sm:flex-row">-->
<!--          <span>Copyright © {{ new Date().getFullYear() }} {{ config?.copyright }}</span>-->
<!--          <a class="text-gray-200 hover:text-gray-400" href="https://beian.miit.gov.cn/" target="_blank"> 备案号：{{ config?.icpNo }}</a>-->
<!--        </div>-->
<!--        <div class="tools flex gap-sm items-center opacity-80 hover:opacity-90 text-gray-200 text-xs" v-if="config.showAdminIcon">-->
<!--          Powered by<a rel="nofollow" href="https://website.websoft.top" target="_blank" class="text-gray-200 hover:text-white">云·企业官网</a>&nbsp;&nbsp;-->
<!--          <el-tooltip :content="`管理后台`">-->
<!--            <a :href="`https://website.websoft.top`" target="_blank"><img src="@/assets/svg/websoft-mark-white.svg" alt="云·企业官网(https://websoft.top)" width="28" class="text-gray-400" /></a>-->
<!--          </el-tooltip>-->
<!--        </div>-->
<!--      </div>-->
      <!-- 手机版 -->
      <div class="w-full xl:w-screen-xl xl:px-0 px-4 w-full m-auto flex sm:flex-row flex-col sm:justify-between justify-center items-center sm:py-10 pt-6 pb-6 text-center">
        <div class="text-gray-400 sm:gap-xl leading-7 flex flex-col sm:flex-row">
          <span>Copyright © {{ new Date().getFullYear() }} {{ config?.copyright }}</span>
          <a class="text-gray-400 hover:text-gray-500" href="https://beian.miit.gov.cn/" target="_blank"> 备案号：{{ config?.icpNo }}</a>
        </div>
        <div class="tools flex gap-sm items-center opacity-80 hover:opacity-90 text-gray-400 text-xs" v-if="config.showAdminIcon">
          Powered by<a rel="nofollow" href="https://website.websoft.top" target="_blank" class="text-gray-400 hover:text-white">云·企业官网</a>&nbsp;&nbsp;
          <el-tooltip :content="`管理后台`">
            <a :href="`https://website.websoft.top`" target="_blank"><img src="@/assets/svg/websoft-mark-white.svg" alt="云·企业官网(https://websoft.top)" width="28" class="text-gray-400" /></a>
          </el-tooltip>
        </div>
      </div>
    </div>
  </footer>
  <footer class="absolute bottom-0 w-full" v-if="getPath().startsWith('/login')">
    <div class="w-full xl:w-screen-xl xl:p-0 px-4 w-full m-auto flex sm:flex-row flex-col-reverse sm:justify-center justify-center items-center sm:py-10 pt-6 pb-6 text-center">
      <div class="text-gray-400 sm:gap-xl leading-7 flex flex-col sm:flex-row">
        <span>Copyright © {{ new Date().getFullYear() }} {{ config?.copyright }}</span>
        <a class="text-gray-400 hover:text-gray-400" href="https://beian.miit.gov.cn/" target="_blank"> 备案号：{{ config?.icpNo }}</a>
      </div>
    </div>
  </footer>
  <el-backtop></el-backtop>
</template>

<script setup lang="ts">
// 请求数据
import {getPath, useConfigInfo, useLink} from "#imports";
import {useSubMenu, useWebsite} from "~/composables/configState";
import { StarFilled } from '@element-plus/icons-vue'
import type {ApiResult} from "~/api";
import type {Config} from "~/types/global";
import type {CmsLink} from "~/api/cms/cmsLink/model";

const config = useConfigInfo();
const website = useWebsite();
const subMenu = useSubMenu();
const SysDomain = localStorage.getItem('SysDomain');
const links = ref<CmsLink[]>();
console.log('---------config---------',config.value)
console.log('---------website---------',website.value)
console.log('---------subMenu---------',subMenu.value)

const activeNames = ref(['1'])

// TODO 读取网站配置信息
const { data: fields } = await useServerRequest<ApiResult<Config>>('/cms/cms-website-field/config', {baseURL: 'https://server.gxwebsoft.com/api',});
if (fields.value?.data) {
  config.value = fields.value?.data;
}
// TODO 读取友情链接
const { data: linksInfo } = await useServerRequest<ApiResult<CmsLink[]>>('/cms/cms-link',{baseURL: 'https://cms-api.websoft.top/api'});
links.value = linksInfo?.value?.data;
</script>

<style lang="scss">
.el-divider__text{
  display: block;
  margin-top: -1px;
  --el-bg-color: #ffffff;
}
</style>