Files
nuttyreading-html/pages/yian/yian.vue
2023-12-04 23:16:50 +08:00

270 lines
5.8 KiB
Vue

<template>
<view class="container">
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<view class="header">
<!-- 顶部导航栏 -->
<z-nav-bar title="医案"></z-nav-bar>
</view>
<view>
<view class="" style="padding:40rpx 20rpx;">
<view class="mytabs flexbox">
<view :class="['item','item1', contentShow == 1 ? 'active' :'']" @click="setData(1)">
已购图书
</view>
<view :class="['item','item2', contentShow == 2 ? 'active' :'']" @click="setData(2)">
推荐图书
</view>
</view>
</view>
<view class="mainContainer">
<view class="item" v-if="yianList.length > 0">
<u-row gutter="16" justify="flex-start">
<u-col span="4" v-for="(item,index) in yianList" :key="index">
<view>
<view class="videoBox demo-layout bg-purple" @click="toMore(item)">
<image v-if="item.images != ''" :src="item.images" mode="scaleToFill"></image>
<image v-else src="../../static/icon/wufeng.jpg" mode="scaleToFill"></image>
</view>
<text class="bookName">{{item.name}}</text>
</view>
</u-col>
</u-row>
</view>
<u-divider v-else text="暂无数据"></u-divider>
<view style="width: 100%;">
<view v-if="status==0" style="text-align: center;">
<u-loading-icon style="display: inline-block;"></u-loading-icon>
<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
</view>
<view v-if="status==1">
<u-divider text="全部加载完成"></u-divider>
</view>
</view>
</view>
</view>
<music-play :playData="playData"></music-play>
</view>
</template>
<script>
import $http from '@/config/requestConfig.js';
import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
import musicPlay from '@/components/music.vue'
import { data } from 'jquery';
import {
mapState, mapMutations
} from 'vuex';
import {
checkBookRight
} from '@/config/utils';
export default {
data() {
return {
playData:{},
windowWidth:0,
bookid:null,
page:1,
pageSize:10,
total:0,
status:3,
booksetpage: 1,
yianList:[],
contentShow: 1,
}
},
onPullDownRefresh() {
console.log('下拉刷新了')
uni.stopPullDownRefresh();
this.booksetpage = 1
this.yianList = []
this.getYianList(false)
},
onReachBottom() {
this.booksetpage++
this.getYianList(false)
},
onLoad(e) {
this.windowWidth = uni.getSystemInfoSync().windowWidth;
console.log(e,'onload')
// this.bookid = e.bookid
this.getYianList(false)
},
computed:{
...mapState(['userInfo']),
},
methods: {
...mapMutations(['setLoadingShow']),
setData(e) {
this.contentShow = e
this.getYianList(true)
},
// 查看本书更多书评
toMore(val){
if (this.contentShow == 1) {
uni.navigateTo({
url: '../yian/yianList?bookid='+val.id + '&bookname='+val.name,
})
}
if (this.contentShow == 2) {
uni.navigateTo({
url: '../eBook/bookContent?Id=' + val.id
});
}
// console.log(val,'val')
},
// // 医案详情
// toDetail1(val){
// // console.log(val,'val')
// let data = {
// 'userId': this.userInfo.id,
// 'bookId': val.bookid
// }
// checkBookRight(data,res=>{
// console.log(res)
// if(res.success){
// uni.navigateTo({
// url: '../yian/yianDetail?medicalRecordsId='+val.medicalRecordsId
// })
// }else{
// uni.showToast({
// title:'购买本书后方可查看此内容!',
// icon:'none'
// })
// }
// })
// },
getYianList(tushuflag){
// uni.showLoading({
// title: '加载中'
// });
var httpurl = ""
if(tushuflag){ // 点击切换已购和推荐
this.booksetpage = 1
this.yianList = []
}
if(this.contentShow == 1){
httpurl = "book/bookMedicalRecords/userEbookBuyList"
} else {
httpurl = "book/bookMedicalRecords/recommendBookList"
}
$http.request({
url: httpurl,
method: "POST",
data: {
"page": this.booksetpage,
"limit": 10,
"userId": this.userInfo.id
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
}).then(res => {
this.yianList = this.yianList.concat(res.page.records)
console.log(this.yianList,'this.yianList')
if(res.page.records.length != 10){
this.status = 1
} else {
this.status = 0
}
}).catch(e => {
console.log(e)
})
},
},
components:{
musicPlay,
emotion
}
}
</script>
<style lang="scss" scoped>
.mytabs {
// background: url('@/static/icon/bgtushu.png') no-repeat left top;
height: 80rpx;
// margin-bottom: 30rpx;
.item {
border-radius: 10rpx;
background-color: #c6ead0;
width: 48%;
// margin: 0 10rpx;
text-align: center;
color: #3c7f56;
font-size: 36rpx;
line-height: 80rpx;
}
.item.active {
background-color: #3c7f56;
color: #fff;
}
.item1 {
margin-right: 20rpx;
}
}
.tip {
padding: 20rpx;
background-color: #fff;
text {
font-size: 36rpx;
}
}
.flexbox {
display: flex;
}
.container {
padding: 10px;
}
.bookName {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
font-size: 30rpx;
color: #333;
padding: 10rpx 0;
}
uni-image {
width: auto !important;
height: 350rpx;
}
.listenList {
padding: 10rpx;
box-sizing: border-box;
width: calc(100% - 10rpx);
}
.u-row {
flex-wrap: wrap;
}
.u-col {
overflow: hidden;
margin-bottom: 20rpx;
}
.mb30 {
margin-bottom: 30rpx;
overflow: hidden;
}
</style>