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-12 16:34:44 +08:00
parent 43a7fd802e
commit f8e165f758
3 changed files with 589 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

436
pages/course/courseDetail.vue
View File

@@ -34,13 +34,13 @@
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>
<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>
<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">
@@ -68,7 +68,7 @@
</view>
<u-divider v-else text="暂无数据"></u-divider>
<!-- <uni-section class="mb-10" title="教学体系" type="line"> -->
<!-- <template v-slot:right>
<!-- <template v-slot:right>
查看更多 >>
</template> -->
<!-- </uni-section> -->
@@ -101,17 +101,89 @@
</view>
<uni-section class="mb-10 graybg" title="留言板" type="line">
</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="title">
请选择您的购买时长
请选择
</view>
<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}}
</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>
</u-popup>
<view>
@@ -119,6 +191,34 @@
:iconStyle="iconStyle"></u-back-top>
</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>
<z-navigation></z-navigation>
<!-- <music-play :playData="playData"></music-play> -->
@@ -128,6 +228,8 @@
<script>
// 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';
var clear;
import {
@@ -166,14 +268,24 @@
curId: null,
curIndex: 0,
proPriceList: [],
fold:true,
fold: true,
curProId: null,
sayVisible: false,
// 评论
readOnly: false,
formats: {},
showEmoji:false,
showImgType: false,
showEdit:false,
windowWidth:0,
};
},
//第一次加载
onLoad(e) {
// 隐藏原生的tabbar
uni.hideTabBar();
this.windowWidth = uni.getSystemInfoSync().windowWidth;
// this.pageTitle = e.title
console.log(e, '传入分类id')
// this.getCateList(this.courseId)
@@ -199,9 +311,84 @@
},
components: {
// musicPlay
emotion,
},
//方法
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() {
$http.request({
url: "medical/labelAndMarket/getMarketShopProductList",
@@ -270,6 +457,7 @@
if (res.code == 0) {
if (res.productList.length > 0) {
this.proPriceList = res.productList
this.curProId = this.proPriceList[0].productId
} else {
this.proPriceList = []
}
@@ -287,24 +475,29 @@
},
choosePrice(item) {
console.log(item, 'choosePrice')
uni.showModal({
title: '提示',
cancelText: '再想想',
content: `您正在购买 ${item.productName}，价格是${item.price}元，是否继续？`,
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
this.curProId = item.productId
// uni.showModal({
// title: '提示',
// cancelText: '再想想',
// content: `您正在购买 ${item.productName}，价格是${item.price}元，是否继续？`,
// success: function(res) {
// if (res.confirm) {
// console.log('用户点击确定');
// } else if (res.cancel) {
// console.log('用户点击取消');
// }
// }
// });
},
chooseChapter(item,index) {
chooseChapter(item, index) {
// 检查课程是否已经购买了 是否为试听
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) {
uni.showModal({
title: '提示',
@@ -336,28 +529,28 @@
})
}
},
getPath(item,index){
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,'-------------')
});
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) {
@@ -367,10 +560,10 @@
this.curId = item.id
this.getChapterList(item.id)
},
toZhedie(){
toZhedie() {
this.fold = true
},
tozhankai(){
tozhankai() {
this.fold = false
},
getChapterList(id) {
@@ -409,13 +602,84 @@
</script>
<style lang="scss" scoped>
@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 {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
}
.showAll{
.showAll {
.icon_item {
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
@@ -424,7 +688,8 @@
.fold {
// 折叠状态
height: 500rpx; overflow: hidden;
height: 500rpx;
overflow: hidden;
}
.linkPro {
@@ -435,7 +700,9 @@
}
.zhezhe {
text-align: center; width: 100%; box-sizing: border-box;
text-align: center;
width: 100%;
box-sizing: border-box;
padding: 20rpx;
z-index: 1;
position: absolute;
@@ -444,17 +711,21 @@
background-position: left bottom;
background-image: url(@/static/zhedieBg.png);
background-repeat: repeat-x;
.icon {
justify-content: center;
}
justify-content: center;
}
text {
color: $themeColor ;
font-size: 26rpx;
}
}
.graybg{background-color: $containerColor;}
.graybg {
background-color: $containerColor;
}
.scroll-view_H {
background-color: #fff;
white-space: nowrap;
@@ -500,17 +771,64 @@
}
.list {
padding: 0 10px;
padding-bottom: 20rpx;
.item {
font-size: 26rpx;
color: $themeColor;
color: #333;
margin-bottom: 10rpx;
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 {
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;
}
}
}