czg_team/video_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

代码合并

Browse Source
This commit is contained in:
YeMingfei666
2024-12-23 18:45:22 +08:00
parent 303783634b b4be77303e
commit 3acee65862
88 changed files with 2268 additions and 470 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
pages/yodwbsHlmJ/11c.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
pages/yodwbsHlmJ/IMG_6982.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

BIN
pages/yodwbsHlmJ/IMG_6983.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 231 KiB

BIN
pages/yodwbsHlmJ/IMG_6984.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 169 KiB

BIN
pages/yodwbsHlmJ/IMG_6985.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB

BIN
pages/yodwbsHlmJ/IMG_6986.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 177 KiB

30
pages/yodwbsHlmJ/aaacasadwqvb.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<view class="gyqSxFeTGt">
<image class="img CBKwkqgyqg" src="./asz.JPG" mode="widthFix"></image>
<image class="img QxmTgyqLtb" src="./IMG_6982.jpg" mode="widthFix"></image>
<image class="img QxmTgyqLtb" src="./IMG_6983.jpg" mode="widthFix"></image>
<image class="img QxmTgyqLtb" src="./IMG_6984.jpg" mode="widthFix"></image>
<image class="img QxmTgyqLtb" src="./IMG_6985.jpg" mode="widthFix"></image>
<image class="img QxmTgyqLtb" src="./IMG_6986.jpg" mode="widthFix"></image>
<image class="img QxmTgyqLtb" src="./IMG_6986.jpg" mode="widthFix"></image>
<image class="img QxmTgyqLtb" src="./IMG_6986.jpg" mode="widthFix"></image>
<image class="img QxmTgyqLtb" src="./IMG_6986.jpg" mode="widthFix"></image>
</view>
</template>
<script>
export default {
data() {
return {
list: []
};
}
};
</script>
<style scoped lang="scss">
.img {
width: 100%;
display: block;
}
</style>

247
pages/yodwbsHlmJ/asdaxx.html Normal file
View File

@@ -0,0 +1,247 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/common.css">
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.box {
position: relative;
width: 840px;
height: 525px;
margin: 100px auto;
overflow: hidden;
}
ul,
ol,
li {
padding: 0;
margin: 0;
list-style: none;
}
ul {
position: absolute;
}
ul li {
float: left;
width: 840px;
height: 525px;
}
ul img {
display: block;
width: 840px;
height: 525px;
}
ol {
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
}
ol li {
float: left;
width: 15px;
height: 15px;
background-color: #fff;
border: 2px solid #ccc;
margin: 0 5px;
border-radius: 50%;
}
.active {
background-color: greenyellow;
}
.left,
.right {
display: none;
position: absolute;
width: 30px;
height: 60px;
line-height: 60px;
font-size: 24px;
font-weight: bold;
color: greenyellow;
background-color: rgba(129, 92, 148, 0.5);
top: 50%;
transform: translateY(-50%);
}
.right {
right: 0;
}
</style>
</head>
<body>
<!-- 搭建结构 -->
<div class="box">
<ul>
<li><img src="./images/1.jpg" alt=""></li>
<li><img src="./images/2.jpg" alt=""></li>
<li><img src="./images/3.jpg" alt=""></li>
<li><img src="./images/4.jpg" alt=""></li>
<li><img src="./images/5.jpg" alt=""></li>
</ul>
<ol></ol>
<span class="left iconfont">&#xe64a;</span>
<span class="right iconfont">&#xe637;</span>
</div>
<script src="./js/animate.js"></script>
<script>
// 1.获取元素
let box = document.querySelector('.box');
let ul = document.querySelector('ul');
let ol = document.querySelector('ol');
let left = document.querySelector('.left');
let right = document.querySelector('.right');
let flag = true; // 假设动画已经执行完成了
// 创建计数器
let num = 0;
// 将第一张图片克隆放到后面
ul.appendChild(ul.children[0].cloneNode(true));
// 计算ul的宽度
ul.style.width = ul.children.length * 840 + 'px';
// 更具图片的数量来创建小圆点
for (let i = 0; i < ul.children.length - 1; i++) {
// 创建节点
let li = document.createElement('li');
// 给每个li添加自定属性
li.dataset['index'] = i;
// 将节点添加到ol里面
ol.appendChild(li);
// 绑定事件
li.onclick = function () {
// 清除其他小圆点的类名
for (let i = 0; i < ol.children.length; i++) {
ol.children[i].classList.remove('active');
}
// 给被点击的元素添加类名
this.classList.add('active');
// 让ul移动到对应的位置
num = this.dataset['index'];
animate(ul, {
left: -num * box.offsetWidth
});
console.log(box.offsetWidth)
}
}
// 默认给第一个小圆点添加样式
ol.children[0].classList.add('active');
// 给右箭头添加事件
right.addEventListener('click', () => {
if (flag) {
flag = false;
// 判断是不是在最后一个元素
if (num == ul.children.length - 1) {
num = 0;
// 如果在最后一个元素,瞬间回到第一个元素
// 实现无缝切换
ul.style.left = 0;
}
num++;
// 为了防止被多次点击速度越来越快,我们需要判断段动画是否完成了
animate(ul, {
left: -num * box.offsetWidth
},() => {
// 当动画执行完成后,执行回调函数
// 让flag变为true
flag = true;
})
// 让小圆点跟着图片走
for (let i = 0; i < ol.children.length; i++) {
ol.children[i].classList.remove('active');
}
// 给对应的小圆点添加上样式
// 应为我们做了无缝切换,只有五个小圆点,实际上有六张图片,我们还需要判断一下
if (num == ul.children.length - 1) {
ol.children[0].classList.add('active');
} else {
ol.children[num].classList.add('active');
}
}
})
// 给左箭头添加事件
left.addEventListener('click', () => {
if (flag) {
flag = false;
// 判断是不是第一个元素
if (num == 0) {
num = ul.children.length - 1;
// 如果是第一个元素,我们瞬间切换到最后一个元素
// 应为第一个元素和最后一个元素是一样的,所以可以实现
// 无缝切换
ul.style.left = -num * box.offsetWidth + 'px';
}
num--;
// 为了防止被多次点击速度越来越快,我们需要判断段动画是否完成了
animate(ul, {
left: -num * box.offsetWidth
},() => {
// 当动画执行完成后,执行回调函数
// 让flag变为true
flag = true;
})
// 让小圆点跟着图片走
for (let i = 0; i < ol.children.length; i++) {
ol.children[i].classList.remove('active');
}
// 给对应的小圆点添加上样式
// 应为我们做了无缝切换,只有五个小圆点,实际上有六张图片,我们还需要判断一下
if (num == ul.children.length - 1) {
ol.children[0].classList.add('active');
} else {
ol.children[num].classList.add('active');
}
}
})
// 让轮播图自动轮播
let timer = setInterval(function() {
right.click();
},2000)
// 鼠标移入,显示箭头,并且停止轮播
box.addEventListener('mouseenter',()=> {
right.style.display = 'block';
left.style.display = 'block';
// 清除定时器
clearInterval(timer);
})
// 鼠标移出,继续轮播
box.addEventListener('mouseleave',() => {
// 隐藏按钮
right.style.display = 'none';
left.style.display = 'none';
timer = setInterval(function() {
right.click();
},2000)
})
</script>
</body>
</html>

476
pages/yodwbsHlmJ/yodwbsHlmJ.vue Normal file
View File

@@ -0,0 +1,476 @@
<template>
<view style="padding-bottom: 100rpx;">
<!-- <view class="title flex align-center justify-center">
<view class="title-box">
<view class="title-box-title flex align-center justify-between">
<view class="title-box-title-l">
你已连续签到
<text style="color: #ff7581;margin: 0 10rpx;">{{day}}</text>
天
</view>
<view v-if="isQd" class="title-box-title-r flex align-center justify-center">
今日已签到
</view>
<view v-else class="title-box-title-r flex align-center justify-center" @click="signIn()">
立即签到
</view>
</view>
<view class="title-box-tishi">
签到领积分，新剧抢先看。连续签到7天领惊喜礼包
</view>
<view class="title-box-day flex align-center justify-center">
<view class="title-box-day-item flex" v-for="(item,index) in numList" :key="index">
<view>
<view v-if="index == 0 && isErQd"
class="title-box-day-item-num flex align-center justify-center"
style="background-color: #ff7581;border: none;">
<image src="../../static/images/index/qd_.png" mode="">
</image>
</view>
<view v-else-if="index == 1 && isQd" style="background-color: #ff7581;border: none;"
class="title-box-day-item-num flex align-center justify-center">
<image src="../../static/images/index/qd_.png" mode="">
</image>
</view>
<view v-else class="title-box-day-item-num flex align-center justify-center">
<image src="../../static/images/index/qd.png" mode="">
</image>
</view>
<view class="title-box-day-item-day">
{{index==1?'今日':item}}
</view>
</view>
<view class="title-box-day-item-lin" v-if="index < numList.length-1"></view>
</view>
</view>
</view>
</view> -->
<image src="./11c.JPG" v-if="false" mode=""></image>
<view v-if="list.length>0" class="dwbSSEfVRz flex align-center justify-center">
<view class="itemTitle-box flex align-center justify-between">
<view class="itemTitle-box-l">
最近观看
</view>
<view class="itemTitle-box-r" @click="goNav('/me/jilu/duanju-zuijin-guankan')">
更多
</view>
</view>
</view>
<view v-if="list.length>0" class="zuijin flex align-center justify-center">
<view class="GpkmladwbU flex justify-between">
<view class="kjFVivdwbz" @click="goCourse(item.courseId,item.courseDetailsId)"
v-for="(item,index) in list" :key="index">
<view class="MXdwbIHrMo">
<image :src="item.titleImg" mode="aspectFill"></image>
<view class="kpdwbbDLKT" v-if="item.courseDetailsName">
{{item.courseDetailsName}}
</view>
</view>
<view class="gSSSCWdwbD flex align-center flex-wrap">
<view class="dwbkFoLNxI">
{{item.title}}
</view>
<view class="kemrdwbYSM" v-if="item.courseLabel">
{{item.courseLabel}}
</view>
</view>
</view>
</view>
</view>
<view v-if="zhuiju.length>0" class="dwbSSEfVRz flex align-center justify-center">
<view class="itemTitle-box flex align-center justify-between">
<view class="itemTitle-box-l">
我的追剧
</view>
<view class="itemTitle-box-r" @click="goNav('/me/jilu/duanju-zhjuiju-jilu')">
更多
</view>
</view>
</view>
<view v-if="zhuiju.length>0" class="zuijin flex align-center justify-center">
<view class="GpkmladwbU flex justify-between">
<view @click="goCourse(item.courseId,item.courseDetailsId)" class="kjFVivdwbz"
v-for="(item,index) in zhuiju" :key="index">
<view class="MXdwbIHrMo">
<image :src="item.titleImg" mode="aspectFill"></image>
<view class="kpdwbbDLKT" v-if="item.courseDetailsName">
{{item.courseDetailsName}}
</view>
</view>
<view class="gSSSCWdwbD flex align-center flex-wrap">
<view class="dwbkFoLNxI">
{{item.title}}
</view>
<view class="kemrdwbYSM" v-if="item.courseLabel">
{{item.courseLabel}}
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isErQd: false, //昨天是否签到
isQd: false, //今日是否已签到
day: 0, //签到天数
numList: this.getThisWeekDates(),
list: [],
zhuiju: [],
};
},
onLoad() {
},
onShow() {
if (uni.getStorageSync('token')) {
this.newLook()
this.myVideo()
this.myQianInfo()
}
},
methods: {
// 跳转资源详情
goCourse(e, courseDetailsId) {
if (uni.getStorageSync('token')) {
uni.navigateTo({
url: '/me/detail/detail?id=' + e + '&courseDetailsId=' + courseDetailsId
})
} else {
uni.navigateTo({
url: '/pages/login/login'
})
}
},
//获取签到信息
myQianInfo() {
let data = {
userId: uni.getStorageSync('userId')
}
this.$Request.getT('/app/integral/selectIntegralDay', data).then(res => {
if (res.code == 0) {
if (res.data.nowIntegral) { //判断今天是否签到
this.day = res.data.nowIntegral.day
this.isQd = true
}
if (res.data.yesterdayIntegral) { //判断昨天是否签到
if (!this.day) {
this.day = res.data.yesterdayIntegral.day
}
this.isErQd = true
}
if (res.data.nowIntegral == null && res.data.yesterdayIntegral == null) {
this.day = 0
this.isQd = false
this.isErQd = false
}
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
})
},
//跳转
goNav(url) {
if (uni.getStorageSync('token')) {
uni.navigateTo({
url: url
})
} else {
uni.navigateTo({
url: '/pages/login/login'
})
}
},
//我的追剧
myVideo() {
let data = {
page: 1,
limit: 6,
classify: 1, //1收藏 2点赞 3历史记录
}
this.$Request.getT('/app/courseCollect/selectByUserId', data).then(res => {
if (res.code == 0) {
this.zhuiju = res.data.records
}
})
},
//最近观看
newLook() {
let data = {
page: 1,
limit: 6,
classify: 3, //1收藏 2点赞 3历史记录
}
this.$Request.getT('/app/courseCollect/selectByUserId', data).then(res => {
if (res.code == 0) {
this.list = res.data.records
this.$nextTick(() => {
this.videPage = 1
})
}
})
},
//签到
signIn() {
if (uni.getStorageSync('token')) {
this.$Request.getT('/app/integral/signIn').then(res => {
if (res.code == 0) {
uni.showToast({
title: '今日已签到'
})
this.myQianInfo()
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
})
} else {
uni.navigateTo({
url: '/pages/login/login'
})
}
},
//获取这一周的日期，如果如期相同则替换为今日
getThisWeekDates() {
// const result = [];
// const today = new Date();
// const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - today.getDay() + 1);
// for (let i = 0; i < 7; i++) {
// const currentDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + i);
// let dateString = currentDate.toLocaleDateString('en-US', {
// month: '2-digit',
// day: '2-digit'
// });
// if (currentDate.toDateString() === today.toDateString()) {
// dateString = "今日";
// }
// let obj = {
// name: dateString
// }
// result.push(obj);
// }
// return result;
const result = [];
const today = new Date();
const yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
result.push(this.formatDate(yesterday));
let i = 1;
while (i < 7) {
const currentDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate() + i);
result.push(this.formatDate(currentDate));
i++;
}
return result;
},
formatDate(date) {
const year = date.getFullYear();
const month = this.padNumber(date.getMonth() + 1);
const day = this.padNumber(date.getDate());
return `${month}/${day}`;
},
padNumber(number) {
return number < 10 ? '0' + number : number;
},
}
}
</script>
<style lang="scss">
page {
background-color: #F5F7FF;
}
.dwbSSEfVRz {
width: 100%;
height: auto;
margin-top: 46rpx;
.itemTitle-box {
width: 686rpx;
height: 100%;
}
.itemTitle-box-l {
color: #333333;
font-size: 32rpx;
font-weight: bold;
}
.itemTitle-box-r {
color: #999999;
font-size: 28rpx;
}
}
.GpkmladwbU.justify-between{
justify-content: flex-start;
}
.zuijin {
width: 100%;
margin-top: 26rpx;
.GpkmladwbU {
width: 700rpx;
height: 100%;
flex-wrap: wrap;
}
.kjFVivdwbz {
width: calc((700rpx - 40rpx) / 3);
height: 100%;
margin-bottom: 30rpx;
margin-right: calc(40rpx / 2);
}
.kjFVivdwbz:nth-of-type(3n){
margin-right: 0;
}
.MXdwbIHrMo {
width: 100%;
// height: 204rpx;
height: 204rpx;
border-radius: 24rpx 24rpx 0 0;
position: relative;
image {
width: 100%;
height: 100%;
border-radius: 24rpx 24rpx 0 0;
}
.kpdwbbDLKT {
position: absolute;
bottom: 10rpx;
right: 0;
max-width: 80%;
border-radius: 10rpx;
background-color: rgba(51, 51, 51, 0.7);
color: #FFFFFF;
font-size: 22rpx;
padding: 10rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.gSSSCWdwbD {
width: 100%;
height: 100rpx;
background-color: #ffffff;
border-radius: 0 0 24rpx 24rpx;
align-content: center;
}
.dwbkFoLNxI {
width: 100%;
padding: 0 20rpx;
color: #333333;
font-size: 30rpx;
font-weight: bold;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.kemrdwbYSM {
width: 100%;
padding: 0 20rpx;
color: #999999;
font-size: 22rpx;
}
}
// .title {
// width: 100%;
// padding-top: 30rpx;
// .title-box {
// width: 686rpx;
// background-color: rgba(255, 117, 129, 0.1);
// border-radius: 24rpx;
// padding: 20rpx;
// }
// .title-box-title {
// font-size: 36rpx;
// font-weight: 700;
// color: #333;
// }
// .title-box-title-r {
// background-color: #ff7581;
// font-size: 26rpx;
// color: #ffffff;
// font-weight: 500;
// border-radius: 40rpx;
// padding: 20rpx 0;
// width: 166rpx;
// }
// .title-box-tishi {
// font-size: 24rpx;
// margin-top: 20rpx;
// color: #999999;
// }
// .title-box-day {
// width: 100%;
// margin-top: 30rpx;
// .title-box-day-item-lin {
// width: 30rpx;
// height: 4rpx;
// background: #bfbfbf;
// margin: 0 4rpx;
// margin-top: 30rpx;
// }
// .title-box-day-item-num {
// width: 60rpx;
// height: 60rpx;
// border-radius: 50%;
// // border: 1px solid #999999;
// color: #999999;
// image {
// width: 100%;
// height: 100%;
// border-radius: 50%;
// }
// }
// .title-box-day-item-day {
// width: 100%;
// text-align: center;
// font-size: 24rpx;
// margin-top: 20rpx;
// }
// }
// }
</style>