|
<template name='tpl'>
<view class="page">
<list-view id="infolist" class="infolist" enable-back-to-top lower-threshold="200" bounces="false" onscrolltolower={this.onScrollToBottom}>
<list-header class="numbox">
<text class="numbox-t1">积分总额</text>
<text class="numbox-num">100</text>
</list-header>
<cell class="infolist-one flex">
<view class="infolist-one-l flex1">
<text class="infolist-one-l-t1">{item.note}</text>
<text class="infolist-one-l-t2">{item.addtime}</text>
</view>
<view class="infolist-one-r">
<view class="flex">
<text class="infolist-one-r-t3">{(item.type == 'del' ? '-' : '+')}</text>
<text class="infolist-one-r-t3">{item.value}</text>
</view>
<text class="infolist-one-r-t4">{'积分:'+item.new_val}</text>
</view>
</cell>
<list-footer>
<!-- 底部 -->
<view class="bottom-box" v-if="loadingMsg">
<text class="bottom-box-msg" v-text="loadingMsg"></text>
</view>
</list-footer>
</list-view>
</view>
</template>
<script>
export default {
name: 'tpl',
apiready(){//like created
this.getData();
},
data() {
return{
loadingMsg:""
}
},
methods: {
getData(){
let data = [];
for(let i=0;i<20;i++){
data.push({"id":147,"uid":721,"type":"add","value":"100.00","old_val":"18105.00","new_val":"18205.00","note":"签到","form":"qiandao","orderid":null,"text":null,"day":"2021-03-19","addtime":"2021-03-19 14:59:20"});
}
let listView = document.getElementById('infolist');
listView.load({
data:data
});
},
onScrollToBottom(){
console.log(123123);
},
}
}
</script>
<style>
.page{width:100%;height: 100%;background:#fff;}
.infolist{width:100%;height:100%;}
.numbox{width: 100%;margin-bottom: 10px;padding: 20px 15px 30px 15px;background:url(../../images/main3/main3_bg.png) no-repeat center #FF9502;background-size:cover;color: #ffffff;box-sizing: border-box;}
.numbox-t1{font-size: 16px;color:#fff;}
.numbox-num{font-size: 48px;margin-top: 14px;font-weight: bold;color:#fff;}
.infolist{width: 100%;background:#fff;}
.infolist-one{width: 100%;padding: 0 15px;box-sizing: border-box;align-items: center;background: #FFFFFF;height: 70px;border-bottom:1px solid #f4f4f4;display:flex;flex-direction: row;}
.infolist-one-l{flex:1;}
.infolist-one-l-t1{font-size: 15px;color: #333333;font-weight: 500;}
.infolist-one-l-t2{font-size: 12px;color: #999999;}
.infolist-one-r-t3{font-size: 15px;color: #FF9502;text-align: right;}
.infolist-one-r-t4{font-size: 12px;color: #999999;text-align: right;}
.infolist-one:last-child:before{display: none;}
</style>
|
|