Browse Source

优化状态管理等

master
科技小王子 9 months ago
parent
commit
f5aac2d548
  1. 41
      components/AppFooter.vue
  2. 8
      components/AppHeader.vue
  3. 4
      components/Banner.vue
  4. 2
      components/Breadcrumb.vue
  5. 32
      components/ProductShopInfo.vue
  6. 77
      pages/index.vue
  7. 7
      pages/product/[name].vue

41
components/AppFooter.vue

@ -1,25 +1,26 @@
<template>
<div class="h-[100px]"></div>
<div class="sm:h-[100px] h-[50px]"></div>
<div class="text-center bg-white text-red-7 py-10" style="display: none">
本网站为小象CMS演示站提供的电视剧和电影资源均系收集于各大视频网站<br />
若本站收录的节目无意侵犯了贵司版权,请给我们留言,我们会及时逐步删除和规避程序自动搜索采集到的不提供分享的版权影视<br />
本站仅供测试和学习交流请大家支持正版
</div>
<footer>
<div class="w-full bg-gray-900 flex flex-col justify-between">
<div class="sub-menu w-full md:w-3/4 m-auto flex justify-between py-10 text-center p-2">
<div class="w-full flex flex-col sm:bg-black justify-between">
<!-- PC版 -->
<div class="sub-menu w-full md:w-3/4 m-auto flex justify-between py-10 text-center p-2 hidden-sm-and-down">
<!-- 底部菜单 -->
<div class="left flex justify-between gap-3xl w-8/12">
<div class="left flex flex-col sm:flex-row sm:flex-wrap justify-between gap-3xl sm:w-8/12 flex-wrap w-full">
<template v-for="item in subMenu">
<div class="sub-menu-item text-left pr-10">
<div class="pb-4">
<text class="text-gray-500 hover:text-gray-400 font-bold text-[16px]">{{ item.title }}</text>
<text class="text-gray-400 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="sub.path" class="text-gray-500 hover:text-gray-400">{{ sub.title }}</a>
<a :href="sub.path" class="text-gray-400 hover:text-gray-300">{{ sub.title }}</a>
</template>
</div>
</template>
@ -33,11 +34,29 @@
</div>
</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="sub.path" 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="w-full md:w-3/4 m-auto flex justify-between py-10 text-center p-2">
<div class="text-gray-500 gap-xl flex">
<div class="w-full md:w-3/4 w-full m-auto flex justify-between sm:py-10 pt-6 pb-6 text-center p-2">
<div class="text-gray-400 gap-xl flex flex-col sm:flex-row m-auto">
<span>Copyright © {{ new Date().getFullYear() }} {{ config?.copyright }}</span>
<a class="text-gray-500 hover:text-gray-400" href="https://beian.miit.gov.cn/" target="_blank"> 备案号{{ config?.icpNo }}</a>
<a class="text-gray-400 hover:text-gray-400" href="https://beian.miit.gov.cn/" target="_blank"> 备案号{{ config?.icpNo }}</a>
</div>
</div>
</div>
@ -49,6 +68,7 @@
//
import {useConfigInfo} from "#imports";
import {useSubMenu, useWebsite} from "~/composables/configState";
import Breadcrumb from "~/components/Breadcrumb.vue";
const config = useConfigInfo();
const website = useWebsite();
@ -56,6 +76,9 @@ const subMenu = useSubMenu();
console.log('---------config---------',config.value)
console.log('---------website---------',website.value)
console.log('---------subMenu---------',subMenu.value)
const activeNames = ref(['1'])
</script>
<style lang="scss">

8
components/AppHeader.vue

@ -2,13 +2,13 @@
<header class="header bg-black fixed z-10 w-full">
<div class="flex between md:w-3/4 m-auto px-2">
<div class="header__left flex">
<div class="logo mt-1 w-[170px] max-h-[60px] flex items-center" @click="reload">
<div class="logo mt-1 w-[170px] max-h-[60px] py-2 flex items-center" @click="reload">
<nuxt-link v-if="config?.siteLogo" to="/">
<el-image
:src="config.siteLogo"
shape="square"
fit="fill"
class="h-[35px]"
class="h-[20px] sm:h-[30px]"
:alt="config.siteName"
:title="config.siteName"
/>
@ -17,7 +17,7 @@
<text>{{ config?.siteName || '网宿软件' }}</text>
</nuxt-link>
</div>
<nav v-if="route.path.indexOf('/user') === -1" class="hidden-sm-and-down">
<nav class="hidden-sm-and-down">
<el-menu
:default-active="currentIndex"
mode="horizontal"
@ -85,7 +85,7 @@
</div>
</header>
<!-- <div class="header__height__placeholder"></div>-->
<div class="header__height__placeholder"></div>
</template>
<script setup lang="ts">

4
components/Banner.vue

@ -1,7 +1,7 @@
<template>
<div class="banner m-auto pt-[60px] relative">
<div class="banner m-auto sm:pt-[60px] pt-[47px] relative">
<template v-if="data">
<el-image :src="data.design?.photo || config.subpageBanner"></el-image>
<el-image :src="data.design?.photo || config.subpageBanner" class="sm:h-auto"></el-image>
<div class="banner-bar absolute top-0 w-full mt-[60px]">
<div class="banner-text py-12 md:w-3/4 m-auto opacity-90 flex flex-col justify-center">
<div class="keywords my-4 text-5xl">{{ data.design?.name }}</div>

2
components/Breadcrumb.vue

@ -1,5 +1,5 @@
<template>
<el-breadcrumb v-if="data" class="py-4" :separator-icon="ArrowRight">
<el-breadcrumb v-if="data" class="sm:py-4 sm:px-0 px-3 py-2" :separator-icon="ArrowRight">
<el-breadcrumb-item :to="{ path: '/' }"><el-icon><ElIconHouse /></el-icon></el-breadcrumb-item>
<el-breadcrumb-item v-if="data.parentName" :to="{ path: data.parentStatus == 0 ? data.parentPath : ''}">{{ data.parentName }}</el-breadcrumb-item>
<el-breadcrumb-item v-if="data.categoryName" :to="{ path: data.categoryPath }">{{ data.categoryName }}</el-breadcrumb-item>

32
components/ProductShopInfo.vue

@ -1,23 +1,25 @@
<template>
<div class="bg-white p-3 mt-3 flex items-center justify-between rounded-xl">
<div class="left flex gap-xs items-center">
<el-avatar shape="square" :src="data?.image" :size="55" />
<div class="shop-name flex flex-col">
<div class="shop-name cursor-pointer">
<div class="flex items-center">
<text class="text-xl">{{ data?.merchantName }}</text>
<el-tag type="success" size="small" class="ml-2">官网</el-tag>
<div class="shopinfo px-3 sm:px-0">
<div class="bg-white p-3 mt-3 flex items-center justify-between rounded-xl">
<div class="left flex gap-xs items-center">
<el-avatar shape="square" :src="data?.image" :size="55" />
<div class="shop-name flex flex-col">
<div class="shop-name cursor-pointer">
<div class="flex items-center">
<text class="text-xl">{{ data?.merchantName }}</text>
<el-tag type="success" size="small" class="ml-2">官方</el-tag>
</div>
</div>
<el-rate
v-model="rate"
show-score
text-color="#ff9900"
score-template="{value}">
</el-rate>
</div>
<el-rate
v-model="rate"
show-score
text-color="#ff9900"
score-template="{value}">
</el-rate>
</div>
<el-button>进入店铺</el-button>
</div>
<el-button>进入店铺</el-button>
</div>
</template>
<script setup lang="ts">

77
pages/index.vue

@ -1,9 +1,9 @@
<template>
<div class="banner" v-if="banner">
<el-carousel :interval="5000" arrow="always" :height="banner?.height ? `${banner?.height}px` : 'px'">
<el-carousel-item>
<video :autoplay="true" loop="" muted="" id="video" class="video"><source src="https://www.algig.cn/upload/media/2022/07/07/5ebe65d7280e4e0c947f4207646d75c4.mp4" type="video/mp4"></video>
</el-carousel-item>
<div class="banner sm:pt-[60px] pt-[46px]" v-if="banner">
<el-carousel :interval="5000" arrow="always" :height="screenWidth <= 768 ? `170px` : `${screenHeight - 200}px`">
<!-- <el-carousel-item class="hidden-sm-and-down">-->
<!-- <video :autoplay="true" loop="" muted="" id="video" class="video"><source src="https://www.algig.cn/upload/media/2022/07/07/5ebe65d7280e4e0c947f4207646d75c4.mp4" type="video/mp4"></video>-->
<!-- </el-carousel-item>-->
<el-carousel-item v-for="item in banner.data" :key="item.uid">
<nuxt-link v-if="item.path" :to="item.path">
<el-image :src="item.url" style="width: 100%" fit="cover"/>
@ -80,17 +80,59 @@
</ul>
</el-col>
</el-row>
<el-card class="bg-white flex items-center mt-20">
<div slot="header">
<el-icon>
<ElIconLink/>
</el-icon>
<span>友情链接</span>
</div>
<div class="flex gap-xl p-2">
<a v-for="item in links" :href="item.url" target="_blank">{{ item.name }}</a>
</div>
</el-card>
<div class="flex flex-col gap-2xl">
<el-card shadow="hover">
<template #header>
<div class="flex items-center gap-xs">
<el-icon>
<ElIconLink/>
</el-icon>
<span>热门推荐</span>
</div>
</template>
<div class="flex flex-wrap p-2">
<div v-for="(item,index) in links" class="flex items-center">
<a :href="item.url" target="_blank">{{ item.name }}</a>
<el-divider v-if="index + 1 != links.length" direction="vertical" />
</div>
</div>
</el-card>
<el-card shadow="hover">
<template #header>
<div class="flex items-center gap-xs">
<el-icon>
<ElIconLink/>
</el-icon>
<span>推荐文章</span>
</div>
</template>
<div class="flex flex-wrap p-2">
<div v-for="(item,index) in links" class="flex items-center">
<a :href="item.url" target="_blank">{{ item.name }}</a>
<el-divider v-if="index + 1 != links.length" direction="vertical" />
</div>
</div>
</el-card>
<el-card shadow="hover">
<template #header>
<div class="flex items-center gap-xs">
<el-icon>
<ElIconLink/>
</el-icon>
<span>友情链接</span>
</div>
</template>
<div class="flex flex-wrap p-2">
<div v-for="(item,index) in links" class="flex items-center">
<a :href="item.url" target="_blank">{{ item.name }}</a>
<el-divider v-if="index + 1 != links.length" direction="vertical" />
</div>
</div>
</el-card>
</div>
</div>
</template>
@ -103,6 +145,8 @@ import {useServerRequest} from "~/composables/useServerRequest";
const banner = ref<any>();
const links = ref<any>();
const movieList = ref<any>();
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
//
const reload = async () => {
@ -114,7 +158,6 @@ const reload = async () => {
banner.value = slide.value?.data;
links.value = link.value?.data;
}
reload();
</script>

7
pages/product/[name].vue

@ -1,11 +1,11 @@
<template>
<div class="flex flex-col w-full md:w-3/4 m-auto pt-[70px]">
<div class="flex flex-col w-full md:w-3/4 m-auto md:pt-[70px] pt-[60px]">
<Breadcrumb :data="form" />
<ProductShopInfo :data="goods?.merchant" />
<div class="bg-white p-4 mt-4 flex gap-xl rounded-xl">
<div class="bg-white p-4 mt-4 flex gap-xl rounded-xl" v-if="goods">
<div class="goods-image flex gap-xl">
<div class="gap-xs flex flex-col">
<el-avatar v-for="item in JSON.parse(goods.files)" :src="item.url" size="large" shape="square" />
@ -14,7 +14,7 @@
</div>
<div class="goods-info flex flex-col gap-xs">
<div class="goods-name text-2xl">{{ goods.goodsName }}</div>
<div class="goods-price text-2xl red">{{ goods.salePrice * goods.num }}</div>
<div class="goods-price text-2xl red">{{ goods?.salePrice * goods?.num }}</div>
<div class="text-green-7">购买得积分</div>
<div class="text-gray-4">配送无需配送</div>
<div class="text-gray-4">保障假一赔四 退货包运费 极速退款</div>
@ -104,6 +104,7 @@ if(nav.value?.data){
// TODO
const { data: info } = await useServerRequest<ApiResult<Goods>>('/shop/goods/' + productName)
goods.value = info.value?.data;
goods.value.num = 1;
const handleClick = (tab, event) => {

Loading…
Cancel
Save