视频播放

This commit is contained in:
2024-06-19 15:31:08 +08:00
parent 05e8da330a
commit 3e8696345e
164 changed files with 44570 additions and 1117 deletions

View File

@@ -11,6 +11,44 @@
:backState="3000"
></z-nav-bar>
<template v-if="currentCateIndex == 1">
<view class="fixed">
<view v-if="isOpenRightButton">
<view class="openBox">
<block v-for="(v, index) in allDataList" :key="index">
<view
:class="`bg${index} PM_font rightButton ${
viewid == 'cont' + index ? 'hotButton' : ''
}`"
:data-index="index"
@click="getViewId"
>{{ v.title }}</view
>
</block>
</view>
<!-- <view
@click="close"
class="closeBox"
style="background-color: #fff; margin-top: 20rpx; width: 100%"
>
<image
src="@/static/icon/close.png"
mode="widthFix"
style="width: 50rpx; height: 50rpx"
></image
></view> -->
</view>
<!-- <view class="closeBox" v-else @click="isOpenRightButton = true">
<image
src="@/static/icon/open.png"
mode="widthFix"
style="width: 50rpx; height: 50rpx"
></image>
</view> -->
</view>
</template>
<view class="contentBox commonPageContentBox">
<!-- <scroll-view class="scroll-view_H statusList" scroll-x="true" scroll-left="0"> -->
<!-- <view class="statusList flexbox" >
@@ -26,116 +64,91 @@
@handleselectCate="handleselectCate"
></common-sticky>
<view
<scroll-view
scroll-y
class="scroll"
:style="`height:calc(100vh - ${(110 + statusBarHeight) * 2}rpx)`"
:scroll-into-view="viewid"
scroll-with-animation
@scroll="scrollEvt"
>
<u-alert
style="width: 100%; z-index: 10"
type="warning"
:title="`尊贵的${
vip.type == 1 ? '超级' : vip.type == 2 ? '吴门医述' : '众妙之门'
}VIP会员,您的有效期到 ${vip.endTime && vip.endTime.split(' ')[0]}`"
:show-icon="true"
v-if="vip.type != 0"
>
</u-alert>
<template v-if="currentCateIndex == 1">
<view
v-for="(v, index) in allDataList"
:key="index"
class="right-item"
style="margin-bottom: 40rpx"
>
<view :id="`cont${index}`" :class="`bg${index} `">
<view class="cate_item_box">
<view
v-if="currentCateIndex == 1"
:class="`cate_item_name ${
viewid == 'cont' + index ? 'hot' : ''
}`"
>{{ v.title }}</view
>
</view>
<curriculm-list
:currentCateIndex="currentCateIndex"
@refresh="getCourseDescriptionData()"
:dataList="v.courseList"
:userInfo="userInfo"
>
</curriculm-list>
</view>
</view>
</template>
<template v-else>
<curriculm-list
:currentCateIndex="currentCateIndex"
@refresh="getCourseDescriptionData()"
:dataList="allDataList"
:userInfo="userInfo"
>
</curriculm-list>
</template>
</scroll-view>
<!-- <view
class="u-page__item"
style="background-color: #fff; padding: 27rpx"
v-if="allDataList.length > 0"
>
<u-collapse :value="openCollapseList">
<u-collapse-item
v-for="(v, i) in allDataList"
title=""
:name="v.sociology.title"
>
<u-collapse-item v-for="(v, i) in allDataList" title="" :name="v.id">
<template slot="icon">
<view class="cate_box">
<view class="cate_item_box">
<view class="cate_item_border">
<image
:src="
cateIconList.find((e) => v.sociology.id == e.id).icon
"
:src="v.icon"
mode="aspectFill"
style="width: 59rpx; height: 59rpx"
></image>
</view>
<view class="cate_item_name">{{ v.sociology.title }}</view>
<view class="cate_item_name">{{ v.title }}</view>
</view>
</view>
</template>
<!-- <text slot="value" class="u-page__item__title__slot-title"
>自定义内容</text
> -->
<text class="u-collapse-content">
<common-curriculum-list
imgUrl="image"
:isCondition="true"
:dataList="v.courseList"
@hancleClick="goCourseDescription"
label="title"
>
<template slot="leftSlot" slot-scope="slotProps">
<!-- {{ slotProps.row.bxType }} -->
</template>
<template slot="labelSlot" slot-scope="slotProps">
<view class="related_courses_name">
<!-- <text v-html="slotProps.row.bxType"></text> -->
{{ slotProps.row.title }}</view
>
<!-- <text v-if="slotProps.row.conditions!='03'">试听</text> -->
</template>
<template slot="rightSlot" slot-scope="slotProps">
<!-- {{ slotProps.row.bxType }} -->
<view
v-if="slotProps.row.surplusNum"
class="related_courses_right"
>
<view class="progress_icon" style=""
><u-line-progress
activeColor="#3AB3AE"
height="14"
:percentage="30"
:showText="false"
showText
></u-line-progress
></view>
<!-- <view
:class="slotProps.row.surplusNum < 30 ? 'aui-text-danger dateReminder' : 'dateReminder'">
&nbsp;{{ slotProps.row.surplusNum }}&nbsp;天到期</view> -->
</view>
<!-- <view v-if="slotProps.row.inType == '03'" class="fdButtonBox">
<u-button
type="primary"
:plain="true"
text="复读一月"
:customStyle="fdButtonStyle"
size="small"
@click.native.stop="
fnRelearn(
slotProps.row.inType,
30,
slotProps.row.courseFee
)
"
></u-button>
<u-button
type="primary"
:plain="true"
text="复读三月"
:customStyle="fdButtonStyle"
size="small"
@click.native.stop="
fnRelearn(
slotProps.row.inType,
90,
slotProps.row.courseFee
)
"
></u-button>
</view> -->
<view> </view>
</template>
</common-curriculum-list>
</text>
</u-collapse-item>
</u-collapse>
</view>
</view> -->
</view>
<u-modal
@@ -148,12 +161,15 @@
></u-modal>
<z-navigation></z-navigation>
</view>
</template>
<script>
import courseDescription from "@/pages/component/commonComponents/list";
import price from "../price/index.vue";
import curriculmList from "./list.vue";
import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
@@ -161,9 +177,18 @@ export default {
components: {
courseDescription, //课程说明
price, //课程价格
curriculmList, //课程价格
},
data() {
return {
distanceList: [],
timer: null,
isLeftClick: false,
isOpenRightButton: true,
viewid: "cont0",
viewidIndex: 0,
openCollapseList: [],
cateIconList: [
{
@@ -235,7 +260,7 @@ export default {
"margin-left": "30rpx",
},
modalInfo: {},
vip: {},
show: false,
playData: {},
taiHuClassInfo: {},
@@ -285,19 +310,21 @@ export default {
// ], // 一级分类标题1
cateList: [
{
title: "学习",
title: "正在学习",
type: 0,
apiUrl: "app/phoneDoctor.do?getTaiHuToShine",
apiUrl: "sociology/course/getUserCourseStudying",
},
{
title: "已完成",
title: "我的课程",
type: 1,
oid: "8a9fb99809e4428888aad6b56a3096a6",
// apiUrl: "sociology/course/getUserCourseBuy",
apiUrl: "sociology/course/getUserCourseBuy",
},
{
title: "未开始",
title: "过期课程",
type: 2,
oid: "8a9fb99809e4428888aad6b56a3096a6",
apiUrl: "sociology/course/getCourseExpire",
},
// {
// title: "未开始",
@@ -320,6 +347,7 @@ export default {
searchList: [], // 搜索结果数组
showSearchList: false,
userMes: {}, // 用户信息
selectCurriculum: {}, //
searchDisable: false, // 搜索不可用
limitShow: false,
limitTitle: "提示",
@@ -327,19 +355,23 @@ export default {
scrollViewHeight: 0,
urlList: {
list: "sociology/course/getMyCourse",
cancelCollection: "sociology/course/removeUserCourseStudying",
collection: "sociology/course/addUserCourseStudying",
getCateList: "sociology/home/getSociologyLabels", //消息
},
options: {},
};
},
onLoad(options) {
async onLoad(options) {
this.options = options;
this.handleselectCate({ ...this.cateList[0], index: 0 }, 0);
// await this.getUserInfo()
await this.handleselectCate({ ...this.cateList[0], index: 0 }, 0);
// this.getCourseDescriptionData();
// this.getUserInfo()
//
// this.getCateList()
},
async onShow() {
await this.getUserInfo();
await this.getCateList();
},
onHide() {
@@ -350,6 +382,70 @@ export default {
...mapState(["userInfo"]),
},
methods: {
getUserInfo() {
this.$http.post("common/user/getUserInfo").then((res) => {
console.log("res at line 505:", res);
if (res.result.userVip) {
this.vip = res.result.userVip;
} else {
this.vip = { type: 0 };
}
});
},
close() {
this.isOpenRightButton = false;
},
cancelCollection(row) {
var that = this;
this.$http
.request({
url: this.urlList.cancelCollection,
method: "POST",
data: {
userId: this.userInfo.id,
courseId: row.id,
},
header: {
//默认 无 说明:请求头
"Content-Type": "application/json",
},
})
.then(async (res) => {
console.log(res, "7777777777777777777");
if (res.code == 0) {
await this.getCourseDescriptionData();
// that.cateIconList = res.labels ? res.labels : [];
}
});
},
openCancelCollection(row) {
this.signShow = true;
this.selectCurriculum = row;
},
handlecollection(row) {
console.log("row at line 452:", row);
var that = this;
this.$http
.request({
url: this.urlList.collection,
method: "POST",
data: {
userId: this.userInfo.id,
courseId: row.id,
},
header: {
//默认 无 说明:请求头
"Content-Type": "application/json",
},
})
.then(async (res) => {
if (res.code == 0) {
await this.getCourseDescriptionData();
// that.cateIconList = res.labels ? res.labels : [];
}
});
},
async getCateList() {
var that = this;
this.$http
@@ -372,6 +468,71 @@ export default {
}
});
},
getDistanceToTop() {
//获取右侧各部分距离顶部的距离
let that = this;
that.distanceList = [];
let selectorQuery = uni.createSelectorQuery().in(this);
const query = uni.createSelectorQuery().in(this);
query
.selectAll(".right-item")
.boundingClientRect((data) => {
data.forEach(function (rect) {
that.distanceList.push(rect.top);
});
console.log("data at line 180:", data);
// this.h = data.top+69
})
.exec();
// selectorQuery
// .selectAll(".right-item")
// .boundingClientRect(function (rects) {
// console.log("rects at line 182:", rects);
// rects.forEach(function (rect) {
// that.distanceList.push(rect.top);
// });
// console.log("that.distanceList", that.distanceList);
// })
// .exec();
},
// 元素滚动到顶部时,对应的左侧导航栏变为选中状态
scrollEvt(e) {
console.log("e at line 204:", e);
// 点击左侧导航栏引起的滚动不做判断
if (this.isLeftClick) {
this.isLeftClick = false;
return;
}
// // 防抖
if (this.timer) {
clearTimeout(this.timer);
}
this.timer = setTimeout(() => {
let scrollTop = e.detail.scrollTop; //滚动的高度
// 找到位于顶部元素的索引,距离大于滚动高度的第一个元素的上一个元素就是此时位于顶部的元素
let index = this.distanceList.findIndex((it) => {
// 滚动条的位置大于元素距离顶部位置的距离时,说明元素已经滑过了顶部
return it > scrollTop;
});
console.log("index at line 218:", index);
if (index == this.viewidIndex) return;
this.viewidIndex = index;
this.viewid = "cont" + index;
}, 100);
},
getViewId(e) {
this.isLeftClick = true;
console.log("e at line 88:", e);
this.viewid = "cont" + e.currentTarget.dataset.index;
this.viewidIndex = e.currentTarget.dataset.index;
},
hancleModalConfirm() {
var data = {
values: {
@@ -443,16 +604,17 @@ export default {
},
getCourseDescriptionData() {
var data = {};
if (this.currentCateIndex == 0) {
// data.userId = this.userInfo.id;
}
var that = this;
console.log(this.$store.state, "11111111111");
this.$http
.request({
url: this.urlList.list,
url: this.cateList[this.currentCateIndex].apiUrl,
method: "POST",
data: {
type: this.cateList[this.currentCateIndex].type,
},
data: data,
header: {
//默认 无 说明:请求头
"Content-Type": "application/json",
@@ -461,14 +623,15 @@ export default {
.then(async (res) => {
console.log(res.courses, "88888");
that.allDataList = res.courses;
that.openCollapseList = that.allDataList.map((e) => {
return e.sociology.title;
});
console.log(
"that.openCollapseList at line 451:",
that.openCollapseList
);
that.allDataList = res.courseList;
if (this.currentCateIndex == 1) {
that.openCollapseList = that.allDataList.map((e) => {
return e.id;
});
await setTimeout(() => {
that.getDistanceToTop();
}, 100);
}
// socket.init();
});
@@ -501,16 +664,7 @@ export default {
// })
// },
// 获取用户详情
getUserInfo() {
// 用户详情
if (this.userInfo.id != undefined) {
this.$http.post("book/user/info/" + this.userInfo.id).then((res) => {
this.userMes = res.user;
// this.getCateList();
console.log(this.userMes, "呼呼");
});
}
},
// 详情
gotoDetail(item) {
console.log("111", item);
@@ -994,13 +1148,12 @@ export default {
}
.related_courses_right {
width: calc(100%);
margin-top: 30rpx;
margin-top: 4rpx;
overflow: hidden;
display: flex;
align-items: center;
.progress_icon {
// width: calc(100% - 220rpx);
width: calc(100%);
width: calc(100% - 220rpx);
float: left;
}
// position: absolute;
@@ -1020,11 +1173,11 @@ export default {
width: 100% !important;
height: 160rpx;
.book_image {
width: 200rpx !important;
height: 120rpx !important;
float: left !important;
}
// .book_image {
// width: 200rpx !important;
// height: 120rpx !important;
// float: left !important;
// }
.common_curriculum_item {
width: calc(100% - 220rpx);
@@ -1096,4 +1249,273 @@ export default {
}
}
}
.related_courses_name {
width: 100%;
// display: inline-block;
// float: left;
line-height: 60rpx;
// width: calc(100% - 90rpx) !important;
// padding-left: 20rpx;
font-weight: 700;
.aui-text-danger {
display: inline-block;
float: right;
}
}
.book_image {
width: 100%;
height: 100%;
float: left;
}
/deep/.list_item {
position: relative;
border-radius: 20rpx;
padding: 20rpx !important;
margin-bottom: 40rpx;
background: rgba(255, 255, 255, 0.85) !important;
box-shadow: 0px 0px 3px 0px rgba(0, 82, 79, 0.2) !important;
.rightArrow {
margin-top: 0rpx !important;
}
.titleItem {
// display: flex;
// align-items: center;
}
}
// /deep/.list_item :nth-child(2n-1) {
// background: rgba(255, 255, 255, 0.85) !important;
// }
.feng {
background-color: #f5f5f5;
margin: 0rpx 22rpx 0 0;
height: 160rpx !important;
width: 240rpx !important;
float: left;
border-radius: 14rpx;
// border: 1rpx solid #e9e9e9;
}
.cate_right {
width: calc(100% - 264rpx);
float: right;
}
.commonPageBox {
background-image: #edf6f5ad !important;
}
/deep/.uni-scroll-view-content {
box-sizing: border-box !important;
padding: 10rpx !important;
}
.curriculum_tag {
// width: 140rpx !important;
text-align: center;
display: inline-block;
border-radius: 4rpx;
font-size: 24rpx;
}
.curriculum_tag_info_box {
width: 100%;
margin-top: 1cqi;
display: flex;
align-items: center;
// justify-content: space-between;
}
.price_box {
display: flex;
align-items: center;
margin-top: 0rpx;
// justify-content: space-between;
}
.progress_box {
width: calc(100% - 140rpx);
display: flex;
align-items: center;
position: relative;
.progress_icon {
width: calc(100% - 140rpx);
display: flex;
}
.icon1 {
width: 60rpx;
height: 60rpx;
margin: 0 20rpx;
}
.icon2 {
width: 140rpx;
height: 100rpx;
position: absolute;
right: 0;
// margin-top: -20rpx;
}
}
.learning_button {
background-color: #1b9994;
color: #fff;
text-align: center;
border-radius: 60rpx;
font-size: 28rpx;
padding: 8rpx 20rpx;
}
.public-badge {
text-align: center;
// 设置渐变色背景
// background-image: linear-gradient(to right, #D26855, #F4CEB9),
// linear-gradient(100deg, #b3d5da, #8f41e9, #63acb6);
color: #d26855;
font-size: 12px;
width: 140rpx;
border-radius: 3px 0 0 3px;
position: absolute;
top: 10rpx;
right: 10px;
z-index: 10;
padding: 3px 0;
}
.show-signal {
border: 4px solid #939393;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
width: 0;
height: 0;
position: absolute;
top: 31px;
right: -8px;
z-index: 10;
}
.learning_button_border {
width: auto;
color: #222222;
background: #f4f4f4;
}
.fixed {
position: fixed;
bottom: 10%;
right: -5rpx;
z-index: 1;
overflow: hidden;
}
.openBox view {
width: 40rpx;
margin-bottom: 20rpx;
// border-bottom: 1rpx solid #309995;
}
.openBox view:nth-last-child(1) {
border: none !important;
}
.openBox {
background-color: #f8f9fa;
padding: 10rpx;
// border: 2rpx solid #eee;
// width: 40rpx;
line-height: 40rpx;
// box-shadow: 0 0px 10rpx 2px $themeColor;
// border-radius: 10rpx;
}
.scroll {
}
.scroll view {
// width: 100%;
// height: 1000rpx;
}
.rightButton {
// background-color: #fff;
font-size: 28rpx;
text-align: center;
// color: $themeColor;
}
.cate_item_box {
width: 100%;
height: auto;
display: flex;
align-items: center;
padding: 0 20rpx;
.cate_item_border {
width: 60rpx;
height: 78rpx;
// padding: 10rpx;
background-size: 100% 100%;
// background-image: url("@/static/icon/homePage/cate_bg.png");
border-radius: 4rpx;
display: flex;
align-items: center;
justify-content: center;
image {
// height: 56rpx;
}
}
.cate_item_name {
padding-top: 60rpx;
width: 100%;
// margin-left: 21rpx;
font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
font-weight: 500;
// font-weight: normal;
font-size: 52rpx;
color: #000000;
line-height: 80rpx;
text-align: center;
}
}
.hot {
color: $themeColor !important;
}
.hotButton {
color: $themeColor;
// color: #fff !important;
}
.closeBox {
width: 40rpx;
height: 40rpx;
background-color: #fff;
border-radius: 40rpx;
display: flex;
align-items: center;
box-shadow: 0 0px 5rpx 1px #b0b0b0;
justify-content: center;
overflow: hidden;
image {
width: 20rpx;
height: 20rpx;
}
}
.learning_image {
width: 100%;
// margin-top: -30rpx;
display: flex;
align-items: flex-end;
justify-content: flex-end;
// height: 70rpx;
image {
width: 70rpx;
height: 70rpx;
}
.learning_image_right {
// width: 180rpx;
text {
display: inline-block;
background-color: #e6e5e5;
border-radius: 50rpx;
padding: 4rpx 10rpx;
}
}
}
/deep/.scroll-view-item:nth-child(2n-1) {
background: rgba(255, 255, 255, 0.85) !important;
}
</style>