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

BIN
pages/beautify2/.DS_Store vendored Normal file
View File

Binary file not shown.

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 => {})
},
})

4
pages/beautify2/coach.json Normal file
View File

@@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "美肤教程"
}

51
pages/beautify2/coach.wxml
View File

@@ -1,2 +1,49 @@
<!--pages/beautify2/coach.wxml-->
<text>pages/beautify2/coach.wxml</text>
<view class="coach">
<image class="coach-top-covers" src="https://cdn.shuiganying.com/images/2023/11/14/2479e438889445fe4a96199d5a839d20.png" mode="widthFix"/>
<view class="coach-mirror" wx:if="{{!openCamera}}" catch:tap="openMirror">
<image src="https://cdn.shuiganying.com/images/2023/11/14/645ff37d945dc409761df73bb2ce73cd.png" mode="widthFix"/> 镜子
</view>
<view class="coach-camera" wx:if="{{openCamera}}">
<view class="coach-close" catch:tap="openMirror">X</view>
<camera device-position="front" wx:if="{{isCamera}}" flash="off"></camera>
</view>
<view class="coach-avatar">
<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.video_id==0}}">请在下方选择视频</view>
</view>
</view>
<view class="coach-bottom">
<view class="steps-cont" wx:if="{{selectVideoItem.video_id != 0}}">
<view class="steps-time">00:{{selectVideoItem.remainingTime}}</view>
<view class="steps-title">{{selectVideoItem.steps[selectVideoItem.currentSteps].title}}</view>
</view>
<block wx:if="{{seeAllVideo}}">
<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.video_id == selectVideoItem.video_id}}"></view>
</swiper-item>
</swiper>
</block>
<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">
<image catch:tap="preTab" data-type='prev' class="prev" src="https://cdn.shuiganying.com/images/2023/11/13/4aaa5694a48601a6a2e199143cbdb565.png" mode="widthFix"/>
<image class="play" wx:if="{{!selectVideoItem.playedState}}" catch:tap="videoPlayTab" src="https://cdn.shuiganying.com/images/2023/11/13/e6402d0956059d7c3ac467d8995649fb.png" mode="widthFix"/>
<image class="play" wx:if="{{selectVideoItem.playedState}}" catch:tap="videoPauseTab" src="https://cdn.shuiganying.com/images/2023/11/13/585e0a8c57cb2824a132c1eefde23370.png" mode="widthFix"/>
<image catch:tap="preTab" data-type='next' class="next" src="https://cdn.shuiganying.com/images/2023/11/13/4aaa5694a48601a6a2e199143cbdb565.png" mode="widthFix"/>
<view class="all-video" catch:tap="allVideoTab">{{!seeAllVideo?'全部视频':'隐藏'}}</view>
</view>
</view>
</view>
</view>

213
pages/beautify2/coach.wxss Normal file
View File

@@ -0,0 +1,213 @@
/* pages/beautify/coach.wxss.wxss */
.coach{
position: relative;
background-color: #f9f0ed;
}
.coach-top-covers{
width: 100%;
height: 100rpx;
}
/* 顶部图片展示 */
.coach-top{
/* height: 100vh; */
width: 100vw;
background-color: #f9f0ed;
position: relative;
z-index: 0;
/* padding-bottom: 40vh; */
padding-top: 0rpx;
position: relative;
top: -30rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.coach-avatar{
position: absolute;
left: 30rpx;
top: 70rpx;
z-index: 100;
border-radius: 30rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
color: #111;
font-size: 30rpx;
font-weight: bold;
}
.coach-avatar image{
width: 100rpx;
height: 100rpx;
border-radius: 100rpx;
margin-right: 20rpx;
}
.coach-camera{
position: absolute;
right: 20rpx;
top: 60rpx;
z-index: 100;
border-radius: 30rpx;
border: solid 10rpx #FF898F;
}
.coach .coach-close{
width: 50rpx;
height: 40rpx;
background-color: #FF898F;
text-align: center;
color: #FFF;
position: absolute;
right: 0;
top: 0;
z-index: 1;
border-radius: 0 20rpx 0 20rpx;
}
.coach-camera camera{
width: 220rpx;
height: 260rpx;
border-radius: 20rpx;
position: relative;
/* z-index: 99; */
transform: rotateY(360deg);
}
.coach-mirror{
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
position: absolute;
right: 30rpx;
top: 60rpx;
border:solid 1rpx #FF898F;
border-radius: 40rpx;
padding: 10rpx 30rpx;
font-size: 30rpx;
color: #111111;
}
.coach-mirror image{
width: 30rpx;
height: 30rpx;
/* transform: rotate(30deg); */
margin-right: 4rpx;
}
.coach-top-video{
width: 600rpx;
height: 720rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: 30rpx;
color: #222;
}
.coach-top-cover{
width: 100%;
height: 100%;
padding-bottom:30rpx ;
}
.coach-top-text{
margin-top: 40rpx;
font-size: 32rpx;
color: #111;
font-weight: bold;
}
/* 底部视频列表 */
.coach-bottom{
width: 100vw;
background-color: white;
/* position: fixed; */
/* bottom: 0; */
/* left: 0; */
z-index: 1;
}
.coach-swiper{
padding-top: 40rpx;
padding-left: 20rpx;
padding-bottom: 20rpx;
height: 200rpx;
}
.coach-swiper-item{
position: relative;
}
.coach-swiper-item-cover{
width: calc(100% - 20rpx);
height: 170rpx;
margin-right: 20rpx;
border-radius: 20rpx;
position: relative;
}
.coach-swiper-item-cover-active{
width: calc(100% - 20rpx);
height: 160rpx;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 0;
left: 0;
z-index: 1;
border-radius: 20rpx;
}
/* 声音播放控制按钮 */
.video-control{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 20rpx 0 60rpx 30rpx;
/* display: none; */
}
.video-control image{
width: 44rpx;
height: 44rpx;
padding: 10rpx;
}
.video-control .source-right{
flex:1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
}
.video-control .source-right .play{
width: 100rpx;
height: 100rpx;
padding: 0 40rpx;
}
.video-control .source-right .next{
transform: rotate(180deg);
}
.video-control .source-right .all-video{
min-width: 120rpx;
text-align:center;
margin-left: 40rpx;
margin-right: 30rpx;
border-radius: 40rpx;
border: solid 1rpx #FF898F;
color: #FF898F;
padding: 10rpx 20rpx;
font-size: 26rpx;
}
/* 倒计时和分布展示 */
.steps-cont{
font-size: 28rpx;
color: #000;
padding: 30rpx;
}
.steps-time{
font-size: 70rpx;
font-weight: bold;
margin-bottom: 10rpx;
}