# mcs-shop **Repository Path**: mcs_project/mcs-shop ## Basic Information - **Project Name**: mcs-shop - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-03-27 - **Last Updated**: 2024-04-02 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 项目简介 小兔鲜儿项目包含从首页浏览商品，商品详情，微信登录，加入购物车，提交订单，微信支付，订单管理等功能。 当前仓库为小兔鲜儿的**项目模板**。 ### 技术栈 - 前端框架：[uni-app](https://uniapp.dcloud.net.cn/) (Vue3 + TS + Setup) - 状态管理：[pinia](https://pinia.vuejs.org/zh/) - 组件库：[uni-ui](https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html) https://gitee.com/Megasu/uniapp-shop-vue3-ts/) ~~~c git push -u origin "master" ~~~ ## 运行程序 1. 安装依赖 ```shell # npm npm i --registry=https://registry.npmmirror.com # pnpm pnpm i --registry=https://registry.npmmirror.com ``` 2. 运行程序 ```shell # 微信小程序端; 编译 npm run dev:mp-weixin # H5端 npm run dev:h5 # App端 需 HbuilderX 工具，运行 - 运行到手机或模拟器 ``` 3. 微信开发者工具导入 `/dist/dev/mp-weixin` 目录 ![1711492861262](README.assets/1711492861262.png) ### 工程结构解析 ``` ├── .husky # Git Hooks ├── .vscode # VS Code 插件 + 设置 ├── dist # 打包文件夹（可删除重新打包） ├── src # 源代码 │ ├── components # 全局组件 │ ├── composables # 组合式函数 │ ├── pages # 主包页面 │ ├── index # 首页 │ ├── category # 分类页 │ ├── cart # 购物车 │ ├── my # 我的 │ └── login # 登录页 │ ├── services # 所有请求 │ ├── static # 存放应用引用的本地静态资源的目录 │ ├── images # 普通图片 │ └── tabs # tabBar 图片 │ ├── stores # 全局 pinia store │ ├── modules # 模块 │ └── index.ts # store 入口 │ ├── styles # 全局样式 │ └── fonts.scss # 字体图标 │ ├── types # 类型声明文件 │ └── component.d.ts # 全局组件类型声明 │ ├── utils # 全局方法 │ ├── App.vue # 入口页面 │ ├── main.ts # Vue初始化入口文件 │ ├── pages.json # 配置页面路由等页面类信息 │ ├── manifest.json # 配置appid等打包信息 │ └── uni.scss # uni-app 内置的常用样式变量 ├── .editorconfig # editorconfig 配置 ├── .eslintrc.cjs # eslint 配置 ├── .prettierrc.json # prettier 配置 ├── .gitignore # git 忽略文件 ├── index.html # H5 端首页 ├── package.json # package.json 依赖 ├── tsconfig.json # typescript 配置 └── vite.config.ts # vite 配置 ``` ## 格式化文本 > 使用 prettier 格式化 ~~~c // 在保存时格式化文件 "editor.formatOnSave": true, // 文件格式化配置 "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, ~~~ ### 安装uni-ui界面 ~~~c pnpm i @dcloudio/uni-ui 或 npm i @dcloudio/uni-ui ~~~ pnpm 在磁盘空间和安装速度方面有一些优势 npm: 默认情况下会将依赖项安装在项目的 `node_modules` 目录中 ； 每个项目各自一份0 ### uni-ui安装ts校验 https://www.npmjs.com/package/@uni-helper/uni-ui-types ![1711533470885](README.assets/1711533470885.png) ![1711533533210](README.assets/1711533533210.png) ### store 持久化配置 ![1711534750588](README.assets/1711534750588.png) ![1711535112354](README.assets/1711535112354.png) ![1711535317847](README.assets/1711535317847.png) ![1711535345447](README.assets/1711535345447.png) ## 文档查看例子 ![1711535447025](README.assets/1711535447025.png) ![1711535529878](README.assets/1711535529878.png) ![1711535603862](README.assets/1711535603862.png) ## 网络请求 ![1711536415682](README.assets/1711536415682.png) ## 后端接口文档 [说明 - 小兔鲜儿-小程序版 (apifox.com)](https://apifox.com/apidoc/shared-0e6ee326-d646-41bd-9214-29dbf47648fa/doc-1521513) ![1711536513695](README.assets/1711536513695.png) ![1711538716711](README.assets/1711538716711.png) ![1711538846253](README.assets/1711538846253.png) ![1711539656527](README.assets/1711539656527.png) ![1711540246086](README.assets/1711540246086.png) ## 泛型，泛化返回值对象 ![1711547644945](README.assets/1711547644945.png) ![1711547719360](README.assets/1711547719360.png) ![1711549309426](README.assets/1711549309426.png) ![1711549475249](README.assets/1711549475249.png) ![1711549610707](README.assets/1711549610707.png) ![1711549715496](README.assets/1711549715496.png) ## 首页 – 自定义导航栏 ![1711561235276](README.assets/1711561235276.png) ![1711561360657](README.assets/1711561360657.png) ![1711561526507](README.assets/1711561526507.png) ![1711561814408](README.assets/1711561814408.png) ## 通用轮播组件 **静态结构** 首页广告布局为独立的组件 `XtxSwiper` ，位于的 `src/components` 目录中。 该组件定义了 `list` 属性接收外部传入的数据，内部通过小程序内置组件 `swiper` 展示首页广告的数据。 ![1711564469962](README.assets/1711564469962.png) ### 指示按钮高亮 ![1711564340811](README.assets/1711564340811.png) ### 用后台数据，更新页面 ![1711567251206](README.assets/1711567251206.png) ![1711567882330](README.assets/1711567882330.png) ![1711568308910](README.assets/1711568308910.png) ![1711568486139](README.assets/1711568486139.png) ### 首页分类 略 ![1711570908944](README.assets/1711570908944.png) ### 热门推荐 略 ![1711572402278](README.assets/1711572402278.png) ### 背景颜色 ![1711572865316](README.assets/1711572865316.png) ![1711572935716](README.assets/1711572935716.png) ![1711573084873](README.assets/1711573084873.png) ## 猜你喜欢 ![1711574082431](README.assets/1711574082431.png) ### scroll-view 滚动容器 ![1711574292357](README.assets/1711574292357.png) ![1711574697722](README.assets/1711574697722.png) ### 定义分页请求，分页结果 ![1711575093772](README.assets/1711575093772.png) ~~~js /** 通用分页参数类型 */ export type PageParams = { /** 页码：默认值为 1 */ page?: number /** 页大小：默认值为 10 */ pageSize?: number } ~~~ > 返回类型 ![1711574999883](README.assets/1711574999883.png) ~~~c++ /** 通用分页结果类型 */ export type PageResult = { /** 列表数据 */ items: T[] /** 总条数 */ counts: number /** 当前页数 */ page: number /** 总页数 */ pages: number /** 每页条数 */ pageSize: number } ~~~ > 具体类型 ~~~js /** 猜你喜欢-商品类型 */ export type GuessItem = { /** 商品描述 */ desc: string /** 商品折扣 */ discount: number /** id */ id: string /** 商品名称 */ name: string /** 商品已下单数量 */ orderNum: number /** 商品图片 */ picture: string /** 商品价格 */ price: number } ~~~ ### 请求封装 ~~~js export const getHomeGoodsGuessLikeAPI = (data?: PageParams) => { return http>({ method: 'GET', url: '/home/goods/guessLike', data, }) } ~~~ ### 去掉？。使得必须给 ？属性初始值 ![1711615490581](README.assets/1711615490581.png) ### 子标签onMounted，初始化自己 ![1711616311586](README.assets/1711616311586.png) ### scroll-view 滚动触底 触发 分页-> 追加数据 ->页面变长 ![1711616742582](README.assets/1711616742582.png) ![1711620082485](README.assets/1711620082485.png) ![1711620132798](README.assets/1711620132798.png) ![1711620356929](README.assets/1711620356929.png) > 优化提示字符 ![1711621283467](README.assets/1711621283467.png) ### 下拉重置刷新【刷新整个页面 **操作步骤** 基于 `scroll-view` 组件实现下拉刷新，需要通过以下方式来实现下拉刷新的功能。 - 配置 `refresher-enabled` 属性，开启下拉刷新交互 - 监听 `@refresherrefresh` 事件，判断用户是否执行了下拉操作 - 配置 `refresher-triggered` 属性，关闭下拉状态 ![1711623186896](README.assets/1711623186896.png) ![1711623327051](README.assets/1711623327051.png) ## 首页 – 骨架屏 ![1711624977411](README.assets/1711624977411.png) ![1711626812497](README.assets/1711626812497.png) ![1711627543906](README.assets/1711627543906.png) ![1711627821128](README.assets/1711627821128.png) ![1711628211277](README.assets/1711628211277.png) ![1711628390292](README.assets/1711628390292.png) ![1711629757546](README.assets/1711629757546.png) # 推荐模块 ## 动态获取数据 **参考效果** 推荐模块的布局结构是相同的，因此我们可以复用相同的页面及交互，只是所展示的数据不同。 ![热门推荐](README.assets/hot_picture_1.png) ![1711642305165](README.assets/1711642305165.png) > 有异常的化，需要重新编译 + 清除缓存 ![1711642606400](README.assets/1711642606400.png) ### 动态设置标题 ：url传递数据 ![1711642728772](README.assets/1711642728772.png) ![1711643209033](README.assets/1711643209033.png) ![1711643622575](README.assets/1711643622575.png) ![1711643825431](README.assets/1711643825431.png) ![1711644737846](README.assets/1711644737846.png) ### 封装通用接口 ![1711645071176](README.assets/1711645071176.png) ![1711645167429](README.assets/1711645167429.png) ## 定义分页嵌套类型 ![1711646333889](README.assets/1711646333889.png) ![1711646428654](README.assets/1711646428654.png) ![1711646641566](README.assets/1711646641566.png) ![1711647275200](README.assets/1711647275200.png) ### 渲染页面和Tab交互 ![1711647641531](README.assets/1711647641531.png) ![1711649417884](README.assets/1711649417884.png) ![1711649542580](README.assets/1711649542580.png) ## 分页加载 ![1711650288174](README.assets/1711650288174.png) ![1711650450409](README.assets/1711650450409.png) ### 分页条件 ![1711650600481](README.assets/1711650600481.png) ![1711651764983](README.assets/1711651764983.png) # 商品分类 ## 准备工作 **参考效果** 商品分类页中的广告位，可复用之前定义的轮播图组件 `XtxSwiper`。 ![1711654405896](README.assets/1711654405896.png) ### 渲染轮播图 ![1711654881647](README.assets/1711654881647.png) ![1711655753592](README.assets/1711655753592.png) ## 一级分类： 渲染一级分类和Tab交互 ### 获取数据 该接口同时包含一级分类和二级分类数据，二级分类数据需要先对数据进行处理，再进行渲染。 ![1711655154154](README.assets/1711655154154.png) ![1711655376274](README.assets/1711655376274.png) ![1711656299485](README.assets/1711656299485.png) ## 二级分类 商品二级分类是从属于某个一级分类的，通过 `computed` 配合**高亮下标**提取当前二级分类数据。 ![1711656626809](README.assets/1711656626809.png) ![1711657113951](README.assets/1711657113951.png) ## 骨架屏 **参考效果** 实现步骤参考首页的骨架屏。 ![1711657706569](README.assets/1711657706569.png) # 商品详情(登录前) 商品详情页分为两部分讲解： 1. 登录前：展示商品信息，轮播图交互（当前模块） 2. 登录后：加入购物车，立即购买（SKU 模块） ## 准备工作 **参考效果** 用户点击商品列表，跳转到对应的商品详情页。 ![1711660523360](README.assets/1711660523360.png) ![1711660566606](README.assets/1711660566606.png) ![1711660731185](README.assets/1711660731185.png) ![1711660922322](README.assets/1711660922322.png) ### 获取数据 ![1711661062552](README.assets/1711661062552.png) ![1711662669043](README.assets/1711662669043.png) ![1711662942903](README.assets/1711662942903.png) ### 轮播图交互 ![1711663678977](README.assets/1711663678977.png) ### 骨架图 ![1711665116729](README.assets/1711665116729.png) ### 商品详情 – 弹出层 **参考效果** `uni-ui` 弹出层组件：[uni-popup](https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html) **静态结构** 提供 **服务说明** 和 **收获地址** 两个组件的静态结构，实现弹出层交互。 ![1711666439410](README.assets/1711666439410.png) ![1711666051970](README.assets/1711666051970.png) # 登录模块 涉及知识点：微信授权登录，文件上传，Store 状态管理等。 ## 微信登录 微信小程序的**开放能力**，允许开发者获取微信用户的基本信息（昵称、性别、手机号码等），开发者常用来实现注册/登录的功能。 ### 登录方式 常见登录/注册方式： 1. 用户名/手机号 + 密码 2. 手机号 + 验证码 3. 授权登录 实际开发过程中常常需要实现以上的一种或多种方式，我们的项目主要实现**授权登录**。 **微信授权登录** 用户在使用小程序时，其实已登录微信，其本质上就是：**微信授权给小程序读取微信用户信息**。 ![1711703558526](README.assets/1711703558526.png) ### 获取登录凭证 前端：调用 [wx.login()](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html) 接口获取登录凭证（code）。 后端：通过凭证（code）向微信服务器生成[用户登录态](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html)。 ::: warning 注意 - code 获取**不要**在 getphonenumber 事件回调函数调用，否则可能会出现错误！！！ - 用户登录态，不包含用户昵称、性别、手机号码等信息，作用是用于[后端与微信服务器通讯](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html)。 ![1711703898693](README.assets/1711703898693.png) ### 获取手机号码 出于安全限制，小程序【规定】想获取用户的手机号，必须由用户主动【点击按钮】并【允许申请】才可获取加密的手机号信息。 **前端**：提供 `open-type` 按钮，在事件处理函数中获取加密的手机号信息。 **后端**：解密手机号信息，把手机号和用户登录态关联在一起。 ![授权登录](README.assets/login_picture_3.png) A：获取手机号功能**目前针对非个人开发者**，所以个人开发者无法唤起获取手机号界面 [详见文档](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html)。 ![1711704065809](README.assets/1711704065809.png) ### 微信登录接口(生产环境) 获取手机号功能，**目前针对非个人开发者，且完成了认证的小程序开放**，[详见文档](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html)。 ![1711704961324](README.assets/1711704961324.png) ### 模拟手机登录(开发环境) ![1711704988483](README.assets/1711704988483.png) ![1711705360991](README.assets/1711705360991.png) ### 表单登录 ~~~js const defaultId = ref(import.meta.env.DEV ? '13123456789' : '') const defaultPassWd = ref(import.meta.env.DEV ? '123456' : '') const onLogin = async () => { //v-model 双向绑定 const res = await postLogin({ account: defaultId!.value, password: defaultPassWd!.value, }) // 成功提示 uni.showToast({ icon: 'none', title: '登录成功' }) } ~~~ ~~~js ~~~ ### 用户信息持久化存储 Pinia 的持久化存储插件在 [项目起步](/rabbit-shop/#pinia-persist) 模块已经搭建完成，现在只需要在用户登录成功后，补充 TS 类型声明并保存用户信息即可。 ![1711711994074](README.assets/1711711994074.png) ![1711711580433](README.assets/1711711580433.png) ![1711711626875](README.assets/1711711626875.png) ![1711711819093](README.assets/1711711819093.png) ### 类型强转 ~~~js const asLoginResult: LoginResult = profile.value as LoginResult const asFormLoginResult: FormLoginResult = profile.value as FormLoginResult ~~~ # 会员中心 ![1711716430754](README.assets/1711716430754.png) ![1711716473752](README.assets/1711716473752.png) ## 猜你喜欢分页加载：组合式函数 ![1711716944839](README.assets/1711716944839.png) ![1711745199305](README.assets/1711745199305.png) ## ts仅仅在编译时有用，代码提示 ![1711737644306](README.assets/1711737644306.png) ## 会员中心 – 设置页分包和预下载 ![1711745327397](README.assets/1711745327397.png) ![1711745397238](README.assets/1711745397238.png) ![1711745883942](README.assets/1711745883942.png) ## 退出登录 设置页需实现以下业务： 1. 退出登录，清理用户信息，返回上一页。 2. 根据登录状态，按需展示页面内容。 **参考效果** ![登录状态](README.assets/member_picture_3.png) ![1711746468485](README.assets/1711746468485.png) ![1711746848194](README.assets/1711746848194.png) ## 会员信息页 用户可以对会员信息进行更新操作，涉及到表单数据提交、图片读取、文件上传等知识点。 ![会员信息页](README.assets/member_picture_4.png) ![1711747430276](README.assets/1711747430276.png) ### 个人信息展示 ![1711747599752](README.assets/1711747599752.png) ### 获取会员信息 需要登录后才能获取用户个人信息，在 [项目起步](/rabbit-shop/#uni-request-interceptor) 模块已封装请求拦截器，拦截器中自动添加 `token` ，无需再手动添加。 **接口调用** 接口地址：/member/profile 请求方式：GET 登录权限: **是** 请求参数：无 ![1711748438535](README.assets/1711748438535.png) ![1711748812542](README.assets/1711748812542.png) ![1711750315954](README.assets/1711750315954.png) ![1711750425496](README.assets/1711750425496.png) ### 更新会员头像 1. 通过 `uni.chooseMedia()` 读取用户相册的照片或者拍照。 2. 通过 `uni.uploadFile()` 上传用户图片。 - 网页端上传文件用 `Axios + FormData` - 小程序端上传文件用 [wx.uploadFile()](https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html) - 使用 [uni.uploadFile()](https://uniapp.dcloud.net.cn/api/request/network-file.html#uploadfile) 能自动多端兼容 - 小程序端需配置上传文件[安全域名](https://mp.weixin.qq.com/) ![1711790787236](README.assets/1711790787236.png) ![1711791571371](README.assets/1711791571371.png) ![1711791702192](README.assets/1711791702192.png) ### 更新表单信息 涉及到 ``、``、`` 表单组件的数据收集。 ### 会员中心 – 修改用户昵称 ![1711792034653](README.assets/1711792034653.png) ![1711792793272](README.assets/1711792793272.png) ![1711792932961](README.assets/1711792932961.png) ![1711793015664](README.assets/1711793015664.png) ![1711793066894](README.assets/1711793066894.png) ![1711793142266](README.assets/1711793142266.png) ![1711793221897](README.assets/1711793221897.png) ![1711793396026](README.assets/1711793396026.png) ### 更新Store信息 ![1711793527651](README.assets/1711793527651.png) ![1711793831314](README.assets/1711793831314.png) ![1711793955915](README.assets/1711793955915.png) ### 修改性别 ![1711794191629](README.assets/1711794191629.png)![1711794438575](README.assets/1711794438575.png) ### 修改生日 ![1711794623220](README.assets/1711794623220.png) ![1711794811470](README.assets/1711794811470.png) ### 修改城市 ![1711795210170](README.assets/1711795210170.png) ![1711795171501](README.assets/1711795171501.png) ![1711795485377](README.assets/1711795485377.png) ![1711795904272](README.assets/1711795904272.png) # 地址模块 - 能够获取不同类型的表单数据 - 能够动态设置导航栏的标题 - 能够使用 uni-ui 组件库的组件 - 能够完成收货地址的增删改查的功能 ### 静态结构 地址模块共两个页面：地址管理页，地址表单页 ，划分到会员分包中。 ![picture_31](README.assets/address_picture_1.png) ![1711829637074](README.assets/1711829637074.png) ### 动态设置标题 ![1711829951027](README.assets/1711829951027.png) ![1711829971153](README.assets/1711829971153.png) ### 列表渲染 ![1711830382928](README.assets/1711830382928.png) ### 修改地址 – 数据回显 ![1711833703530](README.assets/1711833703530.png) ### 修改地址 – 保存修改 ![1711834821413](README.assets/1711834821413.png) ### 表单校验 通过 `uni-ui` 组件库的 [uni-forms](https://uniapp.dcloud.net.cn/component/uniui/uni-forms.html#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8) 组件实现表单校验。 ![表单校验](README.assets/address_picture_5.png) ![1711836973773](README.assets/1711836973773.png) ### 地址模块 – 删除地址 通过 `uni-ui` 组件库的 [uni-swipe-action](https://uniapp.dcloud.net.cn/component/uniui/uni-swipe-action.html) 组件实现侧滑删除。 ![1711839548257](README.assets/1711839548257.png) ![1711839980245](README.assets/1711839980245.png) # SKU 模块 学会使用[插件市场](https://ext.dcloud.net.cn/)，下载并使用 `SKU` 组件，实现**商品详情页**规格展示和交互。 ## 存货单位（SKU） **SKU 概念** 存货单位（Stock Keeping Unit），库存管理的最小可用单元，通常称为“单品”。 `SKU` 常见于电商领域，对于前端工程师而言，更多关注 [SKU 算法](https://juejin.cn/post/7002746459456176158) 和 **用户交互体验**。 ## 插件市场 [uni-app 插件市场](https://ext.dcloud.net.cn/)，是 uni-app 官方插件生态集中地。 `SKU` 属于电商常见业务，插件市场有现成的 `SKU` 插件，我们下载并在项目中使用。 ![插件市场](README.assets/sku_picture_1.png) ![1711840365381](README.assets/1711840365381.png) ![1711840540588](README.assets/1711840540588.png) ![1711840670567](README.assets/1711840670567.png) ![1711842286471](README.assets/1711842286471.png) ![1711842503285](README.assets/1711842503285.png) ![1711842824748](README.assets/1711842824748.png) ![1711842960259](README.assets/1711842960259.png) ### 渲染 ![1711843494996](README.assets/1711843494996.png) ![1711843564123](README.assets/1711843564123.png) ![1711843863307](README.assets/1711843863307.png) ![1711844067711](README.assets/1711844067711.png) ![1711844429001](README.assets/1711844429001.png) ![1711844704293](README.assets/1711844704293.png) ![1711845083137](README.assets/1711845083137.png) ![1711845283572](README.assets/1711845283572.png) ![1711845845019](README.assets/1711845845019.png) ![1711846038245](README.assets/1711846038245.png) ### 打开弹窗交互 ![1711846250922](README.assets/1711846250922.png) ![1711846825681](README.assets/1711846825681.png) ### 被选中的值 ![1711847101171](README.assets/1711847101171.png) ![1711847473515](README.assets/1711847473515.png) ## 加入购物车 ![1711847703289](README.assets/1711847703289.png) ![1711848369965](README.assets/1711848369965.png) ## 购物车列表 购物车列表需要访问后才能登录。 ![购物车](README.assets/cart_picture_2.png) ![1711848697280](README.assets/1711848697280.png) ### 登录状态 已登录显示购物车列表，否则应引导用户去登录。 ![1711848791430](README.assets/1711848791430.png) ### 列表渲染 ![1711849107579](README.assets/1711849107579.png) ![1711849638466](README.assets/1711849638466.png) ## 删除购物车 通过侧滑删除购物车的商品，使用 [uni-swipe-action](https://uniapp.dcloud.net.cn/component/uniui/uni-swipe-action.html) 组件实现。 ![1711849787131](README.assets/1711849787131.png) ![1711849886582](README.assets/1711849886582.png) ![1711850100624](README.assets/1711850100624.png) ## 修改商品信息 修改购买数量，修改选中状态。 ### 修改单品数量 ![1711850262219](README.assets/1711850262219.png) ![1711850979441](README.assets/1711850979441.png) ### 修改选中状态 ![1711851343390](README.assets/1711851343390.png) ![1711851808473](README.assets/1711851808473.png) ## 底部结算信息 ![1711851974515](README.assets/1711851974515.png) ![1711852214493](README.assets/1711852214493.png) ## 带返回按钮的购物车 为了解决小程序 [tabBar 页面限制](https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html) 导致无法返回上一页的问题，将购物车业务独立为组件，使其既可从底部 tabBar 访问，又可在商品详情页中**跳转并返回**。 这样就需要 **两个购物车页面** 实现该功能，其中一个页面为 tabBar 页，另一个为普通页。 ![购物车页](README.assets/cart_picture_3.png) 目录结构如下： ```sh pages/cart ├── components │   └── CartMain.vue ...................................... 购物车业务组件 ├── cart2.vue ............................................. 普通页 └── cart.vue ............................................ TabBar页 ``` 把原本的购物车业务独立封装成组件，在两个购物车页面分别引入即可。 ![1711852551972](README.assets/1711852551972.png) ![1711852996750](README.assets/1711852996750.png) ![1711853054449](README.assets/1711853054449.png) ![1711853190863](README.assets/1711853190863.png) ## 安全区域和猜你喜欢 ![1711853600514](README.assets/1711853600514.png) ![1711854175380](README.assets/1711854175380.png) ![1711854238489](README.assets/1711854238489.png) ![1711854314349](README.assets/1711854314349.png) ![1711854737779](README.assets/1711854737779.png) ![1711855080482](README.assets/1711855080482.png) # 订单模块 订单模块页面较多，建议用新的分包文件夹独立管理订单模块页面：填写订单页，支付订单页，订单详情页，订单列表页。 ## 填写订单页 小兔鲜儿项目有三种方式可以**生成订单**信息，分别是：购物车结算、立即购买、再次购买。 ![填写订单](README.assets/order_picture_1.png) ![1711897748084](README.assets/1711897748084.png) ![1711899848731](README.assets/1711899848731.png) ### 收货地址：选中同步 ![1711900279247](README.assets/1711900279247.png) ![1711900930753](README.assets/1711900930753.png) ### 立即购买 ![1711904302557](README.assets/1711904302557.png) ## 提交订单 ![1711913525841](README.assets/1711913525841.png) ## 订单详情页 需要展示**多种订单状态** 并实现不同订单状态对应的业务。 ### 自定义导航栏交互 1. 导航栏左上角按钮：[获取当前页面栈](https://developers.weixin.qq.com/miniprogram/dev/reference/api/getCurrentPages.html)，如果不能返回上一页，按钮变成返回首页。 2. 导航栏动画效果：[滚动驱动的动画](https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html#%E6%BB%9A%E5%8A%A8%E9%A9%B1%E5%8A%A8%E7%9A%84%E5%8A%A8%E7%94%BB)，根据滚动位置而不断改变动画的进度。 ::: warning 注意事项 滚动驱动的动画目前**仅支持微信小程序端**，暂不支持 H5 端、App 端，多端兼容时添加条件编译。 ![1711960724700](README.assets/1711960724700.png) ![1711960884415](README.assets/1711960884415.png) ### 订单状态渲染 ![1711961066953](README.assets/1711961066953.png) ![1711962564296](README.assets/1711962564296.png) ![1711963221413](README.assets/1711963221413.png) ### 待付款 - 倒计时 通过 uni-ui 组件库的 [uni-countdown](https://uniapp.dcloud.net.cn/component/uniui/uni-countdown.html) 实现倒计时。 ![1711963720076](README.assets/1711963720076.png) ![1711963587942](README.assets/1711963587942.png) ![1711963633016](README.assets/1711963633016.png) ### 再次购买 第三种生成订单信息，从订单详情页的【再次购买】按钮跳转到填写订单页，需要传递页面参数。 ![1711964339354](README.assets/1711964339354.png) ![1711964306132](README.assets/1711964306132.png) ![1711964399849](README.assets/1711964399849.png) ### 页面渲染 ![1711965878904](README.assets/1711965878904.png) ![1711965893721](README.assets/1711965893721.png) ### 订单支付 订单支付其实就是根据订单号查询到支付信息，在小程序中调用微信支付的 API 而已。 #### 微信支付说明 1. 由于微信支付的限制，仅 **appid** 为 `wx26729f20b9efae3a` 的开发者才能调用该接口。此外，开发者还需要微信授权登录。 2. 对于其他开发者，可以使用**模拟支付接口**进行开发测试，调用后，订单状态将自动更新为已支付。 **调用接口** - 生产环境：调用正式接口，获取微信支付参数 + 发起微信支付 - 开发环境：调用模拟接口，通过模拟支付，修改订单状态为已支付 ![1711967307959](README.assets/1711967307959.png) ![1711966784466](README.assets/1711966784466.png) > 需要权限 ![1711967111156](README.assets/1711967111156.png) ### 模拟发货 仅在订单状态为待发货时，可模拟发货，调用后订单状态修改为待收货，包含模拟物流。 **仅在开发期间使用**，项目上线后应该是由商家发货。 ![1711967671288](README.assets/1711967671288.png) ![1711967979659](README.assets/1711967979659.png) ![1711967986563](README.assets/1711967986563.png) ### 确认收货 点击确认收货时需二次确认，提示文案：**为保障您的权益，请收到货并确认无误后，再确认收货** ![1711969911593](README.assets/1711969911593.png) ![1711970120046](README.assets/1711970120046.png) ![1711970130063](README.assets/1711970130063.png) ### 订单物流 仅在订单状态为**待收货，待评价，已完成**时，可获取物流信息。 ![1711970208809](README.assets/1711970208809.png) ![1711971112706](README.assets/1711971112706.png) ### 删除订单 仅在订单状态为**待评价，已完成，已取消**时，可删除订单。 ![1711971418622](README.assets/1711971418622.png) ![1711972290272](README.assets/1711972290272.png) ![1711972323252](README.assets/1711972323252.png) ### 取消订单 仅在订单状态为**待付款**时，可取消订单。 ![1711972768830](README.assets/1711972768830.png) ![1711972858950](README.assets/1711972858950.png) ### 骨架图 ![1711973450821](README.assets/1711973450821.png) ## 订单列表页 根据订单的不同状态展示订单列表，并实现多 Tabs 分页加载。 ![订单列表](README.assets/order_picture_3.png) ### Tabs 滑动切换 订单列表的 Tabs 支持滑动切换，从【我的】进入订单列表，能高亮对应的下标。 ![1711985491991](README.assets/1711985491991.png) ![1711987748228](README.assets/1711987748228.png) ### 获取订单列表 当前页面是**多 Tabs 列表**的情况，每个 Tabs 都是独立的列表，并支持分页加载。 ![1711987952106](README.assets/1711987952106.png) ![1711988743793](README.assets/1711988743793.png) ![1712004553838](README.assets/1712004553838.png) ![1712004770300](README.assets/1712004770300.png) ### 骨架图 ![1712006161735](README.assets/1712006161735.png) ### 滚动追加 ![1712007386975](README.assets/1712007386975.png) ### 优化 ![1712018129396](README.assets/1712018129396.png)