massage-front/pages_order/mine/pointsRecord.vue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<navbar title="积分明细" leftClick @leftClick="$utils.navigateBack" color="#fff" />

		<view class="tools">
			<uv-datetime-picker 
				ref="datetimePicker" 
				v-model="queryParams.createTime" 
				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 dayjs from 'dayjs'

	import mixinsList from "@/mixins/list.js"
	export default {
		mixins: [mixinsList],
		data() {
			return {
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					createTime: dayjs().format('YYYY-MM'),
				},
				mixinsListApi: 'queryScoreList',
			}
		},
		computed: {
			displaySelectedTime() {
				return this.$dayjs(this.queryParams.createTime).format("YYYY年M月")
			}
		},
		methods: {
			openTimePicker() {
				this.$refs.datetimePicker.open();
			},
			onTimeChange(e) {
				this.queryParams.createTime = this.$dayjs(e.value).format('YYYY-MM')
				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>