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-18 18:05:27 +08:00
parent 21029b054c
commit 8ebf79f301
5 changed files with 331 additions and 439 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
pages/peanut/home.vue
View File

@@ -186,31 +186,48 @@
</view>
<view class="head_line">
<view class="head_line" style="margin-bottom: 10px;">
<b></b>
<text>精选商品</text>
<text>精选图书</text>
<!-- <i @click="onShopMore('Hot')">查看更多 ></i> -->
<i @click="onPageJump('../bookShop/classify')">查看更多 ></i>
<!-- <i @click="onPageJump('../bookShop/classify')">查看更多 ></i> -->
</view>
<!-- 商品展示 -->
<view class="goods">
<view class="goodsItem" v-for="(item,index) in goodsList" :key="item.productId"
@click="goDetail(item.productId)">
<image :src="item.productImages" mode="" class="goodsImg"></image>
<view class="goodsItem flexbox" v-for="(item,index) in goodsList" :key="item.productId"
>
<view class="imgs" @click="onBookJump(item)">
<image v-if="item.images != ''" :src="item.images" mode="" class="goodsImg"></image>
<image v-else src="../../static/icon/home_bg.jpg" class="goodsImg"></image>
</view>
<view class="goodsContent">
<view class="goodsName">
{{item.productName}}
<span>{{item.name}}</span>
</view>
<view class="goodsPrice">
<span class="price">￥{{item.price}}</span>
<span class="Salesnum">已售：{{item.sumSales}} 件</span>
<view class="tags">
<uni-tag v-if="item.canListen" style="margin-right: 10rpx;" @click="gotoListen(item)" class="tag" :inverted="true" text="听书" type="primary"></uni-tag>
<uni-tag style="margin-right: 10rpx;" class="tag" @click="gotopingshu(item)" :inverted="true" text="书评" type="success"></uni-tag>
<!-- 1:打卡，2不打卡 -->
<uni-tag v-if="item.clockIn == 1" style="margin-right: 10rpx;" @click="gotoclock(item)" class="tag" :inverted="true" text="签到" type="warning"></uni-tag>
</view>
<view class="flexbox" style="margin-top: 20rpx; color: #5f5f5f;">
<view class="">
<span v-if="item.authorName">{{item.authorName}} &nbsp; &nbsp;</span>
<span v-if="item.publisherName">&nbsp; &nbsp;/&nbsp; {{item.publisherName}} &nbsp;</span>
</view>
</view>
</view>
</view>
<br clear="both">
</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>
<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
@@ -238,6 +255,9 @@
transaction: { // 成功回调
},
status:3,
jPage:1,
jTotal:0,
scrollLeft:0,
maxTimes:1, // 轮询最大次数
ComplateRequestInterval:null, // 轮询定时器
@@ -279,6 +299,7 @@
onShow() {
// 隐藏原生的tabbar
uni.hideTabBar();
this.goodsList = []
this.getData();
@@ -289,12 +310,28 @@
},
// 下拉刷新
onPullDownRefresh() {
console.log('下拉刷新')
this.jPage = 1
this.goodsList = []
this.getData()
uni.stopPullDownRefresh()
this.requestIapOrder()
},
onHide() {
this.jPage = 1
this.goodsList = []
},
onReachBottom() {
console.log('到底了')
if(this.jPage+1 <= this.jTotal){
this.jPage++
this.getJBook()
}else{
this.status = 1
}
},
filters: {
// 控制字数
ellipsis(value) {
@@ -317,7 +354,21 @@
//方法
methods: {
...mapMutations(['setUserInfo']),
gotopingshu(val){
uni.navigateTo({
url: '../comments/comments?bookid='+ val.id,
});
},
// 去打卡
gotoclock(item){
this.onPageJump('../clock/clock?bookid='+ item.id )
},
// 去听书
gotoListen(item){
uni.navigateTo({
url: "../listen/listen?bookid="+ item.id
});
},
// 新书上市
getNewBook(){
this.$http
@@ -511,17 +562,27 @@
// this.seckillList = null
})
// 获取精选商品
this.$http
.post('book/shopproduct/appGetList?limit=30&page=1&istop=1')
.then(res => {
console.log(res.page.list,'首页商品')
this.goodsList = res.page.list
})
// 获取精选图书
this.getJBook()
this.getNewBook()
},
// 获取精选图书
getJBook(){
this.$http
.post('book/book/listbooks',{
'limit':6,
'page': this.jPage
})
.then(res => {
console.log(res,'首页商品')
this.jTotal = res.page.totalPage
this.goodsList = this.goodsList.concat(res.page.list)
console.log(this.goodsList,'this.goodsList')
this.status = 3
uni.stopPullDownRefresh()
})
},
// 跳转
onPageJump(url) {
uni.navigateTo({
@@ -551,9 +612,9 @@
// 电子书内容跳转
onBookJump(e) {
uni.navigateTo({
url: '../eBook/bookContent?Id=' + e.bookid
url: '../eBook/bookContent?Id=' + e.id
});
},
},
// 商品详情页
goDetail(id) {
uni.navigateTo({
@@ -583,6 +644,9 @@
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.tags{
uni-tag{margin-right: 10rpx;}
}
.newBook{margin-top: 20rpx;}
.scroll-view_H{background-color: #fff;white-space: nowrap;
width: 100%; padding:10rpx ; }
@@ -966,25 +1030,29 @@
width: 100%;
margin:40rpx 0 50rpx 0;
.goodsItem {
display: inline-block;
width: 46%;
.goodsItem {
border-radius: 20rpx;
padding: 25rpx 25rpx 20rpx 25rpx;
margin: 0 20rpx 20rpx 20rpx;
background-color: #fff;
border: 1px solid #eee;
.goodsImg {
width: 98%;
height: 380rpx;
.imgs {
width: 200rpx;
height: 260rpx; overflow: hidden;
border-radius: 10rpx;
image{width: 200rpx;
height: 260rpx; overflow: hidden;}
}
.goodsContent {
padding-left: 46rpx;
.goodsName {
color: #131313;
margin-top: 10rpx;
margin-bottom: 37rpx;
font-size: 30rpx;
font-weight: bold;
}
@@ -1001,9 +1069,5 @@
}
}
}
.goodsItem:nth-child(2n) {
margin-left: 0;
}
}
</style>