首页+图书详情

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

View File

@@ -315,11 +315,13 @@
methods: {
// 根据bookid查询商品id
getProid(){
console.log(this.bookid,'this.bookid传过来的值')
this.$http
.post('book/shopproduct/bookinfo/' + this.bookid)
.then(res => {
if (res.code == 0) {
this.shangIDNum = res.shopProduct.productId
console.log(this.shangIDNum,'this.shangIDNum')
// console.log(res,'详情res')
this.getShangList(this.shangIDNum);
this.getData()

View File

@@ -1,10 +1,10 @@
<template>
<view style="background-color: #fff;padding: 30rpx;">
<z-nav-bar title="电子书详情"></z-nav-bar>
<view class="book_neir">
<img :src="bookMessage.images" class="bn_img">
<b class="leiXing" v-if="bookMessage.isVip==1" style="background: #c79119;">VIP</b>
<b class="leiXing" v-if="bookMessage.isVip==2" style="background: #c74119;">付费</b>
<view class="book_neir flexbox">
<view class="bn_img">
<img :src="bookMessage.images" mode="scaleToFill">
</view>
<view class="bn_nes">
<view style="font-weight: bold;margin-bottom: 30rpx;">
{{bookMessage.name}}
@@ -13,186 +13,93 @@
<p @click="onAuCHJump(bookMessage.authorId,1)" style="margin-bottom: 20rpx;">
{{bookMessage.authorName}} [] >
</p>
<p @click="onAuCHJump(item.id,2)" v-for="item in this.bookMessage.publisherNIList">
<!-- <p @click="onAuCHJump(item.id,2)" v-for="item in this.bookMessage.publisherNIList">
{{item.title}} >
</p>
</p> -->
</view>
<view v-if="this.bookMessage.chapterNum!=null"
style="color: #cdcdcd;font-size: 20rpx;margin:20rpx 0 0 0;max-width: 400rpx;line-height: 36rpx;">
上次阅读到{{this.bookCatalogue[this.bookMessage.chapterNum-1].chapterName}}
<view class="tags">
<uni-tag @click="gotoListen()" class="tag" v-if="bookMessage.canListen" :inverted="true" text="听书" type="primary"></uni-tag>
<uni-tag class="tag" @click="toMore()" :inverted="true" text="书评" type="success"></uni-tag>
<!-- 1:打卡2不打卡 -->
<uni-tag @click="gotoclock()" v-if="bookMessage.clockIn == 1" class="tag" :inverted="true" text="签到" type="warning"></uni-tag>
</view>
<view class="buy" v-if="!bookMessage.isBuy">
<view class="btn" @click="goBuy">
立即购买
</view>
</view>
</view>
<br clear="both">
</view>
<view class="book_dredge" @click="onPageJump('../peanut/opeVip')" v-if="bookMessage.isVip!=0&&this.userMes.vip==0">
<image src="../../static/icon/mine_p.png" alt=""></image>
开通会员免费读本书
<b>></b>
</view>
<view class="book_dredge book_vip" v-if="this.userMes.vip==1">
<image src="../../static/icon/mine_v.png" alt=""></image>
尊享会员权益中
</view>
<view class="book_tab">
<view>
<u-tabs :list="tab_list" @click="tab_click" lineColor="#54a966 100% 100%"
:activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.1)'}"></u-tabs>
</view>
<view class="head_line">
<b></b>
<text>简介</text>
</view>
<view class="bt_cont">
<view v-if="tab_muJian==0" class="bt_jian">
<view class="bt_jian" v-if="bookMessage.description != ''">
<text>
{{bookMessage.description}}
</text>
</view>
<view v-if="tab_muJian==1">
<p style="text-align: right;color: #a5a5a5;margin-bottom: 10rpx;">
{{bookCatalogue.length}}</p>
<view class="bt_nulu" v-for='(item,index) in bookCatalogue'>
<!-- 最近阅读的 -->
<view @click="onBokReadJump(index)" v-if="bookMessage.isBuy==1" style="display: flex;justify-content: space-between;">
{{item.chapterName}}
<font v-if="bookMessage.chapterId==index">最近阅读</font>
</view>
<view v-if="bookMessage.isBuy==0">
<view @click="onBokReadJump(index)" v-if="index<bookMessage.freeChapterCount">
{{item.chapterName}}
<font v-if="bookMessage.chapterId==index">最近阅读</font>
</view>
<view v-if="index>=bookMessage.freeChapterCount" @click="collectFee()">
<!-- 不是会员显示锁 -->
<font style=" color:#bfa853;margin-left: 20rpx;">
<u-icon name="lock" color="#ccc" size="20" v-if="bookMessage.isBuy!==1"></u-icon>
</font>
{{item.chapterName}}
</view>
<view
</view>
</view>
<u-divider v-else text="暂无简介信息"></u-divider>
<view class="head_line" style="margin-bottom:30rpx;">
<b></b>
<text>精彩试听</text>
</view>
<view class="playList" v-if="libLIst.length > 0">
<view class="item" v-for="(item,index) in libLIst" :key="index" >
<view >
<view v-if="3 > index"
:class="[freeChapterCount < index ? 'graytitle' : '',
userInfo.playingInfo.bookid==item.bookid && userInfo.playingInfo.chapterId == item.chapterId ? 'playing' : '']" @click="listenOne(item, index)">
<span :class="[freeChapterCount-1 < index ? 'graytitle' : '']">{{item.chapterName}}</span>&nbsp;&nbsp;
<uni-tag v-if="freeChapterCount-1 >= index" class="tag" size="small" :inverted="true" text="试听" type="success" />
<!-- <image class="playingFig" src="/static/playingGif.gif" mode="aspectFill"></image> -->
</view>
</view>
<view style="height: 60rpx;"></view>
</view>
</view>
<u-divider v-else text="暂无试听数据"></u-divider>
<view class="head_line" style="margin-bottom:30rpx;">
<b></b>
<text>热门书评</text>
</view>
<view class="list shupingList" v-if="shupingList.length > 0">
<view class="item" @click.stop="toDetail(item)" v-for="item in shupingList" :key="item.id">
<h4>{{item.title}}</h4>
<view class="info" v-if="item.content != ''" v-html="item.content">
</view>
<view class="more" @click.stop="toDetail(item)">立即查看</view>
</view>
<view class="moreBtn" @click="toMore(item)">
<text>查看更多</text>
</view>
</view>
</view>
<view class="book_caozuo">
<view v-if="this.bookMessage.flag" style="color: #aaa;">已加入书架</view>
<view v-if="!this.bookMessage.flag" @click="joInshelf">加入书架</view>
<view @click="onBokReadJump(0)" v-if="this.bookMessage.isBuy==1&&this.bookMessage.chapterId==null">开始阅读</view>
<view @click="onBokReadJump(bookMessage.chapterNum-1)" v-if="this.bookMessage.isBuy==1&&this.bookMessage.chapterId!=null">
继续阅读
</view>
<view @click="onBokReadJump(0)" v-if="this.bookMessage.isBuy==0&&this.bookMessage.chapterNum==null&&this.bookMessage.freeChapterCount!=0">开始试读</view>
<view @click="onBokReadJump(bookMessage.chapterNum-1)" v-if="this.bookMessage.isBuy==0&&this.bookMessage.chapterNum!=null&&this.bookMessage.freeChapterCount!=0">继续试读</view>
<view v-if="this.bookMessage.isBuy==0&&this.bookMessage.freeChapterCount==0">购买阅读</view>
<view @click="buyShowFun" v-if="bookMessage.isBuy==0" style="background-color: #d85f54;">立即购买</view>
<view v-if="bookMessage.isBuy==1&&bookMessage.isVip!=0" style="background-color: #bfa853;">已购买</view>
<view v-if="bookMessage.isVip==0">本书免费</view>
</view>
<!-- 购买 -->
<u-popup :show="buyShow" :round="10" @close="buyShow=false" :closeable='true'>
<view class="tanchu">
<view class="by_title">购买</view>
<view class="by_package">
<view v-if="userMes.vip==0" :class="typeFen== 1?'Tab_by by_fen':'by_fen'" @click="chBuyType(1)">
<view class="biao">开通会员</view>
<view class="wenz">
连续包月
<text>节省{{bookMessage.salePrice}}疯币</text>
</view>
</view>
<br>
<view :class="typeFen== 2?'Tab_by by_fen':'by_fen'" @click="chBuyType(2)">
<view class="biao" v-if="userMes.vip==0">直接购买</view>
<view class="biao" v-if="userMes.vip==1">会员权益购买</view>
<view class="benl">
<b v-if="useCouponAmount != ''">{{useCouponAmount}}</b>
<span v-else>
<b v-if="bookMessage.isSale==1">{{bookMessage.salePrice}}</b>
<b v-if="bookMessage.isSale==0||bookMessage.isSale==null">{{bookMessage.price}}</b></span>
疯币
<text>{{bookMessage.price}}疯币</text>
</view>
</view>
<!-- 优惠券 ------------------------>
<view class="yq_youhui" @click="CyouhuiShow" style="margin-top:20px;">
<u-icon name="red-packet-fill" color="#e74141" size="18" class="yqLeft"></u-icon>
优惠券
<u-icon name="arrow-right" color="#aaa" size="18" class="yqRight"></u-icon>
<text class="dagnqian"
v-if="youhuiList.length>0&&youhuiContent.id==undefined">当前可选{{this.youhuiList.length}}</text>
<text class="dagnqian" v-if="youhuiList.length==0&&youhuiContent.id==undefined"
style="background-color: #999;">暂无优惠券</text>
<text class="dagnqian" v-if="youhuiContent.id!=undefined">
- {{youhuiContent.coupons.couponAmount}}</text>
</view>
</view>
<view style="height: 1px;width: 100%;background-color: #eee;margin-top: 50rpx;"></view>
<view style="margin: 40rpx 10rpx 20rpx 10rpx;font-size: 30rpx;">
<view style="float: left;">余额</view>
<view style="float: right;color: #999;">
{{userMes.peanutCoin}} 疯币
<view class="chongBtn" @click="buPoint()">充值疯币</view>
</view>
<br clear="both">
</view>
<view style="color: #c3c3c3;font-size: 20rpx;margin: 30rpx 0;">支付成功后立即解锁已购内容</view>
<view @click="buyVip()" v-if="typeFen== 1" class="by_btn">查看套餐开通VIP</view>
<view @click="buyMoneTip()" v-if="typeFen== 2" class="by_btn">购买本书</view>
</view>
</u-popup>
<u-modal :show="buysignShow" :content="buysignContent" :showCancelButton="true" @cancel="cancelMoney"
@confirm="buyMoney">
</u-modal>
<u-divider v-else text="暂无书评数据"></u-divider>
</view>
<view>
<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
</view>
<!-- 优惠券弹1出 -->
<u-popup :show="youhuiShow" :round="10" @close="hideyouhui">
<view class="tanchu">
<view class="dp_title">请选择优惠券</view>
<view style="max-height: 1000rpx;overflow-y: scroll;">
<span @click="clearYouhui" style="font-size: 14px; display:inline-block;border: 1px solid #c74119; border-radius: 5px; float: right; color:#c74119; padding: 5px; margin-bottom: 10px;">不使用优惠券</span>
<view :class="youhuiIndex === index ? 'youhuiItem youItem_style' : 'youhuiItem'"
v-for="(item,index) in youhuiList" :key="index" @click="choseYouhui(index)">
<view style="width: 25%;color:#fd6004;text-align: center;">
<text></text>
<b style="font-size: 45rpx;">{{item.coupons.couponAmount}}</b>
<text
style="display: block;color: #666;font-size: 25rpx;margin-top: 10rpx;">{{item.coupons.useLevel}}元可用</text>
</view>
<view style="width: 68%;padding-left: 5%;">
<text>{{item.coupons.couponName}}</text>
<text
style="display: block;font-size: 20rpx;color: #999;margin-top: 10rpx;">到期时间{{item.coupons.expirationDate}}</text>
</view>
<view style="width: 7%;">
<text
style="border: 1px solid #d9d9d9;width: 35rpx;height:35rpx;display:inline-block;border-radius: 30rpx;"
v-if="youhuiIndex !== index"></text>
<u-icon name="checkmark-circle-fill" color="#fd6004" size="20" v-if="youhuiIndex === index">
</u-icon>
</view>
<br clear="both">
</view>
</view>
<view style="font-size: 20rpx;color: #aaa;margin-top: 30rpx;">* 每笔订单只能使用一张优惠价</view>
</view>
</u-popup>
</view>
<music-play :playData="playData"></music-play>
</view>
</template>
<script>
import musicPlay from '@/components/music.vue'
import $http from '@/config/requestConfig.js';
import {
mapState
mapState,mapMutations
} from 'vuex';
export default {
data() {
return {
playData:{},
youhuiShow:false,
youhuiIndex:'',
youhuiList:[], // 优惠券列表
@@ -229,7 +136,11 @@
typeFen: 1,
buyShow: false,
buysignShow: false,
buysignContent: ''
buysignContent: '',
libLIst:[],
freeChapterCount:0,
isBuy:false,
shupingList:[],
};
},
@@ -249,24 +160,24 @@
onShow() {
this.getData();
},
components: {
musicPlay
},
//方法
methods: {
...mapMutations(['setUserInfo']),
getData() {
// 获取电子书详情
this.$http
.post('book/book/appinfo/' + this.bookId + '/' + this.userInfo.id)
.then(res => {
console.log('书详细',res.book)
this.bookMessage = res.book
this.bokMesDet.bookId = res.book.id
this.bokMesDet.bookName = res.book.name,
this.bokMesDet.images = res.book.images
if (this.bookMessage.isSale == 1) {
this.buysignContent = '您确定要花费' + this.bookMessage.salePrice + '疯币购买' + this.bokMesDet
.bookName + '吗?'
} else {
this.buysignContent = '您确定要花费' + this.bookMessage.price + '疯币购买' + this.bokMesDet
.bookName + '吗?'
}
this.bokMesDet.images = res.book.images
this.isBuy = res.book.isBuy
this.freeChapterCount = res.book.freeChapterCount
this.bokMesDet.userId = this.userInfo.id
@@ -292,113 +203,99 @@
});
// 获取电子目录
this.$http
.post('book/book/getBookCatalogue', {
'bookid': this.bookId
})
.then(res => {
this.bookCatalogue = res.bookCatalogue
});
// 用户详情
if (this.userInfo.id != undefined) {
this.$http
.post('book/user/info/' + this.userInfo.id)
.then(res => {
this.userMes = res.user
if (this.userMes.vip != 0) {
this.typeFen = 2
}
});
}
this.getLibList()
// 获取
this.getComments()
},
// 加入书架
joInshelf() {
const that = this;
$http.request({
url: "book/bookshelf/save",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: that.bokMesDet,
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
}).then(function(res) {
if (res.code == 0) {
uni.showToast({
title: '加入书架成功'
})
that.bookMessage.flag = true
}
}).catch(function(error) {
//这里只会在接口是失败状态返回,不需要去处理错误提示
console.log(error);
// 去听书
gotoListen(){
uni.navigateTo({
url: "../listen/listen?bookid="+ this.bookId
});
},
// 点击tab
tab_click(e) {
this.tab_muJian = e.index
// 去打卡
gotoclock(){
this.onPageJump('../clock/clock?bookid='+ this.bookId)
},
CyouhuiShow(){
this.youhuiShow = true
this.getCourpe()
this.buyShow = false // 隐藏购买弹窗
// 查看本书更多书评
toMore(val){
console.log(val,'val')
uni.navigateTo({
url: '../comments/comments?bookid='+ this.bookId,
});
},
buyShowFun(){
this.buyShow = true
this.getCourpe()
// 去购买
goBuy(){
uni.navigateTo({
url: '../bookShop/settlementBook?type=2&list=' + this.bookId
});
},
hideyouhui(){
this.youhuiShow = false,
this.buyShow = true // 隐藏购买弹窗
},
clearYouhui(){
this.youhuiContent = {}
this.youhuiIndex = ''
this.useCouponAmount = ''
this.getData()
this.youhuiShow = false
this.buyShow = true // 隐藏购买弹窗
//this.couponMz = 0
},
// 选择优惠券
choseYouhui(e) {
this.youhuiIndex = e
this.youhuiContent = this.youhuiList[this.youhuiIndex]
console.log(this.youhuiContent, 'youhuiContent')
//this.couponMz = this.youhuiContent.coupons.couponAmount
if (this.bookMessage.isSale == 0) {
this.useCouponAmount = this.bookMessage.price - this.youhuiContent.coupons.couponAmount
} else {
this.useCouponAmount = this.bookMessage.salePrice - this.youhuiContent.coupons.couponAmount
// 获取书评
getComments(){
let data = {
'page': 1,
'limit': 3,
'bookid' : this.bookId
}
this.buysignContent = '您确定要花费' + this.useCouponAmount + '疯币购买' + this.bokMesDet.bookName + '吗?'
// this.getData()
this.youhuiShow = false
this.buyShow = true // 隐藏购买弹窗
},
// 获取优惠券列表
getCourpe() {
let bookJiage = 0
if (this.bookMessage.isSale == 0) {
bookJiage = this.bookMessage.price
} else {
bookJiage = this.bookMessage.salePrice
}
this.bookJiageA = bookJiage
this.$http
.post('book/couponhistory/appGetUserCoupon?userId=' + this.userInfo.id + '&amount=' + this.bookJiageA + '&type=1' )
.then(res => {
this.youhuiList = res.userCoupons
});
.post('forum/articles/descupdatelist', data)
.then(res => {
console.log(res.page.list,'评论获取成功')
this.shupingList = res.page.list
}).catch((e)=>{
console.log(e,'e')
})
},
// 播放单个音频
listenOne(item,index){
console.log('点击了',index)
if(this.libLIst.length > 0){
this.setUserInfo({'playIndex': index})
this.$music.setList(this.libLIst,'autoPlay',index)
this.setUserInfo({'playVisible': true})
uni.setStorage({
key: 'playVisible',
data: true,
success: function () {
console.log('success');
}
});
// 本地存储播放列表
uni.setStorage({
key: 'playData',
data: {'myList':this.libLIst},
success: function () {
console.log('success');
}
});
// 系统暂存
this.setUserInfo({'myList':this.libLIst})
}
},
// 获取章节列表
getLibList(){
this.$http
.post('book/book/getBookCatalogue', {
'userid': this.userInfo.id,
'bookid': this.bookId,
// 'id': this.playid
})
.then(res => {
if(res.code == 0){
console.log(res,999)
if(res.BookCatalogue.length > 0){
this.libLIst = res.BookCatalogue
// this.fengImg = res.images
}
}
}).catch((e)=>{
console.log(e.msg)
})
},
// 跳转
onPageJump(url) {
uni.navigateTo({
@@ -406,55 +303,13 @@
});
},
// 电子书阅读跳转
onBokReadJump(e) {
const that = this;
// 加入阅读记录
$http.request({
// 存数据
url: "book/bookbrowserecords/save",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: that.bokMesDet,
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
}).then(function(res) {
if (res.code == 0) {
console.log(res,'========');
if (res.browseRecordsId) {
$http.request({
// 更新
url: "book/bookbrowserecords/update",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
'bookShelfId': res.browseRecordsId
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
}).then(function(res) {
if (res.code == 0) {
uni.navigateTo({
url: '../yRead/angbook?Id=' + that.bookId + '&cha=' + e
});
}
}).catch(function(error) {
//这里只会在接口是失败状态返回,不需要去处理错误提示
console.log(error);
});
} else {
uni.navigateTo({
url: '../yRead/angbook?Id=' + that.bookId + '&cha=' + e
});
}
}
}).catch(function(error) {
//这里只会在接口是失败状态返回,不需要去处理错误提示
console.log(error);
});
// 书评详情
toDetail(val){
console.log(val,'val')
uni.navigateTo({
url:'../comments/commentsDetail?bookid='+val.bookid+'&bfa_id='+val.id
})
},
// 信息介绍跳转
onAuCHJump(id, e) {
uni.navigateTo({
@@ -462,88 +317,8 @@
});
},
// 提示购买
collectFee() {
uni.showToast({
icon: 'none',
title: '请购买本书'
})
},
// 充值疯币
buPoint() {
uni.navigateTo({
url: '../peanut/reCharge'
});
},
// 选择vip还是直接购买
chBuyType(e) {
let that = this
that.typeFen = e
},
// 开通VIP
buyVip() {
uni.navigateTo({
url: '../peanut/opeVip'
});
},
// 购买本书
buyMoneTip() {
let bookJiage = 0
if (this.bookMessage.isSale == 0) {
bookJiage = this.bookMessage.price
} else {
bookJiage = this.bookMessage.salePrice
}
// this.bookJiageA = bookJiage
if (bookJiage > this.userMes.peanutCoin) {
uni.showToast({
icon: 'none',
title: '余额不足,请充值'
})
} else {
this.buysignShow = true
this.buyShow = false
}
},
buyMoney() {
let couponId = ''
if(this.youhuiContent.coupons.id != 0){ // 使用了优惠券
couponId = this.youhuiContent.coupons.id
}else{ // 未使用
couponId = '0'
}
console.log(this.youhuiIndex, this.youhuiContent.coupons.id, couponId)
this.$http
.post('book/user/buyEbook?bookId=' + this.bokMesDet.bookId + '&userId=' + this.userInfo.id + '&couponId=' + couponId)
.then(res => {
if (res.code == 0) {
if (res.status == 'error') {
this.buysignShow = false
uni.showToast({
icon: 'none',
title: res.msg
})
} else {
uni.showToast({
title: '购买成功'
})
this.buyShow = false
this.buysignShow = false
this.getData();
}
}
});
},
cancelMoney() {
this.buysignShow = false
this.buyShow = true
},
@@ -552,6 +327,54 @@
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.playing{color: #1daa5c;}
.flexbox{display: flex;}
.tags{
}
.moreBtn{text-align: center; margin-top: 20rpx;
text{padding: 6rpx 20rpx; border: 1px solid #27b386; color: #27b386; border-radius: 10rpx;}
}
.buy{ text-align: right;
.btn{display: inline-block; padding: 6rpx 8rpx; font-size: 36rpx; color: #d75f54; border: 1px solid #d75f54; border-radius: 10rpx;}
}
.shupingList{
h4{font-size: 36rpx;}
.item{padding: 30rpx 20rpx; padding-bottom: 60rpx; border-bottom: 20rpx solid #eee; border-radius: 46rpx;}
.more{display: inline-block; margin-top: 20rpx; padding: 3rpx 5rpx; color: #27b386; border: 1px solid #27b386; border-radius:8rpx;}
.info{line-height:40rpx ; font-size: 26rpx; margin-top: 20rpx; height: 80rpx; overflow: hidden; }
}
.playList{padding: 20rpx; color: #666; }
.playList .item{display: block;line-height:60rpx; white-space: nowrap;
overflow-x: hidden; font-size: 36rpx;
text-overflow: ellipsis;}
.tag{margin-left: 20rpx;}
.head_line {
margin: 50rpx 0 0 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;
}
}
.yq_youhui {
.yqLeft {
display: inline-block;
@@ -587,13 +410,15 @@
.bn_img {
float: left;
width: 250upx;
height: 320upx;
img{width: 250upx;
height: 320upx;}
}
.bn_nes {
float: left;
width: 100%;
font-size: 36rpx;
margin-left: 40rpx;
@@ -653,8 +478,8 @@
margin: 20rpx 0 0 0;
.bt_cont {
font-size: 26rpx;
line-height: 42rpx;
font-size: 34rpx;
line-height: 60rpx;
color: #666;
padding: 0 10rpx;

View File

@@ -159,9 +159,9 @@
// 电子书内容跳转
onBookJump(e) {
// uni.navigateTo({
// url: './bookContent?Id=' + e.id
// });
uni.navigateTo({
url: './bookContent?Id=' + e.id
});
},
},

View File

@@ -191,7 +191,10 @@
.post('book/book/appinfo/' + this.bookid + '/' + this.userInfo.id)
.then(res => {
if(res.code == 0){
console.log(res,'res')
this.bookInfo = res.book
this.isBuy = res.book.isBuy
this.freeChapterCount = res.book.freeChapterCount
}else{
console.log(res.msg)
}
@@ -426,9 +429,7 @@
console.log(res,999)
if(res.BookCatalogue.length > 0){
this.libLIst = res.BookCatalogue
// this.fengImg = res.images
this.isBuy = res.buy
this.freeChapterCount = res.freeChapterCount
// this.fengImg = res.images
}else{
uni.showToast({
title:'暂无可听章节哦~',

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>