Skip to content

C
CFFP-HB
Commit 89f44337 by zeyang
Options

1.优化登录

parent 42b8170d
Showing with 106 additions and 62 deletions
myPackageA/videoProject/login.vue
...@@ -32,8 +32,11 @@ ...@@ -32,8 +32,11 @@
登录 登录
</view> </view>
</view> </view>
<view class="wxLoginBox"> <view class="wxLoginBox" @click="getWeChatCode">
<view class="wxLoginLabel" @click="getWeChatCode"> <view class="wxIconBox">
<text class="iconfont icon-iconfontzhizuobiaozhunbduan32"></text>
</view>
<view class="wxLoginLabel">
微信登录 微信登录
</view> </view>
</view> </view>
...@@ -72,24 +75,24 @@ ...@@ -72,24 +75,24 @@
uni.hideLoading(); uni.hideLoading();
if (res['success']) { if (res['success']) {
uni.showToast({ uni.showToast({
icon:'none', icon: 'none',
title:'发送成功', title: '发送成功',
duration:2000 duration: 2000
}) })
delayTime(); delayTime();
} else { } else {
uni.showToast({ uni.showToast({
icon:'none', icon: 'none',
title:res['message'], title: res['message'],
duration:2000 duration: 2000
}) })
} }
}) })
} else { } else {
uni.showToast({ uni.showToast({
icon:'none', icon: 'none',
title:'手机号格式错误', title: '手机号格式错误',
duration:2000 duration: 2000
}) })
} }
} }
...@@ -107,19 +110,19 @@ ...@@ -107,19 +110,19 @@
} }
//登录 //登录
const loginVerification = () => { const loginVerification = () => {
if(!common.mobileNoValid(mobile.value)){ if (!common.mobileNoValid(mobile.value)) {
uni.showToast({ uni.showToast({
icon:'none', icon: 'none',
title:'手机号格式错误', title: '手机号格式错误',
duration:2000 duration: 2000
}) })
return; return;
} }
if(!code.value){ if (!code.value) {
uni.showToast({ uni.showToast({
icon:'none', icon: 'none',
title:'请输入验证码', title: '请输入验证码',
duration:2000 duration: 2000
}) })
return; return;
} }
...@@ -127,9 +130,10 @@ ...@@ -127,9 +130,10 @@
api.loginVerification({ "loginType": 3, "mobile": mobile.value, "code": code.value, "password": null, "loginSystem": "1" }).then((res) => { api.loginVerification({ "loginType": 3, "mobile": mobile.value, "code": code.value, "password": null, "loginSystem": "1" }).then((res) => {
if (res['success']) { if (res['success']) {
uni.setStorageSync('cffp_userId', String(res['data']['userId'])); uni.setStorageSync('cffp_userId', String(res['data']['userId']));
uni.setStorageSync('uni-token',res['data']['token']); uni.setStorageSync('uni-token', res['data']['token']);
uni.setStorageSync('isLogin', '1'); uni.setStorageSync('isLogin', '1');
uni.setStorageSync('loginType', 'codelogin'); uni.setStorageSync('loginType', 'codelogin');
videoId.value = res['data']['fileId'];
next(); next();
} else { } else {
uni.showToast({ uni.showToast({
...@@ -140,7 +144,7 @@ ...@@ -140,7 +144,7 @@
} }
}) })
} }
const getWeChatCode = () =>{ const getWeChatCode = () => {
let param = { let param = {
isPayOrAuth: '3', isPayOrAuth: '3',
fileId: videoId.value fileId: videoId.value
...@@ -157,33 +161,47 @@ ...@@ -157,33 +161,47 @@
} }
}) })
} }
const next = ()=>{ const next = () => {
uni.navigateTo({ uni.navigateTo({
url:'/myPackageA/videoProject/videoDetail?videoId='+videoId.value url: '/myPackageA/videoProject/videoDetail?videoId=' + videoId.value
}) })
}; };
onLoad(option =>{ onLoad(option => {
videoId.value = option.videoId ?? null; videoId.value = option.videoId ?? null;
if(uni.getStorageSync('cffp_userId')){ if (uni.getStorageSync('cffp_userId')) {
next(); next();
} }
}) })
</script> </script>
<style lang="scss"> <style lang="scss">
.icon-iconfontzhizuobiaozhunbduan32 {
color: #fff;
font-size: 70rpx;
padding: 29rpx 30rpx;
border-radius: 100rpx;
background-color: rgba(42, 174, 103, 1);
}
.loginContent { .loginContent {
min-height: 100vh; min-height: 100vh;
padding: 0rpx 50rpx; padding: 0rpx 50rpx;
background: linear-gradient(rgba(232, 207, 181, 1) 0%,rgba(242, 240, 237, 1) 60%); background: linear-gradient(rgba(232, 207, 181, 1) 0%, rgba(242, 240, 237, 1) 60%);
position: relative; position: relative;
.wxLoginBox{
.wxLoginBox {
position: absolute; position: absolute;
bottom: 12vh; bottom: 12vh;
text-align: center; text-align: center;
left: 42vw; left: 42vw;
.wxLoginLabel{
.wxIconBox {
padding-bottom: 40rpx;
}
.wxLoginLabel {
color: rgba(102, 102, 102, 1); color: rgba(102, 102, 102, 1);
font-size: 34rpx; font-size: 34rpx;
letter-spacing: 1rpx; letter-spacing: 1rpx;
...@@ -192,12 +210,14 @@ ...@@ -192,12 +210,14 @@
.loginLogBox { .loginLogBox {
padding-top: 10vh; padding-top: 10vh;
.log{
.log {
width: 20vw; width: 20vw;
margin-bottom: 1vh; margin-bottom: 1vh;
margin-left: 2vw; margin-left: 2vw;
} }
.title{
.title {
font-size: 40rpx; font-size: 40rpx;
color: #000; color: #000;
font-weight: 600; font-weight: 600;
...@@ -206,6 +226,7 @@ ...@@ -206,6 +226,7 @@
.loginInputBox { .loginInputBox {
margin: 5vh 0; margin: 5vh 0;
.loginInputLine { .loginInputLine {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -213,27 +234,32 @@ ...@@ -213,27 +234,32 @@
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
padding: 20rpx 40rpx; padding: 20rpx 40rpx;
border-radius: 5rpx; border-radius: 5rpx;
.phoneImage{
.phoneImage {
width: 55rpx; width: 55rpx;
margin-bottom: -6rpx; margin-bottom: -6rpx;
margin-right: 10rpx; margin-right: 10rpx;
} }
} }
.codeBox{
.codeBox {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.loginInputLine{
.loginInputLine {
width: 300rpx; width: 300rpx;
display: flex; display: flex;
.codeImage{
.codeImage {
width: 95rpx; width: 95rpx;
margin-bottom: -10rpx; margin-bottom: -10rpx;
margin-right: 10rpx; margin-right: 10rpx;
} }
} }
} }
.code{
.code {
color: #fff; color: #fff;
padding: 30rpx 0; padding: 30rpx 0;
border-radius: 2px; border-radius: 2px;
......
myPackageA/videoProject/videoDetail.vue
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<view class="content"> <view class="content">
<view class="video"> <view class="video">
<video id="myVideo" :src="courseInfo.filePathOss" :poster="courseInfo.fileFirstImage" object-fit="contain" <video id="myVideo" :src="courseInfo.filePathOss" :poster="courseInfo.fileFirstImage" object-fit="contain"
:title="courseInfo.fileTitle" style="width: 100vw;height: 500rpx;" :title="courseInfo.fileTitle" style="width: 100vw;height: 500rpx;" :initial-time="viewTime"
:initial-time="viewTime" @timeupdate="timeupdate" @play="playVideo" @pause="pause" ></video> @timeupdate="timeupdate" @play="playVideo" @pause="pause"></video>
</view> </view>
<scroll-view id="scrollView" scroll-y="true" :style="{height:scrollViewHeight+'px'}" <scroll-view id="scrollView" scroll-y="true" :style="{height:scrollViewHeight+'px'}"
@scrolltolower="scrolltolower"> @scrolltolower="scrolltolower">
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
import api from "@/api/api"; import api from "@/api/api";
import { cffpURL } from "@/environments/environment"; import { cffpURL } from "@/environments/environment";
import common from '../../common/common'; import common from '../../common/common';
import { onLoad,onReady,onUnload, onPageScroll } from "@dcloudio/uni-app"; import { onLoad, onReady, onUnload, onPageScroll } from "@dcloudio/uni-app";
let windowHeight = ref(0); let windowHeight = ref(0);
let scrollViewHeight = ref(0); let scrollViewHeight = ref(0);
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
fileFirstImage: '', fileFirstImage: '',
fileTitle: '', fileTitle: '',
fileIntroduce: '', fileIntroduce: '',
packFileId:'' packFileId: ''
}); });
//讲师 //讲师
let lecturerInfo = ref({ let lecturerInfo = ref({
...@@ -100,22 +100,22 @@ ...@@ -100,22 +100,22 @@
//视频组件上下文 //视频组件上下文
const videoContext = ref(null); const videoContext = ref(null);
//播放起始时间 //播放起始时间
const viewTime:any = ref(0); const viewTime : any = ref(0);
//视频时长 //视频时长
const totalTime:any = ref(0); const totalTime : any = ref(0);
//视频是否暂停状态 //视频是否暂停状态
const isPauseFlag = ref(true); const isPauseFlag = ref(true);
//新的视频信息 //新的视频信息
const newCourseInfo = ref({ const newCourseInfo = ref({
fileId:'', fileId: '',
packFileId:'' packFileId: ''
}); });
//视频播放最新记录 //视频播放最新记录
const videoPlaybackInfo = ref({ const videoPlaybackInfo = ref({
id:'', id: '',
viewTime:'', viewTime: '',
totalTime:'' totalTime: ''
}); });
//保存记录后返回的Id //保存记录后返回的Id
...@@ -125,14 +125,14 @@ ...@@ -125,14 +125,14 @@
const packFileId = ref(null); const packFileId = ref(null);
// 相关列表点击播放 // 相关列表点击播放
const play=async item=> { const play = async item => {
videoContext.value.pause(); videoContext.value.pause();
if (videoId.value != item.fileId) { if (videoId.value != item.fileId) {
// 当点击的课程和当前播放的课程不一致时，执行此方法 // 当点击的课程和当前播放的课程不一致时，执行此方法
uni.showLoading({ uni.showLoading({
title: '加载中' title: '加载中'
}); });
uni.setStorageSync('cffp_videoId',item.fileId); uni.setStorageSync('cffp_videoId', item.fileId);
newCourseInfo.value = { newCourseInfo.value = {
fileId: item.fileId, fileId: item.fileId,
packFileId: item.packFileId, packFileId: item.packFileId,
...@@ -143,7 +143,7 @@ ...@@ -143,7 +143,7 @@
} }
} }
const saveVideoPlayback=()=> { const saveVideoPlayback = () => {
// 视频播放轨迹保存 // 视频播放轨迹保存
const param = { const param = {
id: playbackId.value ? playbackId.value : null, id: playbackId.value ? playbackId.value : null,
...@@ -173,7 +173,7 @@ ...@@ -173,7 +173,7 @@
}) })
} }
const findVideoPlayback=()=> { const findVideoPlayback = () => {
// 查询视频播放最新记录 // 查询视频播放最新记录
const param = { const param = {
systemType: 1, systemType: 1,
...@@ -193,7 +193,7 @@ ...@@ -193,7 +193,7 @@
uni.hideLoading(); uni.hideLoading();
} else { } else {
// this.isRenderVideo = true; // this.isRenderVideo = true;
totalTime.value = viewTime.value= 0; totalTime.value = viewTime.value = 0;
// 跳转到指定位置 // 跳转到指定位置
videoContext.value.seek(viewTime.value); videoContext.value.seek(viewTime.value);
uni.hideLoading(); uni.hideLoading();
...@@ -201,7 +201,7 @@ ...@@ -201,7 +201,7 @@
}) })
}; };
// 点击播放 // 点击播放
const playVideo=(e)=>{ const playVideo = (e) => {
isPauseFlag.value = false; isPauseFlag.value = false;
if (viewTime.value >= totalTime.value) { if (viewTime.value >= totalTime.value) {
...@@ -217,7 +217,7 @@ ...@@ -217,7 +217,7 @@
}, 20 * 1000) }, 20 * 1000)
} }
// 暂停播放 // 暂停播放
const pause = async ()=> { const pause = async () => {
isPauseFlag.value = true; isPauseFlag.value = true;
if (timer.value) { if (timer.value) {
clearInterval(timer.value) clearInterval(timer.value)
...@@ -231,7 +231,7 @@ ...@@ -231,7 +231,7 @@
} }
} }
//播放进度改变触发事件 //播放进度改变触发事件
const timeupdate=(e)=> { const timeupdate = (e) => {
totalTime.value = e.detail.duration; totalTime.value = e.detail.duration;
// 播放进度变化 // 播放进度变化
viewTime.value = e.detail.currentTime > totalTime.value ? totalTime.value : e.detail.currentTime; viewTime.value = e.detail.currentTime > totalTime.value ? totalTime.value : e.detail.currentTime;
...@@ -309,23 +309,36 @@ ...@@ -309,23 +309,36 @@
}) })
} }
onLoad(option => { onLoad(option => {
console.log(2);
//视频Id //视频Id
if(option.videoId){ if (option.videoId) {
uni.setStorageSync('cffp_videoId',option.videoId); uni.setStorageSync('cffp_videoId', option.videoId);
videoId.value = option.videoId; videoId.value = option.videoId;
}else{ } else {
videoId.value = uni.getStorageSync('cffp_videoId'); videoId.value = uni.getStorageSync('cffp_videoId');
} }
//用户Id //用户Id
userId.value = uni.getStorageSync('cffp_userId'); userId.value = uni.getStorageSync('cffp_userId');
if (!userId.value) {
uni.showToast({
title: '登录过期,请重新登录'
});
uni.reLaunch({
url: '/myPackageA/videoProject/login?videoId=' + videoId.value
});
return;
}
accessLogSave(); accessLogSave();
loadCourseDetail(); loadCourseDetail();
}) })
onReady(()=>{ onReady(() => {
videoContext.value = uni.createVideoContext('myVideo');
})
onUnload(()=>{
})
onUnload(() => {
if (viewTime.value != 0) { if (viewTime.value != 0) {
videoContext.value.pause(); videoContext.value.pause();
saveVideoPlayback(); saveVideoPlayback();
...@@ -335,12 +348,17 @@ ...@@ -335,12 +348,17 @@
} }
}) })
onMounted(() => { onMounted(() => {
userId.value = uni.getStorageSync('cffp_userId');
if (userId.value) {
videoContext.value = uni.createVideoContext('myVideo');
//窗口高度 //窗口高度
windowHeight.value = uni.getSystemInfoSync().windowHeight; windowHeight.value = uni.getSystemInfoSync().windowHeight;
//元素距离顶部距离 //元素距离顶部距离
uni.createSelectorQuery().select('#scrollView').boundingClientRect(data => { uni.createSelectorQuery().select('#scrollView').boundingClientRect(data => {
scrollViewHeight.value = windowHeight.value - data['top']; scrollViewHeight.value = windowHeight.value - data['top'];
}).exec(); }).exec();
}
}) })
</script> </script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment