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.
107 lines
2.3 KiB
107 lines
2.3 KiB
<template>
|
|
<view>
|
|
<view class="backcorf06 width100 height60 fcorfff fotct font24 fontspec10">流水明细</view>
|
|
<view class="width90 mart20 height60">
|
|
<picker class="flleft" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
|
|
<view class="uni-input datetim">{{date}}<i class="down"></i></view>
|
|
</picker>
|
|
<view class="rigMart flright">
|
|
<view class="width100 font14 fcor999 fontspec">
|
|
订单数量: 7
|
|
</view>
|
|
<view class="width100 font14 fcor999 fontspec">
|
|
支出: -8233.00
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="width100 height90 backcorfff" style="margin-top: 1px;">
|
|
<view class="width70 flleft">
|
|
<view class="font16 fcor333 fontwig6 width100 paddleft10 mart10">2021-01-03 22:38</view>
|
|
<view class="font13 fcor999 width100 paddleft10 mart10">支出-加油-重庆解放碑站点</view>
|
|
<view class="font12 fcor999 width100 paddleft10 mart5">订单编号 : 434243232234</view>
|
|
</view>
|
|
<view class="width30 flright">
|
|
<view class="fotct pricew fcoreb5 fontwig6 font14">1500.00元</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
const currentDate = this.getDate({
|
|
format: true
|
|
})
|
|
return {
|
|
date: currentDate,
|
|
}
|
|
},
|
|
computed: {
|
|
startDate() {
|
|
return this.getDate('start');
|
|
},
|
|
endDate() {
|
|
return this.getDate('end');
|
|
}
|
|
},
|
|
methods: {
|
|
bindDateChange: function(e) {
|
|
this.date = e.target.value;
|
|
},
|
|
getDate(type) {
|
|
const date = new Date();
|
|
let year = date.getFullYear();
|
|
let month = date.getMonth() + 1;
|
|
let day = date.getDate();
|
|
|
|
if (type === 'start') {
|
|
year = year - 60;
|
|
} else if (type === 'end') {
|
|
year = year + 2;
|
|
}
|
|
month = month > 9 ? month : '0' + month;;
|
|
day = day > 9 ? day : '0' + day;
|
|
return `${year}-${month}-${day}`;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #f6f6f6;
|
|
}
|
|
|
|
|
|
.datetim {
|
|
width: 130px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
background-color: #ffffff;
|
|
text-align: center;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
i {
|
|
border: solid #666666;
|
|
border-width: 0 2px 2px 0;
|
|
display: inline-block;
|
|
padding: 4px;
|
|
margin-left: 10px;
|
|
vertical-align: 3px;
|
|
}
|
|
|
|
.down {
|
|
-webkit-transform: rotate(45deg);
|
|
}
|
|
|
|
.pricew {
|
|
line-height: 90px;
|
|
}
|
|
|
|
.rigMart {
|
|
width: 250rpx;
|
|
}
|
|
</style>
|
|
|