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

课程页面修改

Browse Source
This commit is contained in:
@fawn-nine
2024-06-11 16:37:31 +08:00
parent 5d8aace5cc
commit 43a7fd802e
4 changed files with 335 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

375
pages/course/courseDetail.vue
View File

@@ -9,7 +9,7 @@
</view>
<view class="containerBg1">
<view class="courseTitle" v-if="course.id">
<text class="title">{{course.title}}</text>
<text class="title">{{course.title}}</text>
</view>
<view class="containerBg" v-if="course.content && course.content != ''">
<view class="prof">
@@ -27,9 +27,25 @@
<view class="">{{item.title}}</view>
</view>
</view>
<view class="courseList" v-if="courseList.length > 0">
<view class="item" v-for="(item, index) in courseList" :key="index">
<view :class="['courseList',fold ? 'fold' : '']" v-if="courseList.length > 0">
<view class="item" v-for="(item, index) in courseList" :key="index" @click="chooseChapter(item, index)">
<text>{{item.title}}</text>
<uni-tag v-if="item.isAudition == 1" style="margin-left: 10rpx;" :inverted="true" text="试听"
size="mini" type="primary" />
</view>
<view class="showAll zhezhe" v-show="fold">
<view class="flexbox icon" @click="tozhankai()"><u-icon class="icon_item" name="arrow-left-double" color="#258feb"
size="28"></u-icon></view>
<text>查看全部</text>
</view>
<view class="showFew zhezhe" v-show="!fold">
<view class="flexbox icon" @click="toZhedie()"><u-icon class="icon_item1" name="arrow-left-double" color="#258feb"
size="28"></u-icon></view>
<text>收 起</text>
</view>
<view class="video_audio_audition_list">
<!-- 试听视频/音频列表 -->
</view>
<view class="buyBox flexbox" v-if="this.librayList[this.curIndex].isBuy == 0">
<!-- 普通未购买 -->
@@ -42,29 +58,60 @@
<text>立即购买</text>
</view>
<view class="saveBtn vipBtn flexbox" @click="goBuy('halfFee')">
<uni-icons type="vip" size="28" color="#fff"></uni-icons>
<text>开通超级VIP</text>
</view>
</view>
</view>
</view>
<u-divider v-else text="暂无数据"></u-divider>
<!-- <uni-section class="mb-10" title="教学体系" type="line"> -->
<!-- <template v-slot:right>
查看更多 >>
</template> -->
<!-- </uni-section> -->
<view class="linkPro">
<uni-section class="mb-10 graybg" title="相关书籍" type="line">
<template v-slot:right>
<span class="more" @click="pageJupm()">查看更多 >></span>
</template>
</uni-section>
<view class="list supermarketBox">
<scroll-view class="scroll-view_H" scroll-x="true">
<view class="item" v-for="(item, index) in tjProList" :key="index"
@click="onPageJump('/pages/bookShop/commodityDetail',item.productId)">
<view class="imgcontainer">
<image :src="item.productImages" mode="aspectFit"></image>
</view>
<view class="name">
{{item.productName}}
</view>
<view class="price" v-if="item.activityPrice && item.activityPrice > 0">
￥{{item.activityPrice}}
</view>
<view class="price" v-else>
￥{{item.price}}
</view>
</view>
</scroll-view>
</view>
</view>
<uni-section class="mb-10 graybg" title="留言板" type="line">
</uni-section>
<u-popup :show="pricespop" :round="10" @close="closePup">
<view class="proListPrice" v-if="proPriceList.length > 0">
<view class="title">
请选择您的购买时长
</view>
<view class="list">
<view class="item" v-for="(item,index) in proPriceList"
:key="index"
@click="choosePrice(item)"
>
{{item.productName}} - ￥{{item.price}}
<view class="title">
请选择您的购买时长
</view>
</view>
<view class="list">
<view class="item" v-for="(item,index) in proPriceList" :key="index" @click="choosePrice(item)">
{{item.productName}} - ￥{{item.price}}
</view>
</view>
</view>
</u-popup>
<view>
@@ -100,6 +147,7 @@
fontWeight: 'bold',
color: '#258feb',
},
tjProList: [],
scrollTop: 0,
activeStyle: {
color: '#333',
@@ -108,7 +156,7 @@
// backgroundColor: '#258feb'
},
pricespop:false,
pricespop: false,
subList: [],
scrollable: false,
pageTitle: null,
@@ -117,7 +165,8 @@
librayList: [], // 目录列表
curId: null,
curIndex: 0,
proPriceList:[],
proPriceList: [],
fold:true,
};
},
@@ -129,6 +178,7 @@
console.log(e, '传入分类id')
// this.getCateList(this.courseId)
this.getData(e.id)
this.getSuperMarketList()
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
@@ -151,7 +201,31 @@
// musicPlay
},
//方法
methods: {
methods: {
getSuperMarketList() {
$http.request({
url: "medical/labelAndMarket/getMarketShopProductList",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: {
"current": 1,
"limit": 12,
"medicineMarketId": "28"
},
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
})
.then(res => {
if (res.code == 0) {
if (res.result.records.length > 0) {
this.tjProList = res.result.records
} else {
this.tjProList = []
}
}
});
},
getData(id) {
$http.request({
url: "sociology/course/getCourseDetail",
@@ -195,24 +269,24 @@
.then(res => {
if (res.code == 0) {
if (res.productList.length > 0) {
this.proPriceList = res.productList
this.proPriceList = res.productList
} else {
this.proPriceList = []
}
}
}).catch(e => {
console.log(e, '获取商品列表报错')
});
this.pricespop = true
},
closePup(){
this.pricespop = false
closePup() {
this.pricespop = false
this.proPriceList = []
},
choosePrice(item){
console.log(item,'choosePrice')
choosePrice(item) {
console.log(item, 'choosePrice')
uni.showModal({
title: '提示',
cancelText: '再想想',
@@ -226,6 +300,65 @@
}
});
},
chooseChapter(item,index) {
// 检查课程是否已经购买了 是否为试听
if (item.isAudition == 1) {
// 未购买仅试听
this.getPath(item, index)
} else if (this.librayList[this.curIndex].isBuy == 1) {
uni.showModal({
title: '提示',
cancelText: '再看看',
confirmText: '去学习',
content: `当前操作即将跳转至学习页面，是否继续？`,
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
})
} else {
uni.showModal({
title: '提示',
cancelText: '知道了',
confirmText: '立即购买',
content: `本章节不支持试听，购买课程后即可观看`,
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
})
}
},
getPath(item,index){
$http.request({
url: "sociology/course/getCourseCatalogueChapterDetail",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: {
"id": item.id
},
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
// if (res.page.length > 0) {
// this.learnList = res.page
// } else {
// this.learnList = []
// }
}
// console.log(res,'-------------')
});
},
clicklib(item, index) {
if (item.id == this.curId) {
return
@@ -234,6 +367,12 @@
this.curId = item.id
this.getChapterList(item.id)
},
toZhedie(){
this.fold = true
},
tozhankai(){
this.fold = false
},
getChapterList(id) {
$http.request({
url: "sociology/course/getCourseCatalogueChapterList",
@@ -270,33 +409,185 @@
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.proListPrice{text-align: center;
.title{font-size: 28rpx; margin: 10px 0; }
.list{padding-bottom: 20rpx;
.item{font-size: 26rpx;color: $themeColor; line-height: 80rpx; border-bottom: 1px solid #eee; }
.item:last-child{border-bottom: none}
.showFew{
.icon_item1 {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
}
.showAll{
.icon_item {
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
}
.vipBtn{
.fold {
// 折叠状态
height: 500rpx; overflow: hidden;
}
.linkPro {
.more {
font-size: 24rpx;
color: #666;
}
}
.zhezhe {
text-align: center; width: 100%; box-sizing: border-box;
padding: 20rpx;
z-index: 1;
position: absolute;
bottom: 0;
left: 0;
background-position: left bottom;
background-image: url(@/static/zhedieBg.png);
background-repeat: repeat-x;
.icon {
justify-content: center;
}
text {
color: $themeColor ;
font-size: 26rpx;
}
}
.graybg{background-color: $containerColor;}
.scroll-view_H {
background-color: #fff;
white-space: nowrap;
padding: 10rpx;
margin-top: 12rpx;
.item {
padding: 10rpx;
overflow: hidden;
display: inline-block;
padding-bottom: 0;
width: 210rpx !important;
margin-right: 8rpx;
border-radius: 10rpx;
image {
display: block;
width: 100%;
height: 260rpx;
}
.bookName {
display: block;
margin-top: 6rpx;
color: #666;
font-size: 24rpx;
white-space: nowrap;
overflow-x: hidden;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.proListPrice {
text-align: center;
.title {
font-size: 28rpx;
margin: 10px 0;
}
.list {
padding-bottom: 20rpx;
.item {
font-size: 26rpx;
color: $themeColor;
line-height: 80rpx;
border-bottom: 1px solid #eee;
}
.item:last-child {
border-bottom: none
}
}
}
.vipBtn {
@include theme("vipbtnbg");
border-radius: 100rpx; justify-content: center;
width: 150px; color:#fff;
border-radius: 100rpx;
justify-content: center;
width: 150px;
color: #fff;
margin: 10rpx auto;
}
.buyBox {
position: fixed;
position: fixed;
z-index: 2;
bottom: 100rpx;
left: 0;
padding: 20rpx 10rpx;
width: 100%; font-size: 28rpx; flex-wrap: wrap;
width: 100%;
font-size: 28rpx;
flex-wrap: wrap;
background: rgba(255, 255, 255, 0.9);
.item{ width: 100%;
.item {
width: 100%;
text-align: center;
}
.tbn{align-items: center;}
.buybtn{color: #fff;}
.tbn {
align-items: center;
}
.buybtn {
color: #fff;
}
}
.supermarketBox {
@include pleft_right(5px) .borderbb {
background-image: linear-gradient(180deg, #468aff 0%, #46c0ff 100%);
@include pleft_right(10px);
border-radius: 20rpx;
@include ptop_bottm(10px);
@include mshadow(10px, 1);
}
.name {
font-size: 24rpx;
@include toe();
margin-top: 10rpx;
}
.price {
// text-align: center;
font-size: 26rpx;
font-weight: bold;
color: $themeColor;
padding-top: 10rpx;
}
.tips {
margin-top: 10px;
background-color: #e9f0ff;
padding: 5px;
border-radius: 5px;
font-size: 24rpx;
text {
font-weight: bold;
color: $themeColor;
}
}
}
.curseImg {
@@ -307,6 +598,7 @@
}
.courseList {
position: relative;
// background-color: #fff;
padding: 0 20rpx;
background-image: linear-gradient(0deg, #e9f0ff 0%, #fbfbff 100%);
@@ -384,7 +676,8 @@
}
.buybtn {
border-radius: 100rpx; justify-content: center;
border-radius: 100rpx;
justify-content: center;
width: 150px;
margin: 10rpx auto;
@include theme("btn_bg")

2
pages/course/index.vue
View File

@@ -42,7 +42,7 @@
</view>
<view class="tag-view">
<uni-tag v-if="item.level != 0" style="margin-right: 10rpx;" :text="item.level == 1 ? '初级':'高级'" type="primary" size="small" />
<uni-tag v-if="item.selective != 0 && item.selective == 1" style="margin-right: 10rpx;" text="必修" size="small" type="error" />
<uni-tag v-if="item.selective != 0 && item.selective == 1" style="margin-right: 10rpx;" text="必修" size="small" type="warning" />
<uni-tag v-if="item.selective != 0 && item.selective == 2" style="margin-right: 10rpx;" text="选修" size="small" type="success" />
</view>
<view class="btn_box">

BIN
static/homeLogo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 22 KiB

BIN
static/zhedieBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB