前端
list.js
const app = getApp();
Page({
data: {
keyword: '',
info: {},
},
onPreviewTap: function (e) {
let src = e.currentTarget.dataset.src;
app.onPreviewTap(src);
},
onLoad(o) {
this.checkPageLogin();
},
checkPageLogin() {
this.checkLogin(user => {
this.setData({ user });
}, '/plus/shuhe/list/list');
},
onShow(){
this.setData({
['list.over']: false,
pages: 1
});
this.loadListData();
},
loadListData() {
if (this.data.list.over || this.data.ajax)
return;
this.setData({
['list.load']: true,
ajax: true
});
let param = {
user_id:this.data.user.id,
page: this.data.list.page,
length: this.data.list.length,
};
app.api.apiShuheworkGetlist(param).then(res => {
this.setData({ imgRoot: res.other.img_root });
this.dealList(res.data, this.data.list.page);
}).catch(res => {
app.tips(res);
});
},
onReachBottom() {
this.loadListData();
},
onApplyTap(){
app.navTo("/plus/shuhe/form/form");
}
});
list.json
{
"navigationBarTitleText": "工作室补贴列表",
"usingComponents": {}
}
list.wxml
<view style="{{themeColor}}">
<view class="page">
<view class="group_5">
<view >
<view class="check-btn" bindtap="onApplyTap">报单</view>
</view>
<view class="list">
<view class="list-item" wx:for="{{list.data}}" data-id="{{item.id}}">
<view class="flex-row">
<image src="{{imgRoot}}{{item.pay_pic}}" class="image_7"></image>
<view class="group_7">
<text class="text_5">{{item.title}}</text>
<view class="flex-row_group_8">
<view class="group_9">
<text class="text_9">￥{{item.amount}}</text>
</view>
</view>
<view class="text_17">审核状态：
<text wx:if="{{item.status == 2}}" style="color:red">{{item.status_str}}</text>
<text wx:if="{{item.status != 2}}">{{item.status_str}}</text>
</view>
<view class="text_17" wx:if="{{item.status == 2}}">拒绝原因：<text style="color:red">{{item.refused_reason}}</text></view>
<view class="text_17">提交时间：{{item.create_time}}</view>
</view>
</view>
</view>
<view class="none">{{list.over && !list.none ? '没有更多记录啦！' : list.over && list.none ? '暂无记录！' : ''}}</view>
</view>
</view>
</view>
</view>
list.wxss
.flex-row {
flex-direction: row;
display: flex;
}
.flex-col {
flex-direction: column;
display: flex;
}
.justify-start {
display: flex;
justify-content: flex-start;
}
.justify-center {
display: flex;
justify-content: center;
}
.justify-end {
display: flex;
justify-content: flex-end;
}
.justify-evenly {
display: flex;
justify-content: space-evenly;
}
.justify-around {
display: flex;
justify-content: space-around;
}
.justify-between {
display: flex;
justify-content: space-between;
}
.items-start {
display: flex;
align-items: flex-start;
}
.items-center {
display: flex;
align-items: center;
}
.items-end {
display: flex;
align-items: flex-end;
}
.list-item {
margin: 10rpx 0;
background-color: #ffffff;
border-radius: 10rpx;
display: flex;
justify-content: space-between;
padding: 18rpx 17rpx 22rpx 20rpx;
}
.text_19 {
line-height: 24rpx;
color: #363636;
font-size: 24rpx;
font-weight: 500;
font-family: Source Han Sans CN Medium;
margin: 77rpx 0 0 0;
}
.image_7 {
width: 170rpx;
height: 170rpx;
}
.group_7 {
flex-direction: column;
display: flex;
margin: 8rpx 0 0 31rpx;
}
.text_5 {
line-height: 32rpx;
color: #363636;
font-size: 32rpx;
font-weight: 500;
align-self: flex-start;
font-family: Source Han Sans CN Medium;
margin: 0 0 0 2rpx;
}
.text_7 {
line-height: 24rpx;
color: #999999;
font-size: 24rpx;
font-weight: 500;
align-self: flex-start;
font-family: Source Han Sans CN Medium;
margin: 20rpx 0 0 0;
}
.group_8 {
margin: 21rpx 0 0 0;
}
.text_17 {
line-height: 24rpx;
color: var(--maincolor,#fec015);
font-size: 24rpx;
font-weight: 500;
font-family: Source Han Sans CN Medium;
margin: 20rpx 0 0 4rpx;
}
.group_9 {
height: 25rpx;
}
.text_15 {
line-height: 24rpx;
margin: 6rpx 73rpx 0 18rpx;
color: #999999;
font-size: 24rpx;
font-weight: 500;
font-family: Source Han Sans CN Medium;
text-decoration: line-through;
}
.text_9 {
line-height: 24rpx;
color: #f5222d;
font-size: 24rpx;
font-weight: 500;
font-family: Source Han Sans CN Medium;
}
.text_11 {
line-height: 32rpx;
color: #f5222d;
font-size: 32rpx;
font-weight: 500;
font-family: Source Han Sans CN Medium;
}
.text_13 {
line-height: 24rpx;
color: #f5222d;
font-size: 24rpx;
font-weight: 500;
font-family: Source Han Sans CN Medium;
}
.page {
width: 100%;
flex-direction: column;
background-color: #f5f5f5;
overflow-y: auto;
overflow-x: hidden;
display: flex;
}
.group_5 {
flex-direction: column;
flex: 1;
overflow-y: auto;
display: flex;
}
.section_1 {
flex-direction: column;
background-color: var(--maincolor,#fec015);
display: flex;
padding: 13rpx 0 16rpx 0;
}
.list {
flex-direction: column;
display: flex;
padding: 0rpx 18rpx;
margin: 23rpx 0 0 0;
}
.search {
margin: 0 20rpx;
background-color: #ffffff;
border-radius: 40rpx;
padding: 26rpx 34rpx 24rpx 34rpx;
}
.section_3 {
margin: 14rpx 2rpx 0;
padding: 19rpx 17rpx 22rpx 20rpx;
}
.section_4 {
margin: 0 3rpx 0 0;
padding: 18rpx 18rpx 22rpx 20rpx;
}
.list-item:last-of-type {
margin: 16rpx 0 0 0;
}
.image_6 {
width: 30rpx;
height: 30rpx;
}
.text_22 {
margin: 19rpx 0 0 0;
}
.text_27 {
margin: 19rpx 0 0 0;
}
.text_26 {
margin: 7rpx 73rpx 0 18rpx;
}
.flex-row_search {
margin: 0 20rpx;
flex-direction: row;
display: flex;
background-color: #ffffff;
border-radius: 40rpx;
padding: 16rpx;
}
.flex-row_group_8 {
flex-direction: row;
display: flex;
margin: 21rpx 0 0 0;
}
.keyword {
line-height: 28rpx;
color: #999999;
font-size: 28rpx;
font-weight: 500;
font-family: Source Han Sans CN Medium;
margin: 2rpx 0 0 20rpx;
width: 500rpx;
}
page {
background-color: #f5f5f5;
}
.check-btn{
width: 710rpx;
height: 90rpx;
line-height: 90rpx;
background: var(--maincolor,--skin);
color: var(--mainbtnfontcolor,#fff);
border-radius: 10rpx;
margin: 40rpx 20rpx 30rpx;
font-size: 34rpx;
justify-content: center;
display: flex;
}