yoe-shop-web/src/layout/components/foot.vue

<template>
  <div class="foot">
    <div class="foot-head">
      <div class="head-bos">
        <div class="head-left">
          <img class="head-img" src="@/assets/images/head.png" alt="" />
          <div class="flex-row-start">
            <div class="head-code flex-column-center">
              <img :src="wechatLink" alt="" />
              <div>关注公众号</div>
            </div>
            <div class="head-code flex-column-center" style="margin-left: 16px">
              <img :src="weiboLink" alt="" />
              <div>关注微博</div>
            </div>
          </div>
        </div>
        <div class="head-right">
          <div class="info-bos flex-row-start">
            <div v-for="(navItem, index) in bottomNavList" :key="index" :style="{ marginRight: index < bottomNavList.length - 1 ? '140px' : '0' }">
              <div class="info-title">{{ navItem.navigationName }}</div>
              <div
                v-for="(link, linkIndex) in navItem.children"
                :key="linkIndex"
                class="info-text"
                :style="{ marginTop: linkIndex === 0 ? '0' : '12px' }"
                @click="handleNavClick(link)"
              >
                {{ link.navigationName }}
              </div>
            </div>
          </div>
          <div class="contact">
            <span>联系我们</span>
            <span>{{ servicePhone }}</span>
            <span>(周一至周五 8:30-17:30)</span>
          </div>
          <div class="logistics">
            <div class="logistics-box flex-row-start">
              <img src="@/assets/images/layout/layout3.png" alt="" />
              <div>无忧退换货</div>
            </div>
            <div class="logistics-box flex-row-start">
              <img src="@/assets/images/layout/layout3.png" alt="" />
              <div>满百包邮</div>
            </div>
            <div class="logistics-box flex-row-start">
              <img src="@/assets/images/layout/layout3.png" alt="" />
              <div>品质保证</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="foot-foot">{{ icpNo }}增值电信业务经营许可证编号:{{ license }}</div>
  </div>
</template>

<script setup lang="ts">
import { getPlatformConfigList } from '@/api/breg/index';
import { getBottomNav } from '@/api/home/index';
import { handleTree } from '@/utils/ruoyi';

const icpNo = ref<any>('');
const license = ref<any>('');
const wechatLink = ref<any>('');
const weiboLink = ref<any>('');
const servicePhone = ref<any>('');
const bottomNavList = ref<any[]>([]);

// 获取底部导航数据
const fetchBottomNav = async () => {
  try {
    const res = await getBottomNav('footer'); // 使用 footer 作为页面类型参数
    if (res.code == 200 && res.data) {
      // 后端返回的是扁平列表，使用 handleTree 转换为树形结构
      // parentId 为 0、null 或 undefined 的是父级节点
      bottomNavList.value = handleTree(res.data, 'id', 'parentId', 'children');
    }
  } catch (error) {
    console.error('获取底部导航失败:', error);
  }
};

// 处理导航点击事件
const handleNavClick = (link: any) => {
  if (link.url) {
    window.open(link.url, '_blank');
  } else if (link.link) {
    window.open(link.link, '_blank');
  }
};

getPlatformConfigList({ configKey: 'icpNo' }).then((res) => {
  if (res.code == 200) {
    if (res.rows && res.rows.length > 0) {
      icpNo.value = res.rows[0].value;
    }
  }
});

getPlatformConfigList({ configKey: 'license' }).then((res) => {
  if (res.code == 200) {
    if (res.rows && res.rows.length > 0) {
      license.value = res.rows[0].value;
    }
  }
});

getPlatformConfigList({ configKey: 'wechatLink' }).then((res) => {
  if (res.code == 200) {
    if (res.rows && res.rows.length > 0) {
      wechatLink.value = res.rows[0].value;
    }
  }
});

getPlatformConfigList({ configKey: 'weiboLink' }).then((res) => {
  if (res.code == 200) {
    if (res.rows && res.rows.length > 0) {
      weiboLink.value = res.rows[0].value;
    }
  }
});

getPlatformConfigList({ configKey: 'servicePhone' }).then((res) => {
  if (res.code == 200) {
    if (res.rows && res.rows.length > 0) {
      servicePhone.value = res.rows[0].value;
    }
  }
});

// 组件挂载时获取底部导航数据
onMounted(() => {
  fetchBottomNav();
});
</script>

<style lang="scss" scoped>
.foot {
  width: 100%;

  .foot-head {
    width: 100%;
    background: #e7e7e7;
    padding-bottom: 32px;

    .head-bos {
      max-width: 1500px;
      min-width: 1200px;
      width: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: center;

      .head-left {
        padding-right: 116px;

        .head-img {
          margin-top: 32px;
          width: 160px;
          height: 78px;
          margin-bottom: 50px;
        }

        .head-code {
          font-size: 12px;
          color: #364153;

          img {
            width: 86px;
            height: 86px;
            margin-bottom: 8px;
          }
        }
      }

      .head-right {
        // flex: 1;
        padding-top: 44px;

        .info-bos {
          .info-title {
            font-weight: 600;
            font-size: 14px;
            color: #101828;
            margin-bottom: 20px;
          }

          .info-text {
            font-size: 14px;
            color: #101828;
            margin-top: 12px;
            cursor: pointer;

            &:hover {
              color: #e7000b;
            }
          }
        }

        .contact {
          width: 100%;
          border-top: 1px solid #dddddd;
          border-bottom: 1px solid #dddddd;
          padding: 16px 0;
          margin-top: 20px;
          font-size: 14px;
          color: #101828;

          span:nth-of-type(2) {
            padding-left: 10px;
          }

          span:nth-of-type(3) {
            padding-left: 10px;
            font-size: 12px;
            color: #6a7282;
          }
        }

        .logistics {
          padding-top: 20px;
          display: flex;

          .logistics-box {
            font-size: 16px;
            color: #101828;
            margin-right: 70px;

            img {
              width: 33px;
              height: 33px;
              margin-right: 11px;
            }

            // .logistics-icon {
            //   width: 33px;
            //   height: 33px;
            //   border-radius: 33px;
            //   border: 1px solid #101828;
            //   margin-right: 11px;
            //   img {
            //     height: 16px;
            //     width: 16px;
            //   }
            // }
          }
        }
      }
    }
  }

  .foot-foot {
    width: 100%;
    height: 52px;
    background: #000000;
    line-height: 52px;
    text-align: center;
    font-size: 14px;
    color: #ffffff;
  }
}
</style>