建议大家先去看我第一篇小兔鲜的文章，强烈建议，非常建议，十分建议，从头开始看更完整。
下面是学习笔记

填写订单模块

填写订单实现

本节目标: 实现填写订单跳转

填写订单页组件和路由

1）准备填写订单页面

新建页面组件：src/views/Checkout/index.vue

<script setup lang="ts">
//
</script><template><div>填写订单页面</div>
</template>

2）二级路由：router/index.ts

  {path: '/',component: Layout,children: [...{path: "/member/checkout",component: () => import("@/views/Checkout/index.vue"),},]},

购物车页结算按钮

思路分析

购物车页，填写订单环节的主要任务就是做各种判断，其中包括

判断是否选中商品，没选中商品提醒。
判断是否登录，未登录提醒。

满足以上条件跳转去填写订单页面。

落地代码

src\views\Cart\index.vue

// 点击填写订单按钮
const router = useRouter();
const goToCheckout = () => {// 1. 判断选中数量不能为零if (!selectedListCount.value) {return message({ type: "warn", text: "请选择商品下单" });}// 2. 判断是否登录if (!member.isLogin) {return message({ type: "warn", text: "请先登录~" });}// 跳转到填写订单router.push("/member/checkout");
};<XtxButton type="primary" @click="goToCheckout()">填写订单</XtxButton>

获取预付订单数据

本节目标: 获取预付订单数据并定义TS类型声明文件。

接口：生成订单(即填写订单或结算页)

基本信息

Path： /member/order/pre

Method： GET

请求参数

无

获取订单数据

实现步骤

准备订单的 Store
定义获取结算信息 API 接口
页面组件获取数据，渲染页面内容

代码落地

新建 Store： src/store/modules/order.ts

import { defineStore } from 'pinia';// 定义 Store 时建议遵循命名规范 useXxxStore
const useOrderStore = defineStore('order', {// state 相当于 datastate: () => ({}),// getters 相当于 computedgetters: {},// actions 相当于 methodsactions: {},
});export default useOrderStore;

合并 Store，src/store/index.ts

import useOrderStore from './modules/order';const useStore = defineStore('main', {state: () => ({// ...代码省略order: useOrderStore(),}),
});

准备 actions

 actions: {async getCheckoutInfo() {const res = await http('GET', '/member/order/pre');console.log('GET', '/member/order/pre', res);},},

组件中调用

<script setup lang="ts">
const { order } = useStore();
order.getCheckoutInfo();
</script>

定义 TS 类型文件

新建类型文件 src\types\modules\order.d.ts

export interface UserAddresse {id: string;receiver: string;contact: string;provinceCode: string;cityCode: string;countyCode: string;address: string;isDefault: number;fullLocation: string;postalCode: string;addressTags: string;
}export interface Good {id: string;name: string;picture: string;count: number;skuId: string;attrsText: string;price: string;payPrice: string;totalPrice: string;totalPayPrice: string;
}export interface Summary {goodsCount: number;totalPrice: number;totalPayPrice: number;postFee: number;discountPrice: number;
}// 生成订单
export interface CheckoutInfo {userAddresses: UserAddresse[];goods: Good[];summary: Summary;
}

合并导出 src\types\index.d.ts

// 统一导出所有自定义的类型文件
...
export * from "./api/order";

填写订单数据渲染

本节目标：完成结算页静态结构和数据渲染

静态结构

1）准备结构 src/views/Checkout/index.vue

<template><div class="xtx-pay-checkout-page"><div class="container"><XtxBread><XtxBreadItem to="/">首页</XtxBreadItem><XtxBreadItem to="/cart">购物车</XtxBreadItem><XtxBreadItem>填写订单</XtxBreadItem></XtxBread><div class="wrapper"><!-- 收货地址 --><h3 class="box-title">收货地址</h3><div class="box-body"><div class="address"><div class="text"><ul><li><span>收&ensp;货&ensp;人：</span>朱超</li><li><span>联系方式：</span>132****2222</li><li><span>收货地址：</span>海南省三亚市解放路108号物质大厦1003室</li></ul><!-- <div class="none">您需要先添加收货地址才可提交订单。</div> --></div><div class="action"><XtxButton class="btn">切换地址</XtxButton><XtxButton class="btn">添加地址</XtxButton></div></div></div><!-- 商品信息 --><h3 class="box-title">商品信息</h3><div class="box-body"><table class="goods"><thead><tr><th width="520">商品信息</th><th width="170">单价</th><th width="170">数量</th><th width="170">小计</th><th width="170">实付</th></tr></thead><tbody><tr v-for="item in 4" :key="item"><td><a href="javascript:;" class="info"><imgsrc="https://yanxuan-item.nosdn.127.net/cd9b2550cde8bdf98c9d083d807474ce.png"alt=""/><div class="right"><p>轻巧多用锅雪平锅 麦饭石不粘小奶锅煮锅</p><p>颜色：白色 尺寸：10cm 产地：日本</p></div></a></td><td>&yen;100.00</td><td>2</td><td>&yen;200.00</td><td>&yen;200.00</td></tr></tbody></table></div><!-- 配送时间 --><h3 class="box-title">配送时间</h3><div class="box-body"><a class="my-btn active" href="javascript:;">不限送货时间：周一至周日</a><a class="my-btn" href="javascript:;">工作日送货：周一至周五</a><a class="my-btn" href="javascript:;">双休日、假日送货：周六至周日</a></div><!-- 支付方式 --><h3 class="box-title">支付方式</h3><div class="box-body"><a class="my-btn active" href="javascript:;">在线支付</a><a class="my-btn" href="javascript:;">货到付款</a><span style="color: #999">货到付款需付5元手续费</span></div><!-- 金额明细 --><h3 class="box-title">金额明细</h3><div class="box-body"><div class="total"><dl><dt>商品件数：</dt><dd>5件</dd></dl><dl><dt>商品总价：</dt><dd>¥5697.00</dd></dl><dl><dt>运<i></i>费：</dt><dd>¥0.00</dd></dl><dl><dt>应付总额：</dt><dd class="price">¥5697.00</dd></dl></div></div><!-- 提交订单 --><div class="submit"><XtxButton type="primary">提交订单</XtxButton></div></div></div></div>
</template><style scoped lang="less">
.wrapper {background: #fff;padding: 0 20px;.box-title {font-size: 16px;font-weight: normal;padding-left: 10px;line-height: 70px;border-bottom: 1px solid #f5f5f5;}.box-body {padding: 20px 0;}
}
.address {border: 1px solid #f5f5f5;display: flex;align-items: center;.text {flex: 1;min-height: 90px;display: flex;align-items: center;.none {line-height: 90px;color: #999;text-align: center;width: 100%;}> ul {flex: 1;padding: 20px;li {line-height: 30px;span {color: #999;margin-right: 5px;> i {width: 0.5em;display: inline-block;}}}}> a {color: @xtxColor;width: 160px;text-align: center;height: 90px;line-height: 90px;border-right: 1px solid #f5f5f5;}}.action {width: 420px;text-align: center;.btn {width: 140px;height: 46px;line-height: 44px;font-size: 14px;&:first-child {margin-right: 10px;}}}
}
.goods {width: 100%;border-collapse: collapse;border-spacing: 0;.info {display: flex;text-align: left;img {width: 70px;height: 70px;margin-right: 20px;}.right {line-height: 24px;p {&:last-child {color: #999;}}}}tr {th {background: #f5f5f5;font-weight: normal;}td,th {text-align: center;padding: 20px;border-bottom: 1px solid #f5f5f5;&:first-child {border-left: 1px solid #f5f5f5;}&:last-child {border-right: 1px solid #f5f5f5;}}}
}
.my-btn {width: 228px;height: 50px;border: 1px solid #e4e4e4;text-align: center;line-height: 48px;margin-right: 25px;color: #666666;display: inline-block;&.active,&:hover {border-color: @xtxColor;}
}
.total {dl {display: flex;justify-content: flex-end;line-height: 50px;dt {i {display: inline-block;width: 2em;}}dd {width: 240px;text-align: right;padding-right: 70px;&.price {font-size: 20px;color: @priceColor;}}}
}
.submit {text-align: right;padding: 60px;border-top: 1px solid #f5f5f5;
}
// 对话框地址列表
.xtx-dialog {.addressWrapper {max-height: 500px;overflow-y: auto;}.text {flex: 1;min-height: 90px;display: flex;align-items: center;&.item {border: 1px solid #f5f5f5;margin-bottom: 10px;cursor: pointer;&.active,&:hover {border-color: @xtxColor;background: lighten(@xtxColor, 50%);}> ul {padding: 10px;font-size: 14px;line-height: 30px;}}}
}
</style>

渲染基本信息

渲染商品列表

<!--商品信息 -->
<tbody><tr v-for="item in checkoutInfo.goods" :key="item.skuId"><td><RouterLink :to="`/goods/${item.id}`" class="info"><img :src="item.picture" alt="" /><div class="right"><p>{{ item.name }}</p><p>{{ item.attrsText }}</p></div></RouterLink></td><td>&yen;{{ item.payPrice }}</td><td>{{ item.count }}</td><td>&yen;{{ item.totalPrice }}</td><td>&yen;{{ item.totalPayPrice }}</td></tr>
</tbody>

金额明细

<!-- 金额明细 -->
<h3 class="box-title">金额明细</h3>
<div class="box-body"><div class="total"><dl><dt>商品件数：</dt><dd>{{ checkoutInfo.summary.goodsCount }}件</dd></dl><dl><dt>商品总价：</dt><dd>¥{{ checkoutInfo?.summary.totalPrice }}</dd></dl><dl><dt>运<i></i>费：</dt><dd>¥{{ checkoutInfo?.summary.postFee }}</dd></dl><dl><dt>应付总额：</dt><dd class="price">¥{{ checkoutInfo?.summary.totalPayPrice }}</dd></dl></div>
</div>

加载优化体验

**本节目标：**加载订单信息用时较长，添加 loading 效果（骨架屏同理）。

修改代码：

<template>...
-    <div class="wrapper">
+    <div v-if="checkoutInfo" class="wrapper">...</div>
+    <div v-else class="wrapper loading"></div>...
</template><style scoped lang="less">
+// loading 效果添加权重，.wrapper.loading 表示同时存在两个类名
+.wrapper.loading {
+  min-height: 500px;
+  background: #fff url("@/assets/images/loading.gif") no-repeat center;
+}
</style>

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

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

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