nuttyreading-html/pages/talkBook/talkBook.vue

<template>
	<view class="container">
		<view class="header">
			<!-- 顶部导航栏 -->
			<z-nav-bar title="讲书"></z-nav-bar>
		</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="tip">
			<text>请选择要查看的书籍：</text>
		</view> -->
		<view class="mainContainer">
			<view class="item" v-if="bookList.length > 0">
				<u-row gutter="16" justify="flex-start">
					<u-col span="4" v-for="(item,index) in bookList" :key="index">
						<view>
							<view class="videoBox demo-layout bg-purple" @click="toDetail(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>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<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
	} from 'vuex';
	export default {
		data() {
			return {
				loadingNow: false,
				playData: {},
				windowWidth: 0,
				bookid: null,
				productInfo: {},
				page: 1,
				bookList: [],
				pageSize: 9,
				total: 0,
				totalPage: 0,
				status: 3,
				shupingList: [],
				bfaid: null,
				contentShow: 1,
			}
		},
		onPullDownRefresh() {
			console.log('下拉刷新了')
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.loadingNow = true
			// if(this.page < this.total){
			// 	this.page++
			// 	console.log('加载',this.page)
			// 	this.status = 0
			// 	this.getBookCom()

			// }else{
			// 	this.status = 1
			// 	console.log('加载完成了',this.page)
			// 	return
			// }
		},
		onLoad(e) {
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			console.log(e, 'onload')
			this.bookid = e.bookid
			//	this.getProDetail(e)
			this.getBooks()
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			setData(e) {
				this.contentShow = e
				this.getBooks()
			},
			getBooks() {
				if (this.contentShow == 1) {

					$http.request({
							url: "book/teach/getUserTeachBooks",
							method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
							data: {
								id: this.userInfo.id,
								'limit': 100,
								'page': this.page
							},
							header: { //默认 无 说明：请求头
								'Content-Type': 'application/json'
							},
						})
						.then(res => {
							console.log(res, '讲书列表')
							if (res.code == 0 && res.page.records.length > 0) {
								this.bookList = res.page.records
								this.totalPage = res.page.pages
								this.status = 3
								console.log(this.bookList, 'this.bookList')
							} else {
								this.bookList = []
								this.totalPage = 0
							}

						}).catch(e => {
							console.log(e, 'e')
						});
				} else {
					$http.request({
							url: "book/teach/getUserBestTeachBooks",
							method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
							data: {
								id: this.userInfo.id,
								'limit': 100,
								'page': this.page
							},
							header: { //默认 无 说明：请求头
								'Content-Type': 'application/json'
							},
						})
						// this.$http
						// .post('book/teach/getUserBestTeachBooks',{
						// 	id: this.userInfo.id,
						// 	'limit': 100,
						// 	'page': this.page
						// })
						.then(res => {
							console.log(res, '讲书列表')
							if (res.code == 0 && res.page.records.length > 0) {
								this.bookList = res.page.records
								this.totalPage = res.page.pages
								this.status = 3
								console.log(this.bookList, 'this.bookList')
							} else {
								this.bookList = []
								this.totalPage = 0
							}

						}).catch(e => {
							console.log(e, 'e')
						});
				}

			},
			// 书评详情
			toDetail(val) {
				// console.log(val,'val')
				if (this.contentShow == 1) {
					uni.navigateTo({
						url: './talkBookML?bookid=' + val.id
					})
				}
				if (this.contentShow == 2) {
					uni.navigateTo({
						url: '../eBook/bookContent?Id=' + val.id
					});
				}

			},


		},
		components: {
			musicPlay

		}
	}
</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>