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