添加讲书

pages/talkBook/talkBook.vue

@@ -0,0 +1,167 @@
+<template>
+	<view class="container">
+		<view class="header">
+			<!-- 顶部导航栏 -->
+			<z-nav-bar title="讲书"></z-nav-bar>
+		</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>
+		<!-- 评价对话框 -->		
+		<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,
+			}
+		},
+		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: { 
+			getBooks(){
+				this.$http
+					.post('book/teach/getTeachBooks',{
+						'limit': 9,
+						'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')
+				uni.navigateTo({
+					url:'./talkBookML?bookid='+val.id
+				})
+			},
+			
+			
+			},
+		components:{
+			musicPlay	
+						
+		}
+	}
+</script>
+
+<style lang="scss" scoped>	
+.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>