<button class='sign-button' bindtap='sign'>签到</button>

/* 签到按钮样式 */

.sign-button{

margin-top: 30rpx;

margin-bottom: 30rpx;

display: flex;

width: 240rpx;

height: 240rpx;

line-height: 240rpx;

color: red;

background-color: greenyellow;

border-radius: 50%;

justify-content: center;

font-size: 36px;

}

<text class='sign-record-text'>签到记录</text>

<view class='section'>

<block wx:for="{{mSignRecord}}" wx:key="*unique">

<view wx:if="{{item.signFlag}}" class='sign-record-item'>

<view class='sign-record-item-date'>{{item.date}}</view>

<view class='sign-record-item-count'>第{{item.numberNo}}次课</view>

<icon type='success' class='sign-record-item-icon'></icon>

<text class='sign-record-item-result'>已签到</text>

</view>

<view wx:else class='sign-record-item' style='color:red;'>

<view class='sign-record-item-date'>{{item.date}}</view>

<view class='sign-record-item-count'>第{{item.numberNo}}次课</view>

<icon type='cancel' class='sign-record-item-icon' ></icon>

<text class='sign-record-item-result'>未签到</text>

</view>

</block>

</view>

/* 签到记录列表item样式 */

.sign-record-item{

height: 40px;

line-height: 40px;

border: 1px solid #eee;

white-space: nowrap;

display: flex;

flex-direction: row;

font-size: 15px;

color: green;

align-items: center;

justify-content: center;

}

/* 签到记录列表item日期样式 */

.sign-record-item-date{

padding-left: 50rpx;

}

/* 签到记录列表item次数样式 */

.sign-record-item-count{

padding-left: 100rpx;

}

/* 签到记录列表item是否签到icon样式 */

.sign-record-item-icon{

margin-top: 20px;

padding-left: 100rpx;

}

/* 签到记录列表item签到结果样式 */

.sign-record-item-result{

padding-left: 15rpx;

}

<!--pages/videoPlayer.wxml-->

<view class="section">

<video src="{{videoItemSrc}}" controls ></video>

</view>

<view class='section course-series'>

<text>{{course_series}}</text>

</view>

<view class='bound-section'></view>

<view class='section'>

<block wx:for="{{videoSeries}}" wx:key="*this">

<label class='course-video-item' id="{{index}}" bindtap='videoChooseClick'>

<text>第{{item.episode}}集</text>

<text class='video-item-name'>{{item.name}}</text>

<view class='video-item-duration'>

{{item.duration}}

</view>

<view class='bound-line'></view>

</label>

</block>

</view>

/* pages/vedioPlayer.wxss */

.section video{

width: 100%;

}

.course-series{

height: 100rpx;

padding-left: 20rpx;

border-left-width: 5rpx;

border-left-color: greenyellow;

border-left-style: solid;

line-height: 100rpx;

color: green;

}

.course-video-item{

height: 60rpx;

padding-left: 20rpx;

border-left-width: 5rpx;

border-left-color: blue;

border-left-style: solid;

line-height: 60rpx;

color: rgb(7, 145, 199);

}

.video-item-name{

padding-left: 20rpx;

}

.video-item-duration{

padding-left: 2rpx;

text-align: right;

}

var Bmob = require("../../utils/Bmob-1.6.3.min.js");

data: {

// 轮播图对应视频信息

videoData: [],

// 轮播图对应图片地址

videoImgUrls:[]

}

,

//轮播图点击事件

swiperItemClick:function(e){

var vedioSeries = new Array();

var index = 0;

// 判断是同一个系列课程

for(var i=0;i<this.data.videoData.length;i++){

if (this.data.videoData[i].series == this.data.videoImgUrls[e.currentTarget.id].series){

videoSeries[index++] = this.data.videoData[i];

}

}

// 把vedioSeries传给视频播放页面

wx.navigateTo({

url: '../videoPlayer/videoPlayer?videoSeries=' + JSON.stringify(videoSeries),

});

}

,

//获得轮播的视频信息

getVideoInfo:function(){

wx.showToast({

title: '正在加载...',

icon:'loading',

duration:10000

})

let query = Bmob.Query('course_vedio');

query.find().then(res => {

var imgUrls = new Array();

for (var i = 0; i < res.length; i++) {

if (res[i].thumbnail != null && imgUrls.indexOf(res[i].series) == -1)

imgUrls[i] = res[i];

}

wx.hideToast();

that.setData({ videoData: res, videoImgUrls: imgUrls });

});

}

Bmob.initialize("xxx", "xxx");

// pages/vedioPlayer.js

var Bmob = require("../../utils/Bmob-1.6.3.min.js");

var that;

Page({

/**

* 页面的初始数据

*/

data: {

videoItemSrc:null,

course_series:null,

videoSeries:[]

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

var series = JSON.parse(options.videoSeries);

this.setData({ videoItemSrc: series[0].video.url,course_series: series[0].series,videoSeries : series});

},

videoChooseClick:function(e){

this.setData({ videoItemSrc: this.data.videoSeries[e.target.id].video.url});

}

})