今天完成的事情：

做燕趣二期方案设计

方案设计

2、【前台】首页

需求描述：

作为一名用户，我想要一个首页，以便于快速浏览网站的核心产品业务。

验收标准：

banner图

1、悬停，轮播停止，离开后，以3S的速度自动轮播大图。
2、点击图片，跳转到燕趣淘宝/京东官网首页。
3、点击左右切换符号，切换当前页面。
导航栏

1、点击切换（首页、产品、品牌介绍、新闻中心、口碑、联系我们）界面。

2、上滑内容，导航栏吸顶

方案咨询

1、展示电话、微信号、图片为底
2、悬停图片，弹出微信二维码

品牌介绍

1.文本详情展示

新闻列表

1、最多展示2条（左图右文），无详情页、文本域可以上下滑动查看详情内容。

2、点击更多跳转至新闻中心查看更多新闻列表。

技术方案：

参考俱到项目，使用swiper滑动插件

https://blog.csdn.net/sinat_38930182/article/details/89332748

9、【前台】联系我们

需求描述：

作为一名想反馈的用户，我需要联系品牌官方，以便于及时反馈。

验收标准：

【联系我们】

1、展示“渠道合作、企业采购合作、市场品牌合作、客服服务、人才招聘”5类文本信息。

【页尾联系我们】

1、点击标签”联系我们“跳转到联系我们页面

【页头微信、微博图标】

1.悬停微信图标，向下弹出微信公众号二维码

2.悬停微博图标，向下弹出微博官方号二维码

技术方案：

无难点

11、【前台】新闻中心

需求描述：

作为一名对燕窝行情感兴趣的用户，我需要查看燕窝的新闻媒体动态，以便于了解燕窝的市场趋势和走向。

验收标准：

【新闻列表】

1、展示5条（左图右文）新闻，无详情页、文本域可以上下滑动查看详情内容。

2、点击“查看更多”标签，1次最多加载10条新闻，没有行业新闻时候弹出标签“没有了...”

技术方案：

？？

12、【后台】banner图列表

需求描述：

作为一名后台管理员，我想要设置、修改首页、新闻banner图片，以便于宣传产品、新闻信息

验收标准：

【首页banner列表】

1、点击新增按键进入新增详情页面。

2、鼠标拖动当前列表到对应位置，点击保存排序，此表排序改变为当前顺序，序号依次变化。

3、点击编辑按键进入编辑详情页。

4、点击删除按键，弹出删除警告框，确认后删除该系列。

5、点击产品标签，进入产品列表页（默认筛选当前系列产品列表）。

6、点击大图标签，进入大图列表页（默认筛选当前系列大图列表）。

7、点击下架，该系列从前台展现撤回，可编辑和删除；点击上架，该系列展现到前台，不能编辑和删除，最多上架8个张图片，点击上架第9张图片弹出提示“最多上架8张图片，请注意”。

8、排序优先级，上架排序>编辑/新增排序，统一倒叙时间排列，触发点为点击上架，保存后返回。

9、输入最多15字主题进行搜索，多输入无效。

10、点击创建时间，弹出时间可选框，选择时间端进行搜索。

11、选择状态、创建人可进行搜索。

12、点击重置，展示全部列表数据。

新增详情页

1、主题输入框限制输入15个字，多输入无效，主题、大图为必填项。

2、跳转URL地址只能以“ http 或 https 开头的地址“输入，以其他内容开头输入，无法输入。

3、图片展示在前台前台首页banner位置、提示上传尺寸、提醒上传错误“不大于5M的、支持Jbmp,jpg,png,tif,gif格式的图片”。

4、点击选择图片从本机选择图片，弹出进度列表；再次点击选择图片，跟换进度条信息（名称、进度为0），点击上传按键，上传完成跟换当前列表下图片。

5、点击上传按键，进度条完成100%在列表下展示图片，状态显示对号，上传中、上传完成上传按键禁用，只能完整上传“不大于5M的、支持Jbmp,jpg,png,tif,gif格式的图片”。

6、点击删除，删除当前列表任务及大图。

7，点击保存按键，弹出保存确认对话框，确认保存后返回banner列表页；必填项未填写情况下，保存按键禁用。

8、点击取消按键，不保存信息返回banner列表页。

编辑详情页

1、点击选择图片，弹出进度条信息，点击上传按键，完整上传更换当前列表下图片。

2、点击保存按键，保存修改信息返回banner列表页；未更改信息或未填写必填项则禁用保存按键。

3、输入限制、提示、必填项、其他同新增详情页。

技术方案：

拖动排序： 使用zorro table 表格 拖拽排序 

https://ng.ant.design/components/table/zh#components-table-demo-drag-sorting

进度条可以用ng-zorro里的： https://ng.ant.design/components/progress/zh#header

分页 zorro https://ng.ant.design/components/pagination/zh

使用angular的响应式表单

在app.module.ts 中引入 ReactiveFormsModule  模块 

在需要组件中引入

   import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';

Upload上传  https://ng.ant.design/components/upload/zh

搜索表单直接 zrrzo 的form 文档：https://ng.ant.design/components/form/zh

关键字搜索  点击搜索的时候，获取值通过  queryParams 进行参数传递，并跳转到订单列表页面。

 示列：

传参：this.router.navigate(["/page1"],{queryParams:{"id":"10","name":"word","age":"30"}});

取参：

import {ActivatedRoute} from "@angular/router";

constructor(private _activatedRoute:ActivatedRoute) { }

 ngOnInit() {

        this.sub = this._activatedRoute.queryParams.subscribe(queryParams=>{

            console.log("queryParams参数:",queryParams);

            this.id = Number.parseInt(queryParams["id"]);

            this.name = queryParams["name"];

            this.age = Number.parseInt(queryParams["age"]);

        })

}

14、【前台】电商渠道

需求描述：

作为一名想要购买产品的用户，我需要查看产品的购买链接，以便于我可以购买到产品。

验收标准：

【电商渠道】

1、展示电商名称标签，纵向列表添加标签，1*10，超过的纵向增加居中展示。
2、点击标签，跳转至电商渠道商铺网站。

技术方案：

无难点