江西小程序管理端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

264 lines
5.8 KiB

<template>
<!-- 结算明细 -->
<view class="pageBgImg">
<topNavbar title="结算明细"></topNavbar>
<view class="pad">
<searchRow placeholder="搜索学员姓名/学员手机号"/>
</view>
<scroll-view class="scroll-view_w" scroll-x="true" scroll-with-animation :scroll-into-view="'tab'+currentTab" scroll-left="140">
<view class="tabs">
<view class="tab" v-for="(item,index) in tabData" :key="index" @click="changeTab(item)" :class="{active: currentTab==item.id}" :id="'tab'+item.id">{{ item.text }}</view>
<view class="rightPad"></view>
</view>
</scroll-view>
<view class="content pad">
<view class="month_row" @click="showDate=true">
<!-- <view class="month">8</view>
<view class="unit">月</view> -->
<view class="">{{ selectDate }}</view>
<view class="iconFont">
<u-icon name="arrow-down" color="#686B73" size="14"></u-icon>
</view>
</view>
<view class="total">结算金额共计</view>
<view class="record">
<view class="card" v-for="(item,index) in 10" :key="index" @click="$goPage('/pages/indexEntry/settlement/detail/detail')">
<stage/>
</view>
</view>
</view>
<u-popup :show="showDate" mode="bottom" :round="20" >
<view class="popupCon">
<view class="popTab">
<view class="tabItem" :class="{active: currentPopTab==1}" @click="changePopTab(1)">月份选择</view>
<view class="tabItem" :class="{active: currentPopTab==2}" @click="changePopTab(2)">自定义时间</view>
</view>
<view class="timer">
<view class="tabCon" v-if="currentPopTab==1">
<view class="dateBtn" @click="showDatePickerFn(1)" :class="{hui: !data1}">{{ date1 }}</view>
<!-- <u-datetime-picker-my
:show="show"
v-model="value1"
mode="year-month"
:showToolbar="false"
:visibleItemCount="4"
@confirm="confirm"
></u-datetime-picker-my> -->
</view>
<view class="tabCon" v-else>
<view class="dateBtn" :class="{hui: !data2}" @click="showDatePickerFn(2)">{{ date2 }}</view>
<view class="to">至</view>
<view class="dateBtn" :class="{hui: !data3}" @click="showDatePickerFn(3)">{{ date3 }}</view>
</view>
<view class="btnBg" @click="selectDateClick">确定</view>
<!-- <u-picker-my></u-picker-my> -->
</view>
</view>
</u-popup>
<u-datetime-picker
:show="showDatePicker"
v-model="value1"
mode="year-month"
:visibleItemCount="4"
:closeOnClickOverlay="false"
@confirm="confirmDatePicker"
@cancel="cancelDatePicker"
></u-datetime-picker>
</view>
</template>
<script>
import stage from '../../tabbar/statistics/comp/stage.vue'
export default {
components: { stage },
data() {
return {
date3: '',
date2: '',
date1: '',
value1: '',
showDate: false,
showDatePicker: false,
show: false,
tabData: [{
text: '全部',
id: 10
},
{
text: '阶段一',
id: 0
},
{
text: '阶段二',
id: 1
},
{
text: '阶段三',
id: 2
},
{
text: '阶段四',
id: 3
},
{
text: '阶段五',
id: 4
},
{
text: '阶段六',
id: 5
},
],
currentTab: 2,
currentPopTab: 2,
currentBtnDate: 1,
selectDate: '',//筛选日期
}
},
methods: {
// tab切换
changeTab(val) {
this.currentTab = val.id
},
// 切换选择时间的类型
changePopTab(num) {
this.currentPopTab = num
},
// 1打开时间选择器
showDatePickerFn(num) {
this.showDate = false
this.showDatePicker = true
this.currentBtnDate = num
},
// 2选择时间选择器里的时间
confirmDatePicker(val) {
this.showDate = true
this.showDatePicker = false
let date = uni.$u.date(val.value, 'yyyy-mm-dd')
if(this.currentBtnDate==1) {
date = uni.$u.date(val.value, 'yyyy-mm')
}
this['date'+this.currentBtnDate] = date
},
// 3最后确定具体选择使用什么时间
selectDateClick() {
this.showDate = false
this.selectDate = this['date'+this.currentBtnDate]
}
}
}
</script>
<style lang="scss" scoped>
.scroll-view_w {
width: 100%;
margin: 30rpx 0 40rpx 0;
.tabs {
display: flex;
flex-wrap: nowrap;
padding: 0 0rpx 10rpx 32rpx;
width: auto;
.tab {
width: 108rpx;
height: 60rpx;
border-radius: 8rpx;
border: 2rpx solid #FFFFFF;
font-size: 28rpx;
color: #fff;
text-align: center;
line-height: 60rpx;
margin-right: 28rpx;
flex-shrink: 0;
&.active {
background-color: #fff;
color: $themC;
}
&.all {
width: 96rpx;
}
}
.rightPad {
min-width: 10rpx;
height: 60rpx;
}
}
}
.month_row {
display: flex;
align-items: center;
color: $themC;
.month {
font-size: 50rpx;
font-weight: 600;
}
.unit {
font-size: 30rpx;
margin: 0 4rpx;
}
}
.total {
padding: 20rpx 0;
}
.card {
margin-bottom: 24rpx;
}
.popupCon {
height: 430rpx;
.popTab {
display: flex;
padding: 40rpx 32rpx;
.tabItem {
font-size: 32rpx;
color: #333;
margin-right: 60rpx;
&.active {
color: $themC;
position: relative;
&::before {
content: '';
position: absolute;
bottom: -20rpx;
left: 50%;
transform: translateX(-50%);
width: 128rpx;
height: 4rpx;
background: #1989FA;
border-radius: 3rpx;
}
}
}
}
}
.tabCon {
display: flex;
align-items: center;
padding-left: 32rpx;
padding-top: 20rpx;
.dateBtn {
width: 280rpx;
height: 80rpx;
border-radius: 10rpx;
border: 2rpx solid #1989FA;
line-height: 80rpx;
text-align: center;
color: $themC;
font-size: 32rpx;
&.hui {
border: 2rpx solid #E8E9EC;
}
}
.to {
font-size: 32rpx;
margin: 0 40rpx;
}
}
.btnBg {
width: 396rpx;
margin: 34rpx auto 42rpx auto;
}
</style>