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-09-22 11:34:09 +08:00
parent e630e70376
commit 4beb13cccb
1 changed files with 243 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

445
pages/listen/home.vue
View File

@@ -1,9 +1,9 @@
<template>
<view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<public-module></public-module>
<z-nav-bar title="我的听书"></z-nav-bar>
<view class="home_bg" >
<view class="home_bg">
<image src="../../static/icon/home_icon_1.png" mode="aspectFit" class="icon_hua_1"></image>
<view v-if="showEbook" class="search_box" @click="onPageJump('./searchFor')">
<text class="icon_search"></text>
@@ -11,34 +11,40 @@
</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>
<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 || tjBookLIst.length > 0">
<view class="wrap" v-if="contentShow == 0">
<u-row gutter="16" justify="flex-start" v-if="bookList.length > 0">
<u-col span="4" v-for="(item,index) in bookList" :key="index">
<view>
<view class="wrap" v-if="contentShow == 0">
<u-row gutter="16" justify="flex-start" v-if="bookList.length > 0">
<u-col span="4" v-for="(item,index) in bookList" :key="index">
<view>
<view class="videoBox demo-layout bg-purple" @click="goToListenFree(item)">
<image v-if="item.image != ''" :src="item.image" mode="scaleToFill" ></image>
<image v-else src="../../static/icon/wufeng.jpg" mode="scaleToFill" ></image>
<image v-if="item.image != ''" :src="item.image" mode="scaleToFill"></image>
<image v-else src="../../static/icon/wufeng.jpg" mode="scaleToFill"></image>
<!-- <u-icon class="playButton" name="play-circle" color="#54a966" size="40"></u-icon> -->
</view>
<text class="bookName">{{item.bookName}}</text>
</view>
</u-col>
</u-row>
<u-divider v-else text="暂无已购买书籍~"></u-divider>
</view>
<view class="wrap" v-if="contentShow == 1">
<u-row gutter="16" justify="flex-start" v-if="tjBookLIst.length > 0">
<u-col span="4" v-for="(item,index) in tjBookLIst" :key="index">
<view class="videoBox demo-layout bg-purple" @click="goDetail(item.product)">
<image :src="item.product.productImages" mode="scaleToFill" ></image>
<!-- <u-icon class="playButton" name="play-circle" color="#54a966" size="40"></u-icon> -->
</view>
<text class="bookName">{{item.product.productName}}</text>
<!-- <view class="btns flexbox">
<text class="bookName">{{item.bookName}}</text>
</view>
</u-col>
</u-row>
<u-divider v-else text="暂无已购买书籍~"></u-divider>
</view>
<view class="wrap" v-if="contentShow == 1">
<view v-if="1==1">
接口正在调试
</view>
<u-row gutter="16" justify="flex-start" v-if="tjBookLIst.length > 0 && 6==3">
<u-col span="4" v-for="(item,index) in tjBookLIst" :key="index">
<view class="videoBox demo-layout bg-purple" @click="goDetail(item)">
<image :src="item.images" mode="scaleToFill"></image>
<!-- <u-icon class="playButton" name="play-circle" color="#54a966" size="40"></u-icon> -->
</view>
<text class="bookName">{{item.name}}</text>
<!-- <view class="btns flexbox">
<view class="item flexbox" @click="goToListen(item)">
<u-icon name="volume" color="#71d5a1" size="24"></u-icon>
<text>听 书</text>
@@ -48,47 +54,47 @@
<text>评 书</text>
</view>
</view> -->
</u-col>
</u-row>
<u-divider v-else text="暂无推荐书籍~"></u-divider>
</view>
</view>
<u-divider v-else text="暂无买书籍数据~"></u-divider>
<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>
</u-col>
</u-row>
<u-divider v-else text="暂无推荐书籍~"></u-divider>
<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>
</view>
<u-divider v-else text="暂无买书籍数据~"></u-divider>
<music-play :playData="playData"></music-play>
<!-- <z-navigation></z-navigation> -->
</view>
</template>
<script>
import musicPlay from '@/components/music.vue'
import musicPlay from '@/components/music.vue'
import {
mapState
} from 'vuex';
export default {
data() {
return {
showEbook:false,
playData:{},
loadingNow : false,
bookList:[],
contentShow:0,
page:1, // 页码
showEbook: false,
playData: {},
loadingNow: false,
bookList: [],
contentShow: 0,
page: 1, // 页码
status: 3,
ygtotalPage:1,
tjPage:1,
tjTotalPage:1,
tjBookLIst:[],
ygtotalPage: 1,
tjPage: 1,
tjTotalPage: 1,
tjBookLIst: [],
contentButtonList: [{
name: '已购图书'
},
@@ -98,28 +104,29 @@
],
}
},
onLoad() {
onLoad() {
},
onShow() {
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()
}
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){
@@ -127,178 +134,161 @@
// console.log('加载',this.page)
// this.status = 0
// this.getfreeBook()
// }else{
// this.status = 1
// console.log('加载完成了',this.page)
// return
// }
// }
if(this.contentShow == 1){
if(this.tjPage < this.tjTotalPage){
if (this.contentShow == 1) {
if (this.tjPage < this.tjTotalPage) {
this.tjPage++
console.log('加载',this.tjPage)
console.log('加载', this.tjPage)
this.status = 0
this.getListDate()
}else{
} else {
this.status = 1
console.log('加载完成了',this.tjPage)
console.log('加载完成了', this.tjPage)
return
}
}
},
components:{
components: {
musicPlay
},
computed: {
...mapState(['userInfo'])
},
methods: {
methods: {
// 未购买图书，评书跳转
wgGoPingshu(item){
console.log('未购买评书',item)
if(item.bookId == null || item.bookId.length <= 0){
wgGoPingshu(item) {
console.log('未购买评书', item)
if (item.bookId == null || item.bookId.length <= 0) {
//uni.showModal()
uni.showModal({
title: '提示',
showCancel:false,
showCancel: false,
content: '当前未关联图书信息，请联系联系管理员',
success: function (res) {
success: function(res) {
if (res.confirm) {
console.log('好的');
}
}
}
});
}else{
} else {
uni.navigateTo({
url: '../comments/comments?bookid='+item.bookId[0],
url: '../comments/comments?bookid=' + item.bookId[0],
// url:'../bookShop/commodityDetail'
});
}
},
// 跳转到评书
goPingshu(val){
console.log('评书',val)
goPingshu(val) {
console.log('评书', val)
uni.navigateTo({
url: '../comments/comments?bookid='+val,
url: '../comments/comments?bookid=' + val,
// url:'../bookShop/commodityDetail'
});
},
contentButtonClick(e){
},
contentButtonClick(e) {
this.contentShow = e.index
},
// 获取已购买书籍
getfreeBook(){
getfreeBook() {
this.$http
.post('book/userebookbuy/buylist', {
// .post('book/buyorderdetail/querybuy', {
// .post('book/buyorderdetail/querybuy', {
'id': this.userInfo.id,
'page':this.page,
'limit':9
'page': this.page,
'limit': 9
})
.then(res => {
if(res.code == 0){
if (res.code == 0) {
// this.ygtotalPage = res.page.totalPage
res.page.forEach(item => {
if(item.canListen){
if (item.canListen) {
this.bookList.push(item)
}
})
// this.bookList = = this.bookList.concat(res.page.list)
console.log(res,'已购买')
// this.bookList = = this.bookList.concat(res.page.list)
console.log(res, '已购买')
this.status = 3
}
}
});
},
// 获取推荐图书（未购买）
getListDate(){
this.loadingNow = false
// 获取书架列表
getListDate() {
this.loadingNow = false
this.$http
.post('book/shopproduct/booklist', {
.post('book/book/getUserNobuyBooks', { // 磊哥新写
// .post('book/shopproduct/booklist', { // 原接口
'userId': this.userInfo.id,
// 'limit':9,
// 'page':this.tjPage
'limit': 9,
'page': this.tjPage
})
.then(res => {
console.log(res)
if(res.code == 0){
// this.tjTotalPage = res.pages.totalPage
var arr = []
if(res.pages.length > 0){
// for (var i=0; i<res.pages.length; i++ ) {
// var booidArr = []
// if(res.pages[i].product.bookId != null){
// booidArr = res.pages[i].product.bookId.split(',')
// res.pages[i].product.bookId = booidArr
// }else{
// res.pages[i].product.bookId = []
// }
// }
// res.pages.list.map((item) => {
// var ids = item.bookId.split(",")
// item.bookId = ids
// console.log(ids)
// console.log(item,666)
// arr.push(item)
// console.log(arr,888)
// })
// console.log(arr,444)
// }else{
// arr = []
// }
// console.log(res.pages.list,'res.pages.list')
this.tjBookLIst = res.pages
// var arr = res.pages.list
// this.tjBookLIst = this.tjBookLIst.concat(res.pages)
console.log(this.tjBookLIst[0].product,'this.tjBookLIst')
if (res.code == 0 && res.books.length > 0) {
console.log(res,'推荐听书列表')
this.tjBookLIst = res.books
var yu = res.count % 9
if(yu != 0){
this.tjTotalPage = parseInt(res.count / 9) + 1
}else{
this.tjTotalPage = parseInt(res.count / 9)
}
console.log(this.tjTotalPage,'tjTotalPage')
this.status = 3
} }
}else{
this.tjTotalPage = 0
this.status = 3
}
}).catch(e => {
console.log(e,'e')
});
},
// 跳转详情页
goDetail(item) {
console.log(item,'goDetail-----')
console.log(item, 'goDetail-----')
uni.navigateTo({
url: '../bookShop/commodityDetail?id=' + item.productId
});
},
goToListen(item){
if(item.bookId == null || item.bookId.length <= 0){
goToListen(item) {
if (item.bookId == null || item.bookId.length <= 0) {
//uni.showModal()
uni.showModal({
title: '提示',
showCancel:false,
showCancel: false,
content: '当前图书暂不支持试听',
success: function (res) {
success: function(res) {
if (res.confirm) {
console.log('好的');
}
}
}
});
}else{
uni.navigateTo({
url: "./listen?bookid="+item.bookId[0]
} else {
uni.navigateTo({
url: "./listen?bookid=" + item.bookId[0]
});
}
}
},
// 跳转到听书详情
goToListenFree(item){
goToListenFree(item) {
uni.navigateTo({
// url: "./musicbg?bookid="+item.bookid+"&fengImg="+item.image // 后台播放版本
url: "./listen?bookid="+item.bookId+"&fengImg="+item.image // 前台播放版本
url: "./listen?bookid=" + item.bookId + "&fengImg=" + item.image // 前台播放版本
// url: "./bgMusix"
});
},
@@ -314,55 +304,105 @@
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.contentButton{margin: 20rpx 0;}
.btns{margin-top: 15rpx; background-color: #f1f1f1; border-radius: 10rpx; font-size: 28rpx; justify-content: space-between;
.contentButton {
margin: 20rpx 0;
}
.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91;}
.bookName{
white-space: nowrap;
.btns {
margin-top: 15rpx;
background-color: #f1f1f1;
border-radius: 10rpx;
font-size: 28rpx;
justify-content: space-between;
}
.quesheng {
text-align: center;
margin-top: 100rpx;
color: #8b8a91;
}
.bookName {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
font-size: 30rpx; color: #333; padding: 10rpx 0;
font-size: 30rpx;
color: #333;
padding: 10rpx 0;
}
.videoBox{position: relative;
image{height: 290rpx;}
.videoBox {
position: relative;
image {
height: 290rpx;
}
}
.playButton{position: absolute; z-index: 1; right: 4px; bottom: 4px; padding: 5px; border-radius: 100%; }
.playButton {
position: absolute;
z-index: 1;
right: 4px;
bottom: 4px;
padding: 5px;
border-radius: 100%;
}
uni-image {
width:auto !important;
height: 350rpx;
width: auto !important;
height: 350rpx;
}
.u-row{flex-wrap: wrap;}
.u-col{overflow: hidden; margin-bottom:20rpx; }
.listenList{padding: 10rpx; box-sizing: border-box; width: calc(100% - 10rpx);}
.flexbox{display: flex;}
.u-row {
flex-wrap: wrap;
}
.u-col {
overflow: hidden;
margin-bottom: 20rpx;
}
.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;
}
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;
@@ -371,12 +411,12 @@
vertical-align: bottom;
margin: 0 20rpx 0 0;
}
text {
font-size: 32rpx;
font-weight: bold;
}
i {
float: right;
font-style: normal;
@@ -385,6 +425,7 @@
margin: 5rpx 35rpx 0 0;
}
}
.home_bg {
background-image: url('@/static/icon/home_bg.jpg');
background-position: center center;
@@ -392,13 +433,13 @@
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;
@@ -412,12 +453,12 @@
left: 50%;
bottom: -30rpx;
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;
@@ -429,4 +470,4 @@
}
}
}
</style>
</style>