评论
This commit is contained in:
@fawn-nine
@@ -301,6 +301,14 @@
|
|||||||
"navigationBarTitleText" : "太湖公益"
|
"navigationBarTitleText" : "太湖公益"
|
||||||
// "enablePullDownRefresh": true
|
// "enablePullDownRefresh": true
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/course/learn",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : "课程学习",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
|
|||||||
@@ -34,13 +34,13 @@
|
|||||||
size="mini" type="primary" />
|
size="mini" type="primary" />
|
||||||
</view>
|
</view>
|
||||||
<view class="showAll zhezhe" v-show="fold">
|
<view class="showAll zhezhe" v-show="fold">
|
||||||
<view class="flexbox icon" @click="tozhankai()"><u-icon class="icon_item" name="arrow-left-double" color="#258feb"
|
<view class="flexbox icon" @click="tozhankai()"><u-icon class="icon_item" name="arrow-left-double"
|
||||||
size="28"></u-icon></view>
|
color="#258feb" size="28"></u-icon></view>
|
||||||
<text>查看全部</text>
|
<text>查看全部</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="showFew zhezhe" v-show="!fold">
|
<view class="showFew zhezhe" v-show="!fold">
|
||||||
<view class="flexbox icon" @click="toZhedie()"><u-icon class="icon_item1" name="arrow-left-double" color="#258feb"
|
<view class="flexbox icon" @click="toZhedie()"><u-icon class="icon_item1" name="arrow-left-double"
|
||||||
size="28"></u-icon></view>
|
color="#258feb" size="28"></u-icon></view>
|
||||||
<text>收 起</text>
|
<text>收 起</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="video_audio_audition_list">
|
<view class="video_audio_audition_list">
|
||||||
@@ -68,7 +68,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<u-divider v-else text="暂无数据"></u-divider>
|
<u-divider v-else text="暂无数据"></u-divider>
|
||||||
<!-- <uni-section class="mb-10" title="教学体系" type="line"> -->
|
<!-- <uni-section class="mb-10" title="教学体系" type="line"> -->
|
||||||
<!-- <template v-slot:right>
|
<!-- <template v-slot:right>
|
||||||
查看更多 >>
|
查看更多 >>
|
||||||
</template> -->
|
</template> -->
|
||||||
<!-- </uni-section> -->
|
<!-- </uni-section> -->
|
||||||
@@ -101,17 +101,89 @@
|
|||||||
</view>
|
</view>
|
||||||
<uni-section class="mb-10 graybg" title="留言板" type="line">
|
<uni-section class="mb-10 graybg" title="留言板" type="line">
|
||||||
</uni-section>
|
</uni-section>
|
||||||
<u-popup :show="pricespop" :round="10" @close="closePup">
|
<view class="liuyanBox">
|
||||||
|
<view class="box">
|
||||||
|
<view class="firstLeve flexbox leve">
|
||||||
|
<view class="imgbox">
|
||||||
|
<view class="img">
|
||||||
|
<image src="@/static/logo.png" mode="aspectFit"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="contentBox">
|
||||||
|
<view class="name">
|
||||||
|
这是名字这是名字这是名字
|
||||||
|
</view>
|
||||||
|
<view class="content">
|
||||||
|
这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
|
||||||
|
</view>
|
||||||
|
<view class="others flexbox">
|
||||||
|
<view class="dianzan flexbox">
|
||||||
|
<!-- <u-icon name="heart-fill" color="#999" size="24"></u-icon> -->
|
||||||
|
<u-icon name="heart" color="#999" size="24"></u-icon>
|
||||||
|
<text>387</text>
|
||||||
|
</view>
|
||||||
|
<view class="pinglun flexbox" @click="addSay()">
|
||||||
|
<!-- <u-icon name="chat-fill" color="#999" size="24"></u-icon> -->
|
||||||
|
<u-icon name="chat" color="#999" size="24"></u-icon>
|
||||||
|
<text>555</text>
|
||||||
|
</view>
|
||||||
|
<text>2024-06-12 09：15</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- -->
|
||||||
|
<view class="firstLeve flexbox leve">
|
||||||
|
<view class="imgbox">
|
||||||
|
<view class="img">
|
||||||
|
<image src="@/static/logo.png" mode="aspectFit"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="contentBox">
|
||||||
|
<view class="name">
|
||||||
|
这是名字这是名字这是名字
|
||||||
|
</view>
|
||||||
|
<view class="content">
|
||||||
|
这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
|
||||||
|
</view>
|
||||||
|
<view class="others flexbox">
|
||||||
|
<view class="dianzan flexbox">
|
||||||
|
<!-- <u-icon name="heart-fill" color="#999" size="24"></u-icon> -->
|
||||||
|
<u-icon name="heart" color="#999" size="24"></u-icon>
|
||||||
|
<text>387</text>
|
||||||
|
</view>
|
||||||
|
<view class="pinglun flexbox">
|
||||||
|
<!-- <u-icon name="chat-fill" color="#999" size="24"></u-icon> -->
|
||||||
|
<u-icon name="chat" color="#999" size="24"></u-icon>
|
||||||
|
<text>555</text>
|
||||||
|
</view>
|
||||||
|
<text>2024-06-12 09：15</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-popup key="1" :show="pricespop" :round="10" @close="closePup">
|
||||||
<view class="proListPrice" v-if="proPriceList.length > 0">
|
<view class="proListPrice" v-if="proPriceList.length > 0">
|
||||||
<view class="title">
|
<view class="title">
|
||||||
请选择您的购买时长
|
请选择
|
||||||
</view>
|
</view>
|
||||||
<view class="list">
|
<view class="list">
|
||||||
<view class="item" v-for="(item,index) in proPriceList" :key="index" @click="choosePrice(item)">
|
<view :class="['item',curProId == item.productId ? 'active' : '']"
|
||||||
|
v-for="(item,index) in proPriceList" :key="index" @click="choosePrice(item)">
|
||||||
{{item.productName}} - ￥{{item.price}}
|
{{item.productName}} - ￥{{item.price}}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="tbn flexbox" style="padding-bottom: 20px;">
|
||||||
|
<view class="saveBtnss buybtn flexbox" @click="">
|
||||||
|
<u-icon name="bag" color="#fff" size="28"></u-icon>
|
||||||
|
<text>立即购买</text>
|
||||||
|
</view>
|
||||||
|
<view class="saveBtnss gouwuche flexbox" @click="">
|
||||||
|
<uni-icons type="cart" size="28" style="color: #666;"></uni-icons>
|
||||||
|
<text>加入购物车</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</u-popup>
|
</u-popup>
|
||||||
<view>
|
<view>
|
||||||
@@ -119,6 +191,34 @@
|
|||||||
:iconStyle="iconStyle"></u-back-top>
|
:iconStyle="iconStyle"></u-back-top>
|
||||||
</view>
|
</view>
|
||||||
<!-- </view> -->
|
<!-- </view> -->
|
||||||
|
<!-- 评论弹出 -->
|
||||||
|
<u-popup key="2" :show="sayVisible" :round="10" @close="sayclose">
|
||||||
|
<view class="contentBox">
|
||||||
|
<view class="input_addIcon flexbox">
|
||||||
|
<view class="editorBox">
|
||||||
|
<editor id="editor" class="ql-container" placeholder="开始输入..." show-img-size
|
||||||
|
show-img-toolbar show-img-resize @statuschange="onStatusChange" :read-only="readOnly"
|
||||||
|
@ready="onEditorReady">
|
||||||
|
</editor>
|
||||||
|
</view>
|
||||||
|
<view class="icon flexbox" >
|
||||||
|
<u-icon v-show="!showEdit " @click="chooseImg" name="plus" color="#2979ff" size="28"></u-icon>
|
||||||
|
<u-icon v-show="showEdit " @click="editEditor" name="edit-pen" color="#2979ff" size="28"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 选择表情还是图片 -->
|
||||||
|
<view class="chooseImgType flexbox" v-if="showImgType">
|
||||||
|
<text class="addEmoji" @click="addEmoji">表情</text><text @click="addPic">图片</text>
|
||||||
|
</view>
|
||||||
|
<!-- 表情 -->
|
||||||
|
<view class="emoji" v-if="showEmoji">
|
||||||
|
<text class="" @click="closeEmoji">关闭</text>
|
||||||
|
<emotion @emotion="handleEmj" :height="220" windowWidth="windowWidth">
|
||||||
|
</emotion>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</u-popup>
|
||||||
<public-module></public-module>
|
<public-module></public-module>
|
||||||
<z-navigation></z-navigation>
|
<z-navigation></z-navigation>
|
||||||
<!-- <music-play :playData="playData"></music-play> -->
|
<!-- <music-play :playData="playData"></music-play> -->
|
||||||
@@ -128,6 +228,8 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
// import musicPlay from '@/components/music.vue'
|
// import musicPlay from '@/components/music.vue'
|
||||||
|
import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
|
||||||
|
import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
|
||||||
import $http from '@/config/requestConfig.js';
|
import $http from '@/config/requestConfig.js';
|
||||||
var clear;
|
var clear;
|
||||||
import {
|
import {
|
||||||
@@ -166,14 +268,24 @@
|
|||||||
curId: null,
|
curId: null,
|
||||||
curIndex: 0,
|
curIndex: 0,
|
||||||
proPriceList: [],
|
proPriceList: [],
|
||||||
fold:true,
|
fold: true,
|
||||||
|
curProId: null,
|
||||||
|
sayVisible: false,
|
||||||
|
|
||||||
|
// 评论
|
||||||
|
readOnly: false,
|
||||||
|
formats: {},
|
||||||
|
showEmoji:false,
|
||||||
|
showImgType: false,
|
||||||
|
showEdit:false,
|
||||||
|
windowWidth:0,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
//第一次加载
|
//第一次加载
|
||||||
onLoad(e) {
|
onLoad(e) {
|
||||||
// 隐藏原生的tabbar
|
// 隐藏原生的tabbar
|
||||||
uni.hideTabBar();
|
uni.hideTabBar();
|
||||||
|
this.windowWidth = uni.getSystemInfoSync().windowWidth;
|
||||||
// this.pageTitle = e.title
|
// this.pageTitle = e.title
|
||||||
console.log(e, '传入分类id')
|
console.log(e, '传入分类id')
|
||||||
// this.getCateList(this.courseId)
|
// this.getCateList(this.courseId)
|
||||||
@@ -199,9 +311,84 @@
|
|||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
// musicPlay
|
// musicPlay
|
||||||
|
emotion,
|
||||||
|
|
||||||
},
|
},
|
||||||
//方法
|
//方法
|
||||||
methods: {
|
methods: {
|
||||||
|
// 评论
|
||||||
|
// 获得输入的表情数组
|
||||||
|
handleEmj(i) {
|
||||||
|
console.log(i, 'i---------');
|
||||||
|
this.editorCtx.insertImage({
|
||||||
|
src: i.emotion,
|
||||||
|
alt: '图像',
|
||||||
|
success: function() {
|
||||||
|
console.log('insert image success')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (i.emotioni == '[em_98]') {
|
||||||
|
//匹配最后一个表情符号并删除11。
|
||||||
|
// this.formData.content = this.formData.content.replace(/(\[[^\]]+\]|[\s\S])$/, '');
|
||||||
|
// if (this.emoji.length > 0) {
|
||||||
|
// this.emoji = this.emoji.slice(0, -1)
|
||||||
|
// }
|
||||||
|
} else {
|
||||||
|
|
||||||
|
// this.emoji.push({
|
||||||
|
// 'tag': i.emotion,
|
||||||
|
// 'name': i.emotioni
|
||||||
|
// })
|
||||||
|
// this.formData.content += i.emotioni;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chooseImg(){
|
||||||
|
this.showImgType = true
|
||||||
|
this.showEdit = true
|
||||||
|
},
|
||||||
|
editEditor(){
|
||||||
|
this.showImgType = false
|
||||||
|
this.showEdit = false
|
||||||
|
this.showEmoji = false
|
||||||
|
|
||||||
|
},
|
||||||
|
closeEmoji(){
|
||||||
|
this.showEmoji = false
|
||||||
|
this.showEdit = false
|
||||||
|
},
|
||||||
|
addPic(){
|
||||||
|
// 上传图片
|
||||||
|
},
|
||||||
|
addEmoji(){
|
||||||
|
this.showEmoji = true
|
||||||
|
this.showImgType = false
|
||||||
|
// this.showEdit = true
|
||||||
|
},
|
||||||
|
onStatusChange(e) {
|
||||||
|
const formats = e.detail
|
||||||
|
this.formats = formats
|
||||||
|
},
|
||||||
|
readOnlyChange() {
|
||||||
|
this.readOnly = !this.readOnly
|
||||||
|
},
|
||||||
|
onEditorReady() {
|
||||||
|
// #ifdef MP-BAIDU
|
||||||
|
this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef APP-PLUS || MP-WEIXIN || H5
|
||||||
|
uni.createSelectorQuery().select('#editor').context((res) => {
|
||||||
|
this.editorCtx = res.context
|
||||||
|
}).exec()
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
// end
|
||||||
|
addSay(item) {
|
||||||
|
this.sayVisible = true
|
||||||
|
},
|
||||||
|
sayclose() {
|
||||||
|
this.sayVisible = false
|
||||||
|
},
|
||||||
getSuperMarketList() {
|
getSuperMarketList() {
|
||||||
$http.request({
|
$http.request({
|
||||||
url: "medical/labelAndMarket/getMarketShopProductList",
|
url: "medical/labelAndMarket/getMarketShopProductList",
|
||||||
@@ -270,6 +457,7 @@
|
|||||||
if (res.code == 0) {
|
if (res.code == 0) {
|
||||||
if (res.productList.length > 0) {
|
if (res.productList.length > 0) {
|
||||||
this.proPriceList = res.productList
|
this.proPriceList = res.productList
|
||||||
|
this.curProId = this.proPriceList[0].productId
|
||||||
} else {
|
} else {
|
||||||
this.proPriceList = []
|
this.proPriceList = []
|
||||||
}
|
}
|
||||||
@@ -287,24 +475,29 @@
|
|||||||
},
|
},
|
||||||
choosePrice(item) {
|
choosePrice(item) {
|
||||||
console.log(item, 'choosePrice')
|
console.log(item, 'choosePrice')
|
||||||
uni.showModal({
|
this.curProId = item.productId
|
||||||
title: '提示',
|
// uni.showModal({
|
||||||
cancelText: '再想想',
|
// title: '提示',
|
||||||
content: `您正在购买 ${item.productName}，价格是${item.price}元，是否继续？`,
|
// cancelText: '再想想',
|
||||||
success: function(res) {
|
// content: `您正在购买 ${item.productName}，价格是${item.price}元，是否继续？`,
|
||||||
if (res.confirm) {
|
// success: function(res) {
|
||||||
console.log('用户点击确定');
|
// if (res.confirm) {
|
||||||
} else if (res.cancel) {
|
// console.log('用户点击确定');
|
||||||
console.log('用户点击取消');
|
// } else if (res.cancel) {
|
||||||
}
|
// console.log('用户点击取消');
|
||||||
}
|
// }
|
||||||
});
|
// }
|
||||||
|
// });
|
||||||
},
|
},
|
||||||
chooseChapter(item,index) {
|
chooseChapter(item, index) {
|
||||||
// 检查课程是否已经购买了 是否为试听
|
// 检查课程是否已经购买了 是否为试听
|
||||||
if (item.isAudition == 1) {
|
if (item.isAudition == 1) {
|
||||||
// 未购买仅试听
|
// 未购买仅试听
|
||||||
this.getPath(item, index)
|
// this.getPath(item, index)
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/course/learn?courseId=${this.course.id}&catalogueId
|
||||||
|
=${this.curId}&chapterId=${item.id}`
|
||||||
|
})
|
||||||
} else if (this.librayList[this.curIndex].isBuy == 1) {
|
} else if (this.librayList[this.curIndex].isBuy == 1) {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '提示',
|
title: '提示',
|
||||||
@@ -336,28 +529,28 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getPath(item,index){
|
getPath(item, index) {
|
||||||
$http.request({
|
$http.request({
|
||||||
url: "sociology/course/getCourseCatalogueChapterDetail",
|
url: "sociology/course/getCourseCatalogueChapterDetail",
|
||||||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||||
data: {
|
data: {
|
||||||
"id": item.id
|
"id": item.id
|
||||||
},
|
},
|
||||||
header: { //默认 无 说明：请求头
|
header: { //默认 无 说明：请求头
|
||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json'
|
||||||
},
|
},
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
if (res.code == 0) {
|
if (res.code == 0) {
|
||||||
|
|
||||||
// if (res.page.length > 0) {
|
// if (res.page.length > 0) {
|
||||||
// this.learnList = res.page
|
// this.learnList = res.page
|
||||||
// } else {
|
// } else {
|
||||||
// this.learnList = []
|
// this.learnList = []
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
// console.log(res,'-------------')
|
// console.log(res,'-------------')
|
||||||
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
clicklib(item, index) {
|
clicklib(item, index) {
|
||||||
if (item.id == this.curId) {
|
if (item.id == this.curId) {
|
||||||
@@ -367,10 +560,10 @@
|
|||||||
this.curId = item.id
|
this.curId = item.id
|
||||||
this.getChapterList(item.id)
|
this.getChapterList(item.id)
|
||||||
},
|
},
|
||||||
toZhedie(){
|
toZhedie() {
|
||||||
this.fold = true
|
this.fold = true
|
||||||
},
|
},
|
||||||
tozhankai(){
|
tozhankai() {
|
||||||
this.fold = false
|
this.fold = false
|
||||||
},
|
},
|
||||||
getChapterList(id) {
|
getChapterList(id) {
|
||||||
@@ -409,13 +602,84 @@
|
|||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '@/style/mixin.scss';
|
@import '@/style/mixin.scss';
|
||||||
.showFew{
|
::v-deep .contentBox{
|
||||||
|
.ql-editor{font-size: 26rpx ; font-style: normal; min-height: 50rpx !important; padding: 20rpx;}
|
||||||
|
img{width: 20px;}
|
||||||
|
}
|
||||||
|
.input_addIcon{}
|
||||||
|
.editorBox{width: calc(100vw - 100rpx);}
|
||||||
|
.ql-container{ min-height: 50rpx !important; height: auto!important; border: 1px solid #eee; border-radius: 50rpx;}
|
||||||
|
.contentBox {
|
||||||
|
padding: 20rpx;
|
||||||
|
.icon{width: 80rpx; justify-content: center; margin-left: 10rpx; height: 80rpx; align-items: center; border: 1px solid #eee; border-radius: 50rpx;}
|
||||||
|
.addEmoji{margin-right: 20rpx;}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
|
||||||
|
.liuyanBox {
|
||||||
|
padding: 0 20rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leve {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
.imgbox {
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 100%;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentBox {
|
||||||
|
font-size: 24rpx;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
color: #999;
|
||||||
|
@include toe();
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
color: #333;
|
||||||
|
font-size: 26rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.others {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
color: #999;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.dianzan {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pinglun {
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.showFew {
|
||||||
.icon_item1 {
|
.icon_item1 {
|
||||||
-moz-transform: rotate(90deg);
|
-moz-transform: rotate(90deg);
|
||||||
-webkit-transform: rotate(90deg);
|
-webkit-transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.showAll{
|
|
||||||
|
.showAll {
|
||||||
.icon_item {
|
.icon_item {
|
||||||
-moz-transform: rotate(-90deg);
|
-moz-transform: rotate(-90deg);
|
||||||
-webkit-transform: rotate(-90deg);
|
-webkit-transform: rotate(-90deg);
|
||||||
@@ -424,7 +688,8 @@
|
|||||||
|
|
||||||
.fold {
|
.fold {
|
||||||
// 折叠状态
|
// 折叠状态
|
||||||
height: 500rpx; overflow: hidden;
|
height: 500rpx;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.linkPro {
|
.linkPro {
|
||||||
@@ -435,7 +700,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.zhezhe {
|
.zhezhe {
|
||||||
text-align: center; width: 100%; box-sizing: border-box;
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -444,17 +711,21 @@
|
|||||||
background-position: left bottom;
|
background-position: left bottom;
|
||||||
background-image: url(@/static/zhedieBg.png);
|
background-image: url(@/static/zhedieBg.png);
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
text {
|
text {
|
||||||
color: $themeColor ;
|
color: $themeColor ;
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.graybg{background-color: $containerColor;}
|
|
||||||
|
.graybg {
|
||||||
|
background-color: $containerColor;
|
||||||
|
}
|
||||||
|
|
||||||
.scroll-view_H {
|
.scroll-view_H {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -500,17 +771,64 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
|
padding: 0 10px;
|
||||||
padding-bottom: 20rpx;
|
padding-bottom: 20rpx;
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
color: $themeColor;
|
color: #333;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
line-height: 80rpx;
|
line-height: 80rpx;
|
||||||
border-bottom: 1px solid #eee;
|
border-radius: 50rpx;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item.active {
|
||||||
|
color: $themeColor;
|
||||||
|
border: 1px solid $themeColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item:last-child {
|
.item:last-child {
|
||||||
border-bottom: none
|
// border-bottom: none
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tbn {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buybtn {
|
||||||
|
background-color: #00d8df;
|
||||||
|
margin: 0;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.saveBtnss {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 80rpx;
|
||||||
|
|
||||||
|
// width: 46%;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
|
||||||
|
text {
|
||||||
|
padding-left: 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gouwuche {
|
||||||
|
border: 1px solid #666;
|
||||||
|
padding-right: 20rpx;
|
||||||
|
|
||||||
|
text {
|
||||||
|
// color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
204
pages/course/learn.vue
Normal file
204
pages/course/learn.vue
Normal file
@@ -0,0 +1,204 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 公共组件-每个页面必须引入 -->
|
||||||
|
<public-module></public-module>
|
||||||
|
<z-nav-bar :title="chapter.detail.id ? chapter.detail.title : '课程详情'"></z-nav-bar>
|
||||||
|
<view class="box">
|
||||||
|
<view class="topImg" v-if="chapter.detail.imgUrl != ''">
|
||||||
|
<image :src="chapter.detail.imgUrl" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="sourcesList" v-if="chapter.videos.length > 0">
|
||||||
|
<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
|
||||||
|
<view class="scroll-view-item_H item" v-for="(item, index) in chapter.videos" :key="index">
|
||||||
|
<!-- .mp3 -->
|
||||||
|
<view class="" v-if="item.type == 2">
|
||||||
|
<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="" v-if="item.type == 1">
|
||||||
|
<video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
|
||||||
|
enable-danmu danmu-btn controls></video>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<u-tabs :class="['tabList']" @click="" :current="curTagId"
|
||||||
|
:activeStyle="activeStyle" :scrollable="scrollable" :list="tabList"
|
||||||
|
itemStyle="padding-left: 15px; background-color:#fff; padding-right: 15px; height: 50px;"></u-tabs>
|
||||||
|
<view class="box">
|
||||||
|
<rich-text v-if="chapter.detail.content" class="content"
|
||||||
|
:nodes="formatRichText(chapter.detail.content)"></rich-text>
|
||||||
|
</view>
|
||||||
|
<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
|
||||||
|
<!-- <music-play :playData="playData"></music-play> -->
|
||||||
|
<z-navigation></z-navigation>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import musicPlay from '@/components/music.vue'
|
||||||
|
import $http from '@/config/requestConfig.js';
|
||||||
|
var clear;
|
||||||
|
import {
|
||||||
|
mapState
|
||||||
|
} from 'vuex';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
playData: {},
|
||||||
|
scrollable:false,
|
||||||
|
current: {
|
||||||
|
poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png',
|
||||||
|
name: '致爱丽丝',
|
||||||
|
author: '暂无',
|
||||||
|
src: 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3',
|
||||||
|
},
|
||||||
|
audioAction: {
|
||||||
|
method: 'pause'
|
||||||
|
},
|
||||||
|
activeStyle: {
|
||||||
|
color: '#333',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
transform: 'scale(1.2)',
|
||||||
|
// backgroundColor: '#258feb'
|
||||||
|
|
||||||
|
},
|
||||||
|
chapter: {
|
||||||
|
detail: {}, // type:0. 不加密 //1. mp4 2. mp3
|
||||||
|
videos: []
|
||||||
|
},
|
||||||
|
bgiStyle: {
|
||||||
|
background: '#fff'
|
||||||
|
},
|
||||||
|
curTagId:1,
|
||||||
|
iconStyle: {
|
||||||
|
fontSize: '40rpx',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: '#258feb',
|
||||||
|
},
|
||||||
|
tabList:[
|
||||||
|
{id:1, name:"章节介绍"},{id:2, name:"评论"},
|
||||||
|
],
|
||||||
|
scrollTop: 0,
|
||||||
|
courseId: null,
|
||||||
|
catalogueId: null,
|
||||||
|
chapterId: null,
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
//第一次加载
|
||||||
|
onLoad(e) {
|
||||||
|
// 隐藏原生的tabbar
|
||||||
|
uni.hideTabBar();
|
||||||
|
// this.newsId = e.newsId
|
||||||
|
this.courseId = e.courseId
|
||||||
|
this.catalogueId = e.catalogueId
|
||||||
|
this.chapterId = e.chapterId
|
||||||
|
console.log(e, '------')
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(['userInfo'])
|
||||||
|
},
|
||||||
|
//页面显示
|
||||||
|
onShow() {
|
||||||
|
// 隐藏原生的tabbar
|
||||||
|
uni.hideTabBar();
|
||||||
|
this.getData();
|
||||||
|
|
||||||
|
},
|
||||||
|
onPullDownRefresh() {
|
||||||
|
uni.stopPullDownRefresh()
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
// musicPlay
|
||||||
|
},
|
||||||
|
//方法
|
||||||
|
methods: {
|
||||||
|
onPageScroll(e) {
|
||||||
|
this.scrollTop = e.scrollTop;
|
||||||
|
},
|
||||||
|
getData() {
|
||||||
|
|
||||||
|
$http.request({
|
||||||
|
url: `sociology/course/getCourseCatalogueChapterDetail`,
|
||||||
|
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||||
|
data: {
|
||||||
|
id: this.chapterId
|
||||||
|
},
|
||||||
|
header: { //默认 无 说明：请求头
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.chapter = res.data
|
||||||
|
}
|
||||||
|
}).catch(e => {
|
||||||
|
console.log(e, '获取新闻详情报错')
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
formatRichText(html) { //控制图片大小
|
||||||
|
let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
|
||||||
|
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
|
||||||
|
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
|
||||||
|
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
|
||||||
|
return match;
|
||||||
|
});
|
||||||
|
newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
|
||||||
|
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
|
||||||
|
'max-width:100%;');
|
||||||
|
return match;
|
||||||
|
});
|
||||||
|
// newContent = newContent.replace(/<img[^>]*>/gi, function(match, capture) {
|
||||||
|
// match = match.replace(/<img[^>]*>/gi, "@click='1111'").replace(/<img[^>]*>/gi, "@click='1111'");
|
||||||
|
// return match;
|
||||||
|
// });
|
||||||
|
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
|
||||||
|
newContent = newContent.replace(/\<img/gi,
|
||||||
|
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
|
||||||
|
return newContent;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '@/style/mixin.scss';
|
||||||
|
|
||||||
|
.scroll-view_H {
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-view-item_H {
|
||||||
|
display: inline-block;
|
||||||
|
// width: 100%;
|
||||||
|
// height: 300rpx;
|
||||||
|
line-height: 300rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
background-color: #fff;
|
||||||
|
@include pleft_right(10px);
|
||||||
|
min-height: calc(100vh - 270rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 48rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user