# Sixgroup **Repository Path**: IIFE/sixgroup ## Basic Information - **Project Name**: Sixgroup - **Description**: 这是一个不简单的小组 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-11-19 - **Last Updated**: 2022-07-28 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 项目标题： **atguigu-tuan** # 项目说明 此项目是一个基于uni-app框架的 硅谷团购项目，可发布到iOS、Android、Web、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。 # 目录结构说明 ```js ├─README.md // help ├─App.vue // 根组件 ├─main.js // 项目入口文件 ├─manifest.json // 应用的配置文件 ├─package.json ├─pages.json // 全局配置 ├─project.config.json // 项目配置文件 ├─uni.scss // 整体控制应用风格 ├─common // 公共文件（如 js，css） ├─components // 公共组件存放目录 ├─node_modules ├─pages // 主页面存放目录 │ ├── cart // 购物车页面 │ ├── categories // 分类页面 │ ├── homeItem // 商品详情页面 │ ├── index // 首页 │ ├── login // 登录 │ ├── my // 个人中心 │ ├─pagesLocation // 分包-自提点页面存放目录 │ ├── choosePickUpLocation // 选择提货点页 │ ├── myPickUpLocation // 我的提货点页 │ ├─pagesOrder // 分包-订单页面存放目录 │ ├── confirmOrder // 确认订单页 │ ├── getOrderInfo // 获取订单信息页 │ ├─pagesSeckill // 分包-秒杀页面存放目录 │ ├──seckill // 秒杀 │ ├─static // 静态资源目录 ├─store // 仓库 └─unpackage // 打包目录,在这里有各个平台的打包文件 ``` # 项目需求分析 ## 一、登陆页 ### 页面演示 | http://qn.chinavanes.com/qiniu_picGo/image-20210927075545585.png | http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2016.28.02.png | | ------------------------------------------------------------ | ------------------------------------------------------------ | | | | ### 功能描述 1. 实现用户的系统登陆，后端将获取用户的基础信息，包括昵称、头像等内容 2. 需要将用户基本信息与当前用户绑定，进行用户信息的更新处理 3. 并且需要返回用户的唯一识别内容，比如 token 值，以便对不同的用户进行区分确认 ### 技术要点 1. 获取用户信息 2. 进行微信登陆流程 3. 本地缓存的应用 4. 如何实现按钮的一次性点击与恢复 ### 对应接口 1. 微信用户登陆 2. 更新用户信息 ## 二、首页 ### 页面演示 | ![image-20210927174854367](http://qn.chinavanes.com/qiniu_picGo/image-20210927174854367.png) | ![image-20210928073931602](http://qn.chinavanes.com/qiniu_picGo/image-20210928073931602.png) | ![iShot2021-09-28 07.47.24](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2007.47.24.png) | | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | | | | ### 功能描述 1. 提货点信息的判断性展示 2. 带滚动信息的搜索框布局展示 3. 秒杀信息的判断性展示 4. 新人专享滚动及列表的展示 5. 资质、条款、规则提示信息的展示 6. 商品分类带进度条滚动区的展示 7. 限时秒杀与热销好货商品列表的展示 8. 滚动越出区域显示返回顶部功能 ### 技术要点 1. 自定义导航条的实现，并实现背景颜色的渐变效果 2. 如果有提货点信息则需要显示当前提货点名称，否则需要默认跳转到提货点选择页，因为提货点是必须先选择的项目 3. 带滚动功能的自定义搜索条的布局控制，包括图标、提示条组件以及按钮组件的合理布局 4. 秒杀提示“查看全部”按钮的自定义样式功能的实现 5. **产品图片展示组件化封装的思考** - 普通商品 - 秒杀商品 - 新人专享 - 非新人专享 6. **加入购物车功能组件化封装的思考** 7. 弹出窗口的应用 8. 滚动区与进度条按百分比进行匹配展示 9. 限时秒杀数据的获取与滚动区的应用 10. 在组件化封装以后热销好货等功能的快速复用 11. 滚动返回顶部功能，mixins 代码混入的实现 12. 系统默认布局相关与自定义布局样式的结合 13. 空页面与非空页面的判断显示 14. 获取设备信息底层 API 的调用 15. 数据仓库模块的规划、引入、映射与调用 16. 节流、防抖性能优化技巧的使用 17. 小程序与 Vue 生命周期钩子函数的并列使用 18. scss 样式的拼接 19. tabbar 选项卡的配置 20. **vuex 数据仓库中 action 层动作派发其它模块的 action 动作功能** ### 对应接口 1. 获取首页数据 ## 三、设置我的提货点 ### 页面演示 | ![iShot2021-09-28 08.13.38](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2008.13.38.png) | ![iShot2021-09-28 08.16.05](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2008.16.05.png) | ![iShot2021-10-24 10.05.17](http://qn.chinavanes.com/qiniu_picGo/iShot2021-10-24%2010.05.17.png) | | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | ![image-20211024100302486](http://qn.chinavanes.com/qiniu_picGo/image-20211024100302486.png) | ![iShot2021-10-24 10.04.32](http://qn.chinavanes.com/qiniu_picGo/iShot2021-10-24%2010.04.32.png) | | ### 功能描述 1. 可以进行不同城市的选择，筛选当前城市所提供的提货点 2. 可以进行关键字的搜索，搜索符合条件的提货点列表 3. 显示当前的提货点地址，并进行区别化显示 4. 提货点列表的滚动区域显示，可以实现更多数据的向上加载操作，即分页数据显示 5. 在提货点列表中可以进行提货点的选择，确认选择为当前的提货点 ### 技术要点 1. 页面的分包处理，subPackages 的设置 2. 提货点头部功能组件化的封装，包括当前城市的下拉选择、搜索区与按钮 1. 百度地图的应用，需要注册百度地图开发帐号，创建项目，设置微信的 appId 信息 2. bmap-wx 微信中使用百度地图插件的使用，通过名称转化为经纬度信息 3. 子组件向父组件进行事件发射与数据传递，将获取到的经纬度信息传递给父组件 4. 关键字的改变监控，以获取新的名称信息并获取到对应的经纬度 3. 单个提货功能组件化的封装，还需要可以进行点击功能，选择操作对象为当前的提货点 1. 是否为当前提货点的条件判断 2. 子组件属性接收时默认属性值的设置，数组对象类型需要利用函数返回的形式进行默认值设置 3. 子组件向父组件进行事件发射与数据传递 4. 自定义组件的属性传递与事件绑定 5. 块级代码的应用与空页面的展示 6. 上拉加载分页显示数据的列表实现 7. 利用 Vue 表单数据重置原理，对查询数据默认值的恢复 ### 对应接口 1. 查询所有提供点的区域 2. 根据经纬度搜索提货点 3. 选择提货点 ## 四、搜索并选择其它提货点 ### 页面演示 | ![iShot2021-09-28 09.20.30](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2009.20.30.png) | ![iShot2021-10-24 10.06.05](http://qn.chinavanes.com/qiniu_picGo/iShot2021-10-24%2010.06.05.png) | ![iShot2021-10-24 10.06.41](http://qn.chinavanes.com/qiniu_picGo/iShot2021-10-24%2010.06.41.png) | | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | | | | ### 功能描述 1. 地图默认显示当前经纬度位置，并进行 marker 标识 2. 提货点头部组件的搜索区可以进行指定内容的搜索，如果返回搜索区域多条匹配数据，则需要在列表处进行分页列表显示，并且地图中标识当前列表页的提货点信息 3. 点击地图中的标识点，可以定位到搜索结果列表的指定提货点项 ### 技术要点 1. 父子组件.sync 修饰符的应用 2. 地图组件的应用，包括当前位置经纬度、缩放、标记点、标记点点击操作 3. scroll-view 滚动区的 scroll-into-view 定位操作以及 scroll-with-animation 动画模式平滑过渡 4. 地图上下文对象的创建以及对应地图 API 的调用 ### 对应接口 1. 根据经纬度获取地址信息 2. 查询所有提供点的区域 3. 根据经纬度搜索提货点 4. 选择提货点 ## 五、商品分类 ### 页面演示 | ![iShot2021-09-28 09.36.29](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2009.36.29.png) | ![iShot2021-09-28 09.58.21](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2009.58.21.png) | ![iShot2021-09-28 10.20.04](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2010.20.04.png) | | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | ![iShot2021-09-28 11.25.26](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2011.25.26.png) | | | ### 功能描述 1. 自定义导航的实现，并在导航中实现滚动提示搜索框 2. 左侧显示商品分类，右侧显示对应商品分类下的商品列表 3. 左侧分类进行点击时会进行居中定位 4. 商品列表可以进行上拉加载显示更多分页功能 5. 没有更多内容时显示分隔线 6. 如果列表没有数据，则显示空内容 ### 技术要点 1. scroll-view 商品分类菜单定位于整体滚动的居中位置 2. 利用 Vue 表单重置技术，重置指定对象的数据内容 3. 防止选中分类的再次点击 4. createSelectorQuery 创建查询对象的实现 5. 获取一个目标元素的宽度高度 6. 递归算法的应用 7. 分页加载更多数据 8. 对象的复制与对象合并 9. 全局组件的直接调用，不需要进行本地注册 10. 事件绑定与修饰符的使用，阻止默认事件(return false，e.preventDefault())与阻止冒泡(e.cancelBubble，e.stopPropagation) ### 对应接口 1. 获取分类 2. 搜索商品 ## 六、商品详情页 ### 页面演示 | ![iShot2021-09-28 10.50.28](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2010.50.28.png) | ![iShot2021-09-28 10.53.28](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2010.53.28.png) | ![iShot2021-09-28 10.54.01](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2010.54.01.png) | | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | ![iShot2021-09-28 10.55.13](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2010.55.13.png) | ![iShot2021-09-28 10.55.49](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2010.55.49.png) | ![iShot2021-09-28 14.59.55](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2014.59.55.png) | | ![iShot2021-09-28 15.00.29](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2015.00.29.png) | ![iShot2021-09-28 15.01.46](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2015.01.46.png) | | ### 功能描述 1. 返回前页功能 2. 轮播图显示产品简介图片 3. 普通商品、新人专享商品、秒杀商品不同的商品类型信息展示 4. 商品属性列表信息展示 5. 售后与提货信息的展示 6. 商品详情图片清单 7. 底部首页、购物车、优惠券、加入购物车、立即购买的提交栏功能 8. 优惠券弹出框的列表显示 9. 优惠券的领取 ### 技术要点 1. 优惠券列表清单功能的组件化封装 2. .sync 修饰符的应用 3. 数组的遍历与对象的合并 4. 第三方时间模块的引入与使用，日期的格式化操作 5. 响应式修改数组指定对象属性的值 6. 数据类型之间的转化，字符串转数字类型的方式+、*、/、parseInt、parseFloat、>>> ### 对应接口 1. 商品详情 2. 领取优惠券 ## 七、购物车 ### 页面演示 | ![iShot2021-09-28 11.43.26](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2011.43.26.png) | ![iShot2021-09-28 11.44.03](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2011.44.03.png) | ![iShot2021-09-28 11.45.46](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2011.45.46.png) | | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | ![iShot2021-09-28 11.45.51](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2011.45.51.png) | ![iShot2021-09-28 15.02.38](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2015.02.38.png) | ![iShot2021-09-28 15.03.05](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2015.03.05.png) | ### 功能描述 1. 导航页显示购买商品的数量统计 2. 购物车列表主要分成未参加活动的简单商品展示与参数同一活动的成组商品展示 3. 购物车商品可以进行选中或反选的操作选择 4. 购物车商品数量减少到边界范围时需要进行确认功能操作 5. 活动列表中商品的选中反选对活动列表全选框的影响 6. 活动列表中的全选框对活动列表中的商品选中状态的作用 7. 底部提交栏中的全选对所有商品的选中反选的作用影响 8. 底部提交栏中现价、优惠价、原价等信息内容的显示 9. 查看当前所有的优惠券 ### 技术要点 1. 多选框的分组操作 2. 卡片式组件及插槽的应用 3. 嵌套循环以及分组 checkbox 的全选反选处理 4. 购物车全选反选的处理 5. 数组的常用操作函数，不同的遍历操作之前的差异，比如 find、findIndex、filter、every、forEach、map、reducer... 6. 响应式对象属性内容的添加 ### 对应接口 1. 加入购物车 2. 购物车列表 3. 切换购物车商品的选中状态 4. 删除购物车 5. 带活动的购物车列表 6. 对所有购物车商品进行全选/反选 7. 对指定的多个商品进行选择/反选 8. 领取优惠券 ## 八、生成订单 ### 页面演示 | ![iShot2021-10-24 10.19.28](http://qn.chinavanes.com/qiniu_picGo/iShot2021-10-24%2010.19.28.png) | ![iShot2021-10-24 10.20.49](http://qn.chinavanes.com/qiniu_picGo/iShot2021-10-24%2010.20.49.png) | ![iShot2021-10-24 10.21.33](http://qn.chinavanes.com/qiniu_picGo/iShot2021-10-24%2010.21.33.png) | | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | | | | ### 功能描述 1. 对订单进行确认 1. 确认购买的商品 2. 确认提货点的选择 3. 确认优惠券的使用 4. 确认当前的价格 2. 现价、优惠券、原价等信息的显示 3. 设置提货人的联系方式 4. 订单的生成操作 ### 技术要点 1. computed 属性计算的实现，并且属性计算时传递参数 2. 日期的格式化操作 3. 动态样式的绑定 4. 表单数据的绑定与输入修改 5. 表单的提交流程 ### 对应接口 1. 生成订单 ## 九、支付订单 ### 页面演示 | ![iShot2021-09-28 15.21.41](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2015.21.41.png) | ![iShot2021-09-28 15.22.58](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2015.22.58.png) | ![iShot2021-09-28 15.25.29](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2015.25.29.png) | | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | | | | ### 功能描述 1. 对订单进行确认 1. 确认购买的商品 2. 确认提货人联系方式 3. 确认当前的价格 2. 订单总额与实际付款等信息的显示 3. 支付订单的操作 ### 技术要点 1. 数据类型的转换 2. 剪贴板 API 的调用 3. 微信支付的整体流程 ### 对应接口 1. 订单详情 2. 获取微信支付信息 ## 十、个人中心 ### 页面演示 | ![iShot2021-09-28 16.06.43](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2016.06.43.png) | ![iShot2021-09-28 16.06.59](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2016.06.59.png) | | | ------------------------------------------------------------ | ------------------------------------------------------------ | ---- | | | | | ### 功能描述 1. 个人信息的展示，包括头像和昵称 2. 我的订单的分类显示 3. 有奖推荐等多彩图标的显示 4. 提货码等图标板块的显示 ### 技术要点 1. 多彩图标的应用 2. 本地存储的获取 3. 不同编码的转换 4. 图片的 base64 编码类型 5. 带参地址的跳转 ### 对应接口 1. 目前未使用接口 ## 十一、订单查询 ### 页面演示 | ![iShot2021-09-28 16.19.41](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2016.19.41.png) | ![iShot2021-09-28 16.19.50](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2016.19.50.png) | ![iShot2021-09-28 16.19.59](http://qn.chinavanes.com/qiniu_picGo/iShot2021-09-28%2016.19.59.png) | | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | | | | ### 功能描述 1. 不同的订单类型进行切类切换显示 2. 订单数量的统计显示 3. 上拉加载更多订单列表数据 ### 技术要点 1. 二维数据的应用 2. loadmore 组件的使用 3. 针对不同版块结合二维数组进行数据展示操作 4. tabs 选项卡的原理 5. swiper 轮播图的应用 ### 对应接口 1. 获取用户订单信息 ## 十二、秒杀列表 ### 页面演示 | ![iShot2021-10-24 10.11.22](http://qn.chinavanes.com/qiniu_picGo/iShot2021-10-24%2010.11.22.png) | ![iShot2021-10-24 10.11.22](http://qn.chinavanes.com/qiniu_picGo/iShot2021-10-24%2010.11.22.png) | | | ------------------------------------------------------------ | ------------------------------------------------------------ | ---- | | | | | ### 功能描述 1. 对秒杀时段进行平行滚动，秒杀时段有不同的状态，需要进行划分区别 2. 对应的时段显示该时段的秒杀产品 3. 切换时段会进行分类的定位操作 ### 技术要点 1. scroll-view的横纵向滚动 2. scroll-view的动画与定位处理 ### 对应接口 1. 秒杀时间段列表 2. 缓存中读取秒杀SKU