213 lines
4.5 KiB
Vue
213 lines
4.5 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar title="维修申报" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
|
|
height='58'></u-navbar>
|
|
<view class="box">
|
|
<view class="date">
|
|
<text @click="btnks(1)">{{firsTime}}</text> -- <text @click="btnks(2)">{{lasTime}}</text>
|
|
</view>
|
|
<view style="width: 750rpx;height: 1px;background-color: #F0F0F0;"></view>
|
|
<view class="zongls">
|
|
<view class="hz">
|
|
<view class="">总流水</view>
|
|
<view class="" style="color: #4C97E7;">589</view>
|
|
</view>
|
|
<view class="hz">
|
|
<view class="">总收益</view>
|
|
<view class="" style="color: #25CE88;">589</view>
|
|
</view>
|
|
<view class="hz">
|
|
<view class="">总订单</view>
|
|
<view class="" style="color: #FF8157;">589</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 750rpx;height: 1px;background-color: #F0F0F0;"></view>
|
|
<view class="dates">
|
|
<view class="">日期</view>
|
|
<view class="ls" @click="shows = true">{{tit}} <u-icon name="arrow-down"></u-icon> </view>
|
|
</view>
|
|
<view class="list" v-for="(item,index) in 6" :key="index">
|
|
<view class="">04/05</view>
|
|
<view class="ls">115 元</view>
|
|
</view>
|
|
</view>
|
|
|
|
<u-select v-model="shows" :list="list" @confirm="confirms"></u-select>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
background: '#25CE88'
|
|
},
|
|
params: {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: false,
|
|
minute: false,
|
|
second: false
|
|
},
|
|
show: false,
|
|
num: '',
|
|
dateindex: 1,
|
|
firsTime: '',
|
|
lasTime: '',
|
|
shows: false,
|
|
tit:'流水',
|
|
list: [{
|
|
value: '1',
|
|
label: '流水'
|
|
},
|
|
{
|
|
value: '2',
|
|
label: '收益'
|
|
},{
|
|
value: '3',
|
|
label: '订单'
|
|
}
|
|
],
|
|
}
|
|
},
|
|
onLoad() {
|
|
let today = new Date();
|
|
this.firsTime = this.formatDate(today);
|
|
this.lasTime = this.formatDate(today);
|
|
},
|
|
methods: {
|
|
confirms(e){
|
|
this.tit = e[0].label
|
|
},
|
|
|
|
formatDate(date) {
|
|
let year = date.getFullYear();
|
|
let month = String(date.getMonth() + 1).padStart(2, '0');
|
|
let day = String(date.getDate()).padStart(2, '0');
|
|
return `${year}-${month}-${day}`;
|
|
},
|
|
btnks(num) {
|
|
this.show = true
|
|
if (num == 1) {
|
|
this.num = 1
|
|
} else {
|
|
this.num = 2
|
|
}
|
|
},
|
|
confirm(e) {
|
|
if (this.num == 1) {
|
|
this.firsTime = e.year + '-' + e.month + '-' + e.day
|
|
} else {
|
|
this.lasTime = e.year + '-' + e.month + '-' + e.day
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
/deep/ .u-title,
|
|
/deep/ .uicon-nav-back {
|
|
padding-bottom: 40rpx;
|
|
}
|
|
page {
|
|
// background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%);
|
|
}
|
|
|
|
.page {
|
|
width: 750rpx;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
.box {
|
|
width: 750rpx;
|
|
height: 1440rpx;
|
|
background: #F4F5F7;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
|
|
.list {
|
|
width: 750rpx;
|
|
height: 92rpx;
|
|
line-height: 46rpx;
|
|
background-color: #fff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20rpx 52rpx;
|
|
box-sizing: border-box;
|
|
border-bottom: 1px solid #F0F0F0;
|
|
font-size: 28rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
|
|
.dates {
|
|
width: 750rpx;
|
|
height: 92rpx;
|
|
line-height: 46rpx;
|
|
background-color: #fff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20rpx 52rpx;
|
|
box-sizing: border-box;
|
|
border-bottom: 1px solid #F0F0F0;
|
|
font-size: 28rpx;
|
|
color: #3D3D3D;
|
|
|
|
.ls {
|
|
width: 128rpx;
|
|
height: 46rpx;
|
|
background: #F0F0F0;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #808080;
|
|
}
|
|
}
|
|
|
|
.zongls {
|
|
width: 750rpx;
|
|
height: 164rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 34rpx 66rpx;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
|
|
.hz {
|
|
width: 154rpx;
|
|
height: 100rpx;
|
|
background: #F0F0F0;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
text-align: center;
|
|
padding: 14rpx 34rpx;
|
|
box-sizing: border-box;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.date {
|
|
padding-left: 80rpx;
|
|
padding-right: 80rpx;
|
|
padding-top: 50rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 150rpx;
|
|
background-color: #fff;
|
|
|
|
text {
|
|
height: 50rpx;
|
|
padding: 6rpx 18rpx;
|
|
box-sizing: border-box;
|
|
background: #eee;
|
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
font-size: 24rpx;
|
|
color: #808080;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |