<template>
|
|
<view class="u-page">
|
|
<view class="u-demo-block-2" >
|
<!-- <view>
|
<u-cell-group>
|
<u-cell
|
@click="showCalendar(index)"
|
title="日期筛选"
|
:label="calendarLabel"
|
isLink
|
>
|
<image
|
slot="icon"
|
src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/d8/d8398aa04a2040809285a9319cd9acc2calendar.png"
|
mode="widthFix"
|
class="image-icon"
|
></image>
|
</u-cell>
|
</u-cell-group>
|
|
<u-calendar
|
:show="calendarShow"
|
mode="multiple"
|
:defaultDate="['2022-03-01']"
|
@confirm="confirm"
|
@close="close"
|
></u-calendar>
|
</view> -->
|
<view class="margin-10" style="height: 50px;">
|
<um-dropdown width="200rpx" @change="canlendarTypeChange" :defaultIndex="def" rangeKey="label" :optionList="typeList"></um-dropdown>
|
</view>
|
<u-cell-group >
|
<u-cell v-for="(item,index) in list " :key="index" class="margin-10">
|
<image slot="icon" src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/dc/dc56da3413664c829b0be3c229672c88qianbi.png" class="image-icon"></image>
|
<view slot="title">
|
<text class="f10">类别：{{item.typeName}}</text>
|
</view>
|
<view slot="label">
|
<text class="f10">时间：{{getYyyyMmDdHh24Mi(item.auditTime)}}</text>
|
</view>
|
<view slot="value" class="content-right">
|
<view class="f10">￥ {{item.fee}}</view>
|
</view>
|
</u-cell>
|
|
</u-cell-group>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
// 引入dayjs
|
import dayjs from 'dayjs'
|
export default {
|
data() {
|
return {
|
calendarShow:false,
|
calendarLabel:'',
|
query:{
|
startDate:"",
|
endDate:""
|
},
|
type: 'month', //supplierName
|
def: 0,
|
typeList:[
|
{
|
label: '本月',
|
value: 'month',
|
},
|
{
|
label: '全部',
|
value: 'all',
|
},
|
],
|
};
|
},
|
|
onLoad(options) {
|
this.getPageList()
|
|
},
|
onShow() {
|
|
},
|
onReachBottom() {
|
this.getMore()
|
},
|
async onPullDownRefresh() {
|
this.page.current = 1
|
await this.getPageList()
|
uni.stopPullDownRefresh()
|
},
|
methods: {
|
getDefaultDate(){
|
// 获取当月的开始日期和结束日期
|
let startDate=dayjs().startOf('month').format('YYYY-MM-DD')
|
let endDate=dayjs().endOf('month').format('YYYY-MM-DD')
|
this.query.startDate=startDate
|
this.query.endDate=endDate
|
},
|
|
click(name) {
|
|
},
|
showCalendar(){
|
this.calendarShow=true
|
},
|
confirm(e){
|
console.log("日历的值")
|
console.log(e)
|
this.queryForm.startDate=e[0]
|
this.queryForm.endDate=e[1]
|
this.calendarLabel=e[0]+"~"+e[1]
|
this.calendarShow=false
|
},
|
close(){
|
this.calendarShow=false
|
},
|
canlendarTypeChange(e){
|
this.type = e.value
|
this.query.startDate=""
|
this.query.endDate=""
|
if(this.type=='month'){
|
this.getDefaultDate()
|
}
|
// 触发查询操作
|
this.getPageList()
|
},
|
async getPageList(){
|
this.page.size=20
|
this.listApi = '/v2/wallet/reduce-record/supplier/page'
|
let ref=await this.getList()
|
console.log(ref)
|
},
|
getYyyyMmDdHh24Mi(date){
|
if(date){
|
return dayjs(date).format('YYYY-MM-DD HH:mm')
|
}
|
return ""
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.u-page{
|
font-size: 14px;
|
|
.f10{
|
font-size: 14px;
|
}
|
|
.content-right{
|
text-align: right;
|
}
|
.image-icon{
|
width:50rpx;
|
height: 50rpx;
|
}
|
.u-button--plain.data-v-3bf2dba7 {
|
background-color: #00BCD4;
|
}
|
.u-button--plain.u-button--primary.data-v-3bf2dba7 {
|
color: #FFFFFF;
|
}
|
.u-button--primary.data-v-3bf2dba7 {
|
color: #fff;
|
border-color: #00BCD4;
|
border-width: 1px;
|
border-style: solid;
|
border-radius: 10rpx;
|
width:200rpx;
|
}
|
.u-demo-block{
|
padding: 10rpx;
|
background-color: #FFFFFF;
|
border-radius: 50rpx;
|
background-color: #00AF68;
|
margin: 20rpx;
|
.tixian{
|
margin-top: 30rpx;
|
margin-bottom: 30rpx;
|
}
|
}
|
.u-demo-block-2{
|
margin: 10rpx;
|
// padding: 10rpx;
|
background-color: #FFFFFF;
|
border-radius: 10rpx;
|
}
|
.title{
|
text-align: center;
|
font-size: 30rpx;
|
color: #909399;
|
margin: 10rpx;
|
}
|
.grid-text-white{
|
color: white;
|
}
|
.grid-text {
|
font-size: 14px;
|
color: #909399;
|
padding: 10rpx 0 20rpx 0rpx;
|
/* #ifndef APP-PLUS */
|
box-sizing: border-box;
|
/* #endif */
|
}
|
.statis_val{
|
font-size: 16px;
|
color: black;
|
// font-weight: bold;
|
}
|
|
.margin-10{
|
margin:10rpx;
|
}
|
}
|
</style>
|
