html
<!-- 头部 -->
<view class='tab'>
<view class="tab-new {{selected_new?'active':'default'}}" bindtap="selectedNew">最新理财</view>
<view class="tab-old {{selected_old?'active':'default'}}" bindtap="selectedOld">往期理财</view>
</view>
<!-- 列表 -->
<view class='list'>
<block wx:if="{{render_list.length == 0}}">
<view class="list-empty">
暂无理财产品数据
</view>
</block>
<block wx:else>
<block wx:for="{{render_list}}">
<view class='list-item' bindtap='gotoDetail' data-id="{{item.id}}">
<view class='list-item-left'>
<view class="left-yield">{{item.yield}}</view>
<view class="left-yield-name">预计年化收益率</view>
<view class="left-property">产品性质:{{item.property}}</view>
</view>
<view class='list-item-right'>
<view class='right-name'>{{item.name}}</view>
<view>起购金额:
<span class='right-font-black'>{{item.purchase_money}}</span>
</view>
<view>理财期限:
<span class='right-font-black'>{{item.time_limit}}</span>
</view>
<view>开始时间:{{item.start_time}}</view>
<view>结束时间:{{item.end_time}}</view>
</view>
<view class="list-item-top {{item.is_rec==1?'top-rec':''}}">
荐
</view>
<view class="list-item-top {{item.is_new==1?'top-new':''}} {{item.is_new==1 && item.is_rec==1?'top-margin-right':''}}">
新
</view>
<image class="list-item-arrow" src="/img/common/right.png"></image>
</view>
</block>
</block>
</view>
css
/* 先外后里,由上而下，由左而右 大小要计算 */
.tab {
display: flex;
height: 70rpx;
line-height: 70rpx;
margin-top: 45rpx;
}
.tab .tab-new {
width: 50%;
text-align: center;
}
.tab .tab-old {
width: 50%;
text-align: center;
}
.tab .active {
font-size: 34rpx;
font-weight: bold;
color: #222;
position: relative;
}
.tab .active::after {
content: "";
width: 150rpx;
height: 6rpx;
background: rgba(2, 101, 255, 1);
position: absolute;
bottom: 0rpx;
left: 50%;
transform: translateX(-50%);
}
.tab .default {
font-size: 28rpx;
font-weight: 500;
color: #666;
}
.list {
padding: 40rpx 20rpx;
width: 100%;
height: 100%;
}
.list-empty {
width: 100%;
height: auto;
text-align: center;
color:rgba(102, 102, 102, 1);
font-size: 30rpx;
position: fixed;
top: 40%;
left:50%;
transform: translate(-50%, -60%);
}
.list .list-item {
margin-bottom: 30rpx;
padding-top: 15rpx;
width: 100%;
height: 244rpx;
display: flex;
position: relative;
}
.list .list-item .list-item-left {
width: 320rpx;
padding-left: 23rpx;
}
.list-item-left .left-yield {
line-height: 70rpx;
font-size: 50rpx;
color: rgba(255, 0, 0, 1);
padding-top:25rpx;
}
.list-item-left .left-yield-name {
font-size:26rpx;
color:rgba(102,102,102,1);
line-height:30rpx;
}
.list-item-left .left-property {
width: auto;
font-size:26rpx;
color:rgba(255,98,4,1);
line-height:30rpx;
border:1rpx solid rgba(255,98,4,1);
border-radius:4rpx;
margin-top:10rpx;
float:left;
}
.list .list-item .list-item-right {
width: 390rpx;
font-size: 24rpx;
color: rgba(102, 102, 102, 1);
line-height: 38rpx;
}
.list-item-right .right-name {
font-size: 30rpx;
color: rgba(34, 34, 34, 1);
line-height: 48rpx;
}
.list-item-right .right-font-black {
font-size:26rpx;
color:#333333;
}
.list .list-item .list-item-top {
position: absolute;
top: 0rpx;
right: 23rpx;
display: none;
font-weight: 400;
font-size: 30rpx;
color: #fff;
padding: 8rpx;
border-bottom-left-radius: 10rpx;
border-bottom-right-radius: 10rpx;
}
.list .list-item .top-margin-right {
right: 75rpx;
}
.list .list-item .top-rec {
display: block;
background-color: #ff404a;
}
.list .list-item .top-new {
display: block;
background-color: #0265ff;
}
.list .list-item .list-item-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 16rpx;
height: 28rpx;
right: 38rpx;
}
js
const util = require('../../../utils/getData.js');
Page({
/**
* 页面的初始数据
*/
data: {
'selected_new': true,
'selected_old': false,
'type': 1,
'page': 1,
'page_size':4,
'render_list': []
},
initData: function() {
let that = this;
let page = that.data.page;
wx.showNavigationBarLoading(); //在标题栏中显示加载
util.getData('getFinanceList', {
page: page,
page_size:that.data.page_size,
type: that.data.type,
method: 'POST'
}, function(data) {
wx.hideNavigationBarLoading();
let data_list = data.data.data_list;
if (page != 1 && data_list.length == 0) {
wx.showToast({
title: "已经到底啦",
icon: "none",
duration: 1000,
mask: false,
});
return;
}
let render_list = [];
if (page != 1) {
render_list = that.data.render_list;
}
let new_render_list = render_list.concat(data_list);
page++;
that.data.page = page;
that.setData({
render_list: new_render_list
});
})
},
selectedNew: function() {
let that = this;
if (!that.data.selected_new) {
that.setData({
selected_new: true,
selected_old: false,
page:1,
type:1,
render_list:[]
});
that.initData();
}
},
selectedOld: function() {
let that = this;
if (!that.data.selected_old) {
that.setData({
selected_new: false,
selected_old: true,
page:1,
type: 2,
render_list: []
});
}
},
gotoDetail:function(e) {
let finance_id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '/pages/finance/detail/index?id=' + finance_id
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
let that = this;
that.initData();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
let that = this;
that.initData();
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})