zhangjing/sgy-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

镜子功能发现功能

Browse Source
This commit is contained in:
张冬雪
2023-11-24 16:53:50 +08:00
parent 9051ddace1
commit 8f754aea83
35 changed files with 1796 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

401
pages/beautify2/coach.js
View File

@@ -1,66 +1,379 @@
// pages/beautify2/coach.js
// 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
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
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')
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
// 视频更新事件
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)
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
// 视频播放结束事件
videoEnded() {
console.log('视频播放结束事件')
// 完成弹窗 重置基础数据
this.setData({
selectVideoItem: {
id: 0
},
seeAllVideo: true,
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
// 点击全部视频
allVideoTab() {
this.setData({
seeAllVideo: !this.data.seeAllVideo
})
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
// 点击暂停视频
videoPauseTab() {
console.log('暂停')
let selectVideoItem = this.data.selectVideoItem
selectVideoItem.playedState = false
this.setData({
selectVideoItem: selectVideoItem
})
this.videoContext.pause()
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
// 点击播放视频
videoPlayTab() {
console.log('播放')
let selectVideoItem = this.data.selectVideoItem
selectVideoItem.playedState = true
selectVideoItem.muted = false
this.setData({
selectVideoItem: selectVideoItem
})
this.videoContext.play()
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
// 轮播图切换
swiperChange(e) {
console.log(e.detail)
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
// 选择视频教程-点击
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 => {})
},
})