今天完成的事情： 

四、方案设计 - 前台

描述，验收，方案：

  支付

支付成功后点击确认返回课程详情

技术方案：

1、调用wx.login获取code返回给后台，后台调用对应的api换取用户的唯一标识（openid） 及本次登录的会话密钥（session_key）

2、调用后台的下单接口进行下单

3、调用后台的支付接口，返回wx.requestPayment 所需的参数，再进行调用wx.requestPayment

搜索

1、点击搜索框提示字体消失，用手机键盘确认搜索

2、搜索历史保存最近10条，排序为最新在最上面。

3、一排最多展示3个表搜索历史标签，

4、标签字符最多20个多了显示省略号

5、点击标签直接搜索

6、点击叉号删除这个标签

7、点击删除所有搜索标签

技术方案：

把每次搜索文字加入到数组第0位，最后设置数组长度，等于10 。把数组用JSON,stringify存入localStorage中。进入搜索页时，钩子函数中设置JSON.parse解析后利用v-for展示在页面

展示的搜索历史设置两个点击事件，点击文字则把文字作为搜索条件，触发搜索函数。点击X，把当前下标值传入函数，删除数组中对应位置

点击回收按钮，删除数组中所有元素

每行显示三条设置最小宽度，超出后自动下移

文字长度省略号overflow：hidden  text-overflow：ellipsis  white-space：nowrap

搜索结果

点击清除搜索框内容

点击进入课程详情页，排列顺序根据购买人数。多的排在前面。

技术方案：

用vant-search搜索，发起请求，按购买人数排列，v-for展示，router跳转

首页，选择年级

1、导航栏，只有推荐有轮播图。点击年级跳出弹窗选择，点击试试框进入搜索课程页。

2、课程标签可以左右滑动，选中高亮提示

3、banner图片为3张，自动轮播轮播顺序为从右向左，用户可以滑动轮播图，向右切换到下一张，向左切换上一张。

4、轮播时间为3秒，轮播图片为后台banner列表前3张，

5、点击baner跳转到指定页面

6、推荐课程，推荐每个科目的课程列表第一个课程，最多推荐10个课程

7、课程显示应对图片，点击跳转详情，标题显示俩行一行最多显示15个字符多出来

的显示省略号

8、点击选择年级，选中后底色，字体颜色改变，点击任意地方或者选中年级弹窗关闭

技术方案：

搜索框与上面相同，点击年级用v-show出现或隐藏，用swiper实现轮播图与导航栏左右滑动，上下滑动用better-scroll，利用循环的下标发起对应请求及跳转链接。

课程详情：

1、课程标题限制20个字符

2、未购买点击播放提示购买

3、时间为后台发布课程时间

4、点击课程价格购买

技术方案：

请求判断用户是否购买，未购买点击跳出提示弹窗(vant-Dialog)，点击价格发出购买请求。已购买则显示为已购买