gxwebsoft
/
websoft-cms
1
0
Fork 4
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化状态管理等

master
科技小王子 9 months ago
parent
8d53acda01
commit
f5aac2d548
7 changed files with 120 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 41
      components/AppFooter.vue
  2. 8
      components/AppHeader.vue
  3. 4
      components/Banner.vue
  4. 2
      components/Breadcrumb.vue
  5. 4
      components/ProductShopInfo.vue
  6. 63
      pages/index.vue
  7. 7
      pages/product/[name].vue

41
components/AppFooter.vue
View File

@ -1,25 +1,26 @@
<template> <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"> <div class="text-center bg-white text-red-7 py-10" style="display: none">
本网站为小象CMS演示站，提供的电视剧和电影资源均系收集于各大视频网站<br /> 本网站为小象CMS演示站，提供的电视剧和电影资源均系收集于各大视频网站<br />
若本站收录的节目无意侵犯了贵司版权,请给我们留言,我们会及时逐步删除和规避程序自动搜索采集到的不提供分享的版权影视。<br /> 若本站收录的节目无意侵犯了贵司版权,请给我们留言,我们会及时逐步删除和规避程序自动搜索采集到的不提供分享的版权影视。<br />
本站仅供测试和学习交流。请大家支持正版。 本站仅供测试和学习交流。请大家支持正版。
</div> </div>
<footer> <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"> <template v-for="item in subMenu">
<div class="sub-menu-item text-left pr-10"> <div class="sub-menu-item text-left pr-10">
<div class="pb-4"> <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> </div>
<template v-if="item.children"> <template v-if="item.children">
<div class="sub-menu-children flex flex-col gap-xs"> <div class="sub-menu-children flex flex-col gap-xs">
<template v-for="sub in item.children"> <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> </template>
</div> </div>
</template> </template>
@ -33,11 +34,29 @@
</div> </div>
</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> <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> </div>
</div> </div>
@ -49,6 +68,7 @@
// 请求数据 // 请求数据
import {useConfigInfo} from "#imports"; import {useConfigInfo} from "#imports";
import {useSubMenu, useWebsite} from "~/composables/configState"; import {useSubMenu, useWebsite} from "~/composables/configState";
import Breadcrumb from "~/components/Breadcrumb.vue";
const config = useConfigInfo(); const config = useConfigInfo();
const website = useWebsite(); const website = useWebsite();
@ -56,6 +76,9 @@ const subMenu = useSubMenu();
console.log('---------config---------',config.value) console.log('---------config---------',config.value)
console.log('---------website---------',website.value) console.log('---------website---------',website.value)
console.log('---------subMenu---------',subMenu.value) console.log('---------subMenu---------',subMenu.value)
const activeNames = ref(['1'])
</script> </script>
<style lang="scss"> <style lang="scss">

8
components/AppHeader.vue
View File

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

4
components/Banner.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="banner m-auto pt-[60px] relative">
<div class="banner m-auto sm:pt-[60px] pt-[47px] relative">
<template v-if="data"> <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-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="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> <div class="keywords my-4 text-5xl">{{ data.design?.name }}</div>

2
components/Breadcrumb.vue
View File

@ -1,5 +1,5 @@
<template> <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 :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.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> <el-breadcrumb-item v-if="data.categoryName" :to="{ path: data.categoryPath }">{{ data.categoryName }}</el-breadcrumb-item>

4
components/ProductShopInfo.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<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="bg-white p-3 mt-3 flex items-center justify-between rounded-xl">
<div class="left flex gap-xs items-center"> <div class="left flex gap-xs items-center">
<el-avatar shape="square" :src="data?.image" :size="55" /> <el-avatar shape="square" :src="data?.image" :size="55" />
@ -6,7 +7,7 @@
<div class="shop-name cursor-pointer"> <div class="shop-name cursor-pointer">
<div class="flex items-center"> <div class="flex items-center">
<text class="text-xl">{{ data?.merchantName }}</text> <text class="text-xl">{{ data?.merchantName }}</text>
<el-tag type="success" size="small" class="ml-2">官网</el-tag>
<el-tag type="success" size="small" class="ml-2">官方</el-tag>
</div> </div>
</div> </div>
<el-rate <el-rate
@ -19,6 +20,7 @@
</div> </div>
<el-button>进入店铺</el-button> <el-button>进入店铺</el-button>
</div> </div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

63
pages/index.vue
View File

@ -1,9 +1,9 @@
<template> <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"> <el-carousel-item v-for="item in banner.data" :key="item.uid">
<nuxt-link v-if="item.path" :to="item.path"> <nuxt-link v-if="item.path" :to="item.path">
<el-image :src="item.url" style="width: 100%" fit="cover"/> <el-image :src="item.url" style="width: 100%" fit="cover"/>
@ -80,18 +80,60 @@
</ul> </ul>
</el-col> </el-col>
</el-row> </el-row>
<el-card class="bg-white flex items-center mt-20">
<div slot="header">
<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> <el-icon>
<ElIconLink/> <ElIconLink/>
</el-icon> </el-icon>
<span>友情链接</span> <span>友情链接</span>
</div> </div>
<div class="flex gap-xl p-2">
<a v-for="item in links" :href="item.url" target="_blank">{{ item.name }}</a>
</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> </div>
</el-card> </el-card>
</div> </div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -103,6 +145,8 @@ import {useServerRequest} from "~/composables/useServerRequest";
const banner = ref<any>(); const banner = ref<any>();
const links = ref<any>(); const links = ref<any>();
const movieList = ref<any>(); const movieList = ref<any>();
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
// 获取数据 // 获取数据
const reload = async () => { const reload = async () => {
@ -114,7 +158,6 @@ const reload = async () => {
banner.value = slide.value?.data; banner.value = slide.value?.data;
links.value = link.value?.data; links.value = link.value?.data;
} }
reload(); reload();
</script> </script>

7
pages/product/[name].vue
View File

@ -1,11 +1,11 @@
<template> <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" /> <Breadcrumb :data="form" />
<ProductShopInfo :data="goods?.merchant" /> <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="goods-image flex gap-xl">
<div class="gap-xs flex flex-col"> <div class="gap-xs flex flex-col">
<el-avatar v-for="item in JSON.parse(goods.files)" :src="item.url" size="large" shape="square" /> <el-avatar v-for="item in JSON.parse(goods.files)" :src="item.url" size="large" shape="square" />
@ -14,7 +14,7 @@
</div> </div>
<div class="goods-info flex flex-col gap-xs"> <div class="goods-info flex flex-col gap-xs">
<div class="goods-name text-2xl">{{ goods.goodsName }}</div> <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-green-7">购买得积分</div>
<div class="text-gray-4">配送：无需配送</div> <div class="text-gray-4">配送：无需配送</div>
<div class="text-gray-4">保障：假一赔四 退货包运费 极速退款</div> <div class="text-gray-4">保障：假一赔四 退货包运费 极速退款</div>
@ -104,6 +104,7 @@ if(nav.value?.data){
// TODO 获取商品详情 // TODO 获取商品详情
const { data: info } = await useServerRequest<ApiResult<Goods>>('/shop/goods/' + productName) const { data: info } = await useServerRequest<ApiResult<Goods>>('/shop/goods/' + productName)
goods.value = info.value?.data; goods.value = info.value?.data;
goods.value.num = 1;
const handleClick = (tab, event) => { const handleClick = (tab, event) => {

Write Preview
Loading…
Cancel
Save