This commit is contained in:
parent
cdedcb02a6
commit
6e030b548f
|
|
@ -89,6 +89,12 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": "常见问题"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/detailed/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "收支明细"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,236 @@
|
|||
<template>
|
||||
<view class="detail-box">
|
||||
<view class="head">
|
||||
<view class="item" :class="{'active': activeItem === index}" v-for="(item, index) in headList"
|
||||
:key="index" @click="clickBtn(index)">{{item}}</view>
|
||||
<view class="item" :class="{'active': activeItem === -1}" @click="clickBtn(-1)">筛选</view>
|
||||
<view class="dropdown" v-show="activeItem === -1 && isShowItem">
|
||||
<view class="select-time">
|
||||
<view style="display: flex;" @click="startTime">
|
||||
<u-image src="../../static/img/sz_icon_rq/sz_icon_rq.png" width="30" height="30"></u-image>
|
||||
<view style="margin-left: 10rpx;">{{!selectDate.startDate ? '开始时间' : selectDate.startDate}}</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view style="display: flex;" @click="startTime">
|
||||
<u-image src="../../static/img/sz_icon_rq/sz_icon_rq.png" width="30" height="30"></u-image>
|
||||
<view style="margin-left: 10rpx;">{{!selectDate.endDate ? '开始时间' : selectDate.endDate}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btns">
|
||||
<view class="btn reset-btn" @click="resetBtnClick">重置</view>
|
||||
<view class="btn confim-btn" @click="confimBtnClick">确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!---->
|
||||
<view class="list" v-if="listData.length > 0">
|
||||
<view class="item" v-for="(item, index) in listData"
|
||||
:key="index">
|
||||
<view class="l">
|
||||
<view>{{item.type}}</view>
|
||||
<view>{{item.jine}}</view>
|
||||
</view>
|
||||
<view class="r">
|
||||
<view>{{item.tiemtype}}</view>
|
||||
<view class="time">{{item.time}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" @loadmore="loadmore" class="loadmore"/>
|
||||
</view>
|
||||
|
||||
<view v-else class="nothing-list">
|
||||
<image src="../../static/img/dd_icon_zw/dd_icon_zw.png" class="img"></image>
|
||||
<view class="w">暂无收支记录</view>
|
||||
<view class="s">快去分享下单赚钱吧！</view>
|
||||
<u-button class="confim" @click="confim" shape="circle" :ripple="true" :plain="false">确认</u-button>
|
||||
</view>
|
||||
<u-calendar v-model="showTime" mode="range" @change="change"></u-calendar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
isShowItem: true,
|
||||
selectDate: {},
|
||||
showTime: false,
|
||||
status: 'loadmore',
|
||||
iconType: 'flower',
|
||||
loadText: {
|
||||
loadmore: '上拉加载更多',
|
||||
loading: '努力加载中',
|
||||
nomore: '没有更多了'
|
||||
},
|
||||
headList: ['全部', '收益明细', '支持明细'],
|
||||
activeItem: 0,
|
||||
listData: [
|
||||
// {
|
||||
// type: '推广收益',
|
||||
// jine: '30元',
|
||||
// tiemtype: '收益时间',
|
||||
// time: '2021-02-21'
|
||||
// },
|
||||
// {
|
||||
// type: '推广收益',
|
||||
// jine: '30元',
|
||||
// tiemtype: '收益时间',
|
||||
// time: '2021-02-21'
|
||||
// }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetBtnClick () {
|
||||
this.isShowItem = false
|
||||
this.selectDate = {}
|
||||
this.activeItem = -2
|
||||
},
|
||||
confimBtnClick () {
|
||||
this.isShowItem = false
|
||||
},
|
||||
change (data) {
|
||||
console.log(data)
|
||||
this.selectDate = data
|
||||
},
|
||||
loadmore () {
|
||||
'加载更多'
|
||||
},
|
||||
clickBtn (index) {
|
||||
this.activeItem = index
|
||||
this.isShowItem = true
|
||||
},
|
||||
startTime () {
|
||||
this.showTime = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.detail-box {
|
||||
height: 100%;
|
||||
margin: 0 20rpx;
|
||||
& .head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 40rpx;
|
||||
& .item {
|
||||
height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
font-weight: 400;
|
||||
color: #9093B7;
|
||||
padding-bottom: 3rpx;
|
||||
&.active {
|
||||
color: #FFFFFF;
|
||||
font-weight: 600;
|
||||
border-bottom: 1rpx solid #FE192F;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
top: 100rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #151941;
|
||||
& .select-time {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 50rpx 0;
|
||||
color: #C4CBE4;
|
||||
font-size: 24rpx;
|
||||
& .line {
|
||||
width: 32rpx;
|
||||
height: 1rpx;
|
||||
background-color: #C4CBE4;
|
||||
margin: 0 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
height: 90rpx;
|
||||
display: flex;
|
||||
& .btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
line-height: 90rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
& .reset-btn {
|
||||
background: #373F8B;
|
||||
}
|
||||
& .confim-btn {
|
||||
background: #FE192F;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
margin-top: 50rpx;
|
||||
font-size: 24rpx;
|
||||
color: #FE192F;
|
||||
& .item {
|
||||
background-color: #2B3062;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx 20rpx;
|
||||
& .r {
|
||||
text-align: right;
|
||||
color: #8D90AC;
|
||||
}
|
||||
& .time {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
.loadmore {
|
||||
margin-top: 40rpx !important;
|
||||
}
|
||||
& .item + .item {
|
||||
border-top: 1rpx solid #576699;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .u-calendar__action {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.nothing-list {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
color: #FFFFFF;
|
||||
& .img {
|
||||
width: 178rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
& .w {
|
||||
margin-top: 100rpx;
|
||||
font-size: 40rpx;
|
||||
color: #CED6F1;
|
||||
}
|
||||
& .s {
|
||||
margin-top: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #9496B1;
|
||||
}
|
||||
& .confim {
|
||||
margin: 70rpx 0rpx 29rpx 0rpx;
|
||||
width: 233rpx;
|
||||
height: 90rpx;
|
||||
background: linear-gradient(143deg, #EF6F5F 0%, #FB2636 100%);
|
||||
border-radius: 45rpx;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Loading…
Reference in New Issue