EpicSoul/subPackages/points/index.vue

<template>
  <view class="points-detail-page">
    <!-- 积分总览 -->
    <view class="points-overview">
      <view class="total-points">
        <text class="points-number">{{ totalPoints }}</text>
        <text class="points-label">当前积分</text>
      </view>
      <!-- 时间奖励值 -->
      <view class="time-reward" @click="showExchangeModal">
        <view class="reward-icon">
          <nmr-icon
            name="jifenduihuan"
            style="margin-right: 10rpx; margin-top: 3rpx"
            size="40"
            color="white"
          ></nmr-icon
          >兑换奖励
        </view>
      </view>
    </view>

    <!-- 筛选选项 -->
    <view class="filter-tabs">
      <view
        class="tab-item"
        :class="[{ active: currentTab === 'all' }]"
        @click="switchTab('all')"
      >
        全部
      </view>
      <view
        class="tab-item"
        :class="[{ active: currentTab === 'in' }]"
        @click="switchTab('in')"
      >
        收入
      </view>
      <view
        class="tab-item"
        :class="[{ active: currentTab === 'out' }]"
        @click="switchTab('out')"
      >
        支出
      </view>
    </view>

    <!-- 积分记录列表 -->
    <scroll-view class="points-list" scroll-y="true" @scrolltolower="loadMore">
      <template v-if="pointsList.length">
        <view
          class="record-item"
          v-for="(item, index) in pointsList"
          :key="index"
        >
          <view class="record-left">
            <view
              class="record-icon"
              :class="item.fromType === 'in' ? 'income' : 'expense'"
            >
              <nmr-icon name="jifen" size="60" color="#333"></nmr-icon>
            </view>
            <view class="record-info">
              <view class="record-title">{{ item.dictName }}</view>
              <view class="record-desc">{{ item.remark }}</view>
              <view class="record-time">{{ item.createTime }}</view>
            </view>
          </view>
          <view class="record-right">
            <view
              class="record-points"
              :class="item.fromType === 'in' ? 'income' : 'expense'"
            >
              {{ item.points }}
            </view>
          </view>
        </view>

        <!-- 加载更多提示 -->
        <view class="load-more" v-if="hasMore">
          <text class="load-text">{{
            loading ? "加载中..." : "上拉加载更多"
          }}</text>
        </view>

        <!-- 没有更多数据 -->
        <view class="no-more" v-if="!hasMore && pointsList.length > 0">
          <text class="no-more-text">没有更多数据了</text>
        </view>
      </template>

      <!-- 空状态 -->
      <view class="empty-state" v-if="pointsList.length === 0 && !loading">
        <image
          class="empty-icon"
          src="https://epic.js-dyyj.com/uploads/20250808/c16267f9cc2b7a68bf23713b5847987e.png"
          mode="aspectFit"
        ></image>
        <text class="empty-text">暂无积分记录</text>
      </view>
    </scroll-view>

    <!-- 兑换弹窗 -->
    <uni-popup ref="exchangePopup" type="center" :mask-click="false">
      <view class="exchange-modal">
        <view class="modal-header">
          <text class="modal-title">时间奖励兑换</text>
          <view class="close-btn" @click="closeExchangeModal">
            <uni-icons type="closeempty" size="20" color="#999"></uni-icons>
          </view>
        </view>

        <view class="modal-content">
          <view class="current-reward">
            <text class="reward-label">当前时间奖励值：</text>
            <text class="reward-value">{{
              (userInfo && userInfo.hourValue) || 0
            }}</text>
          </view>

          <view class="exchange-form">
            <view class="form-item">
              <text class="form-label">兑换数量：</text>
              <input
                class="form-input"
                v-model="exchangeAmount"
                type="number"
                placeholder="请输入兑换数量"
              />
            </view>
          </view>

          <view class="exchange-rules">
            <text class="rules-title">兑换规则：</text>
            <view class="rules-list">
              <text class="rule-item"
                >• 1个时间奖励值 = {{ pointInfo.points || 0 }}积分</text
              >
            </view>
          </view>
        </view>

        <view class="modal-footer">
          <button class="cancel-btn" @click="closeExchangeModal">取消</button>
          <button class="confirm-btn" @click="confirmExchange">确认兑换</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      totalPoints: 0,
      currentTab: "all",
      pointsList: [],
      page: 1,
      pageSize: 20,
      hasMore: true,
      loading: false,
      refreshing: false,
      userInfo: null,
      timeReward: 0,
      exchangeAmount: "",
      exchangeResult: 0,
      pointInfo: null,
    };
  },

  onLoad() {
    this.getUserInfo();
    this.loadPointsData();
    this.getTotalPoints();
  },

  methods: {
    getUserInfo() {
      this.Post({}, "/framework/user/getInfo", "DES").then((res) => {
        this.userInfo =
          (uni.getStorageSync("userInfo") &&
            JSON.parse(uni.getStorageSync("userInfo"))) ||
          this.$store.state.user.userInfo ||
          {};
        res.data.token = this.userInfo.token;
        uni.setStorageSync("userInfo", JSON.stringify(res.data));
        this.userInfo = res.data;
      });
    },
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 切换筛选标签
    switchTab(tab) {
      if (this.currentTab === tab) return;
      this.currentTab = tab;
      this.resetData();
      this.loadPointsData();
    },

    // 重置数据
    resetData() {
      this.pointsList = [];
      this.page = 1;
      this.hasMore = true;
    },

    // 获取总积分
    async getTotalPoints() {
      try {
		  if(!uni.getStorageSync("userInfo") )return
        this.Post({}, "/framework/points/getLastBalance", "DES").then((res) => {
          if (res.code === 200) {
            this.pointInfo = res.data;
            this.totalPoints = res.data.balance || 0;
          }
        });
      } catch (error) {
        console.error("获取总积分失败:", error);
      }
    },

    // 加载积分数据
    async loadPointsData() {
      if (this.loading) return;

      this.loading = true;

      try {
        const params = {
          page: this.page,
          pageSize: this.pageSize,
        };

        if (this.currentTab !== "all") {
          params.fromType = this.currentTab;
        }

        this.Post(params, "/framework/points/list", "DES").then((res) => {
          console.log(res);
          if (res.code === 200) {
            const newData = res.rows || [];

            if (this.page === 1) {
              this.pointsList = newData;
            } else {
              this.pointsList = [...this.pointsList, ...newData];
            }

            this.hasMore = newData.length === this.pageSize;

            if (this.hasMore) {
              this.page++;
            }
          } else {
            uni.showToast({
              title: res.msg || "加载失败",
              icon: "none",
            });
          }
        });
      } catch (error) {
        console.error("加载积分记录失败:", error);
        uni.showToast({
          title: "网络错误，请重试",
          icon: "none",
        });
      } finally {
        this.loading = false;
        this.refreshing = false;
      }
    },

    // 加载更多
    loadMore() {
      if (this.hasMore && !this.loading) {
        this.loadPointsData();
      }
    },

    // 下拉刷新
    onRefresh() {
      this.refreshing = true;
      this.resetData();
      this.loadPointsData();
      this.getTotalPoints();
    },

    // 显示兑换弹窗
    showExchangeModal() {
      this.$refs.exchangePopup.open();
    },

    // 关闭兑换弹窗
    closeExchangeModal() {
      this.$refs.exchangePopup.close();
      this.exchangeAmount = "";
      this.exchangeResult = 0;
    },
    async confirmExchange() {
      if (parseInt(this.exchangeAmount) > this.userInfo.hourValue) {
        uni.showToast({
          title: "兑换值大于可用值",
          icon: "none",
        });
        return;
      }
      try {
        const params = {
          hour: parseInt(this.exchangeAmount),
          method: "post",
        };
        this.Post(params, "/framework/points/hourChange", "DES").then((res) => {
          if (res.code === 200) {
            uni.showToast({
              title: "兑换成功",
              icon: "success",
            });

            // 刷新数据
            this.getUserInfo();
            this.getTotalPoints();
            this.resetData();
            this.loadPointsData();
            this.closeExchangeModal();
          } else {
            uni.showToast({
              title: res.msg || "兑换失败",
              icon: "none",
            });
          }
        });
      } catch (error) {
        console.error("兑换失败:", error);
        uni.showToast({
          title: "网络错误，请重试",
          icon: "none",
        });
      }
    },

    // 格式化时间
    formatTime(timestamp) {
      const date = new Date(timestamp);
      const now = new Date();
      const diff = now.getTime() - date.getTime();

      // 今天
      if (diff < 24 * 60 * 60 * 1000 && now.getDate() === date.getDate()) {
        return `今天 ${date.getHours().toString().padStart(2, "0")}:${date
          .getMinutes()
          .toString()
          .padStart(2, "0")}`;
      }

      // 昨天
      const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
      if (yesterday.getDate() === date.getDate()) {
        return `昨天 ${date.getHours().toString().padStart(2, "0")}:${date
          .getMinutes()
          .toString()
          .padStart(2, "0")}`;
      }

      // 其他日期
      return `${date.getMonth() + 1}-${date.getDate()} ${date
        .getHours()
        .toString()
        .padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
    },
  },
};
</script>

<style scoped>
.points-detail-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 32rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.nav-back {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-back .iconfont {
  font-size: 36rpx;
  color: #333;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.nav-placeholder {
  width: 60rpx;
}

/* 积分总览 */
.points-overview {
  background: linear-gradient(135deg, #77f3f9 0%, #764ba2 100%);
  padding: 60rpx 32rpx;
  text-align: center;
  position: relative;
}

.total-points {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.points-number {
  font-size: 72rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 12rpx;
}

.points-label {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
}

/* 时间奖励值 */
.time-reward {
  position: absolute;
  top: 30rpx;
  right: 32rpx;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 30rpx;
  padding: 6rpx 10rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.3);
}

.reward-icon {
  margin-right: 8rpx;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  color: white;
}

/* 筛选标签 */
.filter-tabs {
  display: flex;
  background-color: #fff;
  padding: 0 32rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 32rpx 0;
  font-size: 30rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #77f3f9;
  font-weight: 600;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background-color: #77f3f9;
  border-radius: 2rpx;
}

/* 积分记录列表 */
.points-list {
  height: calc(100vh - 368rpx);
  padding: 0 30rpx;
  width: 690rpx;
}

.record-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 32rpx 24rpx;
  margin-top: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.record-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.record-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}

.record-icon.income {
  background-color: #e8f5e8;
}

.record-icon.expense {
  background-color: #ffeaea;
}

.record-icon .iconfont {
  font-size: 36rpx;
}

.record-icon.income .iconfont {
  color: #52c41a;
}

.record-icon.expense .iconfont {
  color: #ff4d4f;
}

.record-info {
  flex: 1;
}

.record-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.record-desc {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 8rpx;
}

.record-time {
  font-size: 24rpx;
  color: #ccc;
}

.record-right {
  text-align: right;
}

.record-points {
  font-size: 32rpx;
  font-weight: 600;
}

.record-points.income {
  color: #52c41a;
}

.record-points.expense {
  color: #ff4d4f;
}

/* 加载状态 */
.load-more,
.no-more {
  text-align: center;
  padding: 40rpx 0;
}

.load-text,
.no-more-text {
  font-size: 28rpx;
  color: #999;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 32rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

/* 兑换弹窗样式 */
.exchange-modal {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx 40rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.close-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  padding: 40rpx;
}

.current-reward {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
}

.reward-label {
  font-size: 28rpx;
  color: #666;
}

.reward-value {
  font-size: 32rpx;
  font-weight: 600;
  color: #77f3f9;
  margin-left: 10rpx;
}

.exchange-form {
  margin-bottom: 40rpx;
}

.form-item {
  margin-bottom: 20rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 12rpx;
  display: block;
}

.form-input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.exchange-result {
  padding: 20rpx;
  background: #e8f5e8;
  border-radius: 8rpx;
  margin-top: 20rpx;
}

.result-text {
  font-size: 28rpx;
  color: #52c41a;
  font-weight: 500;
}

.exchange-rules {
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
}

.rules-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
  display: block;
}

.rules-list {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.rule-item {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
}

.modal-footer {
  display: flex;
  gap: 20rpx;
  padding: 20rpx 40rpx 40rpx;
}

.cancel-btn,
.confirm-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
}

.confirm-btn {
  background: #77f3f9;
  color: #fff;
}

.confirm-btn:disabled {
  background: #ccc;
  color: #999;
}
</style>