This commit is contained in:
@fawn-nine
2024-08-05 17:30:54 +08:00
parent 1c670dfc27
commit 4426b044bd
20 changed files with 2303 additions and 443 deletions

View File

@@ -0,0 +1,547 @@
<template>
<view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar :title="pageName"></z-nav-bar>
<!-- <view class="tabsBox" :class="[fixed ? 'fixed' : '' ]">
<u-tabs v-if="tabList.length > 0" :class="['tabList']" @click="fatherClick" :current="curTagId"
:activeStyle="activeStyle" :scrollable="scrollable" :list="tabList"
itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;"></u-tabs>
</view> -->
<view class="containerBg1">
<!-- 我的课程 -->
<view class="MyCourseBox" >
<!-- <view class="containerBg"> -->
<view class="newBox">
<view :class="['item','flexbox', userMsg.vip != '0'&& item.isBuy != 1 ? 'blueBorder':'']" v-for="(item, index) in MyTaskList.list" :key="index"
>
<view class="vipTag" v-if="userMsg.vip != '0' && item.isBuy != 1">
VIP畅学
</view>
<!-- <view class="imgcontainer" :style="{backgroundImage:surl(item.image)}"> -->
<view class="imgcontainer" @click="onPageJump('/pages/course/courseDetail',item.id)">
<image v-if="item.image && item.image != ''" :src="item.image" mode="aspectFit"></image>
<!-- <image :src="item.image" mode="" @click="goDetail(item.productId)"></image> -->
<!-- <image v-else src="/static/nobg.jpg" mode="widthFix"></image> -->
</view>
<view class="buyItems">
<view class="txt555">
<view class="" @click="onPageJump('/pages/course/courseDetail',item.id)">
{{item.title}}
</view>
</view>
<view class="jianjie" v-html="item.content">
</view>
<view class="collection">
<!-- 收藏状态{{item.isStudying}} -->
<text class="add citem" v-if="item.isStudying == 0" @click="addCollection(item,index)">加入在学习</text>
<text class="del citem" v-else @click="delCollection(item,index)">取消在学习</text>
<text class="citem btn_box" @click="onPageJump('/pages/course/courseDetail',item.id)">去学习</text>
</view>
</view>
</view>
</view>
<u-divider v-show="MyTaskList.status == 2" text="已加载全部"></u-divider>
<u-divider v-show="MyTaskList.status == 3" text="暂无数据"></u-divider>
<u-divider v-show="MyTaskList.status == 1" text="加载中..."></u-divider>
</view>
</view>
<view>
<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
:iconStyle="iconStyle"></u-back-top>
</view>
<!-- </view> -->
<!-- 评论弹出 -->
<public-module></public-module>
<z-navigation></z-navigation>
<!-- <music-play :playData="playData"></music-play> -->
</view>
</view>
</template>
<script>
import $http from '@/config/requestConfig.js';
var clear;
import {
mapState
} from 'vuex';
export default {
data() {
return {
proPriceList: [],
pricespop:false,
curTagId: 0,
playData: {},
searchValue:'',
selectCat:'', // 选中的分类名称
// fixed: false,
bgiStyle: {
background: '#fff'
},
iconStyle: {
fontSize: '40rpx',
fontWeight: 'bold',
color: '#258feb',
},
userMsg: {}, // 用户信息
scrollTop: 0,
activeStyle: {
color: '#333',
fontWeight: 'bold',
transform: 'scale(1.2)',
// backgroundColor: '#258feb'
},
scrollable: false,
pageTitle: null,
fixed: false,
medicalId:'',
tabList: [{
id: '0',
name: '班内任务'
}, {
id: '1',
name: '医案'
}, {
id: '2',
name: '心得'
}], // 目录列表
curId: null,
curIndex: 0,
treeListVisible:false,
MyTaskList: {
list: [],
status: 88,
page: 1,
flag: false
},
classId:undefined,
pageType:undefined,
pageName:'',
};
},
//第一次加载
onLoad(e) {
this.classId = e.id,
this.pageType = e.type
if(e.type == '0'){
this.pageName = '班内任务'
}else if(this.pageName = '医案'){
}else{
this.pageName = '心得'
}
// 隐藏原生的tabbar
uni.hideTabBar();
// this.windowWidth = uni.getSystemInfoSync().windowWidth;
// this.pageTitle = e.title
console.log(e, '传入分类id')
// this.getUserInfo()
// this.fatherClick()
this.getMyTaskList()
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
if (this.scrollTop > 500) {
this.fixed = true
} else {
this.fixed = false
}
},
onPullDownRefresh() {
this.selectCat = ''
this.MyTaskList.page = 1
this.MyTaskList.list = []
this.getMyTaskList()
// this.getLearningCourseList()
// this.getExpiredCourseList()
uni.stopPullDownRefresh()
},
computed: {
...mapState(['userInfo'])
},
//页面显示
onShow() {
// 隐藏原生的tabbar
uni.hideTabBar();
// #ifdef APP-PLUS
plus.screen.unlockOrientation();
plus.screen.lockOrientation("portrait-primary");
// #endif
},
onReachBottom() {
console.log('触底');
if (this.curTagId == 0) {
if(this.MyTaskList.status != 2){
if(!this.MyTaskList.flag){
this.MyTaskList.page++
this.getMyTaskList()
}
}
}
},
components: {
// musicPlay
// emotion,
// treeList,
// buyPup
// commentsList
},
//方法
methods: {
oprate(data){
console.log(data,'得到的内容')
if(data.name == 'buy'){
this.buy(data.item)
}else if(data.name == 'gouwuche'){
this.addCart(data.item)
}
},
// 购物车
addCart(val){
console.log(val)
if (val.productStock == 0) {
uni.showToast({
title: '商品库存不足',
icon: "none"
});
} else {
console.log(this.userInfo, '222')
this.$http
.post(`book/ordercart/getCartList?userId=${this.userInfo.id}`)
.then(res => {
// console.log(
this.cartList = res.cartList
this.isAddLink(val)
}).catch( e => {
console.log(e,'e')
uni.showToast({
title:`获取数据失败`,
icon:'error'
})
})
}
},
closePup(e){
this.pricespop = false
},
delselectCat(){
this.selectCat = ''
this.medicalId = ''
this.MyTaskList.page = 1
this.MyTaskList.list = []
this.getMyTaskList()
},
// search(res){
// // console.log('点了搜索')
// if(!this.MyTaskList.flag){
// this.MyTaskList.page = 1
// this.MyTaskList.list = []
// this.getMyTaskList()
// console.log(this.searchValue,'searchValue')
// }else{
// console.log('存在未执行完的程序')
// }
// },
focus(res){
this.oldValue = res
// console.log(res,this.oldValue,'聚焦');
},
blur(res){
// console.log(res,this.searchValue,'res');
if(this.oldValue != res){ // 重新请求
this.MyTaskList.page = 1
this.MyTaskList.list = []
this.getMyTaskList()
this.oldValue = ''
}
},
clear(){
// console.log('++++++++++++++++++++++')
this.searchValue = ''
this.MyTaskList.page = 1
this.MyTaskList.list = []
this.getMyTaskList()
},
clickCourseInfo(val){
console.log(val,'选择的分类数据');
if(val && val.id){
this.medicalId = val.id
this.MyTaskList.page = 1
this.MyTaskList.list = []
this.selectCat = val.title
this.getMyTaskList()
}
},
fatherClick(e) {
if(this.pageType == e.id){ return}
console.log(e,'tabitem')
this.pageType = e.id
this.getMyTaskList()
this.curTagId = e.index
},
showDrawer(){
this.treeListVisible = true
this.$nextTick( ()=> {
this.$refs['treeList'].getData()
})
},
getMyTaskList() {
this.MyTaskList.status = 1
// if (this.MyTaskList.flag) {
// console.log('正在执行,未完成')
// return
// }
this.MyTaskList.flag = true
$http.request({
url: "common/class/getClassTaskList",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
"limit": 20,
"page": this.MyTaskList.page,
"type": this.pageType+'', //类型 0班内任务1医案2心得
"title": ""
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(res => {
if (res.code == 0) {
if (res.page.records.length > 0) {
var list = res.page.records
this.MyTaskList.list = this.MyTaskList.list.concat(list)
if (res.page.pages > this.MyTaskList.page) {
this.MyTaskList.status = 0
} else {
this.MyTaskList.status = 2
}
} else {
this.MyTaskList.status = 3 // 暂无数据
}
// console.log('status--------------------', this.MyTaskList.list)
}
this.MyTaskList.flag = false
}).catch(e => {
this.MyTaskList.flag = false
this.MyTaskList.status = 3
console.log(e, '数据报错')
uni.showToast({
title:`获取数据失败`,
icon:'error'
})
});
},
getUserInfo() {
// 用户详情
// if (this.userInfo.id != undefined) {
this.$http
.post('book/user/info/' + this.userInfo.id)
.then(res => {
this.userMsg = res.user
// this.userInfo = res.user
});
// }
},
// 跳转
onPageJump(url, id) {
uni.navigateTo({
url: `${url}?id=${id}`
});
},
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.LearningCourseBox,.ExpiredCourseBox{margin-top: 20rpx;}
.collection{ margin-top: 20rpx; overflow: hidden; text-align: right;
.btn_box{border: 1px solid $themeColor !important; color:$themeColor !important; margin-left: 20rpx;}
.citem{ display: inline-block;
border-radius: 10rpx;
// background-color: #ff7446;
border: 1px solid #ff7446;
padding: 10rpx; font-size:24rpx;
color: #ff7446;
}
.del{
background-color: #ffe6db; color: #ff7446;
}
}
.sectionTitle{ margin: 20rpx 0;
justify-content: space-between; margin-bottom: 20rpx; margin-top: 20rpx;
.rightIcon{color:#2979ff ; align-items: center; font-size: 26rpx;}
}
.selectCateText{ min-width:20rpx ; font-size: 26rpx;
.del{color: #ff7446; padding-left: 20rpx;}
}
.search{background-color: $containerColor; padding: 10rpx; }
.containerBg1{padding:0 10px;}
.containerBg {
background-color: $containerColor;
padding: 0 20rpx;
}
.curseSet{margin-right: 20rpx; font-size: 28rpx; display: flex; align-items: center;}
.fixed {
position: fixed;
z-index: 2; width: 100%; background-color: #fff;
}
.newBox {
.blueBorder{border: 1px solid #2979ff !important;}
.item { overflow: hidden;
border: #fff 1px solid ;
.vipTag{position: absolute; padding:10rpx 100rpx; font-size: 26rpx;
left: -100rpx; top: 20rpx;
transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
z-index: 1;
@include theme("btn_bg") ;
color: #fff;}
position: relative;
margin-bottom: 20rpx;
background-color: #fff;
border-radius: 20rpx;
@include ptop_bottm(10px);
@include pleft_right(10px);
@include mshadow(10px, 1) .imgcontainer {
display: block;
width: 110rpx;
margin-right: 20rpx;
// background-size: cover;
// background-position: center;
height: 200rpx;
flex-grow: 1;
// @include ptop_bottm(10px);
overflow: hidden;
// @include pleft_right(10px);
image {
width: 100%;
height: 200rpx;
}
}
.btn_box{ text-align: right;
text{
border-radius: 20rpx;
padding: 3px 5px; @include theme("btn_bg");
font-size: 28rpx; color: #fff;
}
}
.buyItems {
width: 60%;
}
.jianjie {
line-height: 30rpx; height: 60rpx; overflow: hidden;
margin-top: 10rpx;
font-size: 24rpx;
@include bov();
color: #9c9c9c;
}
.txt555 {
font-size: 30rpx;
color: #000;
@include bov()
}
}
}
.subCate {
padding-top:10px;
padding-bottom: 10px;
.item {
font-size: 26rpx;
background-color: #fff;
border-radius: 10px;
color: #333;
margin-right: 16rpx;
padding: 14rpx 30rpx;
}
.item:last-child() {
margin-right: 0;
}
.item.active {
background-color: $themeColor;
color: #fff;
}
}
.tabList {
text-align: center;
}
.flexbox {
display: flex;
}
.imgcontainer {
background-color: $imgBg;
}
.box {
// background-color: #fff;
min-height: calc(100vh - 270rpx);
}
.learnBox {
// background-color: #fff;
margin-top: 10px;
.learn {
flex-wrap: wrap;
justify-content: space-between;
margin-top: 20rpx;
.item {
width: 48%;
margin-bottom: 16px;
overflow: hidden;
image {
width: 100%;
height: 200rpx;
}
.txt555 {
display: block;
text-align: center;
height: 40rpx;
width: 100%;
line-height: 40rpx;
@include bov(1);
margin-top: 10rpx;
font-size: 24rpx;
}
}
}
}
</style>