275 lines
6.0 KiB
Vue
275 lines
6.0 KiB
Vue
<template>
|
||
<view>
|
||
<z-nav-bar title="读书打卡"></z-nav-bar>
|
||
<view class="" style="padding:40rpx 20rpx;">
|
||
<view class="mytabs flexbox">
|
||
<view :class="['item','item1', contentShow == 1 ? 'active' :'']" @click="setData(1)">
|
||
已购图书
|
||
</view>
|
||
<view :class="['item','item2', contentShow == 2 ? 'active' :'']" @click="setData(2)">
|
||
推荐图书
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tip">
|
||
<text>请选择要打卡的书籍：</text>
|
||
</view>
|
||
<view class="listenList" v-if="bookList.length > 0">
|
||
<view class="wrap" >
|
||
<u-row gutter="16" justify="flex-start">
|
||
<u-col span="4" v-for="(item,index) in bookList" :key="index">
|
||
<view class="videoBox demo-layout bg-purple" @click="goToClock(item)">
|
||
<image v-if="item.images != ''" :src="item.images" mode="scaleToFill" ></image>
|
||
<image v-else src="../../static/icon/wufeng.jpg" mode="scaleToFill" ></image>
|
||
</view>
|
||
<text class="bookName">{{item.name}}</text>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
<u-divider text="当前无可打卡书籍~"></u-divider>
|
||
</view>
|
||
<music-play :playData="playData"></music-play>
|
||
<z-navigation></z-navigation>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState
|
||
} from 'vuex';
|
||
import musicPlay from '@/components/music.vue'
|
||
export default {
|
||
data() {
|
||
return {
|
||
playData:{},
|
||
bookList:[],
|
||
page:1, // 页码
|
||
contentShow: 1,
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getfreeBook()
|
||
},
|
||
methods: {
|
||
setData(e) {
|
||
this.contentShow = e
|
||
this.getfreeBook()
|
||
},
|
||
// 跳转到打卡页面
|
||
goToClock(val){
|
||
if(val.clockIn != 1){
|
||
uni.showModal({
|
||
title: '提示',
|
||
cancelText: '暂不购买',
|
||
confirmText:'立即购买',
|
||
content: '购买后才可参与本书打卡哦~',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
console.log('点击了去购买');
|
||
}
|
||
}
|
||
});
|
||
}else{
|
||
console.log(val,'val')
|
||
this.onPageJump('../clock/clock?bookid='+val.id)
|
||
}
|
||
|
||
},
|
||
|
||
// 获取打卡图书
|
||
getfreeBook(){
|
||
if(this.contentShow == 1){
|
||
this.$http.post('book/clockinPunch/myClockBooks', {
|
||
'userId': this.userInfo.id,
|
||
limit: 100,
|
||
page:1,
|
||
}).then(res => {
|
||
if(res.code == 0){
|
||
//this.ygtotalPage = res.resultlist.totalCount
|
||
this.bookList = res.page.records
|
||
console.log(this.bookList,'打卡列表')
|
||
// this.status = 3
|
||
}
|
||
});
|
||
} else {
|
||
this.$http.post('book/clockinPunch/getBestClockBooks', {
|
||
'userId': this.userInfo.id,
|
||
limit: 100,
|
||
page:1,
|
||
}).then(res => {
|
||
if(res.code == 0){
|
||
//this.ygtotalPage = res.resultlist.totalCount
|
||
this.bookList = res.page.records
|
||
console.log(this.bookList,'打卡列表')
|
||
// this.status = 3
|
||
}
|
||
});
|
||
}
|
||
},
|
||
// 跳转
|
||
onPageJump(url) {
|
||
uni.navigateTo({
|
||
url: url
|
||
});
|
||
},
|
||
},
|
||
computed: {
|
||
...mapState(['userInfo'])
|
||
},
|
||
components: {
|
||
musicPlay,
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/style/mixin.scss';
|
||
|
||
.mytabs {
|
||
// background: url('@/static/icon/bgtushu.png') no-repeat left top;
|
||
height: 80rpx;
|
||
// margin-bottom: 30rpx;
|
||
|
||
.item {
|
||
border-radius: 10rpx;
|
||
background-color: #c6ead0;
|
||
width: 48%;
|
||
// margin: 0 10rpx;
|
||
text-align: center;
|
||
color: #3c7f56;
|
||
font-size: 36rpx;
|
||
line-height: 80rpx;
|
||
}
|
||
|
||
.item.active {
|
||
background-color: #3c7f56;
|
||
color: #fff;
|
||
}
|
||
|
||
.item1 {
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
|
||
.tip{
|
||
padding: 20rpx; background-color: #fff;
|
||
text{ font-size: 36rpx;}
|
||
}
|
||
.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;}
|
||
.bookName{
|
||
white-space: nowrap;
|
||
overflow-x: hidden;
|
||
text-overflow: ellipsis;
|
||
font-size: 30rpx; color: #333; padding: 10rpx 0;
|
||
}
|
||
.videoBox{position: relative;}
|
||
|
||
.playButton{position: absolute; z-index: 1; right: 4px; bottom: 4px; padding: 5px; border-radius: 100%; }
|
||
uni-image {
|
||
width:auto !important;
|
||
height: 350rpx;
|
||
}
|
||
.u-row{flex-wrap: wrap;}
|
||
.u-col{overflow: hidden; margin-bottom: 30rpx; }
|
||
.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;
|
||
}
|
||
.head_line {
|
||
margin: 50rpx 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;
|
||
}
|
||
}
|
||
.home_bg {
|
||
background-image: url('@/static/icon/home_bg.jpg');
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
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;
|
||
background-color: #fff;
|
||
border-radius: 32upx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0upx 40upx;
|
||
position: absolute;
|
||
margin-left: -46%;
|
||
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;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
width: 29upx;
|
||
height: 28upx;
|
||
margin-right: 20upx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|