# 物流峰会

**Repository Path**: web-chennanfang/logistics_summit

## Basic Information

- **Project Name**: 物流峰会
- **Description**: 物流峰会
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-04-08
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



## SLOW START

``` bash
# 安装依赖
npm install

# 启动服务
npm run dev
```


## 目录结构说明

```shell
├── README.md
├── build
├── config
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── components        # 公共组件
│   │   └── button
│   ├── main.js
│   ├── router            # 页面路由
│   │   ├── home
│   │   ├── profile       # 具体页面: 个人中心
│   │   └── index.js      # 路由入口
│   ├── styles            # 公共样式
│   │   └── var.css       # 公共变量
│   └── utils             # 帮助方法
│   ├── store
│   │   ├── index.js      # store入口
│   │   ├── modules       # 各页面级别的store
│   │   ├── actions.js    # root actions
│   │   ├── getters.js    # root getters
│   │   └── mutations.js  # root mutations
├── static
├── mock                  # 接口mock
│   ├── index.js          # mock入口文件
│   └── profile.js        # 个人中心接口mock
```


## 移动端适配方案

[lib-flexible](https://github.com/amfe/lib-flexible) + [postcss-adaptive](https://www.npmjs.com/package/postcss-adaptive)

以 750px 的设计稿响应式适配，所有的 `px` 尺寸会经过 `postcss` 转成rem, 所以，设计稿上标注的尺寸我们就可以直接使用了;

如果有些不想被转成 `rem` 单位的属性，在那一行之后添加 `/*no*/`

```css
.selector {
  height: 64px;
  width: 150px;
  padding: 10px; /*no*/
  border-top: 1px solid #ddd;
}
```

convert

```css
.selector {
  height: 0.853333rem;
  width: 2rem;
  padding: 10px;
  border-top: 1px solid #ddd;
}
/*自动处理 1px 方案*/
.hairlines .selector {
  border-top: 0.5px solid #ddd;
}
```

## 接口mock

1. 仿照mock/profile文件定义接口返回数据
2. 使用`npm run start:mock`启动项目

**注: 只有使用`fetch`请求的接口才能进行mock(可以使用src/utils/request)**



## 路由约定(提案)

### 命名原则

1. 组成: `[对象]` / `[操作]` / `[修饰]`
2. 最多三级路由, 第三级路由只允许出现id, orderId等修饰性字段
3. 不要使用大写字母, 单词之间的连接使用"-"



### 对象

- 首页: / (总入口, 即交互中的F1)
- 票务: ticket
- 订单: order
- 个人中心: profile
- 我的票务: mine
- 登录: signin
- 转赠: forward
- 通用组件 / 公用页面: component



### 具体路由:

**A:购票页**

- A1 + A2 + A3: `ticket/list`
- A5: 定向折扣票: `ticket/list?discount_id=xxxxx` 或 `ticket/list/:discountId`



**B:订单填写页**

- B1 + B2订单填写: `order/form`



**K:用票人信息**

> 关联页面: 订单填写页(B), 激活页(L2), 用票人信息(J4, 待定, 可能不需要)

**说明:** 需要可复用, 完成之后回调完整的用票人信息给调用方

建议以组件方式实现, 如用页面方式实现, 那么使用路由: `component/userinfo-form`



**D:支付页**

- D1待支付 + D2支付超时 + D5支付失败: `order/pay/:orderId`
- D3 + D4 + D6支付成功: `order/pay-success/:orderId`



**E:订单详情页**

- E1(待付款) + E2(订单关闭) + E3(订单完成): `order/detail/:orderId`



**F:钉钉我的票务**

- F2 + F3 + F4: `mine`
- F7 + F8 + F9 + F10 + F11 + F12: `mine/ticket`



**J: 个人中心**

> 关联页面:  K(用票人信息), E1(订单详情页)

- J1 + J7: `signin`
- J2 + J5: `profile`
- J3: `profile/order-list`
- J4: `profile/user-list`(待定, 可能不需要实现)



**C: 申请发票**

建议以模块实现, 如用页面实现, 使用路由: `component/invoice-form`



**G: 预约分会场**

>  关联页面: F7

建议以模块实现, 如用页面实现, 使用路由: `component/breakout-form`



**H: 转赠**

- H1: `forward/statement`
- H2 + H6: `forward/giving`
- H3: `forward/finished/:id`



**L: 转赠激活**

> 需要用到用票人信息

- L2: `forward/activation?code=xxxxxx`
- L3: `forward/actived`
- L4 + L6: `forward/active-failed`




## 其它

**git提交规范:**  [Semantic Commit Messages](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716)