zm/nuttyreading-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

引入日历前

Browse Source
This commit is contained in:
@fawn-nine
2023-08-21 18:05:19 +08:00
parent 57d70c40f2
commit ef6c52c0d4
48 changed files with 4003 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

438
pages/library/library.vue Normal file
View File

@@ -0,0 +1,438 @@
<template>
<view>
<!-- 公共组件-每个页面必须引入 -->
<!-- <public-module></public-module> -->
<z-nav-bar title="我的图书"></z-nav-bar>
<view class="home_bg" >
<image src="../../static/icon/home_icon_1.png" mode="aspectFit" class="icon_hua_1"></image>
<view class="search_box" @click="onPageJump('./searchFor')">
<text class="icon_search"></text>
<text class="prompt">搜索...</text>
</view>
</view>
<view class="contentButton">
<u-tabs :scrollable="false" bg-color="#d4d4d4" active-color="#2979ff" inactive-color="#606266" bar-height="10" :list="contentButtonList" @click="contentButtonClick" lineWidth="42" :inactiveStyle="{fontSize:'32rpx'}" :activeStyle="{color: '#303133',fontWeight: 'bold', transform: 'scale(1.01)'}"></u-tabs>
</view>
<view class="listenList" v-if="bookList.length > 0">
<view class="wrap" v-if="contentShow == 0">
<u-row gutter="16" justify="flex-start">
<u-col span="6" v-for="(item,index) in bookList" :key="index">
<view class="flexbox listenItem">
<view class="info">
<view class="videoBox demo-layout bg-purple" @click="goToListenFree(item)">
<image :src="item.image" mode="scaleToFill" ></image>
</view>
</view>
<view class="btns">
<view class="item flexbox" @click="">
<u-icon name="bookmark" color="#55aaff" size="24"></u-icon>
<text>读 书</text>
</view>
<view class="item flexbox" @click="goToListenFree(item)">
<u-icon name="volume" color="#71d5a1" size="24"></u-icon>
<text>听 书</text>
</view>
<view class="item flexbox" @click="goPingshu(item.bookId)">
<u-icon name="chat" color="#fcbd71" size="24"></u-icon>
<text>评 书</text>
</view>
</view>
</view>
<view class="bookName">{{item.bookName}}</view>
</u-col>
</u-row>
</view>
<view class="wrap" v-if="contentShow == 1">
<u-row gutter="16" justify="flex-start">
<u-col span="6" v-for="(item,index) in tjBookLIst" :key="index">
<view class="flexbox listenItem">
<view class="info">
<view class="videoBox demo-layout bg-purple" @click="goDetail(item)">
<image :src="item.productImages" mode="scaleToFill" ></image>
</view>
</view>
<view class="btns">
<view class="item flexbox" @click="">
<u-icon name="bookmark" color="#55aaff" size="24"></u-icon>
<text>读 书</text>
</view>
<view class="item flexbox" @click="goToListen(item)">
<u-icon name="volume" color="#71d5a1" size="24"></u-icon>
<text>听 书</text>
</view>
<view class="item flexbox" @click="wgGoPingshu(item)">
<u-icon name="chat" color="#fcbd71" size="24"></u-icon>
<text>评 书</text>
</view>
</view>
</view>
<view class="bookName">{{item.productName}}</view>
</u-col>
</u-row>
</view>
</view>
<view>
<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 class="shuwuLink">
<image @click="" src="../../static/icon/shuwu.jpg" mode="aspectFit"></image>
</view>
<music-play :playData="playData"></music-play>
<z-navigation></z-navigation>
</view>
</template>
<script>
import musicPlay from '@/components/music.vue'
import {
mapState
} from 'vuex';
export default {
data() {
return {
showEbook:false,
playData:{},
loadingNow : false,
bookList:[],
contentShow:0,
page:1, // 页码
status: 3,
ygtotalPage:1,
tjPage:1,
tjTotalPage:1,
tjBookLIst:[],
contentButtonList: [{
name: '已购图书'
},
{
name: '推荐图书'
}
],
}
},
onLoad() {
this.getListDate()
this.getfreeBook()
},
onPullDownRefresh() {
console.log('下拉刷新了')
uni.stopPullDownRefresh();
if(this.contentShow == 0){
this.page=1, // 页码
this.bookList = []
this.getfreeBook()
}
else if(this.contentShow == 1){
this.tjPage=1, // 页码
this.tjBookLIst = []
this.getListDate()
}
},
onReachBottom() {
this.loadingNow = true
console.log('到底了')
if(this.contentShow == 0){
//console.log(this.page , this.ygtotalPage)
if(this.page < this.ygtotalPage){
this.page++
console.log('加载',this.page)
this.status = 0
this.getfreeBook()
}else{
this.status = 1
console.log('加载完成了',this.page)
return
}
}else if(this.contentShow == 1){
if(this.tjPage < this.tjTotalPage){
this.tjPage++
console.log('加载',this.tjPage)
this.status = 0
this.getListDate()
}else{
this.status = 1
console.log('加载完成了',this.tjPage)
return
}
}
},
components:{
musicPlay
},
computed: {
...mapState(['userInfo'])
},
methods: {
// 未购买图书，评书跳转
wgGoPingshu(item){
console.log('未购买评书',item)
if(item.bookId == null || item.bookId.length <= 0){
//uni.showModal()
uni.showModal({
title: '提示',
showCancel:false,
content: '当前未关联图书信息，请联系联系管理员',
success: function (res) {
if (res.confirm) {
console.log('好的');
}
}
});
}else{
uni.navigateTo({
url: '../comments/comments?bookid='+item.bookId[0],
// url:'../bookShop/commodityDetail'
});
}
},
// 跳转到评书
goPingshu(val){
console.log('评书',val)
uni.navigateTo({
url: '../comments/comments?bookid='+val,
// url:'../bookShop/commodityDetail'
});
},
contentButtonClick(e){
this.contentShow = e.index
},
// 获取已购买书籍
getfreeBook(){
this.$http
.post('book/userebookbuy/buylist', {
// .post('book/buyorderdetail/querybuy', {
'id': this.userInfo.id,
'page':this.page,
'limit':10
})
.then(res => {
if(res.code == 0){
this.ygtotalPage = res.page.totalPage
this.bookList = this.bookList.concat(res.page.list)
console.log(res,'已购买')
this.status = 3
}
});
},
// 获取推荐图书（未购买）
getListDate(){
this.loadingNow = false
// 获取书架列表
this.$http
.post('book/shopproduct/booklist', {
'userId': this.userInfo.id,
'limit':10,
'page':this.tjPage
})
.then(res => {
console.log(res)
if(res.code == 0){
this.tjTotalPage = res.pages.totalPage
var arr = []
if(res.pages.list.length > 0){
for (var i=0; i<res.pages.list.length; i++ ) {
var booidArr = []
if(res.pages.list[i].bookId != null){
booidArr = res.pages.list[i].bookId.split(',')
//res.pages.list[i].bookId = booidArr
console.log(booidArr,'booidArr')
res.pages.list[i].bookId = booidArr
}else{
res.pages.list[i].bookId = []
}
}
console.log(res.pages.list,'res.pages.list')
// var arr = res.pages.list
this.tjBookLIst = this.tjBookLIst.concat(res.pages.list)
// console.log(res)
this.status = 3
} }
});
},
// 跳转详情页
goDetail(item) {
console.log(item,'goDetail-----')
uni.navigateTo({
url: '../bookShop/commodityDetail?id=' + item.productId
});
},
goToListen(item){
if(item.bookId == null || item.bookId.length <= 0){
//uni.showModal()
uni.showModal({
title: '提示',
showCancel:false,
content: '当前图书暂不支持试听',
success: function (res) {
if (res.confirm) {
console.log('好的');
}
}
});
}else{
uni.navigateTo({
url: "../listen/listen?bookid="+item.bookId[0]
});
}
},
// 跳转到听书详情
goToListenFree(item){
console.log(item,'item')
uni.navigateTo({
// url: "./musicbg?bookid="+item.bookid+"&fengImg="+item.image // 后台播放版本
url: "../listen/listen?bookid="+item.bookId+"&fengImg="+item.image // 前台播放版本
// url: "./bgMusix"
});
},
// 跳转11
onPageJump(url) {
uni.navigateTo({
url: url
});
},
}
}
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.listenItem{
.btns{margin-top: 60rpx; margin-left: 20rpx; font-size: 34rpx; justify-content: space-between;
.item{ margin-bottom:30rpx;}
}
.info{width: 50%;
image{width:100% ; height: 280rpx; border-radius: 20rpx;}
}
}
.shuwuLink{ padding: 0 20rpx;
image{border-radius: 30rpx;}
}
.contentButton{margin:50rpx 0;}
.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91;}
.bookName{ margin-top:10rpx; display: block;
white-space: nowrap; font-weight: bold;
overflow-x: hidden;
text-overflow: ellipsis;
font-size: 30rpx; color: #333; padding: 10rpx 0;
}
// .videoBox{position: relative;}
.playButton{position: absolute; z-index: 1; right: 4px; bottom: 4px; padding: 5px; border-radius: 100%; }
uni-image {
width:auto !important;
height: 350rpx;
}
.u-row{flex-wrap: wrap;}
.u-col{overflow: hidden; margin-bottom: 30rpx; overflow: hidden;}
.listenList{padding: 10rpx; box-sizing: border-box; width: calc(100% - 10rpx);}
.flexbox{display: flex;}
.scroll-Y {
height: 300rpx;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
}
.scroll-view-item {
height: 300rpx;
line-height: 300rpx;
text-align: center;
font-size: 36rpx;
}
.scroll-view-item_H {
display: inline-block;
width: 60%;
height: 300rpx;
line-height: 300rpx;
text-align: center;
font-size: 36rpx;
}
.head_line {
margin: 50rpx 0;
b {
display: inline-block;
width: 12rpx;
height: 40rpx;
background-color: #54a966;
vertical-align: bottom;
margin: 0 20rpx 0 0;
}
text {
font-size: 32rpx;
font-weight: bold;
}
i {
float: right;
font-style: normal;
color: #8b8a91;
font-size: 24rpx;
margin: 5rpx 35rpx 0 0;
}
}
.home_bg {
background-image: url('@/static/icon/home_bg.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding: 100rpx 0 40rpx 0;
position: relative;
.icon_hua_1 {
margin: 0 auto;
width: 150rpx;
height: 150rpx;
}
.search_box {
width: 90%;
height: 64upx;
background-color: #fff;
border-radius: 32upx;
display: flex;
align-items: center;
padding: 0upx 40upx;
position: absolute;
margin-left: -46%;
left: 50%;
bottom: -40rpx;
box-shadow: 0 0px 10px 1px #54a96633;
.prompt {
color: #cccccc;
}
.icon_search {
background-image: url('@/static/icon/map_ic_search.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 29upx;
height: 28upx;
margin-right: 20upx;
}
}
}
</style>