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

161
pages/listen/home.vue
View File

@@ -11,7 +11,10 @@
</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">
@@ -31,13 +34,16 @@
</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">
接口正在调试
</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"> <u-col span="4" v-for="(item,index) in tjBookLIst" :key="index">
<view class="videoBox demo-layout bg-purple" @click="goDetail(item.product)"> <view class="videoBox demo-layout bg-purple" @click="goDetail(item)">
<image :src="item.product.productImages" mode="scaleToFill" ></image> <image :src="item.images" 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.product.productName}}</text> <text class="bookName">{{item.name}}</text>
<!-- <view class="btns flexbox"> <!-- <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>
@@ -51,10 +57,6 @@
</u-col> </u-col>
</u-row> </u-row>
<u-divider v-else text="暂无推荐书籍~"></u-divider> <u-divider v-else text="暂无推荐书籍~"></u-divider>
</view>
</view>
<u-divider v-else text="暂无买书籍数据~"></u-divider>
<view> <view>
<view v-if="status==0" style="text-align: center;"> <view v-if="status==0" style="text-align: center;">
<u-loading-icon style="display: inline-block;"></u-loading-icon> <u-loading-icon style="display: inline-block;"></u-loading-icon>
@@ -64,6 +66,10 @@
<u-divider text="全部加载完成"></u-divider> <u-divider text="全部加载完成"></u-divider>
</view> </view>
</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> -->
@@ -99,6 +105,8 @@
} }
}, },
onLoad() { onLoad() {
},
onShow() {
this.getListDate() this.getListDate()
this.getfreeBook() this.getfreeBook()
}, },
@@ -109,8 +117,7 @@
// 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()
@@ -222,50 +229,33 @@
// 获取推荐图书（未购买） // 获取推荐图书（未购买）
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')
}); });
}, },
// 跳转详情页 // 跳转详情页
@@ -314,43 +304,92 @@
<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;
}
.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;}
.quesheng {
text-align: center;
margin-top: 100rpx;
color: #8b8a91;
}
.bookName { .bookName {
white-space: nowrap; 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;
.videoBox{position: relative; padding: 10rpx 0;
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 { .scroll-view_H {
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
} }
.scroll-view-item { .scroll-view-item {
height: 300rpx; height: 300rpx;
line-height: 300rpx; line-height: 300rpx;
text-align: center; text-align: center;
font-size: 36rpx; font-size: 36rpx;
} }
.scroll-view-item_H { .scroll-view-item_H {
display: inline-block; display: inline-block;
width: 60%; width: 60%;
@@ -359,6 +398,7 @@
text-align: center; text-align: center;
font-size: 36rpx; font-size: 36rpx;
} }
.head_line { .head_line {
margin: 50rpx 0; margin: 50rpx 0;
@@ -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;