leromro-mini/pages_mine/pages/integral/index.vue

<template>
  <view class="integral-container">
    <!-- 积分总览 -->
    <view class="integral-header">
      <view class="integral-header-row">
        <view class="integral-header-item">
          <view class="integral-header-label">总积分</view>
          <view class="integral-header-value">{{ List.totalPoint }}</view>
        </view>
        <view class="integral-header-item">
          <view class="integral-header-label">可兑换积分</view>
          <view class="integral-header-value">{{ List.availablePoint }}</view>
        </view>
      </view>
      <view class="integral-rate-row">
        <view class="integral-rate">1积分=1人民币</view>
        <view class="integral-desc" @click="open" style="cursor: pointer;">收益说明
          <up-icon name="question-circle"></up-icon>
        </view>
      </view>

      <up-popup :show="show" mode="center" @close="close" @open="open">
        <view class="popup-content">
          <view class="popup-title">收益说明</view>
          <view class="popup-text">用户积分：用户通过平台生成的二维码进行分享，以拉取新用户或志愿者（服务者）并获得相应积分。</view>
          <view class="popup-text">积分规则：拉取一个新用户可获得1分，拉取一个新志愿者（服务者）可获得5分。</view>
          <view class="popup-text">积分兑换：所获积分可以兑换等价值的商品或购买各类居家服务。</view>
          <view class="popup-text">积分生效：用户积分的兑换，以所拉取用户在平台上产生交易为准，即产生了交易的用户或志愿者（服务者）其相应的积分才可实现兑换。</view>
          <view class="popup-close" @click="close">关闭</view>
        </view>
      </up-popup>

    </view>

    <!-- 积分明细 -->
    <view class="integral-detail-section">
      <view class="integral-detail-title">积分明细</view>
      <view class="integral-detail-list">
        <view class="integral-detail-item">
          <view class="integral-detail-type">用户推广积分</view>
          <!-- <view class="integral-detail-date">{{ Data.createTime }}</view> -->
          <!-- <view class="integral-detail-value add">{{ Data.changePoint }}积分</view> -->
        </view>
        <!-- 可循环渲染多条明细 -->
      </view>
    </view>

    <!-- 固定底部提示 -->
    <view class="integral-tip-footer">提示：用户推广积分需要用户所推广人员进行消费过后积分才可以使用</view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getUserPointInfoData, coreUserPointChangeData } from '@/api/userPoints'

const List = ref({})//可用积分
const Data = ref({})//积分明细

// 创建响应式数据  
const show = ref(false);  
  
// 定义方法  
function open() {  
  show.value = true;
  console.log('弹窗打开', show.value);
}  
  
function close() {  
  show.value = false;
  console.log('弹窗关闭', show.value);
}  


// 可用积分
const getData = async () => {
  const params = {
    totalPoint: 0,//总积分
    availablePoint: 0,//可兑换积分
  }
  const res = await getUserPointInfoData(params)
  List.value = res.data
  console.log(res)
}

// 积分明细
const getList = async () => {
  // const params = {
  //   totalPoint: 0,//总积分
  //   availablePoint:0,//可兑换积分
  // }
  const res = await coreUserPointChangeData()
  Data.value = res.data
  console.log(res)
}

onMounted(() => {
  getData()
  getList()
})
</script>
<style lang="scss" scoped>
.integral-container {
  padding: 32rpx 24rpx 120rpx 24rpx;
  background: #fff;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.integral-header {
  background: #f8f8f8;
  border-radius: 20rpx;
  padding: 32rpx 24rpx 24rpx 24rpx;
  margin-bottom: 32rpx;
}

.integral-header-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.integral-header-item {
  flex: 1;
  text-align: center;
}

.integral-header-label {
  color: #888;
  font-size: 28rpx;
  margin-bottom: 8rpx;
}

.integral-header-value {
  color: #333;
  font-size: 40rpx;
  font-weight: bold;
}

.integral-rate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.integral-rate {
  color: #888;
  font-size: 24rpx;
}

.integral-desc {
  color: #1a73e8;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}

.integral-detail-section {
  margin-bottom: 32rpx;
}

.integral-detail-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
}

.integral-detail-list {
  background: #f8f8f8;
  border-radius: 16rpx;
  padding: 16rpx;
}

.integral-detail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #eee;
  font-size: 28rpx;
}

.integral-detail-item:last-child {
  border-bottom: none;
}

.integral-detail-type {
  color: #333;
  flex: 2;
}

.integral-detail-date {
  color: #aaa;
  flex: 3;
  font-size: 24rpx;
  text-align: center;
}

.integral-detail-value {
  flex: 1;
  text-align: right;
  font-weight: bold;
}

.integral-detail-value.add {
  color: #1a73e8;
}

.integral-detail-value.minus {
  color: #e81a1a;
}

.integral-tip-footer {
  position: fixed;
  left: 0;
  bottom: 30rpx;
  width: 100vw;
  background: #fffbe8;
  color: #b8860b;
  font-size: 24rpx;
  text-align: center;
  padding: 24rpx 0 32rpx 0;
  box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.04);
  z-index: 99;
}

.popup-content {
  background: #fff;
  padding: 30rpx;
  border-radius: 12rpx;
  width: 600rpx;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
}

.popup-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 20rpx;
}

.popup-close {
  text-align: center;
  color: #1a73e8;
  font-size: 28rpx;
  margin-top: 30rpx;
  padding: 20rpx;
  border-top: 1rpx solid #eee;
}
</style>