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

164
pages/beautify/coach.js
View File

@@ -2,7 +2,7 @@
Page({
data: {
videos: [{
id: 1,
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: [{
@@ -99,62 +99,73 @@ Page({
}
],
selectVideoItem: {
id: 0, // 默认id是否为0
video_id: 0, // 默认id是否为0
playedState: false, // 当前是否是正在播放播放状态
muted: false, // 静音状态
stepsCount: 0, // 默认分几个步骤
currentSteps: 0, // 当前默认是第几步
currentTime: 0, // 当前总时长
remainingTime: '00', // 播放时间
remainingTimeShow: '00:00' // 播放时间展示
},
videoContext: null,
seeAllVideo: true,
openCamera:false, // 是否打开摄像头
openCamera: false, // 是否打开摄像头
userData: {},
// 是否显示摄像头
isCamera: false
},
onShow(){
onShow() {
wx.getSetting({
success:(res)=> {
success: (res) => {
let authSetting = res.authSetting
this.setData({
isCamera: authSetting['scope.camera'] == true?true:false,
openCamera:authSetting['scope.camera'] == true?true:false
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')
},
bindseekcomplete(e) {
console.log(e)
},
videoPause(e){
console.log('暂停了')
},
// 视频更新事件
videoTimeupdated(e) {
let selectVideoItem = this.data.selectVideoItem
let currentTimeEnd = selectVideoItem.steps[selectVideoItem.currentSteps].endTime
let {
currentTime,duration
currentTime,
duration
} = e.detail
if (currentTime > currentTimeEnd && selectVideoItem.currentSteps < selectVideoItem.stepsCount) {
selectVideoItem.currentSteps++
this.videoContext.pause()
// this.videoContext.pause()
// 倒计时且有提醒
setTimeout(() => {
this.videoContext.play()
}, 3000);
// setTimeout(() => {
// this.videoContext.play()
// }, 3000);
}
let remainingTime = parseInt(duration - currentTime) >= 10 ? parseInt(duration - currentTime) : '0' + parseInt(duration - currentTime)
selectVideoItem.remainingTime = remainingTime
let remainingTime = parseInt(duration - currentTime) >= 10 ? parseInt(duration - currentTime) : '0' + parseInt(duration - currentTime)
let remainingTimeShow = parseInt(duration - currentTime) >= 60 ? '01:' + (parseInt(remainingTime - 60) >= 10 ? parseInt(remainingTime - 60) : '0' + parseInt(remainingTime - 60)) : '00:' + remainingTime
selectVideoItem.remainingTime = remainingTime
selectVideoItem.remainingTimeShow = remainingTimeShow
this.setData({
selectVideoItem: selectVideoItem
})
console.log('视频更新事件', selectVideoItem.currentSteps)
},
// 视频播放结束事件
videoEnded() {
console.log('视频播放结束事件')
@@ -162,17 +173,19 @@ Page({
this.setData({
selectVideoItem: {
id: 0
video_id: 0
},
seeAllVideo: true,
})
},
// 点击全部视频
allVideoTab() {
this.setData({
seeAllVideo: !this.data.seeAllVideo
})
},
// 点击暂停视频
videoPauseTab() {
console.log('暂停')
@@ -183,6 +196,7 @@ Page({
})
this.videoContext.pause()
},
// 点击播放视频
videoPlayTab() {
console.log('播放')
@@ -194,16 +208,17 @@ Page({
})
this.videoContext.play()
},
// 轮播图切换
swiperChange(e) {
console.log(e.detail)
},
// 选择视频教程-点击
selectVideo(e) {
let item = e.currentTarget.dataset.item
console.log(this.data.selectVideoItem.id, item.id)
if (this.data.selectVideoItem.id == item.id) return
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
@@ -217,6 +232,7 @@ Page({
this.doPlay(0)
}, 300);
},
// 播放视频
doPlay(position) {
console.log(position)
@@ -229,6 +245,7 @@ Page({
// 播放视频
this.videoContext.play()
},
// 静音非经营处理
mutedTab(e) {
console.log(e)
@@ -245,10 +262,12 @@ Page({
selectVideoItem: selectVideoItem
})
},
// 上一段，下一段切换
preTab(e) {
let type = e.target.dataset.type
let selectVideoItem = this.data.selectVideoItem
let stepsLength = this.data.selectVideoItem.steps.length
if (type == 'prev') {
if (selectVideoItem.currentSteps == 0) {
wx.showToast({
@@ -267,12 +286,12 @@ Page({
this.videoContext.play()
selectVideoItem.playedState = true
this.setData({
selectVideoItem:selectVideoItem
selectVideoItem: selectVideoItem
})
}
} else {
if (selectVideoItem.currentSteps == 3) {
if (selectVideoItem.currentSteps == stepsLength) {
wx.showToast({
title: '已经是最后一步',
icon: 'none',
@@ -280,7 +299,7 @@ Page({
})
return
}
if (selectVideoItem.currentSteps < 3) {
if (selectVideoItem.currentSteps < stepsLength) {
selectVideoItem.currentSteps++
let startTime = selectVideoItem.steps[selectVideoItem.currentSteps].startTime
this.videoContext.pause()
@@ -288,24 +307,23 @@ Page({
this.videoContext.play()
selectVideoItem.playedState = true
this.setData({
selectVideoItem:selectVideoItem
selectVideoItem: selectVideoItem
})
}
}
},
openMirror(){
if(this.data.openCamera){
openMirror() {
if (this.data.openCamera) {
this.setData({
openCamera:!this.data.openCamera
openCamera: !this.data.openCamera
})
return
}
console.log(11)
wx.getSetting({
success:(res)=> {
success: (res) => {
let authSetting = res.authSetting
console.log(res)
if(!authSetting['scope.camera'] || authSetting['scope.camera'] == undefined){
if (!authSetting['scope.camera'] || authSetting['scope.camera'] == undefined) {
wx.showModal({
title: '温馨提示',
content: '若不授权使用摄像头，将无法使用镜子功能！',
@@ -313,44 +331,66 @@ Page({
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
success: (res) => {
if (res.confirm) { //允许打开授权页面
//调起客户端小程序设置界面，返回用户设置的操作结果
console.log(JSON.stringify(authSetting['scope.camera']), authSetting['scope.camera'] == undefined)
console.log(authSetting['scope.camera'])
if (authSetting['scope.camera'] == undefined) {
wx.authorize({
scope: 'scope.camera',
success: () => {
// 用户已经同意小程序使用摄像头
this.setData({
openCamera: true,
isCamera: true
})
},
fail: (err) => {
console.log('err',err)
}
this.setData({
openCamera:true
})
},
})
} else {
wx.openSetting({
success: (res) => {
console.log('res', res)
res.authSetting = {
"scope.camera": true
}
this.setData({
openCamera: true
})
},
})
}
} else if (res.cancel) { //拒绝打开授权页面
this.setData({
openCamera: false
})
}
} else if (res.cancel) {//拒绝打开授权页面
this.setData({
openCamera:false
})
}
}
})
}else{
} else {
this.setData({
openCamera:!this.data.openCamera
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 => {})
},
})

21
pages/beautify/coach.wxml
View File

@@ -8,32 +8,30 @@
<camera device-position="front" wx:if="{{isCamera}}" flash="off"></camera>
</view>
<view class="coach-avatar">
<image src="https://cdn.shuiganying.com/images/2023/11/14/0835381c22b00f574afb34d319cce442.png" mode="aspectFill"/> 张三一
<image src="{{userData.avatar ? userData.avatar: '/static/imgs/userHead.png'}}" mode="aspectFill"/> {{userData.nickname}}
</view>
<view class="coach-top">
<view class="coach-top-video">
<image class="coach-top-cover" wx:if="{{!selectVideoItem.url}}" src="https://cdn.shuiganying.com/images/2023/11/14/aee3a9b218b03f848e90a2093d2ec815.png" mode="widthFix"/>
<video id="myVideo" controls="{{false}}" muted='{{selectVideoItem.muted}}' bindtimeupdate="videoTimeupdated" bindended='videoEnded' show-center-play-btn="{{false}}" class="coach-top-cover" wx:if="{{selectVideoItem.url}}" src="{{selectVideoItem.url}}"></video>
<view class="coach-top-text" wx:if="{{selectVideoItem.id==0}}">请在下方选择视频</view>
<video id="myVideo" controls="{{false}}" muted='{{selectVideoItem.muted}}' bindtimeupdate='videoTimeupdated' bindended='videoEnded' show-center-play-btn="{{false}}" class="coach-top-cover" wx:if="{{selectVideoItem.url}}" src="{{selectVideoItem.url}}"></video>
<view class="coach-top-text" wx:if="{{selectVideoItem.video_id==0}}">请在下方选择视频</view>
</view>
</view>
<view class="coach-bottom">
<view class="steps-cont" wx:if="{{selectVideoItem.id != 0}}">
<view class="steps-time">00:{{selectVideoItem.remainingTime}}</view>
<view class="steps-cont" wx:if="{{selectVideoItem.video_id != 0}}">
<view class="steps-time">{{selectVideoItem.remainingTimeShow}}</view>
<view class="steps-title">{{selectVideoItem.steps[selectVideoItem.currentSteps].title}}</view>
</view>
<block wx:if="{{seeAllVideo}}">
<swiper class="coach-swiper" display-multiple-items='3' bindchange='swiperChange'>
<swiper class="coach-swiper" display-multiple-items='{{videos.length>3?3:videos.length}}' bindchange='swiperChange'>
<swiper-item class="coach-swiper-item" wx:for="{{videos}}" wx:key="item" catch:tap="selectVideo" data-item="{{item}}">
<image class="coach-swiper-item-cover" src="{{item.cover}}" mode="aspectFill"/>
<view class="coach-swiper-item-cover-active" wx:if="{{item.id == selectVideoItem.id}}"></view>
<view class="coach-swiper-item-cover-active" wx:if="{{item.video_id == selectVideoItem.video_id}}"></view>
</swiper-item>
</swiper>
</block>
<view class="video-control" wx:if="{{selectVideoItem.id!=0}}">
<view class="video-control" wx:if="{{selectVideoItem.video_id!=0}}">
<image catch:tap="mutedTab" data-type='close' wx:if="{{!selectVideoItem.muted}}" class="source" src="https://cdn.shuiganying.com/images/2023/11/13/267603acf95fa978764417d7598aa8b0.png" mode="widthFix"/>
<image catch:tap="mutedTab" data-type='open' wx:if="{{selectVideoItem.muted}}" src="https://cdn.shuiganying.com/images/2023/11/13/37fecae5af2faa01f5baba9c1c01affe.png" mode="widthFix"/>
<view class="source-right">
@@ -45,5 +43,4 @@
</view>
</view>
</view>
</view>

6
pages/beautify/coach.wxss
View File

@@ -96,7 +96,7 @@
}
.coach-top-video{
width: 78vw;
width: 600rpx;
height: 720rpx;
display: flex;
flex-direction: column;
@@ -109,6 +109,7 @@
.coach-top-cover{
width: 100%;
height: 100%;
padding-bottom:30rpx ;
}
.coach-top-text{
margin-top: 40rpx;
@@ -138,7 +139,7 @@
}
.coach-swiper-item-cover{
width: calc(100% - 20rpx);
height: 160rpx;
height: 170rpx;
margin-right: 20rpx;
border-radius: 20rpx;
position: relative;
@@ -199,7 +200,6 @@
/* 倒计时和分布展示 */
.steps-cont{
font-size: 28rpx;
color: #000;