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.
136 lines
2.7 KiB
136 lines
2.7 KiB
<template>
|
|
<view class="page">
|
|
<!-- 导航栏 -->
|
|
<navbar title="积分明细" leftClick @leftClick="$utils.navigateBack" color="#fff" />
|
|
|
|
<view class="tools">
|
|
<uv-datetime-picker
|
|
ref="datetimePicker"
|
|
v-model="queryParams.selectedTime"
|
|
mode="year-month"
|
|
confirmColor="#84A73F"
|
|
@confirm="onTimeChange"
|
|
></uv-datetime-picker>
|
|
<button plain class="flex btn" @click="openTimePicker">
|
|
<text>{{ displaySelectedTime }}</text>
|
|
<image class="btn-icon" src="../static/runningWater/icon-arrow.png" mode="widthFix"></image>
|
|
</button>
|
|
</view>
|
|
|
|
<view class="card list">
|
|
<template v-if="list.length">
|
|
<view class="flex list-item"
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
>
|
|
<image class="list-item-icon" src="../static/pointsRecord/icon-points.png" mode="widthFix"></image>
|
|
<view class="list-item-info">
|
|
<view class="highlight">{{ item.title }}</view>
|
|
<view>{{ item.createTime }}</view>
|
|
</view>
|
|
<view class="list-item-value">{{ `+${item.score}` }}</view>
|
|
</view>
|
|
</template>
|
|
<template v-else>
|
|
<uv-empty mode="history" textSize="28rpx" iconSize="100rpx" />
|
|
</template>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import mixinsList from "@/mixins/list.js"
|
|
export default {
|
|
mixins: [mixinsList],
|
|
data() {
|
|
return {
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
selectedTime: new Date(),
|
|
},
|
|
mixinsListApi: 'queryScoreList',
|
|
}
|
|
},
|
|
computed: {
|
|
displaySelectedTime() {
|
|
return this.$dayjs(this.queryParams.selectedTime).format("YYYY年M月")
|
|
}
|
|
},
|
|
methods: {
|
|
openTimePicker() {
|
|
this.$refs.datetimePicker.open();
|
|
},
|
|
onTimeChange(e) {
|
|
this.queryParams.selectedTime = e.value
|
|
this.queryParams.pageNo = 1
|
|
this.queryParams.pageSize = 10
|
|
|
|
this.getData()
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
background-color: $uni-bg-color;
|
|
min-height: 100vh;
|
|
|
|
/deep/ .nav-bar__view {
|
|
background-image: linear-gradient(#84A73F, #D8FF8F);
|
|
}
|
|
}
|
|
|
|
.tools {
|
|
background-color: $uni-fg-color;
|
|
padding: 25rpx 42rpx;
|
|
display: flex;
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
border: none;
|
|
color: #000000;
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
|
|
&-icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
margin-left: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list {
|
|
margin: 9rpx 13rpx;
|
|
padding: 31rpx 20rpx;
|
|
|
|
&-item {
|
|
padding-bottom: 19rpx;
|
|
border-bottom: 1rpx solid #E0E0E0;
|
|
margin-bottom: 20rpx;
|
|
font-size: 28rpx;
|
|
|
|
&-icon {
|
|
width: 56rpx;
|
|
height: auto;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
&-info {
|
|
flex: 1;
|
|
color: #949494;
|
|
|
|
.highlight {
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
&-value {
|
|
color: #FF2A2A;
|
|
}
|
|
}
|
|
}
|
|
</style>
|