|
|
@@ -0,0 +1,195 @@
|
|
|
+<template>
|
|
|
+ <!-- 月份选择器 -->
|
|
|
+ <view class="date-picker">
|
|
|
+ <view class="date-picker-item arrow left-arrow">
|
|
|
+ <uni-icons type="left" size="30" @click="plusMonth(-1)"></uni-icons>
|
|
|
+ </view>
|
|
|
+ <view class="date-picker-item">
|
|
|
+ <picker mode="date" fields="month" :value="currentMonth" @change="monthChange">
|
|
|
+ <view class="picker-view">{{ currentMonth }}</view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ <view class="date-picker-item arrow right-arrow">
|
|
|
+ <uni-icons type="right" size="30" @click="plusMonth(1)"></uni-icons>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 数据列表 -->
|
|
|
+ <uni-list :border="true">
|
|
|
+ <uni-list-item v-for="item in listData" :key="item.id">
|
|
|
+ <template v-slot:body>
|
|
|
+ <view class="item-box">
|
|
|
+ <span class="item-label">兑换的奖励</span>
|
|
|
+ <span class="item-label">{{ item.rewardName }}</span>
|
|
|
+ </view>
|
|
|
+ <view class="item-box">
|
|
|
+ <span class="item-label">兑换方式</span>
|
|
|
+ <span class="item-label">{{ item.exchangeMethod == 'MANUAL' ? '手动' : '自动' }}</span>
|
|
|
+ </view>
|
|
|
+ <view class="item-box">
|
|
|
+ <span class="item-label">兑换数量</span>
|
|
|
+ <span class="item-label">{{ item.exchangeCount }}</span>
|
|
|
+ </view>
|
|
|
+ <view class="item-box">
|
|
|
+ <span class="item-label">兑换所需总积分</span>
|
|
|
+ <span class="item-label">{{ item.exchangeTotalPoints }}</span>
|
|
|
+ </view>
|
|
|
+ <view class="item-box">
|
|
|
+ <span class="item-label">兑换使用的账户</span>
|
|
|
+ <span class="item-label">{{ item.accountName }}</span>
|
|
|
+ </view>
|
|
|
+ <view class="item-box">
|
|
|
+ <span class="item-label">兑换前账户中的积分</span>
|
|
|
+ <span class="item-label">{{ item.accountPointsBeforeExchange }}</span>
|
|
|
+ </view>
|
|
|
+ <view class="item-box">
|
|
|
+ <span class="item-label">兑换后账户中的积分</span>
|
|
|
+ <span class="item-label">{{ item.accountPointsAfterExchange }}</span>
|
|
|
+ </view>
|
|
|
+ <view class="item-box">
|
|
|
+ <span class="item-label">兑换前用户未使用的积分</span>
|
|
|
+ <span class="item-label">{{ item.unusedPointsBeforeExchange }}</span>
|
|
|
+ </view>
|
|
|
+ <view class="item-box">
|
|
|
+ <span class="item-label">兑换后用户未使用的积分</span>
|
|
|
+ <span class="item-label">{{ item.unusedPointsAfterExchange }}</span>
|
|
|
+ </view>
|
|
|
+ <view class="item-box">
|
|
|
+ <span class="item-label">兑换前用户已使用的积分</span>
|
|
|
+ <span class="item-label">{{ item.usedPointsBeforeExchange }}</span>
|
|
|
+ </view>
|
|
|
+ <view class="item-box">
|
|
|
+ <span class="item-label">兑换后用户已使用的积分</span>
|
|
|
+ <span class="item-label">{{ item.usedPointsAfterExchange }}</span>
|
|
|
+ </view>
|
|
|
+ <view class="item-box">
|
|
|
+ <span class="item-label">兑换时间</span>
|
|
|
+ <span class="item-label">{{ item.exchangeTime }}</span>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </uni-list-item>
|
|
|
+ </uni-list>
|
|
|
+ <uni-load-more status="no-more" v-if="!listData || listData.length == 0" />
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from 'vue';
|
|
|
+import { rewardApi } from '@/apis/apis';
|
|
|
+import { onLoad, onShow, onPullDownRefresh } from '@dcloudio/uni-app';
|
|
|
+
|
|
|
+// 属性
|
|
|
+/**
|
|
|
+ * 当前选中的月
|
|
|
+ */
|
|
|
+const currentMonth = ref('2025-04');
|
|
|
+
|
|
|
+/**
|
|
|
+ * 数据
|
|
|
+ */
|
|
|
+const listData = ref([]);
|
|
|
+
|
|
|
+// 方法
|
|
|
+/**
|
|
|
+ * 月份选择器
|
|
|
+ */
|
|
|
+const monthChange = (e) => {
|
|
|
+ currentMonth.value = e.detail.value
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 月份加减
|
|
|
+ */
|
|
|
+const plusMonth = (num) => {
|
|
|
+ // 转换成date对象
|
|
|
+ let tempDate = new Date(currentMonth.value);
|
|
|
+ // 月份加减
|
|
|
+ tempDate.setMonth(tempDate.getMonth() + num);
|
|
|
+
|
|
|
+ // daet对象转换成字符串
|
|
|
+ let tempYear = tempDate.getFullYear();
|
|
|
+ let tempMonth = (tempDate.getMonth() + 1).toString().padStart(2, "0"); // 月份从0开始,+1后格式化为两位数
|
|
|
+ currentMonth.value = `${tempYear}-${tempMonth}`;
|
|
|
+
|
|
|
+ loadData();
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 获取转账数据
|
|
|
+ */
|
|
|
+const loadData = async () => {
|
|
|
+ let res = await rewardApi.queryRewardExchangeHistory({ 'exchangeMonth': currentMonth.value });
|
|
|
+ listData.value = res ? res : [];
|
|
|
+}
|
|
|
+
|
|
|
+// 生命周期
|
|
|
+onLoad(() => {
|
|
|
+ // daet对象转换成字符串
|
|
|
+ let tempDate = new Date();
|
|
|
+ let tempYear = tempDate.getFullYear();
|
|
|
+ let tempMonth = (tempDate.getMonth() + 1).toString().padStart(2, "0"); // 月份从0开始,+1后格式化为两位数
|
|
|
+ currentMonth.value = `${tempYear}-${tempMonth}`;
|
|
|
+});
|
|
|
+
|
|
|
+onShow(() => {
|
|
|
+ loadData();
|
|
|
+})
|
|
|
+
|
|
|
+onPullDownRefresh(() => {
|
|
|
+ loadData();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.date-picker {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .date-picker-item {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ picker {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ /* 水平居中 */
|
|
|
+ justify-content: center;
|
|
|
+ /* 垂直居中 */
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow {
|
|
|
+ /* 启用 Flexbox 布局 */
|
|
|
+ display: flex;
|
|
|
+ /* 垂直居中 */
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-arrow {
|
|
|
+ /* 将子元素对齐到右侧 */
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-arrow {
|
|
|
+ /* 将子元素对齐到右侧 */
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .uni-list-item__container .uni-list-item__header {
|
|
|
+ width: 0%;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .uni-list-item__container>view {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.item-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+</style>
|