zm/sociology_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

锚链接

Browse Source
This commit is contained in:
始于初见
2024-07-01 13:49:42 +08:00
parent f1212a42d7
commit a174c3e4d5
172 changed files with 11881 additions and 8893 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1047
pages/curriculum/order/curriculum/index copy.vue
View File

File diff suppressed because it is too large Load Diff

617
pages/curriculum/order/curriculum/index.vue
View File

@@ -11,203 +11,247 @@
fontColor="#fff"
></z-nav-bar>
<view class="contentBox commonPageContentBox">
<u-alert
v-if="goBuyTitle"
style="
background: linear-gradient(90deg, #5f8f7f 0%, #f3faf3 100%);
position: fixed;
<common-anchor-link
style="width: 100%"
baseHeight="200"
ref="commonAnchorLink"
:allDataList="allDataList"
titleKey="title"
dataListKey="courseList"
:titleStyle="{}"
:tabStyle="{
background: '#fff',
}"
>
<template slot="tabs" slot-scope="slotProps">
</template>
<template slot="labelSlot" slot-scope="slotProps">
<u-icon
v-if="
slotProps.data.isBuy != 1 &&
(vip.type == 0 || vip.type == 3)
"
class="editIcon"
name="lock-fill"
color="#aaa"
size="26"
style="display: inline-block; margin-left: 5rpx"
></u-icon>
</template>
<template slot="otherContent" slot-scope="slotProps">
<u-alert
v-if="goBuyTitle"
style="
background: linear-gradient(90deg, #5f8f7f 0%, #f3faf3 100%);
/* position: fixed;
left: 0;
width: 100%;
z-index: 10;
"
type="warning"
@click="handleClickGetVip"
:title="goBuyTitle"
:show-icon="true"
>
<template slot="rightSlot" slot-scope="slotProps">
<text class="saveBtn vipBtn flexbox buyBtn" v-if="goBuyType == 0">
立即购买
</text>
<text class="flexbox" style="color: #5f8f7f" v-if="goBuyType == 1">
立即续费
</text>
<text class="saveBtn vipBtn flexbox" v-if="goBuyType == 2">
立即升级
</text>
<view> </view>
</template>
</u-alert>
<view
v-if="curriculumData.image"
:style="`height: auto !important;${
goBuyTitle
? 'padding-top:80rpx'
: ''
}`"
>
<image
style="width: 100%"
:src="curriculumData.image"
mode="widthFix"
@click="previewImage(curriculumData.image)"
z-index: 10; */
"
type="warning"
@click="handleClickGetVip"
:title="goBuyTitle"
:show-icon="true"
>
</image>
</view>
<template slot="rightSlot" slot-scope="slotProps">
<text class="saveBtn vipBtn flexbox buyBtn" v-if="goBuyType == 0">
立即购买
</text>
<text class="flexbox" style="color: #5f8f7f" v-if="goBuyType == 1">
立即续费
</text>
<text class="saveBtn vipBtn flexbox" v-if="goBuyType == 2">
立即升级
</text>
<!-- <image
v-if="curriculumData.image"
:src="curriculumData.image"
mode="widthFix"
class="headImage"
></image> -->
<view
v-else
class="headImage"
style="height: 400rpx; background-color: #f5f5f5"
>
</view>
<view> </view>
</template>
</u-alert>
<view
v-if="curriculumData.image"
:style="`height: auto !important;${goBuyTitle ? '' : ''}`"
>
<image
style="width: 100%"
:src="curriculumData.image"
mode="widthFix"
@click="previewImage(curriculumData.image)"
>
</image>
</view>
<view class="containerBg1" :style="`${curriculumData.content && curriculumData.content != ''?'padding:40rpx 0;':''}`">
<view class="course_info_box">
<view class="course_info">
<view class="flexbox course_title" v-if="curriculumData.id">
<text class="courseTitle title">{{ curriculumData.title }}</text>
<view
v-else
class="headImage"
style="height: 400rpx; background-color: #f5f5f5"
>
</view>
<!-- <view class="start_learn_btn PM_font">进入学习</view> -->
</view>
<view
class="containerBg"
v-if="curriculumData.content && curriculumData.content != ''"
>
<view class="prof">
<view
style=" padding: 0 20rpx;"
@click="isHideCourseInfo = !isHideCourseInfo"
>
<view
class="containerBg1"
:style="`${
curriculumData.content && curriculumData.content != ''
? 'padding:10rpx 0;'
: ''
}`"
>
<view class="course_info_box">
<view class="course_info">
<view class="flexbox course_title" v-if="curriculumData.id">
<text class="courseTitle title">{{
curriculumData.title
}}</text>
<!-- <view class="start_learn_btn PM_font">进入学习</view> -->
</view>
<view style="color: #b0b0b0;padding: 0 20rpx;">{{ cateList&&cateList.length>0?`共${cateList.length}个目录`:'' }}</view>
<view
class="containerBg"
v-if="curriculumData.content && curriculumData.content != ''"
>
<view class="prof">
<view
:class="`${isHideCourseInfo ? 'hidden2' : ''}`"
style="width: calc(100% - 50rpx)"
v-html="curriculumData.content"
style="padding: 0 20rpx"
@click="isHideCourseInfo = !isHideCourseInfo"
>
<view
:class="`${isHideCourseInfo ? 'hidden2' : ''}`"
style="width: calc(100% - 50rpx)"
v-html="curriculumData.content"
>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="containerBg2">
<view class="shiting_content">
<view v-for="(v, i) in cateList" class="catalogueList" style="margin-top: 20rpx">
<view class="catalogueTitle chapter_title">
<view class="top">
<view class="line"></view>
<view class="left">
<text style="font-weight: blod" class="catalogue_title">{{
v.title
}}</text>
<!-- 普通用户或者国学Vip -->
</view>
<view
class="not_purchased"
v-if="
(v.isBuy != 1 && (vip.type == 0 || vip.type == 3)) ||
(v.isBuy == 1 &&
(vip.type == 0 || vip.type == 3) &&
v.endTime)
"
>
<view class="spot"></view>
<!-- -->
<text v-if="v.isBuy != 1 && (vip.type == 0 || vip.type == 3)"
>未购买
</text>
<!-- -->
<text
v-if="
v.isBuy == 1 &&
(vip.type == 0 || vip.type == 3) &&
v.endTime
"
>有效期至{{ v.endTime }}
</text>
</view>
<view class="right">
<!-- 购买 -->
<u-icon
v-if="goBuyType != 1&&v.type!=0"
@click="handleClickGetGoodsList(v)"
class="editIcon"
name="shopping-cart-fill"
color="#FF2B57"
size="30"
style="display: inline-block; margin-left: 10rpx"
></u-icon
>
<text v-if="goBuyType != 1&&v.type==0&&!v.endTime" style="color: #fff; font-size: 12px;" class="fdButtonBox aui-text-success" @click="handleClickGetGoodsList(v)">开始学习</text>
</template>
<template slot="label" slot-scope="slotProps">
<view class="containerBg2" style="padding-top: 20rpx">
<view class="catalogueTitle chapter_title">
<view class="top">
<view class="line"></view>
<view class="left">
<text style="font-weight: blod" class="catalogue_title">{{
slotProps.data.title
}}</text>
</view>
</view>
<!-- -->
</view>
<view class="chapter_content" v-if="courseList[i]">
<courseDescription
:isCondition="true"
:dataList="courseList[i]"
@hancleClick="gotoDetail"
label="title"
<view
class="not_purchased"
v-if="
(slotProps.data.isBuy != 1 &&
(vip.type == 0 || vip.type == 3)) ||
(slotProps.data.isBuy == 1 &&
(vip.type == 0 || vip.type == 3) &&
slotProps.data.endTime)
"
>
<template slot="labelSlot" slot-scope="slotProps">
<view
:style="`${
slotProps.rowIndex < 3
? 'width:calc(100% - 100rpx);float:left;'
: 'width:100%;'
}`"
>
<text
:class="`${
slotProps.row.viewFlg == 1 ? 'aui-text-success' : ''
<view class="spot"></view>
<text
v-if="
slotProps.data.isBuy != 1 &&
(vip.type == 0 || vip.type == 3)
"
>未购买
</text>
<text
v-if="
slotProps.data.isBuy == 1 &&
(vip.type == 0 || vip.type == 3) &&
slotProps.data.endTime
"
>有效期至{{ slotProps.data.endTime }}
</text>
</view>
<view class="right">
<u-icon
v-if="goBuyType != 1 && slotProps.data.type != 0"
@click="handleClickGetGoodsList(slotProps.data)"
class="editIcon"
name="shopping-cart-fill"
color="#FF2B57"
size="30"
style="display: inline-block; margin-left: 10rpx"
></u-icon>
<text
v-if="
goBuyType != 1 &&
slotProps.data.type == 0 &&
!slotProps.data.endTime
"
style="color: #fff; font-size: 12px"
class="fdButtonBox aui-text-success"
@click="handleClickGetGoodsList(slotProps.data)"
>开始学习</text
>
</view>
</view>
</view>
</view>
</template>
<template slot="contentList" slot-scope="slotProps">
<view class="containerBg2">
<view class="shiting_content">
<view class="catalogueList">
<view class="chapter_content">
<courseDescription
:isCondition="true"
:dataList="slotProps.dataList"
@hancleClick="gotoDetail"
label="title"
>
<template slot="labelSlot" slot-scope="slotProps">
<view
:style="`${
slotProps.rowIndex < 3
? 'width:calc(100% - 100rpx);float:left;'
: 'width:100%;'
}`"
>{{ slotProps.row.title }}</text
>
</view>
<text
:class="`${
slotProps.row.viewFlg == 1 ? 'aui-text-success' : ''
}`"
>{{ slotProps.row.title }}</text
>
</view>
<!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
</template>
<!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
</template>
<template slot="leftSlot" slot-scope="slotProps">
<!-- {{ slotProps.row.bxType }} -->
<!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
</template>
<template slot="rightSlot" slot-scope="slotProps">
<!-- {{ slotProps.row.bxType }} -->
<template slot="leftSlot" slot-scope="slotProps">
<!-- {{ slotProps.row.bxType }} -->
<!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
</template>
<template slot="rightSlot" slot-scope="slotProps">
<!-- {{ slotProps.row.bxType }} -->
<text
class="fdButtonBox aui-text-success" style="background: none;"
v-if="slotProps.row.isAudition == 1 && vip.type == '0'"
>试听</text
>
<text
class="fdButtonBox aui-text-success"
style="background: none"
v-if="slotProps.row.isAudition == 1 && vip.type == '0'"
>试听</text
>
<view> </view>
</template>
</courseDescription>
</view>
<view class="small_class_teaching_box">
<!-- <view class="small_class_teaching_top">
<view> </view>
</template>
</courseDescription>
</view>
<view class="small_class_teaching_box">
<!-- <view class="small_class_teaching_top">
<view class="small_class_teaching_top_left">
<image src="@/static/icon/course_ic.png" mode="aspectFil" class="icon1"></image>
<text>小班教学</text>
@@ -216,8 +260,8 @@
</view> -->
<view class="small_class_teaching_content">
<!-- <view class="top">
<view class="small_class_teaching_content">
<!-- <view class="top">
<view class="top_item" v-for="(v, i) in teachingList">
{{ v.title }}
@@ -227,89 +271,43 @@
</view> -->
<view class="schedule">
<view class="icon_box">
<image
src="@/static/icon/course_07.png"
mode="aspectFil"
class="icon1"
>学习进度</image
>
</view>
<view class="progress_box">
<view class="progress_icon" style=""
><u-line-progress
activeColor="#3AB3AE"
height="14"
:percentage="v.completion"
:showText="false"
></u-line-progress>
<text
style="
font-size: 28rpx;
margin-left: 20rpx;
margin-top: -2rpx;
font-weight: 700;
"
>
{{ v.completion }} %</text
>
<view class="schedule">
<view class="icon_box">
<image
src="@/static/icon/course_07.png"
mode="aspectFil"
class="icon1"
>学习进度</image
>
</view>
<view class="progress_box">
<view class="progress_icon" style=""
><u-line-progress
activeColor="#3AB3AE"
height="14"
:percentage="slotProps.data.completion"
:showText="false"
></u-line-progress>
<text
style="
font-size: 28rpx;
margin-left: 20rpx;
margin-top: -2rpx;
font-weight: 700;
"
>
{{ slotProps.data.completion }} %</text
>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view
></view>
</view>
<view
class="small_class_teaching_box related_courses_box"
v-if="relatedCoursesList.length > 0"
>
<view class="small_class_teaching_top">
<view class="small_class_teaching_top_left">
<image
src="@/static/icon/course_ic.png"
mode="aspectFil"
class="icon1"
></image>
<text>相关课程</text>
</view>
</view>
<view class="small_class_teaching_content">
<common-curriculum-list
imgUrl="url"
:isCondition="true"
:dataList="relatedCoursesList"
@hancleClick="goCourseDescription"
label="title"
</view></view
>
<template slot="labelSlot" slot-scope="slotProps">
<view class="related_courses_name hidden1">{{
slotProps.row.title
}}</view>
<!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
</template>
<template slot="rightSlot" slot-scope="slotProps">
<!-- {{ slotProps.row.bxType }} -->
<text class="aui-text-danger">
￥{{ slotProps.row.courseFee }}</text
>
<view> </view>
</template>
</common-curriculum-list>
</view>
</view>
</view>
</template>
</common-anchor-link>
<!-- <u-modal
:show="show"
@@ -332,7 +330,6 @@
"
></common-select-goods>
<z-navigation></z-navigation>
<u-popup :show="protocolShow" mode="center" round="6">
<view class="popup_box">
<view class="title">温馨提示</view>
@@ -384,6 +381,10 @@ export default {
courseDescription, //课程说明
price, //课程价格
},
// 监听页面滚动
onPageScroll(event) {
this.$refs.commonAnchorLink.pageScroll(event);
},
data() {
return {
isHideCourseInfo: true,
@@ -515,7 +516,11 @@ export default {
onShow() {
this.protocolShow = false;
this.getUserInfo();
this.getCourseDescriptionData();
this.$nextTick(() => {
this.getCourseDescriptionData();
});
// 也可以通过主题形式调用，如：
// this.$refs.uNotify.primary('Primary主题')
// 关闭 notify
@@ -535,6 +540,35 @@ export default {
} else {
this.vip = { type: 0 };
}
switch (this.vip.type) {
case 0:
this.goBuyTitle = "购买VIP,即可免费观看吴门医述所有课程";
this.goBuyType = 0;
break;
case 1 || 2:
var vipName = "";
if (this.vip.type == 1) {
vipName = "超级VIP";
}
if (this.vip.type == 2) {
vipName = "吴门医述VIP";
}
//超级VIP
this.goBuyTitle = `尊贵的${vipName},您的有效期到 ${
this.vip.endTime && this.vip.endTime.split(" ")[0]
}`;
this.goBuyType = 1;
break;
case 3:
//众妙之门
this.goBuyTitle =
"尊贵的众妙之门VIP,升级至超级VIP,即可免费观看吴门医述所有课程";
this.goBuyType = 2;
break;
}
});
},
close() {
@@ -579,8 +613,8 @@ export default {
this.selectGoodsData = {};
},
//获取相关关联课程商品
//获取相关关联课程商品
handleClickGetGoodsList(v) {
//获取相关关联课程商品
handleClickGetGoodsList(v) {
// console.log("data at line 313:", data);
if (v.type == 0) {
@@ -796,29 +830,28 @@ export default {
.then(async (res) => {
that.curriculumData = res.data.course;
that.cateList = [...res.data.catalogues];
console.log("that.allDataList at line 1068:", that.allDataList);
// this..getPercentage();
for (let i = 0; i < that.cateList.length; i++) {
var list = await that.getChapterList(that.cateList[i]);
console.log("list at line 1224:", list);
// list.map(async (item, index) => {
// console.log("item at line 1239:", item);
// item.videoList = [];
// var data = await that.getPath(item);
// item.videoList = [...data];
// });
console.log("list at line 1222:", list);
that.courseList[i] = [...list];
console.log("that.courseList at line 1238:", that.courseList);
that.allDataList[i] = {
...that.cateList[i],
courseList: [...list],
};
// that.allDataList[i].courseList = [];
}
that.relatedCoursesList = res.data.correlatedList
? res.data.correlatedList
: [];
await that.handleselectCate(this.cateList[0], 0);
setTimeout(() => {
that.$refs.commonAnchorLink.getDistanceArr();
}, 200);
console.log("that.courseList at line 1238:", that.allDataList);
this.$forceUpdate(); // that.relatedCoursesList = res.data.correlatedList
// ? res.data.correlatedList
// : [];
// await that.handleselectCate(this.cateList[0], 0);
// socket.init();
});
},
@@ -1297,7 +1330,7 @@ export default {
// font-family: MicrosoftYaHei;
.icon_box {
width:auto;
width: auto;
display: flex;
align-items: center;
margin-bottom: 0rpx;
@@ -1550,7 +1583,7 @@ export default {
// margin-bottom:10rpx;
// padding:20rpx;
.course_info {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
// box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
background: rgb(243, 250, 243);
// border-radius:20rpx;
overflow: hidden;
@@ -1577,7 +1610,7 @@ export default {
.chapter_content {
// padding: 20rpx;
// padding-top:60rpx;
margin-top: 40rpx;
// margin-top: 40rpx;
border: 4rpx solid #fffffc;
// background-image: linear-gradient(52deg, #E8F6FF 0%, #E3F2FE 50%);
// background-image: linear-gradient(-180deg, #8BBDFE 0%, #B4DCFF 100%);
@@ -1617,9 +1650,10 @@ export default {
}
.containerBg2 {
width: 100%;
// padding-top: 40rpx;
// margin-top: 100rpx;
.shiting {
line-height: 100rpx;
background: linear-gradient(130deg, #4fa1fd 0%, #12f3ff 100%);
@@ -1639,7 +1673,7 @@ export default {
text-align: center;
}
.shiting_content {
padding: 20rpx 0 0;
// padding: 20rpx 0 0;
}
}
.chapter_title {
@@ -1760,6 +1794,7 @@ export default {
.containerBg1 {
border-top: 1px solid #fff;
margin-top: -4rpx;
// background: rgb(243, 250, 243);
// position: relative;
z-index: 1;
// padding: 40rpx 0;
@@ -1777,14 +1812,20 @@ export default {
background-size: cover;
background-repeat: no-repeat;
}
.catalogueList{
background: linear-gradient(108deg, #e4f8eb 0%, #d1e8da 100%) !important;
padding: 20rpx;
padding-bottom: 0;
.catalogueList {
// background: linear-gradient(108deg, #F0FBF4 0%, #d1e8da 100%) !important;
padding-bottom: 40rpx;
// padding-top: 0;
}
.catalogueList:nth-child(1){
.catalogueList:nth-child(1) {
margin-top: 0 !important;
}
/deep/.section {
background: linear-gradient(108deg, #f0fbf4 0%, #d1e8da 100%) !important;
}
/deep/.section_box {
padding-top: 0 !important;
}
</style>