10 changed files with 352 additions and 153 deletions
@ -1,88 +0,0 @@ |
|||||
<template> |
|
||||
<!-- <div class="banner" v-if="list">--> |
|
||||
<!-- <el-image :src="list.photo"></el-image>--> |
|
||||
<!-- </div>--> |
|
||||
<div v-if="list" class="container flex flex-col w-[1280px] m-auto my-3"> |
|
||||
<el-breadcrumb class="py-2" separator="/"> |
|
||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> |
|
||||
<el-breadcrumb-item v-if="categoryName" :to="{ path: `/article/${categoryId}` }">{{ categoryName }}</el-breadcrumb-item> |
|
||||
<!-- <el-breadcrumb-item>{{ list.count }}</el-breadcrumb-item>--> |
|
||||
</el-breadcrumb> |
|
||||
|
|
||||
<el-card :title="`标题`" class="w-7xl m-auto mt-10"> |
|
||||
<template v-for="(item,index) in list"> |
|
||||
<a :href="`/article/detail/${item.articleId}`" target="_blank" class="title text-3xl text-center">{{ item.title }}</a> |
|
||||
<div v-html="item.content"> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-card> |
|
||||
<div class="flex flex-wrap justify-between w-[1280px] m-auto my-3"> |
|
||||
|
|
||||
<div class="w-[155px] h-[218px] bg-gray-300"></div> |
|
||||
<div class="w-[155px] h-[218px] bg-gray-300"></div> |
|
||||
<div class="w-[155px] h-[218px] bg-gray-300"></div> |
|
||||
<div class="w-[155px] h-[218px] bg-gray-300"></div> |
|
||||
<div class="w-[155px] h-[218px] bg-gray-300"></div> |
|
||||
<div class="w-[155px] h-[218px] bg-gray-300"></div> |
|
||||
<div class="w-[155px] h-[218px] bg-gray-300"></div> |
|
||||
<div class="w-[155px] h-[218px] bg-gray-300"></div> |
|
||||
|
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="!list"> |
|
||||
<el-empty description="404 页面不存在"></el-empty> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup lang="ts"> |
|
||||
import type {ApiResult, PageResult} from "~/api"; |
|
||||
import type {Article} from "~/api/cms/article/model"; |
|
||||
import {useRequest} from "~/composables/useRequest"; |
|
||||
|
|
||||
const route = useRoute(); |
|
||||
const { query, params } = route; |
|
||||
const { categoryId } = params; |
|
||||
|
|
||||
console.log(categoryId,'categoryId') |
|
||||
|
|
||||
// 页面信息 |
|
||||
const list = ref<Article[] | any>(); |
|
||||
const title = ref(); |
|
||||
const categoryName = ref(); |
|
||||
const count = ref() |
|
||||
|
|
||||
|
|
||||
// 请求数据 |
|
||||
const { data: articleList } = await useRequest<ApiResult<PageResult<Article>>>('/cms/article/page',{ |
|
||||
params: { |
|
||||
categoryId |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
console.log(articleList); |
|
||||
|
|
||||
if (articleList.value) { |
|
||||
count.value = articleList.value.data?.count; |
|
||||
list.value = articleList.value.data?.list.map((d,i)=>{ |
|
||||
if(i === 0){ |
|
||||
categoryName.value = d.categoryName; |
|
||||
useHead({ |
|
||||
title: `${d.categoryName} - 网宿软件`, |
|
||||
meta: [{ name: "keywords", content: d.title }], |
|
||||
bodyAttrs: { |
|
||||
class: "page-container", |
|
||||
}, |
|
||||
script: [ |
|
||||
{ |
|
||||
children: "console.log('Hello World')", |
|
||||
}, |
|
||||
], |
|
||||
}); |
|
||||
} |
|
||||
return d; |
|
||||
}); |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped lang="scss"> |
|
||||
|
|
||||
</style> |
|
||||
@ -0,0 +1,143 @@ |
|||||
|
<template> |
||||
|
<div class="banner h-[60px]"> |
||||
|
<el-image :src="form?.photo"></el-image> |
||||
|
</div> |
||||
|
<div class="flex flex-col w-full md:w-3/4 m-auto my-3"> |
||||
|
|
||||
|
<el-breadcrumb class="py-2" separator="/"> |
||||
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item v-if="form?.parentName">{{ form.parentName }}</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item v-if="form?.categoryName">{{ form.categoryName }}</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
|
||||
|
<el-row :gutter="20" class="mt-3"> |
||||
|
<el-col :span="18"> |
||||
|
<div class="news-list p-4 bg-white"> |
||||
|
<ul class="infinite-list" v-infinite-scroll="load" :infinite-scroll-disabled="disabled" style="overflow:auto"> |
||||
|
<li v-for="item in list"> |
||||
|
<div class="item flex gap-xl mb-5 h-[120px] w-full hover:bg-gray-50"> |
||||
|
<div class="item-image"> |
||||
|
<el-image :src="item.image" class="w-[180px] h-[120px] bg-gray-50 cursor-pointer" fit="contain" /> |
||||
|
</div> |
||||
|
<div class="item-info py-2 flex flex-col justify-between"> |
||||
|
<a :href="`/article/detail/${item.articleId}`" target="_blank" class="text-xl">{{ item.title }}</a> |
||||
|
<div class="desc text-gray-5" v-html="item.comments"></div> |
||||
|
<div class="actions text-gray-4 text-sm flex gap-2xl"> |
||||
|
<span href="#">{{ item.updateTime }}</span> |
||||
|
<span href="#">浏览：{{ item.actualViews }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
</ul> |
||||
|
<div class="text-center text-gray-4"> |
||||
|
<text v-if="disabled">没有更多了</text> |
||||
|
<text @click="load" v-else>加载更多</text> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<div class="hot-new bg-white p-1"> |
||||
|
<div class="title bg-gray-50 p-2 flex items-center gap-xs"><el-icon><ElIconLink/></el-icon>最新推荐</div> |
||||
|
<div class="news-list p-3"> |
||||
|
<a class="item py-1 block cursor-pointer" v-for="(item,index) in list"> |
||||
|
{{item.title}} |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="view-rank bg-white p-1 mt-5"> |
||||
|
<div class="title bg-gray-50 p-2 flex items-center gap-xs"><el-icon><ElIconLink/></el-icon>点击排行</div> |
||||
|
<div class="news-list p-3"> |
||||
|
<a class="item py-1 block cursor-pointer" v-for="(item,index) in list"> |
||||
|
{{item.title}} |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<el-divider /> |
||||
|
<div v-if="!list"> |
||||
|
<el-empty description="404 页面不存在"></el-empty> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import type {ApiResult, PageResult} from "~/api"; |
||||
|
import type {Article} from "~/api/cms/article/model"; |
||||
|
import {useRequest} from "~/composables/useRequest"; |
||||
|
import type {Design} from "~/api/cms/design/model"; |
||||
|
import {useClientRequest} from "~/composables/useClientRequest"; |
||||
|
import {pageArticle} from "~/api/cms/article"; |
||||
|
|
||||
|
const route = useRoute(); |
||||
|
const { query, params } = route; |
||||
|
const { id } = params; |
||||
|
|
||||
|
// 页面信息 |
||||
|
const list = ref<Article[]>([]); |
||||
|
const title = ref(); |
||||
|
const categoryName = ref(); |
||||
|
const count = ref() |
||||
|
const page = ref<number>(1); |
||||
|
const disabled = ref<boolean>(false); |
||||
|
const newList = ref<Article[]>(); |
||||
|
|
||||
|
// 页面信息 |
||||
|
const form = ref<Design | any>(); |
||||
|
|
||||
|
const load = () => { |
||||
|
if(!disabled.value){ |
||||
|
page.value++; |
||||
|
reload(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 请求数据 |
||||
|
const reload = async () => { |
||||
|
await useRequest<ApiResult<PageResult<Article>>>('/cms/article/page',{ |
||||
|
params: { |
||||
|
page: page.value, |
||||
|
categoryId: id |
||||
|
} |
||||
|
}).then(res => { |
||||
|
const data = res.data.value?.data; |
||||
|
count.value = data?.count; |
||||
|
if (data?.list.length == 0) { |
||||
|
disabled.value = true; |
||||
|
return false; |
||||
|
} |
||||
|
if (page.value == 0) { |
||||
|
list.value = data?.list; |
||||
|
}else { |
||||
|
list.value = list.value.concat(data?.list); |
||||
|
} |
||||
|
|
||||
|
// list.value = articleList.value.data?.list; |
||||
|
list.value.map((d,i)=>{ |
||||
|
if(i === 0){ |
||||
|
categoryName.value = d.categoryName; |
||||
|
form.value = d; |
||||
|
useHead({ |
||||
|
title: `${d.categoryName} - 网宿软件`, |
||||
|
meta: [{ name: "keywords", content: d.title }], |
||||
|
bodyAttrs: { |
||||
|
class: "page-container", |
||||
|
}, |
||||
|
script: [ |
||||
|
{ |
||||
|
children: "console.log('Hello World')", |
||||
|
}, |
||||
|
], |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}) |
||||
|
|
||||
|
} |
||||
|
|
||||
|
reload(); |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,133 @@ |
|||||
|
<template> |
||||
|
<div class="banner h-[60px]" v-if="form"> |
||||
|
<el-image :src="form.photo"></el-image> |
||||
|
</div> |
||||
|
<div v-if="form" class="flex flex-col w-full md:w-3/4 m-auto my-3"> |
||||
|
<el-breadcrumb class="py-2" separator="/"> |
||||
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>{{ form.categoryParent }}</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>{{ form.goodsName }}</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
|
||||
|
<div class="bg-white p-3 mt-3 flex items-center justify-between"> |
||||
|
<div class="left flex gap-xs items-center"> |
||||
|
<el-avatar shape="square" :size="55" /> |
||||
|
<div class="shop-name flex flex-col"> |
||||
|
<div class="shop-name cursor-pointer"> |
||||
|
<div class="flex items-center"> |
||||
|
<text class="text-xl">南宁市网宿信息科技有限公司</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> |
||||
|
</div> |
||||
|
<el-button>进入店铺</el-button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="bg-white p-4 mt-4 flex gap-xl"> |
||||
|
<div class="goods-image flex gap-xl"> |
||||
|
<div class="gap-xs flex flex-col"> |
||||
|
<el-avatar v-for="item in form.files" :src="item.url" size="large" shape="square" /> |
||||
|
</div> |
||||
|
<el-image :src="form.image" fit="contain" class="w-2xl h-2xl bg-gray-100 border-radius:30px"></el-image> |
||||
|
</div> |
||||
|
<div class="goods-info flex flex-col gap-xs"> |
||||
|
<div class="goods-name text-2xl">{{ form.goodsName }}</div> |
||||
|
<div class="goods-price text-2xl red">￥{{ form.salePrice * form.num }}</div> |
||||
|
<div class="text-green-7">购买得积分</div> |
||||
|
<div class="text-gray-4">配送：无需配送</div> |
||||
|
<div class="text-gray-4">保障：假一赔四 退货包运费 极速退款</div> |
||||
|
<div class="text-gray-4">销量： {{ form.sales }}</div> |
||||
|
<template v-for="spec in form.goodsSpecValue"> |
||||
|
<div class="flex items-center"> |
||||
|
<div class="text-gray-4">{{ spec.value }}：</div> |
||||
|
<el-radio-group v-model="form.radio"> |
||||
|
<el-radio v-for="(specValue,specIndex) in spec.detail" :label="specIndex" border>{{ specValue }}</el-radio> |
||||
|
</el-radio-group> |
||||
|
</div> |
||||
|
</template> |
||||
|
<div class="text-gray-4"> |
||||
|
已选中：{{ form.radio }} |
||||
|
</div> |
||||
|
<div class="text-gray-4"> |
||||
|
数量： |
||||
|
<el-input-number v-model="form.num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number> |
||||
|
</div> |
||||
|
<div class="py-5"> |
||||
|
<el-button-group size="large"> |
||||
|
<el-button type="danger">立即购买</el-button> |
||||
|
<el-button type="warning">加入购物车</el-button> |
||||
|
</el-button-group> |
||||
|
<el-button size="large" class="ml-3">收藏</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="content p-4 bg-white"> |
||||
|
<el-tabs v-model="activeName" :lazy="true" @tab-click="handleClick"> |
||||
|
<el-tab-pane label="参数信息" name="parameter"> |
||||
|
<el-descriptions class="margin-top" title="参数信息" :column="1" border> |
||||
|
<el-descriptions-item label="品牌">websoft</el-descriptions-item> |
||||
|
<el-descriptions-item label="版本">2.0</el-descriptions-item> |
||||
|
<el-descriptions-item label="开发语言">Java、Vue3、Nuxt</el-descriptions-item> |
||||
|
<el-descriptions-item label="版本"> |
||||
|
<el-tag size="small">授权版</el-tag> |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item label="备注">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item> |
||||
|
</el-descriptions> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="图文详情" name="content"> |
||||
|
<div class="files flex flex-col w-3/4"> |
||||
|
<el-image v-for="item in form.files" :src="item.url" /> |
||||
|
</div> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="用户评价" name="reviews">用户评价</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<div v-if="!form"> |
||||
|
<el-empty description="404 页面不存在"></el-empty> |
||||
|
</div> |
||||
|
<div title="调试数据" class="p-8 text-center"> |
||||
|
页面ID： {{ productName }} |
||||
|
页面数据：{{ form }} |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import type {ApiResult} from "~/api"; |
||||
|
import {useRequest} from "~/composables/useRequest"; |
||||
|
import type {Goods} from "~/api/shop/goods/model"; |
||||
|
|
||||
|
const route = useRoute(); |
||||
|
const { query, params } = route; |
||||
|
const { name: productName } = params; |
||||
|
const activeName = ref('parameter'); |
||||
|
const rate = ref(4); |
||||
|
|
||||
|
|
||||
|
// 页面信息 |
||||
|
const form = ref<Goods | any>(); |
||||
|
|
||||
|
// 请求数据 |
||||
|
const { data: info } = await useRequest<ApiResult<Goods>>('/shop/goods/' + productName) |
||||
|
form.value = info.value?.data; |
||||
|
form.value.files = JSON.parse(form.value.files); |
||||
|
form.value.num = 1; |
||||
|
form.value.radio = '0' |
||||
|
|
||||
|
|
||||
|
|
||||
|
const handleClick = (tab, event) => { |
||||
|
console.log(tab, event); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
|
||||
|
</style> |
||||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
Loading…
Reference in new issue