问题
# 代码规范
看一下.eslint.js的代码规范
1. 变量
图中`order_tab_list`需要采用驼峰式写法`orderTabList`
2. 页面
路由需要与移动端保持一致
# 主数据必须放到asyncData方法内获取
主数据一般只得是首屏显示的数据
例如：
正确做法如下
```js
export default {
name: 'xx',
async asyncData ({ app, store }) {
let data = {}
try {
data = await fetchHomeData(store.state.uid, app)
} catch (err) {
data = {}
}
return {
data
}
},
// 善用计算属性
computed: {
banners () { return this.data.banner || [] }, // 需要保证banners必须为数组
recommend () {
const list = this.data.recommend || []
// 对list做的处理
return list
},
}
}
```
# 注释（必须）
1. 方法注释，例如
```js
/**
* @date 2020/09/11 10:08
* @author 潜
* @description 函数作用说明
* @param { String } param1
* @param { Object } param2
* @return { String } （有返回值时写）
*/
function test (param1, param2) {
// 关键说明，以下为演示
// 必须对a执行以下操作，否则会引起...
a = Object.create({}, null)
// ...do something
// 逻辑说明，以下为演示
// ① 先执行...
// do something
// ② 保存...
// do something
// ③ 格式化...
// do something
// ④ 完成
// do something
return 'aaa'
}
```
2. html注释
```html
<!-- 专题内容 -->
<div>
<h1>xxxx</h1>
<div>
<span>{{ xxx }}</span>
</div>
</div>
```
3. 组件注释
```html
<template>
<div></div>
</template>
```
```js
<script>
/**
* @date 2020/09/11 10:13
* @author 潜
* @description 组件说明
*/
export default {
props: {
data: { // 主数据
type: Obejct,
default () {
return {}
}
},
str: { // xxx
type: String,
default: ''
}
}
}
</script>
```
```css
// 主要的css说明，不需要全部都加说明
.test {
display: none;
}
```
# 图片处理
不能所有图片都使用webp，不支持webp怎么办？不就没图了嘛。
1. 小于4kb的图片放到assets目录下，使用方法`~/assets/image/xx.png`
2. static目录下的图片，不要使用../../static的形式，直接使用`image/xx.png`，无须再写static目录名
3. 接口图片处理
```js
// 列表图片需要懒加载，必须加v-lazy
<img :src="img2Webp('img/settlement-success.png')" alt="xx" title="xx" v-lazy>
```
# 项目进度
1. 看了下pc的页面内容，进度比较慢，需要加强下。
2. 加强下写界面样式的速度