最近正在学习vue3小兔鲜，
下面是学习笔记

详情模块

目标：界面渲染部分我们快速准备，详情模块的重点都在组件封装。

基础布局和路由

任务目标: 完成商品详情的基础布局和路由配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-74chHUyJ-1668072819356)(media/01-16459812143554.png)]

1）新建页面组件

src/views/Goods/index.vue

<script setup lang="ts">
//
</script><template><div class="xtx-goods-page"><div class="container"><!-- 商品信息 --><div class="goods-info"><!-- 图片预览区 --><div class="media"></div><!-- 商品信息区 --><div class="spec"></div></div><!-- 商品详情 --><div class="goods-footer"><div class="goods-article"><!-- 商品详情 --><div class="goods-tabs"></div></div><!-- 24热榜+专题推荐 --><div class="goods-aside"></div></div></div></div>
</template><style scoped lang="less">
.container {margin-top: 20px;
}
.goods-info {min-height: 600px;background: #fff;display: flex;.media {width: 580px;height: 600px;padding: 30px 50px;}.spec {flex: 1;padding: 30px 30px 30px 0;}
}
.goods-footer {display: flex;margin-top: 20px;.goods-article {width: 940px;margin-right: 20px;}.goods-aside {width: 280px;min-height: 1000px;}
}
.goods-tabs {min-height: 600px;background: #fff;
}
.goods-warn {min-height: 600px;background: #fff;margin-top: 20px;
}
</style>

2）路由配置

src/router/index.ts

const routes = [{path: '/',component: Layout,children: [// ...{path: '/goods/:id',component: () => import('@/views/Goods/index.vue')}]}
]

3）测试路由跳转

获取商品详情数据

步骤

获取路由 id 参数
在组件中直接调用 axios 发送请求
准备 TS 类型声明文件
保存后端返回数据，并指定TS类型(有更好的提示)

商品详情接口

基本信息

Path： /goods

Method： GET

接口描述：

规格集合一定要和 skus 集合下的 specs 顺序保持一致

请求参数

Query

参数名称	是否必须	示例	备注
id	是	3995885	商品id

发送请求

实现步骤

在组件setup中获取商品详情数据

<script setup lang="ts">
import { http } from "@/utils/request";
import { onMounted } from "vue";
import { useRoute } from "vue-router";const route = useRoute();
const { id } = route.params;
onMounted(async () => {const res = await http("GET", "/goods", { id: id });console.log("/goods", res.data.result);
});
</script>

定义 TS 类型

新建类型声明文件：src/types/api/goods.d.ts

// 统一先使用 Sku 组件中定义的商品详情类型
export * from "@/components/XtxUI/Sku/goods";

类型出口绑定：src\types\index.d.ts

// 统一导出所有类型文件
export * from "./api/home";
export * from "./api/category";
+ export * from "./api/goods";

组件中应用类型

src/views/goods/index.vue

<script setup lang="ts">
import { http } from "@/utils/request";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import type { GoodsDetail } from "@/types";const route = useRoute();
const { id } = route.params;
const goods = ref<GoodsDetail>();
onMounted(async () => {const res = await http<GoodsDetail>("GET", "/goods", { id: id });console.log("/goods", res.data.result);goods.value = res.data.result;
});
</script>

商品信息渲染

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Oglu6xR-1668072819360)(media/24.png)]

静态结构准备-CV

src\views\Goods\index.vue

<template><div class="xtx-goods-page"><div class="container"><!-- 商品信息 --><div class="goods-info"><div class="media"><!-- 图片预览区 --><div class="goods-image"><!-- 图片预览组件 --></div><!-- 统计数量 --><ul class="goods-sales"><li><p>销量人气</p><p>100+</p><p><i class="iconfont icon-task-filling"></i>销量人气</p></li><li><p>商品评价</p><p>200+</p><p><i class="iconfont icon-comment-filling"></i>查看评价</p></li><li><p>收藏人气</p><p>80+</p><p><i class="iconfont icon-favorite-filling"></i>收藏商品</p></li><li><p>品牌信息</p><p>90+</p><p><i class="iconfont icon-dynamic-filling"></i>品牌主页</p></li></ul></div><!-- 商品信息区 --><div class="spec"><!-- 商品主要信息 --><div class="goods-main"><p class="g-name">这是商品标题</p><p class="g-desc">这是商品描述</p><p class="g-desc">这是选中的商品规格</p><p class="g-price"><span>商品现在的价钱</span><span>商品原来的价格</span></p><div class="g-service"><dl><dt>促销</dt><dd>12月好物放送，App领券购买直降120元</dd></dl><dl><dt>配送</dt><dd>至</dd><dd><XtxCity /></dd></dl><dl><dt>服务</dt><dd><span>无忧退货</span><span>快速退款</span><span>免费包邮</span><a href="javascript:;">了解详情</a></dd></dl></div></div><!-- 规格选择组件 --><!-- 数量选择组件 --><!-- 按钮组件 --></div></div><!-- 商品详情 --><div class="goods-footer"><div class="goods-article"><!-- 商品详情 --><div class="goods-tabs"></div></div><!-- 24热榜+专题推荐 --><div class="goods-aside"></div></div></div></div>
</template><style scoped lang="less">
.container {margin-top: 20px;
}// 商品信息
.goods-info {min-height: 600px;background: #fff;display: flex;.media {width: 580px;height: 600px;padding: 30px 50px;}.spec {flex: 1;padding: 30px 30px 30px 0;}
}// 图片预览区
.goods-image {width: 480px;height: 400px;background-color: #eee;
}// 统计数量
.goods-sales {display: flex;width: 400px;align-items: center;text-align: center;height: 140px;li {flex: 1;position: relative;~ li::after {position: absolute;top: 10px;left: 0;height: 60px;border-left: 1px solid #e4e4e4;content: "";}p {&:first-child {color: #999;}&:nth-child(2) {color: @priceColor;margin-top: 10px;}&:last-child {color: #666;margin-top: 10px;i {color: @xtxColor;font-size: 14px;margin-right: 2px;}&:hover {color: @xtxColor;cursor: pointer;}}}}
}// 商品信息区
.spec {.g-name {font-size: 22px;}.g-desc {color: #999;margin-top: 10px;}.g-price {margin-top: 10px;span {&::before {content: "¥";font-size: 14px;}&:first-child {color: @priceColor;margin-right: 10px;font-size: 22px;}&:last-child {color: #999;text-decoration: line-through;font-size: 16px;}}}.g-service {background: #f5f5f5;width: 500px;padding: 20px 10px 0 10px;margin-top: 10px;dl {padding-bottom: 20px;display: flex;align-items: center;dt {width: 50px;color: #999;}dd {color: #666;&:last-child {span {margin-right: 10px;&::before {content: "•";color: @xtxColor;margin-right: 2px;}}a {color: @xtxColor;}}}}}
}.goods-footer {display: flex;margin-top: 20px;.goods-article {width: 940px;margin-right: 20px;}.goods-aside {width: 280px;min-height: 1000px;}
}
.goods-tabs {min-height: 600px;background: #fff;
}
.goods-warn {min-height: 600px;background: #fff;margin-top: 20px;
}
</style>

商品信息渲染

任务目标: 按照功能渲染商品信息。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9NJ2ZDx5-1668072819361)(media/24-16459812306155.png)]

商品信息区

  <!-- 商品信息区 --><div class="spec"><div class="goods-main"><p class="g-name">{{ goods.name }}</p><p class="g-desc">{{ goods.desc }}</p><p class="g-desc">这是选中的商品规格</p><p class="g-price"><span>{{ goods.price }}</span><span>{{ goods.oldPrice }}</span></p>...

图片预览实现

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9vgjiE9z-1668072819362)(media/05-1627767527526.png)]

任务目标: 通过图片预览组件，实现商品图片预览功能。

<!-- 图片预览区 -->
<div class="media"><!-- 图片预览区 --><XtxImageView :image-list="goods.mainPictures" />
</div>

添加 loading 效果

为了使用方便，商品数据在渲染是添加 v-if 条件，使用数据时省略大量的 ?. 写法。
同时增强用户体验，添加 loading 效果。

<template><div class="xtx-goods-page"><div class="container"><!-- 商品信息 -->
-      <div class="goods-info">
+      <div v-if="goods" class="goods-info">...
+      <div v-else class="goods-info xtx-loading"></div>...
</template><style scoped lang="less">
// ...
+ .xtx-loading {
+   background: #fff url(@/assets/images/loading.gif) no-repeat center;
+ }
</style>

按钮组件实现

vue3小兔鲜商城项目学习笔记+资料分享04相关推荐

vue3小兔鲜商城项目学习笔记+资料分享06
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 最近正在学习vue3小兔鲜下面是学习笔记购物车模块购物车功能分析 [外链图片转存失败,源站可能有防盗链机制, ...
vue3小兔鲜商城项目学习笔记+资料分享08
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 最近正在学习vue3小兔鲜下面是学习笔记支付模块路由和组件任务目标: 完成支付页路由和组件 [外链图片转存 ...
vue3小兔鲜商城项目学习笔记+资料分享09
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 最近正在学习vue3小兔鲜下面是学习笔记会员中心模块个人中心个人中心-路由配置本节目标:个人中心二级路由 ...
vue3小兔鲜商城项目学习笔记+资料分享03
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 最近正在学习vue3小兔鲜下面是学习笔记顶级类目目标:主要讲解开发时路由处理的要点,列表渲染部分自己课后实现 ...
vue3小兔鲜商城项目学习笔记+资料分享01
最近正在学习vue3小兔鲜,需要相关学习资料的可以点链接 https://docs.qq.com/doc/DUmhUVERtUHpLaG1a 下面试学习笔记项目起步项目预览地址小兔鲜儿商城:ht ...
vue3小兔鲜商城项目学习笔记+资料分享05
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 最近正在学习vue3小兔鲜, 下面是学习笔记登录模块路由与组件目标:登录组件在书写一级路由的时候已经准备,添 ...
vue3小兔鲜商城项目学习笔记+资料分享07
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 下面是学习笔记填写订单模块填写订单实现本节目标: 实现填写订单跳转填写订单页组件和路由 1)准备填写订单页 ...
web基础阶段的小兔鲜儿项目学习
小兔鲜儿 1. 所用素材 2. 项目文件介绍 3. index页面的基本骨架 4. 思路:先写外面大盒子和版心,由外往内写 5. 源码: 6. 代码的一些命名 1. 所用素材素材链接,点我跳转:ht ...
小兔鲜儿项目pc客户端前端静态页面
小兔鲜儿项目pc客户端前端静态页面一.效果图二.文件和目录准备新建index.html在根目录新建css文件夹保存网站的样式,并新建以下css文件: base.css:基础公共样式 commo ...

vue3小兔鲜商城项目学习笔记+资料分享04

详情模块

基础布局和路由

获取商品详情数据

步骤

商品详情接口

发送请求

定义 TS 类型

商品信息渲染

静态结构准备-CV

商品信息渲染

图片预览实现

添加 loading 效果

按钮组件实现

vue3小兔鲜商城项目学习笔记+资料分享04相关推荐

最新文章

热门文章

vue3小兔鲜商城项目学习笔记+资料分享04

详情模块

基础布局和路由

获取商品详情数据

步骤

商品详情接口

发送请求

定义 TS 类型

商品信息渲染

静态结构准备-CV

商品信息渲染

图片预览实现

添加 loading 效果

按钮组件实现 insertAdIfNeeded();

vue3小兔鲜商城项目学习笔记+资料分享04相关推荐

最新文章

热门文章

按钮组件实现