MyLesson 小程序前台前端开发（一）

2. 前端框架 VantWeapp

心法：Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源，目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。

在小程序项目中添加 VantWeapp 支持：

1. 安装 VantWeapp 依赖：

npm install @vant/[email protected] --save

2. 将 app.json 中的 "style": "v2" 去除，规避部分组件样式混乱。
3. 在 project.config.json 文件中开启 NPM 支持：
   1. 使用 "packNpmManually": true 代码开启 NPM 支持。
   2. 使用 "packNpmRelationList" -> "packageJsonPath": "" 指定 NPM 依赖文件的位置。
   3. 使用 "packNpmRelationList" -> "miniprogramNpmDistDir": "" 指定 NPM 在哪个目录中打包。

{"setting":{..."packNpmManually":true,"packNpmRelationList":[{"packageJsonPath":"./package.json","miniprogramNpmDistDir":"./"}],}}

4. 在微信小程序开发者工具的右上角依次点击 工具 -> 构建 npm，构建完成后，即可引入组件。

E02. 封装通用组件

1. 封装通用工具 util

开发通用工具 utils/util.js 文件：

/**
 * 判断非空值
 *
 * @param value 被判断的值
 * @return boolean 返回 true 表示不为 null 也不为 undefined
 */
function isNotNull(value){
return value !==null&& value !==undefined;
}
/**
 * 判断空值
 *
 * @param value 被判断的值
 * @return boolean 返回 true 表示为 null 或 undefined
 */
function isNull(value){
return!isNotNull(value);
}
/**
 * 判断是否存在空值
 *
 * @param values 被判断的值，不定长列表
 * @return boolean 返回 true 表示包含 null 或 undefined
 */
function hasNull(...values){
for(let i in values){
if(isNull(values[i])){
return true;
}
}
return false;
}
/**
 * 判断空字符串
 *
 * @param value 被判断的值
 * @return boolean 返回 true 表示不为 null 或 undefined 或空字符串
 */
function isNotEmpty(value){
return value !==null&& value !==undefined&& value !=='';
}
/**
 * 判断非空字符串
 *
 * @param value 被判断的值
 * @return boolean 返回 true 表示为 null 或 undefined 或空字符串
 */
function isEmpty(value){
return!isNotEmpty(value);
}
/**
 * 判断是否存在空字符串
 *
 * @param values 被判断的值，不定长列表
 * @return boolean 返回 true 表示包含 null 或 undefined 或空字符串
 */
function hasEmpty(...values){
for(let i in values){
if(isEmpty(values[i])){
return true;
}
}
return false;
}
/**
 * 日期字符串处理：1999-01-02T12:12:12 -> 1999 年 01 月 02 日 12:12
 *
 * @param dateStr 日期字符串
 * @return string 返回格式化后的日期字符串
 */
function datetimeFormat(dateStr){
if(isNull(dateStr))return '';// 将日期字符串转为日期格式
let date =new Date(dateStr);// 获取日期中的元素：年，月，日，时，分
let toDouble=e=> e <10?'0'+ e : e;
let yy =toDouble(date.getFullYear());
let mm =toDouble(date.getMonth()+1);
let dd =toDouble(date.getDate());
let hh =toDouble(date.getHours());
let mi =toDouble(date.getMinutes());// 返回美化后的日期字符串
return `${yy}年${mm}月${dd}日 ${hh}:${mi}`;
}
/**
 * 日期字符串处理：1999-01-02T12:12:12 -> 1999 年 01 月 02 日
 *
 * @param dateStr 日期字符串
 * @return string 返回格式化后的日期字符串
 */
function dateFormat(dateStr){
if(isNull(dateStr))return '';// 将日期字符串转为日期格式
let date =new Date(dateStr);// 获取日期中的元素：年，月，日，时，分
let toDouble=e=> e <10?'0'+ e : e;
let yy =toDouble(date.getFullYear());
let mm =toDouble(date.getMonth()+1);
let dd =toDouble(date.getDate());// 返回美化后的日期字符串
return `${yy}年${mm}月${dd}日`;
}
/**
 * 随机生成一个 len 位的字符串
 *
 * @param len 随机字符串位数，范围在 1 ~ 36 之间，默认为 18
 * @return string 随机字符串
 */
function randomStr(len =18){
// 随机一个小数，并将其转为 36 进制字符并消除所有点符号
let result = Math.random().toString(36).replaceAll('.','');// 截取后 len 位字符串并返回：len 不小于 1 且不超过 36 
len = Math.max(len,1); len = Math.min(len,36);
return result.slice(-len);
}
/**
 * 随机生成一个十六进制的颜色值
 *
 * @returns {string} 十六进制的颜色值如 '#000000'
 */
function randomColor(){
const rgb =[]
for(let i =0; i <3;++i){
let color = Math.floor(Math.random()*256).toString(16)
color = color.length ===1?'0'+ color : color 
rgb.push(color)
}
return '#'+ rgb.join('')
}
/**
 * 带按钮的确认弹框
 *
 * @param content 弹框内容
 * @param onConfirm 确认时的回调函数
 * @param onCancel 取消时的回调函数
 */
function confirm(content, onConfirm, onCancel){
 wx.showModal({
title:'提示',content: content,
success:function(sm){
if(sm.confirm && onConfirm)onConfirm();
if(sm.cancel && onCancel)onCancel();
}});
}
/**
 * 跳转到另一个标签页
 *
 * @param url 目标页面地址
 * @param reload 是否重新加载目标页面，默认 true
 */
function tab(url, reload =true){
 wx.switchTab({
url: url,
success:()=>{
if(reload){
let page =getCurrentPages().pop();
if(page) page.onLoad();
}
});
}
/**
 * 跳转到另一个普通页
 *
 * @param url 目标页面地址
 * @param reload 是否重新加载目标页面，默认 true
 */
function page(url, reload =true){
 wx.navigateTo({
url: url,
success:()=>{
if(reload){
let page =getCurrentPages().pop();
if(page) page.onLoad();
}
});
}
/**
 * 成功提示框（微信）
 *
 * @param title 提示文字内容，长度限制约 7 个汉字（超出会被截断）。
 */
function success(title){
 wx.showToast({
title: title,
icon:'success',
duration:2000});
}
/**
 * 失败提示框（微信）
 *
 * @param title 提示文字内容，长度限制约 7 个汉字（超出会被截断）。
 */
function error(title){
 wx.showToast({
title: title,
icon:'error',
duration:2000});
}
/**
 * 普通提示框（微信）
 *
 * @param title 提示内容，长度无限制
 */
function tip(title){
 wx.showToast({
title: title,
icon:'none',
duration:2000});
}
/**
 * 模态框（微信）
 *
 * @param title 提示文字
 * @param content 提示内容
 * @param success 用户点击确定后的回调函数
 * @param cancel 用户点击取消后的回调函数
 */
function modal(title, content, success, cancel){
 wx.showModal({
title: title,content: content,
success:function(res){
if(res.confirm){
if(success)success();
}else{
if(cancel)cancel();
}
}});
}
/**
 * 判断用户是否登录
 *
 * @returns {boolean} false 未登录，true 已登录
 */
function isLogin(){
if(!wx.getStorageSync('token')){
error('请先登录');
setTimeout(()=>{page('/pages/index/login-by-account/login-by-account',false);},500);
return false;
}
return true;
}// 导出模块
module.exports ={ isNotNull, isNull, hasNull, isNotEmpty, isEmpty, hasEmpty, dateFormat, datetimeFormat, randomStr, randomColor, confirm, tab, page, success, error, tip, modal, isLogin }

2. 封装常量工具 const

开发常量工具 utils/const.js 文件：

// 环境 IP 地址
const HOST='localhost';
const LINUX_HOST='192.168.40.77';
const GATEWAY_HOST=`http://${HOST}:24101`;
const SOCKET_SERVER=`ws://${HOST}:24107`;
const MINIO_HOST=`http://${LINUX_HOST}:9001/mylesson/`;
const MINIO_AVATAR=MINIO_HOST+'/avatar/';
const MINIO_BANNER=MINIO_HOST+'/banner/';
const MINIO_COURSE_COVER=MINIO_HOST+'/course-cover/';
const MINIO_COURSE_SUMMARY=MINIO_HOST+'/course-summary/';
const MINIO_EPISODE_VIDEO=MINIO_HOST+'/episode-video/';
const MINIO_EPISODE_VIDEO_COVER=MINIO_HOST+'/episode-video-cover/';
const UPLOAD_AVATAR_URL=GATEWAY_HOST+'/user-server/api/v1/user/uploadAvatar/';
// 常用请求状态码
const STATUS={SUCCESS:1000}
// 常用表单规则
const RULE={
TITLE:[{pattern:/^.{1,42}$/ ,message:'标题长度必须在 1~42 之间'}],
AUTHOR:[{pattern:/^.{1,42}$/ ,message:'作者名称长度必须在 1~42 之间'}],
INFO:[{pattern:/^.{1,170}$/ ,message:'描述长度必须在 1~170 之间'}],
CONTENT:[{pattern:/^.{1,170}$/ ,message:'内容长度必须在 1~170 之间'}],
VCODE:[{pattern:/^[0-9]{6}$/ ,message:'验证码必须是 6 位数字'}],
MENU_URL:[{pattern:/^\/ [a-zA-Z]{0,256}$/ ,message:'跳转地址必须以 / 开头，后续内容仅支持 0~256 个英文字母'}],
MENU_ICON:[{pattern:/^[a-zA-Z]{1,256}$/ ,message:'图标仅支持 1~256 个英文字母'}],
USERNAME:[{pattern:/^[a-zA-Z0-9]{4,20}$/ ,message:'账号必须由 4 到 20 个英文字母或数字组成'}],
PASSWORD:[{pattern:/^[a-zA-Z0-9]{4,20}$/ ,message:'密码必须由 4 到 20 个英文字母或数字组成'}],
REALNAME:[{pattern:/^[\u4e00-\u9fa5]{2,6}$/ ,message:'真实姓名必须由 2 到 6 个中文组成'}],
NICKNAME:[{pattern:/^[\u4e00-\u9fa5|_a-zA-Z0-9]{2,10}$/ ,message:'昵称必须由 2 到 10 个中文、英文或数字组成'}],
IDCARD:[{pattern:/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/ ,message:'身份证号格式不正确'}],
PHONE:[{pattern:/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/ ,message:'手机号码格式不正确'}],
EMAIL:[{pattern:/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ ,message:'电子邮箱格式不正确'}],
PROVINCE:[{pattern:/^[\u4e00-\u9fa5]{2,20}$/ ,message:'省份必须由 2 到 20 个中文组成'}],
CODE:[{pattern:/^.{1,42}$/ ,message:'兑换口令长度必须在 1~42 之间'}],
SN:[{pattern:/^.{1,42}$/ ,message:'订单编号长度必须在 1~42 之间'}],
}// 项目大标题
const PROJECT_TITLE='绝对精品课 - 我的课堂';
// 项目小标题
const PROJECT_SUB_TITLE='Welcome To Lesson Project';
// 省份选项
const PROVINCE_OPTIONS=[
{id:0,text:"华北地区",children:[{text:"北京市",id:"北京市"},{text:"天津市",id:"天津市"},{text:"河北省",id:"河北省"},{text:"山西省",id:"山西省"},{text:"内蒙古自治区",id:"内蒙古自治区"}]},
{id:1,text:"东北地区",children:[{text:"辽宁省",id:"辽宁省"},{text:"吉林省",id:"吉林省"},{text:"黑龙江省",id:"黑龙江省"}]},
{id:2,text:"华东地区",children:[{text:"上海市",id:"上海市"},{text:"江苏省",id:"江苏省"},{text:"浙江省",id:"浙江省"},{text:"安徽省",id:"安徽省"},{text:"福建省",id:"福建省"},{text:"江西省",id:"江西省"},{text:"山东省",id:"山东省"}]},
{id:3,text:"中南地区",children:[{text:"河南省",id:"河南省"},{text:"湖北省",id:"湖北省"},{text:"湖南省",id:"湖南省"},{text:"广东省",id:"广东省"},{text:"广西壮族自治区",id:"广西壮族自治区"},{text:"海南省",id:"海南省"}]},
{id:4,text:"西南地区",children:[{text:"重庆市",id:"重庆市"},{text:"四川省",id:"四川省"},{text:"贵州省",id:"贵州省"},{text:"云南省",id:"云南省"},{text:"西藏自治区",id:"西藏自治区"}]},
{id:5,text:"西北地区",children:[{text:"陕西省",id:"陕西省"},{text:"甘肃省",id:"甘肃省"},{text:"青海省",id:"青海省"},{text:"宁夏回族自治区",id:"宁夏回族自治区"},{text:"新疆维吾尔自治区",id:"新疆维吾尔自治区"}]},
{id:6,text:"港澳台地区",children:[{text:"台湾省",id:"台湾省"},{text:"香港特别行政区",id:"香港特别行政区"},{text:"澳门特别行政区",id:"澳门特别行政区"}]}
]
// 星座选项
const ZODIAC_OPTIONS=['白羊座（Aries）','金牛座（Taurus）','双子座（Gemini）','巨蟹座（Cancer）','狮子座（Leo）','处女座（Virgo）','天秤座（Libra）','天蝎座（Scorpio）','射手座（Sagittarius）','摩羯座（Capricorn）','水瓶座（Aquarius）','双鱼座（Pisces）'];
// 导出
module.exports ={GATEWAY_HOST,SOCKET_SERVER,STATUS,RULE,MINIO_AVATAR,MINIO_BANNER,MINIO_COURSE_COVER,MINIO_COURSE_SUMMARY,MINIO_EPISODE_VIDEO,MINIO_EPISODE_VIDEO_COVER,UPLOAD_AVATAR_URL,PROJECT_TITLE,PROJECT_SUB_TITLE,PROVINCE_OPTIONS,ZODIAC_OPTIONS}

3. 封装请求工具 api

开发常量工具 utils/api.js 文件：

import util from'./util.js';
import constant from'./const.js';
/**
 * （私有）API 前缀处理：根据模块名称返回 API 前缀
 *
 * @param module 模块名称，如 user, course 等
 * @return 对应的 API 前缀，如 /user-server/api/v1/user 等，末尾无 / 符号
 */
function apiPrefixFormat(module){
// 微服务与模块的映射关系：key 为微服务名称，value 为模块名称数组
const serviceModuleMap ={'user-server':['menu','role','user'],'course-server':['category','comment','course','episode','report','season'],'sale-server':['article','banner','coupons','notice','seckill','seckillDetail'],'order-server':['cart','order','orderDetail']};
// 查找匹配的微服务名称：遍历微服务与模块的映射关系，找到包含当前模块 module 的微服务名称
const microServiceName = Object.keys(serviceModuleMap).find(key=> serviceModuleMap[key].includes(module));
// 返回拼接后的 API 前缀
return`/${microServiceName}/api/v1/${module}`;
}
/**
 * （私有）请求方法
 *
 * <p> module: 模块名称，如 user，必传。
 * <p> url: 请求地址，如 /selectById，必传。
 * <p> method: 请求方式，默认 GET。
 * <p> header: 请求头，默认 application/json 类型并自动携带 Token 令牌。
 * <p> params: API 请求函数参数，JSON 格式，作为请求参数。
 *
 * @returns Promise 函数
 */
function sendRequest(config){
// 必传参数（需要空值保护）
let module = config['module'];
let url = config['url'];
if(util.hasNull(module, url))return;
// 可选参数（需要设置默认值）
let method = config['method'];
let params = config['params'];
let header = config['header'];
if(util.isEmpty(method)) method ='GET';
if(util.isNull(header)){
let token = wx.getStorageSync('token')||null; 
header ={'Content-Type':'application/json','token': token};
}
// 处理 url 参数：添加对应的网关路由名称
url = constant.GATEWAY_HOST+apiPrefixFormat(module)+ url;
// 发送请求
return new Promise((resolve, reject)=>{
 wx.request({
url: url,
method: method,
data: params,
header: header,
success(res){
if(util.isNull(res)) util.error('服务器无响应');// 若存在 2 层 data，则直接拆除第 1 层 data 
res =undefined!== res.data &&undefined!== res.data['data']? res.data : res;
// 请求成功，返回 data 数据
if(res['code']=== constant.STATUS.SUCCESS){
// DQL 操作成功时返回查询到的数据，DML 操作成功时返回 trueresolve(util.isNotNull(res.data)? res.data :true);
}
// 请求失败 - 服务器异常
else{ util.error(res['message']); console.error(res['coderMessage']);// TODO 生产环境下删除
}},
// 请求失败
fail(err){reject('请求异常：'+ err);
}});
});
}
/**
 * 发送 GET 请求
 *
 * @param module 模块名称，如 user 等
 * @param url 请求地址，如 /selectById 等
 * @param params API 请求函数参数，JSON 格式，默认 null
 * @returns {Promise<unknown>}
 */
function get(module, url, params =null){
return sendRequest({module, url, params});
}
/**
 * 发送 POST 请求
 *
 * @param module 模块名称，如 user 等
 * @param url 请求地址，如 /selectById 等
 * @param params API 请求函数参数，JSON 格式，默认 null
 * @returns {Promise<unknown>}
 */
function post(module, url, params =null){
return sendRequest({module, url, params,method:'POST'});
}
/**
 * 发送 PUT 请求
 *
 * @param module 模块名称，如 user 等
 * @param url 请求地址，如 /selectById 等
 * @param params API 请求函数参数，JSON 格式，默认 null
 * @returns {Promise<unknown>}
 */
function put(module, url, params =null){
return sendRequest({module, url, params,method:'PUT'});
}
/**
 * 发送 DEL 请求
 *
 * @param module 模块名称，如 user 等
 * @param url 请求地址，如 /selectById 等，默认 null
 * @param params API 请求函数参数，JSON 格式
 * @returns {Promise<unknown>}
 */
function del(module, url, params =null){
return sendRequest({module, url, params,method:'DELETE'});
}
// 导出
module.exports ={get, post, put, del};

E03. 开发底部导航栏

微信小程序的底部支持自定义导航栏。

开发小程序的底部导航栏：

1. 开发导航栏相关页面

通过右键 New -> Wechat Mini program Page 的方式创建'首页 + 课程 + 购物车 + 我的'四个选项卡相关的页面（其中首页 index 是项目本身就存在的）。

1. 开发 /pages/index/index 页面（json + wxml + scss + js）。
2. 开发 /pages/course/course 页面（json + wxml + scss + js）。
3. 开发 /pages/cart/cart 页面（json + wxml + scss + js）。
4. 开发 /pages/user/user 页面（json + wxml + scss + js）。

2. 开发底部导航栏组件

微信小程序自定义的底部导航栏需要自行创建，且注意目录名称，组件名称和位置均固定，不可随意更改。

在项目根目录开发底部导航栏组件（自定义）：

1. 在项目根目录创建 custom-tab-bar 目录，然后右键 New -> Wechat Mini program Component 创建 index 组件：

|_ ml-miniapp |_ custom-tab-bar |_ index.js |_ index.json |_ index.scss |_ index.wxml ...

2. 开发 index 组件：

custom-tab-bar/index.json：

{"component":true,"usingComponents":{"van-tabbar":"@vant/weapp/tabbar/index","van-tabbar-item":"@vant/weapp/tabbar-item/index"}}

custom-tab-bar/index.wxml：

<view custom-class="tab-bar"><van-tabbar active="{{activeTab}}" bind:change="changeTab"><van-tabbar-item wx:for="{{ tabs }}" wx:key="index" icon="{{item['icon']}}"> {{ item['text'] }} </van-tabbar-item></van-tabbar></view>

custom-tab-bar/index.scss：

/**暂无*/

custom-tab-bar/index.js：

import util from"../utils/util.js";
Component({
data:{
// 底部导航栏 - 当前标签（索引）
activeTab:0,
// 底部导航栏 - 全部标签
tabs:[
{pagePath:"/pages/index/index",text:"首页",icon:'home-o'},
{pagePath:"/pages/course/course",text:"课程",icon:'shop-o'},
{pagePath:"/pages/cart/cart",text:"购物车",icon:'cart-o'},
{pagePath:"/pages/user/user",text:"我的",icon:'user-o'}
]},
methods:{
// 点击标签按钮时，切换标签页
changeTab(ev){// 获取索引：首页 0，课程 1，购物车 2，我的 3
let tabIndex = ev.detail;
// 获取对应的标签页
let tab =this.data.tabs[tabIndex];
// 获取对应的跳转路径
let pagePath = tab['pagePath'];
// 切换标签页
util.tab(pagePath);
}}});

3. 在 app.json 中配置底部导航栏：

{...
"tabBar":{"custom":true,"list":[
{"pagePath":"pages/index/index"},
{"pagePath":"pages/course/course"},
{"pagePath":"pages/user/user"},
{"pagePath":"pages/cart/cart"}
]}}

3. 配置导航栏切换效果

分别在四个标签页面的 onLoad 函数中修改 activeTab 变量，此时点击四个选项卡按钮的时候，会有切换页面的效果。

pages/index/index.js：

Page({
data:{},
onLoad:function(options){
this.getTabBar().setData({"activeTab":0});
}})

pages/course/course.js：

Page({
data:{},
onLoad:function(options){
this.getTabBar().setData({"activeTab":1});
}});

pages/cart/cart.js：

Page({
data:{},
onLoad:function(options){
this.getTabBar().setData({"activeTab":2});
}});

pages/user/user.js：

Page({
data:{},
onLoad:function(options){
this.getTabBar().setData({"activeTab":3});
}});

S02. 导航栏 - 首页

本模块包含项目首页展示，用户登录页面（包括账号登录和手机 + 验证码登录两种）和用户注册页面。

E01. 项目首页

项目首页主要用于展示通知，标题，横幅，公告新闻和秒杀活动等营销类型的内容，此界面无需用户登录即可查看。

页面要素：位置自上而下：

开发项目首页：

index.json：

{"usingComponents":{"van-sticky":"@vant/weapp/sticky/index","van-notice-bar":"@vant/weapp/notice-bar/index","van-image":"@vant/weapp/image/index","van-divider":"@vant/weapp/divider/index","van-collapse":"@vant/weapp/collapse/index","van-collapse-item":"@vant/weapp/collapse-item/index","van-tab":"@vant/weapp/tab/index","van-tabs":"@vant/weapp/tabs/index","van-card":"@vant/weapp/card/index","van-button":"@vant/weapp/button/index","van-empty":"@vant/weapp/empty/index"}}

index.wxml：

<van-sticky class="notice-bar"><van-notice-bar text="{{currentNotice}}" left-icon="volume-o"/></van-sticky><view class="login-tips" wx:if="{{isLogin}}"> 游客部分功能受限，点我 <text bind:tap="toLogin" class="link">登录系统</text>！ </view><view class="project-title"><view class="title">{{PROJECT_TITLE}}</view><view class="sub-title">{{PROJECT_SUB_TITLE}}</view></view><view class="banner"><swiper wx:if="{{banners}}" autoplay="3000"><swiper-item wx:for="{{banners}}" wx:key="id"><van-image src="{{MINIO_BANNER}}/{{item['url']}}" width="100%" height="150px" fit="fill"/></swiper-item></swiper><van-empty wx:else custom-class="no-banner-tip" image="error" description="暂无轮播图片"/></view><view class="article"><van-divider contentPosition="center" dashed>公告列表</van-divider><van-collapse custom-class="article-collapse" value="{{ currentArticleIdx }}" bind:change="changeArticle" accordion><van-collapse-item wx:for="{{articles}}" title="{{item['title']}}" name="{{item['idx']}}" wx:key="title" icon="fire-o"> {{item['content']}}</van-collapse-item></van-collapse></view><view class="seckill"><van-divider contentPosition="center" dashed>整点秒杀</van-divider><van-tabs wx:if="{{seckills && seckills.length > 0}}" active="{{ activeSeckillIdx }}" bind:change="changeSeckill"><van-tab wx:for="{{seckills}}" title="{{seckill['title']}}" wx:for-item="seckill" wx:key="id"><view wx:if="{{seckill['seckillDetails'].length > 0}}"><van-card wx:for="{{seckill['seckillDetails']}}" wx:key="id" title="{{item['courseTitle']}}" price="{{item['skPrice']}}" origin-price="{{item['coursePrice']}}" thumb="{{MINIO}}{{item['courseCover']}}" thumb-mode="scaleToFill" tag="秒杀" desc="描述信息"><view slot="footer"><view class="sk-btn sk-btn-0" wx:if="{{seckill['status'] === 0}}">未开始</view><view class="sk-btn sk-btn-1" wx:if="{{seckill['status'] === 1}}">秒杀中</view><view class="sk-btn sk-btn-2" wx:if="{{seckill['status'] === 2}}">已结束</view></view></van-card></view><view wx:else><van-empty image="error" description="暂无秒杀商品"/></view></van-tab></van-tabs><view wx:else><van-empty image="error" description="暂无秒杀活动"/></view></view><view class="baseline"><van-divider contentPosition="center" dashed>底线</van-divider></view>

index.scss：

@import"app";
.login-tips{
color: $gray; // 前景色 
margin-top: 20rpx;// 外边距 
.link{
color: $orange; // 前景色 
}}
.project-title{
letter-spacing: 5rpx; // 字间距 
line-height: 80rpx; // 行高 
margin: 40rpx 60rpx;// 外边距 
.title{
font-size: 45rpx; // 字体大小 
}
.sub-title{
font-size: 40rpx; // 字体大小 
color: $orange; // 字体颜色 
}}
.banner{
height: 400rpx; // 高度 
margin: 0 20rpx;// 外边距 
swiper, image{
height: 400rpx; // 高度 
}
.no-banner-tip{
height: 400rpx;// 高度 
.van-empty__image{
height: 210px; // 高度 
width: 400rpx; // 宽度 
}}}
.article{
text-align: left;// 文本对齐方式 
.van-cell{
background-color: $black; // 背景颜色 
color: $yellow; // 字体颜色 
font-weight: bold; // 字体粗细 
letter-spacing: 5rpx; // 字间距 
}
.article-collapse{
margin: 20rpx; // 外边距 
}
.van-collapse-item__content{
color: $black; // 字体颜色 
font-size: 25rpx; // 字体大小 
}}
.seckill{
padding: 0 20rpx;// 内边距 
.van-tab{
background: $bg-gray; // 背景颜色 
color: $white; // 字体颜色 
}
.van-tab--active{
background: $black;// 背景颜色 
.van-ellipsis{
color: $yellow; // 字体颜色 
}}}
.van-card{
color: $white; // 字体颜色 
background: $bg-gray; // 背景颜色 
border: 2rpx solid $black; // 边框圆角 
margin: 10rpx 0 0; // 外边距 
}
.van-card__content{
padding-left: 30rpx; // 内边距 
text-align: left; // 文本对齐方式 
}
.van-card__title{
padding-top: 20rpx; // 内边距 
font-size: large; // 字体大小 
margin-bottom: 10rpx; // 外边距 
color: $yellow; // 字体颜色 
}
.van-card__price{
color: $orange; // 前景色 
}
.van-card__thumb{
margin-top: 20rpx; // 外边距 
width: 220rpx; // 宽度 
}
.sk-btn{
width: 170rpx; // 宽度 
height: 70rpx; // 高度 
line-height: 70rpx; // 行高 
text-align: center; // 文本对齐方式 
font-size: large; // 字体大小 
margin-top: -70px; // 外边距 
float: right; // 浮动 
rotate: -25deg; // 旋转 
border-top-left-radius: 50%; // 边框圆角 
border-bottom-right-radius: 50%; // 边框圆角 
}
.sk-btn-0, .sk-btn-2{
opacity: 0.6; // 透明度 
background-color: $subBlack; // 背景颜色 
color: $white; // 字体颜色 
}
.sk-btn-1{
background-color: $yellow; // 背景颜色 
color: $orange; // 字体颜色 
}}

index.js：

import api from'../../utils/api.js';
import constant from'../../utils/const.js';
import util from"../../utils/util.js";
Page({
data:{
isLogin:false,// 是否已登录
currentNotice:null,// 当前通知对象
PROJECT_TITLE: constant.PROJECT_TITLE,// 项目主标题
PROJECT_SUB_TITLE: constant.PROJECT_SUB_TITLE,// 项目副标题
MINIO_BANNER: constant.MINIO_BANNER,// 横幅轮播图片 MINIO 地址
banners:null,// 横幅列表对象
currentArticleIdx:1,// 当前公告的 value 值，用于切换公告
articles:null,// 公告列表对象
seckills:null,// 秒杀活动列表对象
activeSeckillIdx:0,// 当前秒杀活动的 value 值，用于切换秒杀活动
MINIO: constant.MINIO_COURSE_COVER// 课程封面图片 MINIO 地址
},
// 跳入登录页面
toLogin:function(){ util.page('/pages/index/login-by-account/login-by-account',true);},
// 查询 1 条通知记录
topNotice1:function(){
let that =this; 
api.get('notice','/top/1').then(res=> that.setData({currentNotice: res[0]['content']})).catch(err=> console.error(err));
},
// 查询 5 条轮播图记录
topBanner5:function(){
let that =this; 
api.get('banner','/top/5').then(res=> that.setData({banners: res})).catch(err=> console.error(err));
},
// 查询 5 条通知记录
topArticle5:function(){
let that =this; 
api.get('article','/top/5').then(res=> that.setData({articles: res})).catch(err=> console.error(err));
},
// 查询今日的秒杀活动
todaySeckill:function(){
let that =this; 
api.get('seckill','/today').then(res=> that.setData({seckills: res})).catch(err=> console.error(err));
},
// 切换公告
changeArticle:function(ev){
this.setData({'currentArticleIdx': ev.detail});
},
// 切换秒杀活动
changeSeckill:function(ev){
this.setData({'activeSeckillIdx': ev.detail});
},
// 加载函数
onLoad:function(){
this.setData({isLogin:!wx.getStorageSync('token')});
this.topNotice1();
this.topBanner5();
this.topArticle5();
this.todaySeckill();
this.getTabBar().setData({"activeTab":0});
},
});

E02. 用户登录

1. 账号登录

账号登录页面用于通过账号和密码进行系统登录，登录成功在前端保存用户信息和 Token 令牌，并会跳回首页。

页面要素：位置自上而下：

开发账号登录页面：

login-by-account.json：

{"usingComponents":{"van-field":"@vant/weapp/field/index","van-button":"@vant/weapp/button/index","van-row":"@vant/weapp/row/index","van-col":"@vant/weapp/col/index"}}

login-by-account.wxml：

<view class="login-by-account-board"><van-field label="登录账号" model:value="{{username}}" custom-class="field" right-icon="user-o" border="{{false}}" clearable="{{true}}" placeholder="请输入账号"/><van-field label="登录密码" model:value="{{password}}" custom-class="field" type="password" right-icon="eye-o" border="{{false}}" clearable="{{true}}" placeholder="请输入密码"/><van-button custom-class="login-btn" type="info" block bind:tap="loginByAccount">登录</van-button><van-row custom-class="link"><van-col span="8" bind:tap="toRegister">注册新账号</van-col><van-col span="8" bind:tap="toLoginByPhone">手机号码登录</van-col><van-col span="8" bind:tap="toIndex">返回首页</van-col></van-row></view>

login-by-account.scss：

@import"app";
.login-by-account-board{
padding: 20rpx;// 内边距 
.field{
margin: 20rpx auto; // 外边距 
border-radius: 15rpx; // 圆角 
background-color: $bg-gray; // 背景颜色 
border: 3rpx solid $black; // 边框 
color: $white; // 字体颜色 
text-align: left; // 左对齐 
}
.van-field__label{
color: $yellow; // 字体颜色 
}
.van-field__control{
color: $white; // 字体颜色 
}
.login-btn{
font-size: large; // 字体大小 
border-radius: 15rpx; // 圆角 
}
.link{
font-size: 30rpx; // 字体大小 
margin: 20rpx; // 外边距 
color: $gray; // 字体颜色 
}}

login-by-account.js：

import util from"../../../utils/util.js";
import api from"../../../utils/api.js";
import constant from"../../../utils/const.js";
Page({
data:{
username:'admin',// 登录账号
password:'123456789',// 登录密码
},
// 通过账号密码登录系统
loginByAccount:function(){
let username =this.data.username;
let password =this.data.password;
// 空值校验
if(util.hasEmpty(username, password)){ util.tip('账号或密码不能为空');return;}
// 校验登录账号规则
if(!constant.RULE.USERNAME[0]['pattern'].test(username)){ util.tip(constant.RULE.USERNAME[0]['message']);return;}
// 校验登录密码规则
if(!constant.RULE.PASSWORD[0]['pattern'].test(password)){ util.tip(constant.RULE.PASSWORD[0]['message']);return;}
// 发送登录请求
api.post('user','/loginByAccount',{username, password}).then(res=>{
// 将用户信息以及对应的 Token 令牌存储起来 
wx.setStorageSync('token', res['token']); 
wx.setStorageSync('user', res['user']); 
util.success('登录成功');// 0.5 秒后切换回'首页'选项卡
setTimeout(()=> util.tab('/pages/index/index'),500);
}).catch(err=> console.error(err));
},
// 跳转到注册页面
toRegister:function(){ util.page('/pages/index/register/register',false);},
// 跳转到手机登录页面
toLoginByPhone:function(){ util.page('/pages/index/login-by-phone/login-by-phone',false);},
// 返回首页
toIndex:function(){ util.tab('/pages/index/index');},
// 加载函数
onLoad:function(options){ 
wx.removeStorageSync('token'); 
wx.removeStorageSync('user');
}});

2. 手机登录

手机登录页面用于通过手机号码和验证码进行系统登录：用户输入手机号码，然后点击'发送验证码'按钮，获取到一个验证码（测试环境下直接返回给前端并自动填充，生产环境下给对应手机号码发送短信）。用户输入验证码，点击登录按钮，向后台请求登录，提交手机号码和验证码。登录成功后在前端保存用户信息和 Token 令牌，并跳回首页。

页面要素：位置自上而下：

开发手机登录页面：

login-by-phone.json：

{"usingComponents":{"van-field":"@vant/weapp/field/index","van-button":"@vant/weapp/button/index","van-row":"@vant/weapp/row/index","van-col":"@vant/weapp/col/index"}}

login-by-phone.wxml：

<view class="login-by-phone-board"><van-field label="手机号码" model:value="{{phone}}" custom-class="field" right-icon="user-o" border="{{false}}" clearable="{{true}}" placeholder="请输入手机号码"/><van-field label="短信验证码" model:value="{{vcode}}" custom-class="field" center use-button-slot border="{{false}}" clearable="{{true}}" placeholder="请输入短信验证码"><van-button bind:tap="getVcode" slot="button" size="small" type="primary">发送验证码</van-button></van-field><van-button custom-class="login-btn" bind:tap="loginByPhone" type="info" block>登录</van-button><van-row custom-class="link"><van-col span="8" bind:tap="toRegister">注册新账号</van-col><van-col span="8" bind:tap="toLoginByAccount">账号密码登录</van-col><van-col span="8" bind:tap="toIndex">返回首页</van-col></van-row></view>

login-by-phone.scss：

@import"app";
.login-by-phone-board{
padding: 20rpx;// 内边距 
.field{
margin: 20rpx auto; // 外边距 
border-radius: 15rpx; // 圆角 
background-color: $bg-gray; // 背景颜色 
border: 3rpx solid $black; // 边框 
color: $white; // 字体颜色 
text-align: left; // 左对齐 
}
.van-field__label{
color: $yellow; // 字体颜色 
}
.van-field__control{
color: $white; // 字体颜色 
}
.login-btn{
font-size: large; // 字体大小 
border-radius: 15rpx; // 圆角 
}
.link{
font-size: 30rpx; // 字体大小 
margin: 20rpx; // 外边距 
color: $gray; // 字体颜色 
}}

login-by-phone.js：

import api from"../../../utils/api.js";
import util from"../../../utils/util.js";
import constant from"../../../utils/const.js";
Page({
data:{
phone:'17766541438',// 手机号码
vcode:'',// 短信验证码
},
// 获取短信验证码
getVcode:function(){
let that =this;
let phone =this.data.phone;
// 空值校验
if(util.isEmpty(phone)){ util.tip('手机号码不能为空');return;}
// 校验手机号码规则
if(!constant.RULE.PHONE[0]['pattern'].test(phone)){ util.tip(constant.RULE.PHONE[0]['message']);return;}
// 发送请求：根据手机号码获取短信验证码
api.get('user','/getVcode/'+ phone).then(res=>{
util.success('验证码获取成功'); 
that.setData({vcode: res});
}).catch(err=> console.error(err));
},
// 根据手机号码和验证码登录系统
loginByPhone:function(){
let phone =this.data.phone;
let vcode =this.data.vcode;
// 空值校验
if(util.hasEmpty(phone, vcode)){ util.tip('手机号码或验证码不能为空');return;}
// 校验手机号码规则
if(!constant.RULE.PHONE[0]['pattern'].test(phone)){ util.tip(constant.RULE.PHONE[0]['message']);return;}
// 发送登录请求
api.post('user','/loginByPhone',{phone, vcode}).then(res=>{
// 将用户信息以及对应的 Token 令牌存储起来 
wx.setStorageSync('token', res['token']); 
wx.setStorageSync('user', res['user']); 
util.success('登录成功');// 0.5 秒后切换到'首页'选项卡
setTimeout(()=> util.tab('/pages/index/index'),500);
}).catch(err=> console.error(err));
},
// 跳转到注册页面
toRegister:function(){ util.page('/pages/index/register/register',false);},
// 跳转到账号登录页面
toLoginByAccount:function(){ util.page('/pages/index/login-by-account/login-by-account',false);},
// 返回首页
toIndex:function(){ util.tab('/pages/index/index');},
// 加载函数
onLoad:function(options){ 
wx.removeStorageSync('token'); 
wx.removeStorageSync('user');
}});

E03. 用户注册

注册页面用于注册新账号，注册成功后会跳入账号密码登录页面。

页面要素：位置自上而下：

开发注册页面：

register.json：

{"usingComponents":{"van-field":"@vant/weapp/field/index","van-button":"@vant/weapp/button/index","van-row":"@vant/weapp/row/index","van-col":"@vant/weapp/col/index"}}

register.wxml：

<view class="register-board"><van-field label="登录账号" model:value="{{ username }}" custom-class="field" right-icon="user-o" placeholder="请输入登录账号" clearable="{{true}}" border="{{ false }}"/><van-field label="登录密码" model:value="{{ password }}" type="password" custom-class="field" right-icon="eye-o" placeholder="请输入登录密码" clearable="{{true}}" border="{{ false }}"/><van-field label="确认密码" model:value="{{ rePassword }}" type="password" custom-class="field" right-icon="eye-o" placeholder="请确认登录密码" clearable="{{true}}" border="{{ false }}"/><van-field label="真实姓名" model:value="{{ realname }}" custom-class="field" right-icon="contact-o" placeholder="请输入真实姓名" clearable="{{true}}" border="{{ false }}"/><van-field label="手机号码" model:value="{{ phone }}" custom-class="field" right-icon="phone-o" placeholder="请输入手机号码" clearable="{{true}}" border="{{ false }}"/><van-field label="身份证号" model:value="{{ idcard }}" custom-class="field" right-icon="user-circle-o" placeholder="请输入身份证号" clearable="{{true}}" border="{{ false }}"/><van-field label="电子邮箱" model:value="{{ email }}" custom-class="field" right-icon="envelop-o" placeholder="请输入电子邮箱" clearable="{{true}}" border="{{ false }}"/><van-button custom-class="register-btn" bind:tap="register" type="info" block>注册</van-button><van-row custom-class="link"><van-col span="8" bind:tap="toLoginByAccount">账号密码登录</van-col><van-col span="8" bind:tap="toLoginByPhone">手机号码登录</van-col><van-col span="8" bind:tap="toIndex">返回首页</van-col></van-row></view>

register.scss：

@import"app";
.register-board{
padding: 20rpx;// 内边距 
.field{
margin: 20rpx auto; // 外边距 
border-radius: 15rpx; // 圆角 
background-color: $bg-gray; // 背景颜色 
border: 3rpx solid $black; // 边框 
color: $white; // 字体颜色 
text-align: left; // 左对齐 
}
.van-field__label{
color: $yellow; // 字体颜色 
}
.van-field__control{
color: $white; // 字体颜色 
}
.register-btn{
font-size: large; // 字体大小 
border-radius: 15rpx; // 圆角 
}
.link{
font-size: 30rpx; // 字体大小 
margin: 20rpx; // 外边距 
color: $gray; // 字体颜色 
}}

register.js：

import util from"../../../utils/util.js";
import api from"../../../utils/api.js";
import constant from"../../../utils/const.js";
Page({
data:{
username:'',
password:'',
rePassword:'',
realname:'',
phone:'',
idcard:'',
email:'',
},
// 注册账号
register:function(){
let username =this.data.username;
let password =this.data.password;
let rePassword =this.data.rePassword;
let realname =this.data.realname;
let phone =this.data.phone;
let idcard =this.data.idcard;
let email =this.data.email;
// 检验两次密码是否一致
if(password !== rePassword){ util.tip('两次密码不一致');return;}
// 校验登录账号规则
if(!constant.RULE.USERNAME[0]['pattern'].test(username)){ util.tip(constant.RULE.USERNAME[0]['message']);return;}
// 校验登录密码规则
if(!constant.RULE.PASSWORD[0]['pattern'].test(password)){ util.tip(constant.RULE.PASSWORD[0]['message']);return;}
// 校验真实姓名规则
if(!constant.RULE.REALNAME[0]['pattern'].test(realname)){ util.tip(constant.RULE.REALNAME[0]['message']);return;}
// 校验电话号码规则
if(!constant.RULE.PHONE[0]['pattern'].test(phone)){ util.tip(constant.RULE.PHONE[0]['message']);return;}
// 校验身份证号规则
if(!constant.RULE.IDCARD[0]['pattern'].test(idcard)){ util.tip(constant.RULE.IDCARD[0]['message']);return;}
// 校验电子邮箱规则
if(!constant.RULE.EMAIL[0]['pattern'].test(email)){ util.tip(constant.RULE.EMAIL[0]['message']);return;}
// 发送登录请求
let param ={username, password, realname, phone, idcard, email}; 
api.post('user','/insert', param).then(res=>{
util.success('注册成功');// 0.5 秒后切换到登录页面
setTimeout(()=>{ util.page('/pages/index/login-by-account/login-by-account',false);},500);
}).catch(err=> console.error(err));
},
// 跳转到账号登录页面
toLoginByAccount:function(){ util.page('/pages/index/login-by-account/login-by-account',false);},
// 跳转到手机登录页面
toLoginByPhone:function(){ util.page('/pages/index/login-by-phone/login-by-phone',false);},
// 返回首页
toIndex:function(){ util.tab('/pages/index/index');},
// 加载函数
onLoad:function(options){
}});

S03. 导航栏 - 课程

本模块包含课程列表页面和课程详情页面，这两个页面均不需要用户登录即可访问。

课程列表：课程列表是导航页面，当用户点击底部导航栏'课程'按钮时进行分页展示全部课程列表。

课程详情：当点击课程列表中的某个具体课程封面时，跳转到对应该课程的详情页面。

E01. 课程列表

当用户点击底部选项卡'课程'的时候，跳转到课程列表页面，页面加载后，向后台请求课程列表（ElasticSearch 数据库）并渲染到页面，出于性能考虑，页面默认显示 12 条课程数据，当滚动条触底时，进行下一次分页查询（再查 12 条）。

页面要素：位置自上而下：

开发课程列表相关页面：

course.json：

{"usingComponents":{"van-sticky":"@vant/weapp/sticky/index","van-search":"@vant/weapp/search/index","van-divider":"@vant/weapp/divider/index","van-grid":"@vant/weapp/grid/index","van-grid-item":"@vant/weapp/grid-item/index","van-image":"@vant/weapp/image/index","van-icon":"@vant/weapp/icon/index","van-rate":"@vant/weapp/rate/index"}}

course.wxml：

<van-sticky><van-search class="search-ipt" value="{{keyword}}" bind:search="searchByKeyword" bind:clear="cancelSearch" background="#252a34" shape="round" clear-trigger="always" input-align="center" placeholder="请输入课程标题进行搜索"/></van-sticky><scroll-view class="course-list" bindscrolltolower="onListEnd" scroll-y="true"><van-divider contentPosition="center" dashed>课程列表</van-divider><van-grid class="course-list-grid" column-num="2" gutter="20rpx"><van-grid-item content-class="course-item" wx:for="{{courses}}" wx:key="id" data-course-id="{{item['id']}}" bind:tap="showDetail" use-slot><van-image src="{{MINIO_COURSE_COVER}}/{{item['cover']}}" width="300rpx" height="200rpx"/><view class="title">{{ item['title'] }}</view><view class="info"><view><van-icon name="user-o"/> 作者：{{item['author']}}</view><view><van-icon name="gold-coin-o"/> 价格：{{item['price']} }元 </view></view></van-grid-item></van-grid><van-divider contentPosition="center" dashed>没有更多课程了</van-divider></scroll-view><view class="baseline"><van-divider contentPosition="center" dashed>底线</van-divider></view>

course.scss：

@import"app";
.course-list{
height: 90vh;// 高度 
.course-item{
background-color: $black;// 背景色 
.title{
font-weight: bold; // 加粗 
white-space: nowrap; // 不换行 
overflow: hidden; // 超出隐藏 
text-overflow: ellipsis; // 超出部分显示... 
color: $yellow; // 字体颜色 
font-size: 30rpx; // 字体大小 
margin-top: 10rpx; // 上边距 
margin-left: 20rpx; // 左边距 
margin-bottom: 20rpx; // 下边距 
text-align: left; // 文字左对齐 
width: 100%; // 宽度 
}
.info{
font-size: small; // 字体大小 
text-align: left; // 文字左对齐 
line-height: 40rpx; // 行高 
width: 100%; // 宽度 
margin-left: 20rpx; // 左边距 
}}}

course.js：

import util from'../../utils/util.js';
import api from"../../utils/api.js";
import constant from"../../utils/const.js";
Page({
data:{
MINIO_COURSE_COVER: constant.MINIO_COURSE_COVER,// 课程封面路径
pageInfo:{pageNum:1,pageSize:12,totalPage:0,totalRow:0},// 分页信息
courses:null,// 课程列表对象
keyword:'',// 课程标题
},
// 分页搜索课程记录
page:function(){
let that =this;
let keyword =this.data.keyword;
let pageNum =this.data.pageInfo['pageNum'];
let pageSize =this.data.pageInfo['pageSize'];
if(util.isNull(pageNum)) pageNum =1;
if(util.isNull(pageSize)) pageSize =5;
// 搜索关键字不能超过 42 个字
if(keyword.length >42){ util.error('搜索关键字过长');return;}
// 请求数据
let params ={pageNum, pageSize,keyword: keyword.trim()}; 
api.get('course','/search', params).then(res=>{
that.setData({'courses': pageNum ===1? res['records']: that.data.courses.concat(res['records']),'pageInfo.pageNum': res['pageNum'],'pageInfo.pageSize': res['pageSize'],'pageInfo.totalPage': res['totalPage'],'pageInfo.totalRow': res['totalRow'],});
}).catch(err=> console.error(err));
},
// 列表触底时
onListEnd:function(){
let that =this;
let pageNum = that.data.pageInfo['pageNum'];
let totalPage = that.data.pageInfo['totalPage'];
if(pageNum < totalPage){
// 查询下一页数据
this.setData({'pageInfo.pageNum': pageNum +1});
this.page();
},
// 按课程标题搜索课程
searchByKeyword:function(ev){
this.setData({'keyword': ev.detail,'pageInfo.pageNum':1,});
this.page();
},
// 取消搜索
cancelSearch:function(ev){
this.setData({'keyword':'','pageInfo.pageNum':1,});
this.page();
},
// 查看课程详情
showDetail:function(ev){
let courseId = ev.currentTarget.dataset['courseId']; 
util.page('/pages/course/detail/detail?courseId='+ courseId,false);
},
// 加载函数
onLoad:function(options){
this.page();
this.getTabBar().setData({"activeTab":1});
}});

E02. 课程详情

当用户在课程列表界面点击某个课程封面时，会跳转到对应的课程详情页面。

页面要素：位置自上而下：

开发课程详情相关页面：

detail.json：

{"usingComponents":{"van-sticky":"@vant/weapp/sticky/index","van-divider":"@vant/weapp/divider/index","van-cell-group":"@vant/weapp/cell-group/index","van-cell":"@vant/weapp/cell/index","van-tabs":"@vant/weapp/tabs/index","van-tab":"@vant/weapp/tab/index","van-rate":"@vant/weapp/rate/index","van-image":"@vant/weapp/image/index","van-goods-action":"@vant/weapp/goods-action/index","van-goods-action-icon":"@vant/weapp/goods-action-icon/index","van-goods-action-button":"@vant/weapp/goods-action-button/index","van-empty":"@vant/weapp/empty/index"}}

detail.wxml：

<van-sticky class="free-video"><video wx:if="{{videoSrc && videoPoster}}" src="{{videoSrc}}" title="{{videoTitle}}" poster="{{videoPoster}}" danmu-list="{{welcomeBarrage}}" controls show-mute-btn enable-danmudanmu-btn/><van-empty class="free-video-empty" wx:else image="error" description="暂无免费视频"/></van-sticky><view class="course-info" wx:if="{{course}}"><van-divider contentPosition="center" dashed>课程详情</van-divider><van-cell-group inset><van-cell title="课程类别" value="{{course['category']['title']}}" icon="flag-o"/><van-cell title="课程标题" value="{{course['title']}}" icon="notes-o"/><van-cell title="课程作者" value="{{course['author']}}" icon="user-o"/><van-cell title="创建日期" value="{{course['created']}}" icon="clock-o"/><van-cell title="更新日期" value="{{course['updated']}}" icon="clock-o"/><van-cell title="课程价格" value="{{course['price'] + ' 元'}}" icon="cash-o"/><van-cell title="课程简介" value="{{course['info']}}" icon="font-o"/></van-cell-group></view><view class="operation-tabs"><van-tabs active="{{activeTab}}" color="orange" type="card" animated tab-class="tab"><van-tab title="课程摘要" name="摘要"><view class="summary" wx:if="{{course['summary']}}"><van-image src="{{MINIO_COURSE_SUMMARY}}{{course['summary']}}" width="100%" fit="widthFix"/></view><van-empty class="summary-empty" wx:else image="error" description="暂无摘要图片"/><view class="baseline"><van-divider contentPosition="center" dashed>底线</van-divider></view></van-tab><van-tab title="课程目录" name="目录"><view class="catalog" wx:if="{{course['seasons'].length > 0}}"><view wx:for="{{course['seasons']}}" wx:key="id" wx:for-item="season" wx:for-index="si"><van-cell-group title="{{'第' + (si + 1) + '季：' + season['title']}}"><view wx:if="{{season['episodes'].length > 0}}"><van-cell wx:for="{{season['episodes']}}" wx:key="id" wx:for-item="episode" wx:for-index="ei" title="{{'第' + (ei + 1) + '集：' + episode['title']}}" use-label-slot><view slot="label" class="van-multi-ellipsis--l2">{{episode['info']}</view></van-cell></view></van-cell-group></view><view class="baseline"><van-divider contentPosition="center" dashed>底线</van-divider></view></view><van-empty class="catalog-empty" wx:else image="error" description="该课程暂无季次信息，请联系运维人员。"/></van-tab></van-tabs></view><view class="detail-foot"><van-goods-action><van-goods-action-icon text="客服" bind:click="chatMe" icon="chat-o"/><van-goods-action-icon text="购物车" bind:click="toCart" icon="cart-o"/><van-goods-action-button text="加入购物车" bind:click="addToCart" type="warning"/><van-goods-action-button text="立即购买" bind:click="pay"/></van-goods-action></view>

detail.scss：

@import"app";
.free-video{
video{
width: 98%; // 宽度 
out-line: 10rpx solid $black; // 轮廓 
box-sizing: border-box; // 边框 
}}
.course-info{
.van-cell{
background-color: $bg-gray; // 背景色 
color: $yellow;// 文字颜色 
.van-cell__title{
text-align: left; // 文字对齐方式 
}
.van-cell__value{
color: $white; // 文字颜色 
}}}
.operation-tabs{
height: 80vh; // 高度 
margin: 20rpx 30rpx;// 外边距 
.van-tab{
color: $subBlack !important; // 文字颜色 
font-weight: bold !important; // 字体粗细 
}
.summary{
padding-top: 20rpx; // 内边距 
}
.catalog{
padding-top: 20rpx; // 内边距 
padding-bottom: 150rpx;// 内边距 
.van-cell-group__title{
color: $black; // 文字颜色 
font-weight: bold; // 字体粗细 
background: $yellow; // 背景色 
padding-bottom: 15px; // 内边距 
}
.van-cell{
color: $white; // 文字颜色 
background: $black; // 背景色 
text-align: left !important; // 文字对齐方式 
}}}

detail.js：

import api from'../../../utils/api.js';
import util from'../../../utils/util.js';
import constant from"../../../utils/const.js";
Page({
data:{
MINIO_COURSE_SUMMARY: constant.MINIO_COURSE_SUMMARY,// 视频封面 MINIO 地址
course:null,// 课程对象
videoSrc:null,// 免费视频地址
videoPoster:null,// 免费视频封面
videoTitle:null,// 免费视频标题
welcomeBarrage:[{text:'一大波弹幕即将来袭',color:'#ff0000',time:1}],// 欢迎弹幕
activeTab:'摘要'// 当前选中的 tab 的 name 值
},
// 查询视频详情
getCourseInfo:function(courseId){
let that =this;
let param ='/select/'+ courseId; 
api.get('course', param).then(res=>{
res['created']= util.dateFormat(res['created']); 
res['updated']= util.dateFormat(res['updated']);
if(res['seasons'].length >0&& res['seasons'][0]['episodes'].length >0){
let firstEpisode = res['seasons'][0]['episodes'][0]; 
that.setData({'videoSrc': constant.MINIO_EPISODE_VIDEO+ firstEpisode['video'],'videoPoster': constant.MINIO_EPISODE_VIDEO_COVER+ firstEpisode['cover'],'videoTitle': firstEpisode['title'],});
}
that.setData({'course': res});
}).catch(err=> console.error(err));
},
// 跳转到购物车页面
toCart:function(){
if(util.isLogin()){ util.tab('/pages/cart/cart');
}},
// 添加购物车
addToCart:function(){
if(util.isLogin()){
let that =this;
let params ={'fkUserId': wx.getStorageSync('user').id,"fkCourseId": that.data.course['id'],}; 
api.post('cart','/insert', params).then(res=>{
util.error('加购成功');
setTimeout(()=>{ util.tab('/pages/cart/cart',true);},500);
}).catch(err=> console.error(err))
}},
// 客服
chatMe:function(){ util.page('/pages/course/detail/chat/chat')},
// 立即购买
pay:function(){
if(util.isLogin()){ util.error('功能暂未开放');
}},
// 加载函数
onLoad:function(ev){// 查询视频详情：获取路径传递过来的值
this.getCourseInfo(ev['courseId']);
}});

1. 智能客服

当用户在课程详情左下角点击客服图标时跳转到本页面。

页面要素：位置自上而下：

开发智能客服页面：

chat.json：

{"usingComponents":{"van-field":"@vant/weapp/field/index","van-button":"@vant/weapp/button/index","van-steps":"@vant/weapp/steps/index"}}

chat.wxml：

<scroll-view class="chat-board" scroll-top="{{scrollTop}}" scroll-y="{{true}}"><van-steps custom-class="chat-dialog" id="chatDialog" steps="{{ steps }}" active="{{ active }}" direction="vertical" active-color="#f9ed69" desc-class="desc"/></scroll-view><view class="tips">{{isReplying ? '客服回复中...' : '回复完毕'}}</view><van-field custom-class="chat-textarea" value="{{ message }}" bindinput="changeMessage" type="textarea" maxlength="{{500}}" show-word-limit="{{true}}" autosize border="{{false}}" placeholder="请输入你的问题"/><van-button custom-class="submit-btn" bind:tap="sendMessage" type="info" block>提问</van-button>

chat.scss：

@import"app";
.chat-board{
height: 1000rpx; // 高度 
text-align: left; // 文本对齐方式 
margin: 20rpx auto 50rpx;// 外边距 
.chat-dialog{
background-color: $bg-gray;// 背景色 
.van-step:nth-child(even){
text-align: right; // 文本对齐方式 
}
.van-step--finish{
color: $white; // 字体颜色 
}
.desc{
margin-top: 20rpx; // 上边距 
font-size: larger; // 字体大小 
font-weight: bolder; // 字体粗细 
line-height: 1.5; // 行高 
}}}
.tips{
font-size: smaller; // 字体大小 
text-align: right; // 文本对齐方式 
margin-right: 30rpx; // 右边距 
color: $gray; // 字体颜色 
}
.chat-textarea{
border: 3rpx solid $black; // 边框 
width: auto !important; // 宽度 
margin: 20rpx; // 外边距
border-radius: 15rpx; // 圆角
background-color: $bg-gray !important; // 背景色 
}
.van-field__control{
color: $white !important; // 字体颜色 
height: 100rpx !important; // 高度 
}
.submit-btn{
width: auto !important; // 宽度 
margin: 20rpx; // 外边距
font-size: large; // 字体大小 
border-radius: 15rpx; // 圆角 
}

chat.js：

import util from"../../../../utils/util.js";
Page({
data:{
message:'一首李白的诗',// 用户输入的问题
active:0,// 当前激活的步骤
steps:[{text:`${util.dateFormat(new Date())}`,desc:'你好，有什么可以帮助您？'}],
sseServerUrl:'http://localhost:24107/api/v1/base/chat',// SSE 服务端地址
isReplying:false,// AI 是否正在回复中
scrollTop:0// 滚动条位置
},
// 当内容改变时触发
changeMessage:function(ev){
this.setData({'message': ev.detail});
},
// 发送消息
sendMessage:function(){
let that =this;
// 如果 AI 正在回复中或用户输入的内容为空，均不处理
if(this.data.isReplying || util.isEmpty(this.data.message))return;
// 加入用户输入的信息
this.data.steps.push({text:`${util.dateFormat(new Date())}`,desc:this.data.message });
// 加入 AI 回复的信息
this.data.steps.push({text:`${util.dateFormat(new Date())}`,desc:'waiting...'});
// 更新聊天框
this.setData({steps:this.data.steps,active:this.data.active +2,isReplying:true});
// 发送请求并接收分块响应的消息
wx.request({
url:this.data.sseServerUrl +'?msg='+this.data.message,
enableChunked:true// 启用分块传输
}).onChunkReceived((res)=>{
// 获取当前 AI 回复的信息
let desc = that.data.steps[that.data.active]['desc'];
// 如果当前 AI 回复的信息是"waiting..."，则移除它
if(desc ==='waiting...'){ that.data.steps[that.data.active]['desc']= desc.replaceAll('waiting...','');}
// AI 回复的信息类型固定为 arrayBuffer，需要开发者自己进行转换为字符串
let str =new TextDecoder('utf-8').decode(res.data,{stream:true});
// 移除"data:" str = str.replaceAll('data:','').trim();
// 如果不是"[over]"，则拼接 AI 回复的信息
if(!str.includes('[over]')){ that.data.steps[that.data.active]['desc']+= str;// 更新 that.setData({steps: that.data.steps});}
// 否则，AI 回复完毕
else{// 更新 that.setData({isReplying:false});}
// 滚动到底部
const query = wx.createSelectorQuery().in(this); 
query.select('#chatDialog').boundingClientRect((rect)=>{
if(rect)this.setData({scrollTop: rect.height});
}).exec();
});// 清空用户输入的内容 that.setData({'message':''});
},
onLoad:function(options){
}});