# erabbit_pc_shop

**Repository Path**: ehuicoder/erabbit_pc_shop

## Basic Information

- **Project Name**: erabbit_pc_shop
- **Description**: pc电商项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2022-01-24
- **Last Updated**: 2024-06-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目介绍

本项目是一个B2C电商平台，综合品类平台。已实现电商支付闭环，包括首页模块、分类模块、商品详情、登录模块、购物车、结算支付、购物中心。

## 项目技术

vue3.0 + vue-router4.0 + vuex4.0
vue-cli 项目脚手架
axios 请求接口
vuex-persistedstate (vuex数据持久化)
@vueuse/core (组合api常用工具库)
dayjs 日期处理
vee-validate 表单校验

### 首页模块

骨架屏+数据懒加载+图片懒加载+轮播图组件

![](./src/assets/readMeImg/home.png)

### 分类模块

复选框组件+面包屑组件+无限加载组件

![](./src/assets/readMeImg/cate1.png)

![](./src/assets/readMeImg/cate2.png)

![](./src/assets/readMeImg/cate3.png)

### 商品详情

商品图预览组件+SKU组件+数量选择组件+按钮组件

![](./src/assets/readMeImg/detail1.png)

![](./src/assets/readMeImg/detail2.png)

![](./src/assets/readMeImg/detail3.png)

![](./src/assets/readMeImg/detail4.png)

### 登录模块

第三方登录，回跳的页面得到QQ给的唯一标识openId，根据openId去后台查询是否已经绑定过账户。
```
如果绑定过，完成登录。
没有绑定过
有账号的，绑定手机号，即为登录。
没账号的，完善账户信息，即为登录。
```
登录成功后，跳转首页，或者来源页面。

![](./src/assets/readMeImg/login1.png)

![](./src/assets/readMeImg/login2.png)

![](./src/assets/readMeImg/login3.png)

![](./src/assets/readMeImg/login4.png)

![](./src/assets/readMeImg/login5.png)

### 购物车

本地购物车+服务端购物车

![](./src/assets/readMeImg/shop.png)

### 结算&支付

对话框组件 + 支付宝沙箱支付
```
PC前台点击支付按钮，新开标签页打开后台提供的支付链接带上订单ID还有回跳地址
后台服务发起支付，等待支付结果，修改订单状态，回跳PC前台结果页
PC前台在结果页获取回跳URL参数订单ID查询支付状态，展示支付结果
```

![](./src/assets/readMeImg/pay.png)

![](./src/assets/readMeImg/pay1.png)

![](./src/assets/readMeImg/pay2.png)

![](./src/assets/readMeImg/pay3.png)

![](./src/assets/readMeImg/pay4.png)

### 订单管理

标签页组件 + 步骤条组件

![](./src/assets/readMeImg/order1.png)

![](./src/assets/readMeImg/order2.png)

### 个人中心

mock模拟数据

![](./src/assets/readMeImg/my.png)