wxml
<view class=\'class\'>
<view class=\'all\' wx:for=\'{{steps}}\' data-index=\'{{index}}\' style=\'bottom:{{index*150}}rpx;\'>
<!-- <view class=\'topText\'>{{item.actionDate[0]}}{{item.actionDate[1]}}{{item.actionDate[2]}}{{item.actionDate[3]}}年</view> -->
<view class=\'left\'>
<view class=\'left_pad\'>
<view class=\'left_text D\' style=\'font-size:50rpx\'>{{item.actionDate[8]}}{{item.actionDate[9]}}</view>
<view class=\'left_text M\' style=\'font-size:24rpx\'>{{item.actionDate[0]}}{{item.actionDate[1]}}{{item.actionDate[2]}}{{item.actionDate[3]}}.</view>
<view class=\'left_text M\' style=\'font-size:24rpx\'>{{item.actionDate[5]}}{{item.actionDate[6]}}</view>
</view>
</view>
<view class=\'center\'></view>
<view class=\'round_top\' style=\'opacity:{{index/10 + 1-index/10*0.5}};\'></view>
<view class=\'right\'>
<view class=\'right_pad\' wx:for=\'{{item.actionType}}\' wx:for-item=\'type\'>{{type==1?\'加入书架\':type==2?\'阅读\':type==3?\'书评\':\'读完\'}}</view>
<view class=\'right_pad\' style=\'background:none\'></view>
</view>
</view>
<view class=\'round_bottom\'>
</view>
<view class=\'round_bottom_w\'>开始</view>
</view>
js<------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
const app = getApp()
Page({
data: {
active: 0,
steps: [] //;[{,}]
},
//接收用户id 获取书的阅读表
onLoad() {
},
onShow() {
console.log(app.globalData.bookShelfData)
console.log(app.globalData.readingNoteData)
this.setData({ bookShelfData: app.globalData.bookShelfData, readingNoteData: app.globalData.readingNoteData})
//重组
// readingActivty:[{actionDate:\'YYYY-MM-DD\',actionType:[]}]
let readingActivty = [],
bookShelfData = this.data.bookShelfData,
readingNoteData = this.data.readingNoteData;
if (bookShelfData) {
for (let index in bookShelfData[0].readingHistory) {
readingActivty.push({ actionDate: bookShelfData[0].readingHistory[index].ReadingTime.iso, actionType: [\'2\'] })
}
readingActivty.push({ actionDate: bookShelfData[0].createdAt, actionType: [\'1\'] })
readingActivty.unshift({ actionDate: bookShelfData[0].readingStartdate.iso, actionType: [\'4\'] })
}
if (readingNoteData[0].commentDate) {
for (let ii in readingActivty) {
if (readingNoteData[0].commentDate.iso.replace(/\s[\x00-\xff]*/g, \'\') == readingActivty[ii].actionDate.replace(/\s[\x00-\xff]*/g, \'\')) {
readingActivty[ii].actionType.push(\'3\')
}
}
}
readingActivty.sort(function (a, b) { return b[\'actionDate\'] < a[\'actionDate\'] ? -1 : 1 })
console.log(readingActivty)
this.setData({ steps: readingActivty })
}
});
wxss
page{
width: 100%;
height: 100%;
overflow-x: hidden;
}
.class{
padding: 152rpx 2.5% 2.5% 2.5%;
}
.all{
width: 100%;
display: flex;
flex-wrap:nowrap;
justify-content: space-between;
}
.left{
width: 50%;
/* height: 320rpx; */
text-align: right;
display: flex;
flex-wrap: wrap;
color: #00a6ed;
}
.center{
width: 0rpx;
/* height: 320rpx; */
background: #fff;
border: 2rpx #ccc dashed;
display:table-cell;
vertical-align:bottom;
}
.topText{
font-size: 40rpx;
color: #000;
position: absolute;
top:20rpx;
left: 30rpx;
}
.right{
width: 41.5%;
/* height:320rpx; */
}
.round{
width: 60rpx;
height: 60rpx;
border-radius: 50%;
background: #00a6ed;
}
.M{
position: relative;
top: 10rpx;
margin-left:5rpx;
}
.left_text{
display: flex;
flex-direction: row;
justify-content: right;
text-align: right;
}
.left_pad{
display: flex;
flex-direction: row;
justify-content: center;
width: 80%;
height: 85rpx;
line-height: 85rpx;
font-size: 34rpx;
border-radius: 10rpx;
margin-bottom: 17rpx;
text-align: right;
position: relative;
right:-74rpx;
top: -21rpx;
}
.right_pad{
display: flex;
flex-wrap:wrap;
justify-content: space-around;
width: 198rpx;
background: #53535323;
height: 50rpx;
color: #535353;
line-height: 50rpx;
margin-top: 25rpx;
font-size: 24rpx;
border-radius: 10rpx;
margin-bottom: 17rpx;
text-align: right;
position: relative;
left: -25rpx;
}
.round_top{
width: 60rpx;
height: 60rpx;
border-radius: 50%;
background: #00a6ed;
position: relative;
left: -4.55%;
top: -18rpx;
}
.round_bottom{
width: 112rpx;
height: 112rpx;
line-height: 112rpx;
color: #fff;
border-radius: 50%;
font-size: 28rpx;
background: #00a6ed;
opacity: 0.4;
text-align: center;
position: relative;
left: 301rpx;
top: 3rpx;
/* margin: 0 auto; */
/* box-shadow: 0rpx 0rpx 28rpx 14rpx rgba(0,166,237,0.6); */
}
.round_bottom_w{
width: 84rpx;
height: 84rpx;
line-height: 84rpx;
color: #fff;
border-radius: 50%;
font-size: 28rpx;
background: #00a6ed;
opacity: 1;
text-align: center;
display: table-cell;
vertical-align: middle;
position: relative;
left: 314rpx;
top: -96rpx;
/* box-shadow: 0rpx 0rpx 28rpx 14rpx rgba(0,166,237,0.6); */
}