sdx
Project setup
yarn install
Compiles and hot-reloads for development
yarn serve
Compiles and minifies for production
yarn build
Customize configuration
省点心项目
- 登录页
① 用户使用本程序需要先进行登陆，获取到用户的信息 token 到本地存储，以便之后的用户数据请求。
如果没有获取到本地存储的 token 也就是没有登录的情况下使用，需要进行路由地址拦截，强行重定向到登录页进行登录，否则不让使用 。
② 登录页分两部分，第一页 登陆logo图和第二页用户填入表单页。
默认为logo图页面，点击之后将logo页面就行隐藏，显示输入的表单页面。
③ 用户输入账号密码之后本地做效验，检验账号和密码是否符合规则、
不符合就不通过也不请求，而是提醒用户输入不正确。
④ 用户输入符合通过就请求，之后对服务器响应的数据做判断
服务器返回密码不正确就提醒重新输入做请求。
⑤ 账号密码通过服务器效验后，就将服务器返回的用户 token 保存到本地，
这样路由跳转时就不会被拦截。
⑥ 用户每次请求时需要将token附加到请求header头上，这样服务器能够识别是当前用户，返回的数据也是当前用户的数据。
- 个人中心
展示登陆用户的个人信息 和 用户相关的基本功能
基本功能除了 支付中心 和 修改密码 尚未拓展，
个人信息：点击之后跳转页面路由到详情页,通过在组建创建阶段 使用axios请求用户的个人数据 来渲染到页面上 页面顶端设置路由可返回上页和主页
版本信息：进入详情页，在 created 生命周期请求对应的服务器数据
清除缓存：使用 vantUI 中的 Dialog 组件 点击之后弹出是否清除缓存
清除本地的localStorage中的所有存储
退出登录：点击之后显示弹出框 是否退出，清除本地存储的token并刷新，会被全局路由检测到无 token 后重定向到登录页面再次登录
- 我的客户
- 我的客户 --列表
列举出登录用户的客源 简单显示客户的简介
可查用户与该客户之前的拜访记录 也可新增与此客户的最新拜访
可下滑点击 在此请求一组客户记录 也可通过搜索指定客户的拜访记录
本页面由头部和列表区组成
头部：又分导航栏和搜索框，导航栏使用了vantUI中的NavBar 左边可返回上一页中间为此页面的标题右边是新增一位客户的页面
搜索框vantUI中的Search组件，用户输入关键字 请求服务器 将返回的数据替换到列表使用的数组
列表区：先根据ui设计图 做出一个客户模板的样式，再将请求到的客户列表数据通过vue中v-for的方式渲染到页面上
- 我的客户 --客户资产详情
此页面用来查看客户的收入、旗下企业、合作伙伴、月收入 信息
页面组成：
头部：页面导航、客户头像及客户信息导航：跳转客户详情组件，需要在路由上携带客户的id跳转，在created阶段请求客户详情的数据并渲染到页面
展示区：tab标签栏 点击可切换对应的视图组件 --切换视图为了之后可维护、方便阅读 分成了四个组件分别对应 收入分析、旗下企业、合作伙伴、月收入
当点击对应的标签时，通过激活的标签下标插入对应的组件 并移除其他的组件，
页面在创建时，会去请求客户详情所有的数据保存到本地，并通过父传子给四个组件对应的数据
难点：根据UI图 需要在标签栏使用四张图片没有提供，请求数据中也没对应的图片，而且请求的组件数据数组是乱序的 和 ui图的不一致。
首先使用阿里的iconfont矢量图库中找到对应的图标下载到项目中引入到本页面生成class数组，再将请求的服务器数据进行排序 并在排序时将矢量图标class名称数组按需添加到一个新数组
当激活标签栏时根据激活下标 切换标签中图标和文字的color颜色 还有下划线的背景色
新增和修改客户信息
通过在created生命周期 判断地址栏是否携带客户Id参数 判断是新增还是修改
新增时页面的输入框全部为空 按钮为使用提交的请求 请求不会携带id
修改时 在created阶段通过客户id请求数据 在渲染到绑定的输入框中 提交时会同时携带客户的id
- 客户关怀
在客户列表中每条记录的客户信息下有 新增拜访 和 拜访记录两个按钮
点击拜访记录时会在跳转路由地址上添加该条客户的id和名称
在拜访记录页面创建阶段通过跳转过来的客户名称进行一次搜索
拜访记录页面分头部和列表区
头部：导航栏=可返回上一页 和 新增=一条与该客户的拜访记录，
搜索组件=通过用户输入的 客户名称关键词 进行请求并替换到本地的渲染数组
列表：将通过搜索到的数据数组进行渲染到模板上，可通过每条记录上的定期回访进入本次拜访详情页面，路由跳转时带本次拜访的id 在页面created阶段请求拜访的详情数据
客户列表中的新增拜访和拜访记录中的导航上的新增是一致的。
跳转到新增拜访页面时，需要在路径上携带需要新增拜访记录的客户id和名称，
该页面使用了vantUI中的form表单组件 其中包含了：Field中的input输入框、配合popup组件使用的Picker选择器、DatetimePicker时间选择、Field中的textarea输入域。
客户名称默认为路由传递来的名称，如果需要更换客户添加记录 可通过点击客户名称这一栏 隐藏form表单块并显示只有客户列表名称的列表，选中指定的客户时可将form表单中的客户名称和客户id替换, 此列表可指定搜索客户关键词筛选 默认搜索7条相关客户数据 点击下拉更多 会再次请求并添加到列表数组后
选中后将隐藏客户列表并恢复form表单 填入所有相关信息便可提交服务器进行添加 之后回到客户拜访记录列表页面通过搜索便可查看
难点：需要仔细阅读form组件的相关使用方法进行调试 比如验证输入框是否输入的规则，禁用客户名称的输入框为只读单纯的绑定值和选中后更换值，时间选择器 需要单独使用一个变量当选择完毕替换掉 请求对象中的时间属性
- 消息中心
展示系统的通知和客户发来的消息
页面由头部和tab标签栏组成
头部：左=返回上一页 中=本页面的标题 右=排序 可通过点击将当前列表数据除了置顶的 进行翻向排序
tab标签：全部消息、系统消息、个人消息 三者用的同一列表组件，只是父传子的数据进行了划分不一致，点击标签栏通过标签栏下标激活对应的组件
列表组件由ul下的两个li组成，上边为置顶消息列表 下面为普通消息列表，使用两个v-for 遍历置顶数组和非置顶数组。
①在消息中心页面created阶段请求所有的消息数据，遍历所有数据辨别 top属性为一的放一个数组并通过id大小进行降序排序，不是置顶的放一个数组通过消息中的创建时间从新到旧进行排序
②在computed属性中将top为1数组进行分类缓存，通过type属性 2 区分系统消息置顶数组和个人消息置顶数组
在computed属性中将top为null数组进行分类缓存，通过type属性 1 区分系统普通消息数组和个人普通消息数组
③全部消息组件传入无筛选的置顶数组和无筛选的普通消息数组，系统消息组件传入通过computed属性过滤了只有type为1的置顶数组和普通消息数组，个人消息组件传入type为2的数组..
④在computed划分数组时也同时遍历判断每条记录中的 isReader 是0为尚未查看的消息 并在当前所属的标签栏右上方展示小红点。
⑤点击一条消息详情时，可进入详情页面并通过路由跳转携带该条消息的id，使用该id去请求该消息的具体数据 来渲染到页面，再次使用该id去提交该条消息为已读的状态。
- 送货单
展示用户的订单列表 发送货状态
该页面由 导航栏、搜索框、tab标签栏、渲染列表组件 组成。
使用了四个api请求对应每个标签项(全部、代发货、待收货、待评价)，
使用了四个数组接收四个api请求的数据，当点击指定标签时根据标签栏的下标请去求对应的api数据，赋值到所属数组通过父传子传递给子组件进行渲染，使用搜索框时根据激活的标签栏请求对应的api数据传值渲染，点击展开更多同样在方法里判断当前激活的标签下标去请求第几页的数据。
渲染列表由 标题、下单人简介、订单操作按钮(发货.收货.评价.查看评价) 组成，可点击标题进入到订单详情(下单人信息、收货地址)
点击发货按钮 通过路由携带本条订单的id跳转到订单编辑页面 -页面会通过Id请求本条订单的下单人信息来渲染到页面上 并填写收货人的信息 发送此条订单。
点击收货按钮弹出popup层 需要确认是否收货。收货则使用api去携带本订单id请求，服务器响应成功则将本地数组中的词条订单移除。
查看评价和评价归属于同一标签下的数组列表，点击跳转时携带id进入的是一个页面，评价页面为订单信息、服务评价两部分。
通过点击评价进入会先根据id请求订单的简单信息来渲染到订单信息部分内，服务评价使用vantUI中form组件 包含了评分组件和输入域组件，评分评价后即可通过提交完成此次评价。之后可使用查看评价按钮进入到此本次评价详情
- 快递单
展示已经收货后的物流单列表
由导航栏、搜索框、列表组件 组成
可通过关键词搜索 之前的快递详情数据 并替换掉本地的列表数组。
初次请求2条数据 可点击更多按钮 会进行分页请求
列表模板：判断每条数据中的star是否为1，为1是已评价过展示 查看评价 的按钮--为0是为评价过显示 评价 按钮，点击则携带本条快递单号记录的id进入评价页面。
评价页面由头部导航栏和form表单组件系列组成，
form表单由：三个可评分Rate、一个Rate不可评分的总体评分、textarea输入框评价、Uploader文件上传图片 组成。
使用 computed 属性计算三个可评分的和的平均值 绑定展示到不可评分上，评价略过..图片上传=5张上传限制，点击上传图片可选择本地的图片资源临时展示到页面上 可点击右上方的删除，删除不需要的图片，评价完毕点击导航栏右边的新增进行提交评价。
通过查看评价进入此页面不会展示提交的按钮会被替换为主页的图标，所有评分和输入域加上传图片功能 只可读或不显示。