379 lines
14 KiB
JavaScript
379 lines
14 KiB
JavaScript
// pages/beautify/coach.wxss.js
|
||
Page({
|
||
data: {
|
||
videos: [{
|
||
video_id: 1,
|
||
cover: 'https://cdn.shuiganying.com/images/2023/11/14/236a3949c2c0794de850617d4204a159.png',
|
||
url: 'https://sns-video-bd.xhscdn.com/stream/110/258/01e524b445288836010370038b176a34a1_258.mp4',
|
||
steps: [{
|
||
title: '第一步：在右脸颊处缓慢向上打圈，反复两次',
|
||
startTime: 0, // 开始时间
|
||
startCountDown: 3, // 开始倒计时（暂时先可不给）
|
||
endTime: 7, // 自定义第一段截止到
|
||
},
|
||
{
|
||
title: '第二步：在右脸颊处缓慢向上打圈，反复3次',
|
||
startTime: 8,
|
||
startCountDown: 11, // 开始倒计时
|
||
endTime: 15, // 自定义 20s
|
||
},
|
||
{
|
||
title: '第三步：在右脸颊处缓慢向上打圈，反复4次',
|
||
startTime: 16,
|
||
startCountDown: 18, // 开始倒计时
|
||
endTime: 20, // 自定义 20s
|
||
}
|
||
],
|
||
},
|
||
{
|
||
id: 2,
|
||
cover: 'https://cdn.shuiganying.com/images/2023/11/14/0835381c22b00f574afb34d319cce442.png',
|
||
url: 'https://sns-video-bd.xhscdn.com/stream/110/258/01e524b445288836010370038b176a34a1_258.mp4',
|
||
steps: [{
|
||
title: '第一步：在右脸颊处缓慢向上打圈，反复两次',
|
||
startTime: 0,
|
||
startCountDown: 3, // 开始倒计时
|
||
endTime: 7, // 自定义第一段截止到
|
||
},
|
||
{
|
||
title: '第二步：在右脸颊处缓慢向上打圈，反复3次',
|
||
startTime: 8,
|
||
startCountDown: 11, // 开始倒计时
|
||
endTime: 15, // 自定义 20s
|
||
},
|
||
{
|
||
title: '第三步：在右脸颊处缓慢向上打圈，反复4次',
|
||
startTime: 16,
|
||
startCountDown: 18, // 开始倒计时
|
||
endTime: 20, // 自定义 20s
|
||
}
|
||
],
|
||
},
|
||
{
|
||
id: 3,
|
||
cover: 'https://cdn.shuiganying.com/images/2023/11/14/0835381c22b00f574afb34d319cce442.png',
|
||
url: 'https://sns-video-bd.xhscdn.com/stream/110/258/01e524b445288836010370038b176a34a1_258.mp4',
|
||
steps: [{
|
||
title: '第一步：在右脸颊处缓慢向上打圈，反复两次',
|
||
startTime: 0,
|
||
startCountDown: 3, // 开始倒计时
|
||
endTime: 7, // 自定义第一段截止到
|
||
},
|
||
{
|
||
title: '第二步：在右脸颊处缓慢向上打圈，反复3次',
|
||
startTime: 8,
|
||
startCountDown: 11, // 开始倒计时
|
||
endTime: 15, // 自定义 20s
|
||
},
|
||
{
|
||
title: '第三步：在右脸颊处缓慢向上打圈，反复4次',
|
||
startTime: 16,
|
||
startCountDown: 18, // 开始倒计时
|
||
endTime: 20, // 自定义 20s
|
||
}
|
||
],
|
||
},
|
||
{
|
||
id: 4,
|
||
cover: 'https://cdn.shuiganying.com/images/2023/11/14/236a3949c2c0794de850617d4204a159.png',
|
||
url: 'https://sns-video-bd.xhscdn.com/stream/110/258/01e524b445288836010370038b176a34a1_258.mp4',
|
||
steps: [{
|
||
title: '第一步：在右脸颊处缓慢向上打圈，反复两次',
|
||
startTime: 0,
|
||
startCountDown: 3, // 开始倒计时
|
||
endTime: 7, // 自定义第一段截止到
|
||
},
|
||
{
|
||
title: '第二步：在右脸颊处缓慢向上打圈，反复3次',
|
||
startTime: 8,
|
||
startCountDown: 11, // 开始倒计时
|
||
endTime: 15, // 自定义 20s
|
||
},
|
||
{
|
||
title: '第三步：在右脸颊处缓慢向上打圈，反复4次',
|
||
startTime: 16,
|
||
startCountDown: 18, // 开始倒计时
|
||
endTime: 20, // 自定义 20s
|
||
}
|
||
],
|
||
}
|
||
],
|
||
selectVideoItem: {
|
||
video_id: 0, // 默认id是否为0
|
||
playedState: false, // 当前是否是正在播放播放状态
|
||
muted: false, // 静音状态
|
||
stepsCount: 0, // 默认分几个步骤
|
||
currentSteps: 0, // 当前默认是第几步
|
||
currentTime: 0, // 当前总时长
|
||
remainingTime: '00', // 播放时间
|
||
},
|
||
videoContext: null,
|
||
seeAllVideo: true,
|
||
openCamera:false, // 是否打开摄像头
|
||
userData:{},
|
||
// 是否显示摄像头
|
||
isCamera: false
|
||
},
|
||
|
||
onShow(){
|
||
wx.getSetting({
|
||
success:(res)=> {
|
||
let authSetting = res.authSetting
|
||
this.setData({
|
||
isCamera: authSetting['scope.camera'] == true?true:false,
|
||
openCamera:authSetting['scope.camera'] == true?true:false
|
||
})
|
||
}
|
||
})
|
||
this.userInfo()
|
||
this.getVideos()
|
||
},
|
||
onReady(res) {
|
||
this.videoContext = wx.createVideoContext('myVideo')
|
||
},
|
||
|
||
// 视频更新事件
|
||
videoTimeupdated(e) {
|
||
let selectVideoItem = this.data.selectVideoItem
|
||
let currentTimeEnd = selectVideoItem.steps[selectVideoItem.currentSteps].endTime
|
||
let {
|
||
currentTime,duration
|
||
} = e.detail
|
||
if (currentTime > currentTimeEnd && selectVideoItem.currentSteps < selectVideoItem.stepsCount) {
|
||
selectVideoItem.currentSteps++
|
||
this.videoContext.pause()
|
||
// 倒计时且有提醒
|
||
setTimeout(() => {
|
||
this.videoContext.play()
|
||
}, 3000);
|
||
}
|
||
|
||
let remainingTime = parseInt(duration - currentTime) >= 10 ? parseInt(duration - currentTime) : '0' + parseInt(duration - currentTime)
|
||
selectVideoItem.remainingTime = remainingTime
|
||
|
||
this.setData({
|
||
selectVideoItem: selectVideoItem
|
||
})
|
||
console.log('视频更新事件', selectVideoItem.currentSteps)
|
||
},
|
||
|
||
// 视频播放结束事件
|
||
videoEnded() {
|
||
console.log('视频播放结束事件')
|
||
// 完成弹窗 重置基础数据
|
||
|
||
this.setData({
|
||
selectVideoItem: {
|
||
id: 0
|
||
},
|
||
seeAllVideo: true,
|
||
})
|
||
},
|
||
|
||
// 点击全部视频
|
||
allVideoTab() {
|
||
this.setData({
|
||
seeAllVideo: !this.data.seeAllVideo
|
||
})
|
||
},
|
||
|
||
// 点击暂停视频
|
||
videoPauseTab() {
|
||
console.log('暂停')
|
||
let selectVideoItem = this.data.selectVideoItem
|
||
selectVideoItem.playedState = false
|
||
this.setData({
|
||
selectVideoItem: selectVideoItem
|
||
})
|
||
this.videoContext.pause()
|
||
},
|
||
|
||
// 点击播放视频
|
||
videoPlayTab() {
|
||
console.log('播放')
|
||
let selectVideoItem = this.data.selectVideoItem
|
||
selectVideoItem.playedState = true
|
||
selectVideoItem.muted = false
|
||
this.setData({
|
||
selectVideoItem: selectVideoItem
|
||
})
|
||
this.videoContext.play()
|
||
},
|
||
|
||
// 轮播图切换
|
||
swiperChange(e) {
|
||
console.log(e.detail)
|
||
},
|
||
|
||
// 选择视频教程-点击
|
||
selectVideo(e) {
|
||
let item = e.currentTarget.dataset.item
|
||
console.log(this.data.selectVideoItem.video_id, item.video_id)
|
||
if (this.data.selectVideoItem.video_id == item.video_id) return
|
||
|
||
item.playedState = false
|
||
item.stepsCount = item.steps.length
|
||
item.currentSteps = 0
|
||
this.setData({
|
||
selectVideoItem: item,
|
||
seeAllVideo: false,
|
||
})
|
||
// 处理弹窗，且最后在处理视频播放
|
||
setTimeout(() => {
|
||
this.doPlay(0)
|
||
}, 300);
|
||
},
|
||
|
||
// 播放视频
|
||
doPlay(position) {
|
||
console.log(position)
|
||
this.videoContext.seek(position)
|
||
let selectVideoItem = this.data.selectVideoItem
|
||
selectVideoItem.playedState = true
|
||
this.setData({
|
||
selectVideoItem: selectVideoItem
|
||
})
|
||
// 播放视频
|
||
this.videoContext.play()
|
||
},
|
||
|
||
// 静音非经营处理
|
||
mutedTab(e) {
|
||
console.log(e)
|
||
let type = e.target.dataset.type
|
||
console.log(type)
|
||
let selectVideoItem = this.data.selectVideoItem
|
||
if (type == 'open') {
|
||
selectVideoItem.muted = false
|
||
|
||
} else {
|
||
selectVideoItem.muted = true
|
||
}
|
||
this.setData({
|
||
selectVideoItem: selectVideoItem
|
||
})
|
||
},
|
||
|
||
// 上一段，下一段切换
|
||
preTab(e) {
|
||
let type = e.target.dataset.type
|
||
let selectVideoItem = this.data.selectVideoItem
|
||
if (type == 'prev') {
|
||
if (selectVideoItem.currentSteps == 0) {
|
||
wx.showToast({
|
||
title: '已经是第一步',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
|
||
if (selectVideoItem.currentSteps > 0) {
|
||
selectVideoItem.currentSteps--
|
||
let startTime = selectVideoItem.steps[selectVideoItem.currentSteps].startTime
|
||
this.videoContext.pause()
|
||
this.videoContext.seek(startTime)
|
||
this.videoContext.play()
|
||
selectVideoItem.playedState = true
|
||
this.setData({
|
||
selectVideoItem:selectVideoItem
|
||
})
|
||
}
|
||
|
||
} else {
|
||
if (selectVideoItem.currentSteps == 3) {
|
||
wx.showToast({
|
||
title: '已经是最后一步',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
if (selectVideoItem.currentSteps < 3) {
|
||
selectVideoItem.currentSteps++
|
||
let startTime = selectVideoItem.steps[selectVideoItem.currentSteps].startTime
|
||
this.videoContext.pause()
|
||
this.videoContext.seek(startTime)
|
||
this.videoContext.play()
|
||
selectVideoItem.playedState = true
|
||
this.setData({
|
||
selectVideoItem:selectVideoItem
|
||
})
|
||
}
|
||
}
|
||
},
|
||
openMirror(){
|
||
if(this.data.openCamera){
|
||
this.setData({
|
||
openCamera:!this.data.openCamera
|
||
})
|
||
return
|
||
}
|
||
wx.getSetting({
|
||
success:(res)=> {
|
||
let authSetting = res.authSetting
|
||
console.log(res)
|
||
if(!authSetting['scope.camera'] || authSetting['scope.camera'] == undefined){
|
||
wx.showModal({
|
||
title: '温馨提示',
|
||
content: '若不授权使用摄像头，将无法使用镜子功能！',
|
||
cancelText: '不授权',
|
||
cancelColor: '#999',
|
||
confirmText: '授权',
|
||
confirmColor: '#1ba9ba',
|
||
success:(res)=> {
|
||
if (res.confirm) {//允许打开授权页面
|
||
//调起客户端小程序设置界面，返回用户设置的操作结果
|
||
if(authSetting['scope.camera'] == undefined){
|
||
wx.authorize({
|
||
scope: 'scope.camera',
|
||
success: () => {
|
||
// 用户已经同意小程序使用摄像头
|
||
this.setData({
|
||
openCamera:true
|
||
})
|
||
},
|
||
})
|
||
}else{
|
||
wx.openSetting({
|
||
success:(res)=> {
|
||
res.authSetting = {
|
||
"scope.camera": true
|
||
}
|
||
this.setData({
|
||
openCamera:true
|
||
})
|
||
},
|
||
})
|
||
}
|
||
} else if (res.cancel) {//拒绝打开授权页面
|
||
this.setData({
|
||
openCamera:false
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}else{
|
||
this.setData({
|
||
openCamera:!this.data.openCamera
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
userInfo() {
|
||
wx.$api.user.userIndex().then(res => {
|
||
this.setData({
|
||
userData : res.data,
|
||
})
|
||
}).catch(err => {})
|
||
},
|
||
getVideos(){
|
||
wx.$api.user.videos().then(res => {
|
||
console.log(res)
|
||
this.setData({
|
||
videos : res.data.data,
|
||
})
|
||
}).catch(err => {})
|
||
},
|
||
}) |