# 二手手机回收

**Repository Path**: z2x_dev/phone-recycling

## Basic Information

- **Project Name**: 二手手机回收
- **Description**: 二手手机回收
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-10-25
- **Last Updated**: 2023-01-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 这是一个用vue构建的移动端单页面应用
```手机品牌型号搜索，二手手机下单，用户登录，订单查询```

> 本案例是一个仿二手手机回收的单页面应用，采用了前后端分离的开发模式。
>
> 前端页面采用vue全家桶，用axios获取数据接口。由于没有后台，一些订单信息等的保存用到了本地存储
>
> 本案例实现了用户出售一个二手手机的整个流程（下单，登录，订单查询与处理）。

（本应用目的是未微信公众号开发的应用，所以用微信浏览器打开效果最好）

效果查看网址：[http://39.108.104.0:6002](http://39.108.104.0:6002)

### 如何下载到本地并运行

1. 先下载到本地

2. 想要运行此项目，电脑必须要有node环境。怎么安装node去网上查找教程

3. 进入项目根目录，运行命令行，输入命令（安装项目依赖）：`npm i`

4. 找到根目录下面的package.json文件，修改选项

   ![输入图片说明](https://gitee.com/uploads/images/2018/0630/094204_6d05eb6c_1740193.png "微信截图_20180630094006.png")

5. 运行项目，在命令行输入命令：`npm run dev` 或者 `npm run dev1`

6. 在浏览器输入`http://192.168.169.149:6003/`就可以访问项目了(**要把这个地址中的ip地址换成你本机的ip地址**)。如果你的手机和电脑都是连的同一个局域网，那么你的手机也可以通过这个地址访问项目网页。

#### 技术栈
1. Vue  (项目框架)
2. Vue-Router (路由)
3. Vuex (全局状态控制)
4. Axios (接口请求)
5. webpack (项目打包工具)
6. json-server (项目数据模拟)
7. localStorage(模拟数据库存储订单信息)

#### 实现的功能
1. 入口首页（轮播图，马上回收，热门品牌回收，热门机型回收）

   ![输入图片说明](https://gitee.com/uploads/images/2018/0630/094222_c139d998_1740193.jpeg "689928900486085432.jpg")

2. 查找品牌机型（选择品牌获取型号，点击搜索按钮进入搜索页面）

   ![输入图片说明](https://gitee.com/uploads/images/2018/0630/094236_187936a1_1740193.jpeg "36059244610937792.jpg")

3. 搜索页面（输入关键字获取相应机型）

   ![输入图片说明](https://gitee.com/uploads/images/2018/0630/094256_0f5930f7_1740193.jpeg "34445820723212503.jpg")

4. 故障信息（title：显示当前选择的品牌型号，故障评估进度条，点击故障页面自动滑动，故障信息模态框）

   ![输入图片说明](https://gitee.com/uploads/images/2018/0630/094314_5d429369_1740193.jpeg "787453619945644559.jpg")

5. 展示页面（价格展示，柱状图，用户信息搜集，获取vuex用户信息，如果用户有注册就会把用户信息自动填充到表单）

   ![输入图片说明](https://gitee.com/uploads/images/2018/0630/094327_933871fb_1740193.jpeg "689666494179586976.jpg")

6. 回收协议

   ![输入图片说明](https://gitee.com/uploads/images/2018/0630/094339_d6795283_1740193.jpeg "578143200328622828.jpg")

7. 下单成功界面（点击查看订单，跳转到登录页面）

   ![输入图片说明](https://gitee.com/uploads/images/2018/0630/094348_a2f35431_1740193.jpeg "501308527563216006.jpg")


8. 登录页面（获取本地存储的用户信息，设置vuex全局用户信息）

   ![输入图片说明](https://gitee.com/uploads/images/2018/0630/094407_56030607_1740193.jpeg "366536429671284811.jpg")

9. 个人中心页面（获取vuex全局用户信息，如果不存在，就会退回到用户登录页面）

   ![输入图片说明](https://gitee.com/uploads/images/2018/0630/094441_a790272d_1740193.jpeg "158416985385086549.jpg")

10. 订单列表（点击订单列表，获取前面的所有订单）

    ![输入图片说明](https://gitee.com/uploads/images/2018/0630/094455_e85e7469_1740193.jpeg "58317276417525506.jpg")

11. 订单详情（订单所有信息，包括订单进度，订单信息，用户信息，手机故障信息，邮寄相关信息等）

    ![输入图片说明](https://gitee.com/uploads/images/2018/0630/094518_26b0a8ff_1740193.jpeg "501843524197372946.jpg")
    ![输入图片说明](https://gitee.com/uploads/images/2018/0630/094532_c985fdd4_1740193.jpeg "705715317751420466.jpg")

12. 填写邮寄信息（填写完成后，自动跳转到订单详情页面，订单状态跳转到第2步骤：邮寄中）

    ![输入图片说明](https://gitee.com/uploads/images/2018/0630/094551_a8ec0dd6_1740193.jpeg "814678220831598793.jpg")

13. 账户管理（从个人中心页面右上角的小图标点击进入。获取vuex用户信息，如果存在用户信息就会显示用户信息，并可以修改。如果不存在用户信息，就会提示用户信息未填写）

    ![输入图片说明](https://gitee.com/uploads/images/2018/0630/094605_4e92e4c9_1740193.jpeg "475457146362279292.jpg")

14. 账户设置（获取vuex全局用户信息，如果存在就会填充在表单中。提交修改：修改vuex全局用户信息，修改本地存储的用户信息，等下一次登录或者下单的时候就能用到这些设置的信息了）

    ![输入图片说明](https://gitee.com/uploads/images/2018/0630/094631_2fc9e821_1740193.jpeg "596420105123567944.jpg")

15. 账户设置-登录密码设置（在登陆的时候可以使用手机号码和密码登录）