从二月七日到三月二十一日，花费四十多天时间，基本完成了一个电商系统的设计。从原型设计、前端页面搭建，到数据库设计、编写后端中间件，再到前后端联调，部署打包，一路走来进步了许多。

整个系统包括用户管理、商城、购物结算、地图定位、三维展示、智能客服、分类检索、订单管理、库存管理、物流查询等模块。下面我分别介绍一下

下载地址：点击下载

技术栈：
框架：nuxt，前端：vue+less+element，后端：koa，数据库：mongodb+redis，云端：阿里云OSS，三维模块：echarts-gl

商城具备基本功能

-用户管理模块

• 注册时自动验证重名 详细
  填写用户名时会自动验证是否存在重名

• 验证密码
  注册时会自动校验两次密码的一致性

• 邮件发送 详细

  系统会向指定邮箱发送一封包含验证码的邮件

• 验证码判别
  打开邮箱，复制验证码完成注册，注意验证码有效期只有10分钟

  • 完善信息
    注册成功后来到完善信息页面

  • 上传头像
    拖拽图片到上传框，即可设置个性头像

• 权限分组
  在用户名前添加 gly 或 管理员 前缀，将注册为管理员，额外拥有卖家发货权限

• 登录功能
  登录界面，如勾选 [记住我] 选项，以后每次登录，系统将自动为您填写账号密码

• 社交账号绑定
  登陆之后能查看个人信息，可随时点击 [更改资料] 按钮，解绑或绑定社交账号

• 签到打卡
  每天签到能获得经验和积分，但当日内的多次签到将被系统拒绝

• 等级积分
  签到前，用户的等级、金币、经验
  签到之后用户等级、金币、经验都做出了更新

-商城功能

• 分类推荐
  商城会根据浏览分类推荐商品，点击可看商品详情

• 影视资讯
  影视去会抓取豆瓣电影最新的数据，点击可看电影详情

• 商品详情
  商品详情

• 放大镜 详细

  鼠标移动到图片上会显示放大

• 多图预览
  点击大图下方的图片可进行大图浏览

• 折扣系统
  参加折扣促销的商品，进入页面后会自动开始倒计时

• 智能仓库
  点选商品规格后，系统会自动匹配出最近有货的仓库，和库存数量

• 收藏夹
  对于喜欢的商品可以点击收藏按钮，之后在个人收藏夹中进行管理

-定位功能

• 自动定位
  加载页面之后，用户城市位置会在顶部自动加载出现

• 城市检索
  用户也可自行更改显示城市

• 省市联动
  选取省份后，市区选项被激活，可以点选该省下辖的地级市

• 搜索功能
  搜索框内输入中文或字母缩写可以检索出对应城市

-球面展示

• 三维地球
  点击 [查找门店] 按钮系统会把显示在球体上，球体可旋转缩放

• 定位功能
  点击坐标，会显示店铺相关信息，可点击链接直达店铺页面

-查看店铺

• 店铺信息
  首页会自动显示店铺位置、仓库位置以及热卖商品
  在数据库中，以店铺为中心，将商品与库存做了映射

-购物功能

• 最近添加
  鼠标悬浮于购物袋按钮，会显示最近添加入购物车的两件商品

• 购物车界面
  同一商品的不同型号会被当做不同商品，若实时库存低于15会显示紧张

• 结账系统
  选取需要结算的商品，点击结算按钮

-订单功能

• 订单管理
  结算后默认为未付款状态，需要手动点击付款

• 提醒发货
  付款后，买家可选择提醒卖家发货

• 卖家登录
  使用管理员权限登录卖家系统，可以发货，管理员注册时须要有gly或管理员前缀

• 卖家发货
  发货成功后，买家的订单将会得到更新

• 实时物流
  买家可在物流信息中得到距离，预计时长等信息

-智慧客服

• 智能陪聊
  点击 [智慧客服] 按钮，客服小茉会与您进行智能陪聊

• 斗图
  聊不下去了？那就来一发斗图吧

• 快捷输入
  点击发送按钮时，若输入框无信息，会出现默认快捷短语

• 转接人工
  转接人工

• 聊天记录
  点击右上角的 x 号，将保存聊天记录，没聊尽兴的话，可以来日再聊

• 清空记录
  点击清空按钮，将清空聊天记录，慎点

-榜单热卖

• 搜索功能
  输入内容为空时会显示热门搜索和历史搜索

• 自动完成
  输入内容不为空时会显示自动完成词汇

• 历史搜索
  历史搜索将在输入时以下拉框形式呈现

• 热词搜索
  热词搜索将在输入时以下拉框形式呈现

• 排序
  点击开关可以进行排序