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