<!--myworks.wxml--> <view class="wrapper"> <view class="head"> <image class="avatar" mode="aspectFill" src="../../images/cover.jpg"></image> </view> <view class="tab-bar"> <view catchtap="changeTab" data-tabid="1" class="{{actType == 1 ? 'active':'no-active'}}">原创 ({{totalBookCnt}})</view> <view catchtap="changeTab" data-tabid="2" class="{{actType == 2 ? 'active':'no-active'}}">朗读 ({{totalReadingCnt}})</view> </view> <view class="container"> <!--原创书籍 S--> <block wx:if="{{ actType == 1}}"> <view class="readbook-item" wx:for="{{bookList}}" catchtap="previewReadBook" data-bookinfo="{{item}}"> <view class="readbook-cover"> <image mode="aspectFill" src="{{item.coverUrl}}"></image> <view class="title">{{item.title}}</view> <view class="author">{{item.author}}</view> </view> <view class="nav-info"> <view class="item-icon"> <image mode="aspectFit" src="../../images/icon/read_icon@3x.png"></image> {{item.pvCnt}} </view> <view class="item-icon"> <image wx:if="{{item.hasLiked == 0}}" mode="aspectFit" src="../../images/icon/thumb_up_default_icon@3x.png"></image> <image wx:if="{{item.hasLiked == 1}}" mode="aspectFit" src="../../images/icon/thumb_up_selected@3x.png"></image> {{item.likeCnt}} </view> <view class="item-icon"> <image mode="aspectFit" src="../../images/icon/content_icon@3x.png"></image> {{item.commentCnt}} </view> </view> </view> </block> <!--原创书籍 E--> <!--朗读书籍 S--> <block wx:if="{{ actType == 2}}"> <view class="item" wx:for="{{readList}}" catchtap="previewListenBook" data-bookinfo="{{item}}"> <view class="book-cover-wrapper"> <view class="book-cover-wp"> <image mode="aspectFill" src="{{item.coverUrl}}"></image> <view class="book-cover"> <image mode="aspectFill" src="{{item.coverUrl}}"></image> </view> <view class="cover-side"></view> <view class="cover-circle"> <image src="{{item.coverUrl}}"></image> </view> </view> <view class="title">{{item.title}}</view> <view class="author">{{item.author}}</view> </view> <view class="nav-info"> <view class="item-icon"> <image mode="aspectFit" src="../../images/icon/play_icon@3x.png"></image> {{item.pvCnt}} </view> <view class="item-icon"> <image wx:if="{{item.hasLiked == 0}}" mode="aspectFit" src="../../images/icon/thumb_up_default_icon@3x.png"></image> <image wx:if="{{item.hasLiked == 1}}" mode="aspectFit" src="../../images/icon/thumb_up_selected@3x.png"></image> {{item.likeCnt}} </view> <view class="item-icon"> <image mode="aspectFit" src="../../images/icon/content_icon@3x.png"></image> {{item.commentCnt}} </view> </view> </view> </block> <!--朗读书籍 E--> </view> </view> |
/* myworks.wxss */ page{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .wrapper{ position: relative; } .head{ height: 220rpx; text-align: center } .head .avatar{ width: 140rpx; height: 140rpx; margin-top: 70rpx; border: 4rpx solid rgba(244, 245, 247, 0.7); border-radius: 100%; } .tab-bar{ display: flex; height: 100rpx; line-height: 100rpx; } .tab-bar view{ flex: 1; text-align: center; } .tab-bar .active{ color: #3acebb; border-bottom: 2rpx solid #3acebb; } /*书列表*/ .container .scroll{ padding-top: 120rpx; } /*原创书籍*/ .readbook-item{ display:inline-block; width: 335rpx; margin: 30rpx 20rpx; } .readbook-cover{ padding: 12rpx; height: 430rpx; box-shadow:0 0 30rpx rgba(221,221,221,0.8); } .readbook-cover image{ width: 310rpx; height: 310rpx; overflow: hidden; } .readbook-cover .title, .readbook-cover .author{ text-align: center; } /*朗读作品*/ .item{ display:inline-block; width: 335rpx; height: 450rpx; margin: 30rpx 20rpx; } .item .nav-info{ margin: 0; } .book-cover-wrapper{ height: 400rpx; } .book-cover-wp{ position: relative; height: 286rpx; border: 2rpx solid #bebdbd; } .book-cover-wp > image{ width: 335rpx; height: 286rpx; filter: blur(10rpx); /*opacity:0.4; filter:alpha(opacity=40);*/ } .book-cover{ position: absolute; top: 15rpx; right: 20rpx; height: 258rpx; width: 258rpx; border: 2rpx solid #fff; border-radius: 100%; overflow: hidden; } .book-cover > image{ height: 258rpx; width: 258rpx; } .cover-side{ position: absolute; left: 0; top: 0; bottom: 0; width: 25rpx; border-right: 1rpx solid rgb(33, 33, 33); background: #808080; background: -moz-linear-gradient(bottom, rgba(67, 67, 67, 0.5), rgba(70, 67, 67, 1.0)); background: -webkit-linear-gradient(bottom, rgba(67, 67, 67, 0.5), rgba(70, 67, 67, 1.0)); } .cover-circle{ position: absolute; top: 123rpx; right: 133rpx; width: 36rpx; height: 36rpx; border: 2rpx solid #fff; overflow: hidden; border-radius: 100%; /*background: rgba(255, 255, 255, 0.3);*/ } .cover-circle > image{ width: 36rpx; height: 36rpx; filter: blur(10rpx); } .title{ margin-top: 25rpx; font-size: 28rpx; color: #333333; } .author{ margin-top: 10rpx; font-size: 22rpx; color: #666666; } .nav-info{ display: flex; height: 30rpx; line-height: 30rpx; margin: 30rpx 0; text-align: center; font-size: 22rpx; color: #999999; } .nav-info .item-icon{ flex: 1; } .nav-info .item-icon image{ width: 30rpx; height: 30rpx; vertical-align: middle; } |
// myworks.js Page({ /** * 页面的初始数据 */ data: { userId: '', // 用户U=uin bookList:{}, // 原创 1 列表 readList: {}, // 朗读 2 列表 totalBookCnt: '', // 绘本总数 totalReadingCnt: '', // 朗读书总数 actType: 1, // 活动TAB actType 1 原创 2 朗读 emptyBook: false, // 是否没书 pageNum: 1, listLoading: false, //"上拉加载"的变量,默认false,隐藏 listLoadingComplete: false, //“没有数据”的变量,默认false,隐藏 isListLoading: false // 正在加载数据,停止请求 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { let that = this; // 获取用户ID let userId = getApp().getUserId(); if ( userId ){ that.setData({ userId: userId }); } // 获取用户作品 getApp().getMyWorks(that.data.actType, that.data.pageNum, function (data) { console.log(data); if (data.code == 0) { if (that.data.actType == 1){ that.setData({ bookList: data.payload.works, totalBookCnt: data.payload.totalBookCnt, totalReadingCnt: data.payload.totalReadingCnt, }); } else if (that.data.actType == 2){ that.setData({ readList: data.payload.works, totalBookCnt: data.payload.totalBookCnt, totalReadingCnt: data.payload.totalReadingCnt, }); } } else { console.log("error_code:" + data.msg); } }); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function (e) { let that = this; wx.showNavigationBarLoading(); //在标题栏中显示加载 getApp().getMyWorks(that.data.actType, 1, function (data) { wx.stopPullDownRefresh(); wx.hideNavigationBarLoading(); console.log(data); if (data.code == 0) { if (that.data.actType == 1) { that.setData({ bookList: data.payload.works, totalBookCnt: data.payload.totalBookCnt, totalReadingCnt: data.payload.totalReadingCnt, }); } else if (that.data.actType == 2) { that.setData({ readList: data.payload.works, totalBookCnt: data.payload.totalBookCnt, totalReadingCnt: data.payload.totalReadingCnt, }); } } else { console.log("error_code:" + data.msg); } }); }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { wx.showNavigationBarLoading(); //在标题栏中显示加载 let that = this; that.fetchBookList(); // 隐藏加载信息 wx.hideNavigationBarLoading(); }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, // 切换TAB changeTab: function(event){ console.log(event.currentTarget.dataset.tabid); let that = this; if (event.currentTarget.dataset.tabid == 1 && !that.data.bookList){ that.fetchBookList(); } else if (event.currentTarget.dataset.tabid == 2 && !that.data.readList) { that.fetchBookList(); } that.setData({ actType: event.currentTarget.dataset.tabid }); }, // 请求数据添加在页面 fetchBookList: function () { let that = this; //访问网络 getApp().getMyWorks(that.data.actType, that.data.pageNum, function (data) { if (data.code == 0) { console.log(data); if(data.payload.bookList.length > 0){ let newBookList = []; //从原来的数据继续添加 if (that.data.actType == 1) { newBookList = that.data.bookList.concat(data.payload.bookList); that.setData({ bookList: data.payload.works, totalBookCnt: data.payload.totalBookCnt, totalReadingCnt: data.payload.totalReadingCnt, }); } else if (that.data.actType == 2) { newBookList = that.data.readList.concat(data.payload.bookList); that.setData({ readList: data.payload.works, totalBookCnt: data.payload.totalBookCnt, totalReadingCnt: data.payload.totalReadingCnt, }); } } } else { console.log("error_code:" + data.msg); } }); }, // 跳转浏览(绘本) // reader 0 书本 1 朗读 previewReadBook: function(event){ let that = this; let bookInfo = event.currentTarget.dataset.bookinfo; let isAuthor = 0; //1 false 0 true wx.navigateTo({ url: '../previewreadbook/previewreadbook?bookId=' + bookInfo.bookId + '&title=' + bookInfo.title + '&author=' + bookInfo.author + '&coverUrl=' + bookInfo.coverUrl + '&isAuthor=' + isAuthor + '&reader= ' + bookInfo.reader + '&hasLiked= ' + bookInfo.hasLiked + '&pvCnt=' + bookInfo.pvCnt + '&likeCnt=' + bookInfo.likeCnt + '&commentCnt=' + bookInfo.commentCnt }) }, // 去听书 (朗读) previewListenBook: function(event){ let that = this; let bookInfo = event.currentTarget.dataset.bookinfo; // reader 0 书本 1 朗读 let isAuthor = 0; //1 false 0 true wx.navigateTo({ url: '../previewlistenbook/previewlistenbook?bookId=' + bookInfo.bookId + '&title=' + bookInfo.title + '&author=' + bookInfo.author + '&coverUrl=' + bookInfo.coverUrl + '&isAuthor=' + isAuthor + '&intro=' + bookInfo.intro + '&reader= ' + bookInfo.reader + '&hasLiked= ' + bookInfo.hasLiked + '&pvCnt=' + bookInfo.pvCnt + '&likeCnt=' + bookInfo.likeCnt + '&commentCnt=' + bookInfo.commentCnt }) } }) |
模板简介:该模板名称为【微信小程序我的书刊作品个人中心页设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。