yicangzongtai_app_240321/pages/user/integrateBalance.vue

<template>
  <view>
    <navbar :config="config"></navbar>
    <view class="top-box">
      <text class="title">积分余额</text>
      <text class="integral">{{ $addDecimals(integral_able , 8) }}</text>
      <text class="worth">当前积分价值：{{ pointconfigInfo.point_price }}元</text>
      <view class="integral-btns">
        <text class="integral-btn" @click.stop="exchangeIntegral()">兑换余额</text>
        <text class="integral-btn" @click.stop="goIntegralTransferred()" v-if="openProxy == true">积分转赠</text>
      </view>
    </view>
    <view class="content-box">
      <view class="list-box">
        <view class="list-box-title">
          <text @click.stop="activeType = 1"
            :class="['list-title' , activeType == 1 ? 'active-list-title' : '']">积分详情</text>
          <text @click.stop="activeType = 2"
            :class="['list-title' , activeType == 2 ? 'active-list-title' : '']">积分明细</text>
        </view>
        <view class="list-item-box">
          <template v-if="activeType === 1">
            <block v-for="item in integralInfo">
              <view class="list-item list-info-item">
                <image class="list-info-img" :src="item.icon" mode=""></image>
                <view class="list-info-text">
                  <text class="text-title">{{ item.name }}</text>
                  <text v-if="item.way"
                    class="text-num">{{ $addDecimals(subtractionNum(pointconfigInfo[item.key_1] , pointconfigInfo[item.key_2]) , item.length)  }}</text>
                  <!-- <text v-if="item.way" class="text-num">{{ pointconfigInfo[item.key_1] }}</text> -->
                  <text v-else class="text-num">{{ $addDecimals(pointconfigInfo[item.key] , item.length) }}</text>
                </view>
              </view>
            </block>
          </template>
          <template v-if="activeType === 2">
            <block v-for="(item, index)  in pointsList" :key="index">
              <view class="list-item">
                <view class="list-item-text">
                  {{item.mode}}
                </view>
                <view class="list-item-val">
                  <text class="list-item-time">{{ item.create_time }}</text>
                  <text class="list-item-nums">
                    {{ item.bill_type == 1 ? '+' : '-'}}{{ $addDecimals(item.value) }}积分
                  </text>
                </view>
              </view>
            </block>

            <loadMore v-if="pointsList.length>0" :status="status"></loadMore>
            <nodata v-else :config="{ top: 1, content: '暂无数据~' }"></nodata>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getAccountInfo
  } from "@/api/login.js"
  import math from "@/common/math.js"
  import {
    pointconfig,
    destroyIntegral
  } from "@/api/personal-center.js"
  import {
    detailedInfo
  } from "@/api/notice.js";
  export default {
    data() {
      return {
        activeType: 2,
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '我的积分',
          color: '#FFFFFF',
          // autoBack:true,
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, "#3775F6"],
          statusBarFontColor: '#FFFFFF'
        },
        // 积分余额
        integral_able: 0,
        pointsList: [],
        pointconfigInfo: {
          platform_total_point: 0,
          every_day_put_int_point: 0,
          point_price: 0
        },
        params: {
          page: 1,
          limit: 10
        },
        status: 'loading', //more|loading|noMore
        integralInfo: [{
            icon: '../../static/personal/integral1.png',
            name: '平台空投总积分数量',
            key: 'platform_total_point',
            length: 8,
          },
          {
            icon: '../../static/personal/integral2.png',
            name: '平台未释放积分数量',
            way: true,
            length: 8,
            // key_1 - key_2
            key_1: 'platform_total_point',
            key_2: 'give_total_point',
          },
          {
            icon: '../../static/personal/integral3.png',
            name: '每日权重空投数量',
            key: 'every_day_put_int_point',
            length: 8
          },
          {
            icon: '../../static/personal/integral4.png',
            name: '当前积分价值（元）',
            key: 'point_price',
            length: 2
          },
          {
            icon: '../../static/personal/integral5.png',
            name: '已空投积分数',
            key: 'give_total_point',
            length: 8
          },
          {
            icon: '../../static/personal/destroy.png',
            name: '已销毁积分数',
            key: 'all_handling_fee',
            length: 8
          }
        ],
        openProxy: false, // 是否开启区域代理
      }
    },
    onShow() {
      this.pointsList = [];
      this.getUserInfo()
      this.getMydetailed();
      this.isOpenProxy()
    },
    onLoad() {
      this.getPointconfig()
      // this.getDestoryPoint()
    },
    onReachBottom() {
      if (this.activeType === 2 && this.status !== 'loading' && this.status !== 'noMore') {
        this.params.page++
        this.getMydetailed()
      }
    },
    onPullDownRefresh() {
      this.params.page = 1
      this.pointsList = []
      this.getMydetailed()
      this.isOpenProxy()
    },
    methods: {
      //获取个人信息
      getUserInfo() {
        this.$http.get(getAccountInfo).then(res => {
          if (res && res.code == 200) {
            this.integral_able = res.data.integral_able;
            uni.setStorageSync("personal", res.data)
          } else {
            this.isLogin = false
          }
        })
      },
      // 计算 平台未释放积分数量
      subtractionNum(num_1 = 0, num_2 = 0) {
        return math.subtract(num_1, num_2)
      },
      // 获取积分详情
      getPointconfig() {
        this.$http.get(pointconfig).then((res) => {
          if (res && res.code == 200) {
            uni.stopPullDownRefresh()
            this.pointconfigInfo = res.data
            this.getDestoryPoint()
          }
        });
      },
      getDestoryPoint() {
        this.$http.get(destroyIntegral).then((res) => {
          if (res && res.code == 200) {
            uni.stopPullDownRefresh()
            this.pointconfigInfo.all_handling_fee = res.data.all_handling_fee
          }
        });
      },
      // 获取积分明细
      getMydetailed() {
        this.status = 'loading';
        this.$http.get(detailedInfo, this.params).then((res) => {
          if (res && res.code == 200) {
            uni.stopPullDownRefresh()
            this.pointsList = this.pointsList.concat(res.page.list);
            if (res.page.totalPage <= res.page.currPage) {
              this.status = 'noMore'
            } else {
              this.status = 'more'
            }
          }
        });
      },
      // 兑换余额
      exchangeIntegral() {
        uni.navigateTo({
          url: "/pages/user/exchange"
        })
      },
      // 积分转赠
      goIntegralTransferred() {
        uni.navigateTo({
          url: "/pages/user/Integral-transferred"
        })
      },
      isOpenProxy() {
        this.$http.get('/saleconfig/openPayment').then(res => {
          if (res && res.code == 200) {
            this.openProxy = res.openPayment;
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .top-box {
    width: 100%;
    min-height: 354rpx;
    padding: 50rpx 60rpx 90rpx;
    background-color: #FA6138;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    color: #ffffff;

    .worth,
    .title {
      font-size: 28rpx;
      color: #ffffff;
    }

    .integral {
      font-size: 50rpx;
    }

    .integral-btns {
      display: flex;
      align-items: center;
      margin-top: 40rpx;

      .integral-btn {
        width: 270rpx;
        height: 72rpx;
        background: #FA6138;
        border: 1rpx solid #ffffff;
        border-radius: 36rpx;
        text-align: center;
        line-height: 70rpx;
        margin-right: 30rpx;
        font-size: 26rpx;

        &:last-child {
          margin: 0 0 0 30rpx;
          background-color: #fff;
          color: #FA6138;
        }
      }
    }
  }

  .content-box {
    width: 100%;
    position: relative;
  }

  .list-box {
    width: 100%;
    position: absolute;
    top: -40rpx;
    // transform: translateY(-40rpx);
    border-radius: 40rpx 40rpx 0 0;
    background-color: #fff;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;

    .list-box-title {
      width: 100%;
      height: 103.5rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 0 60rpx;
      font-size: 32rpx;
      color: #1a1a1a;
      border-bottom: 1rpx solid #e6e6e6;

      .list-title {
        height: 100%;
        line-height: 103rpx;
        // border-bottom: 4rpx solid #1a1a1a;
      }

      .active-list-title {
        font-size: 32rpx;
        font-weight: 700;
        color: #FA6138;
        position: relative;

        &:before {
          content: '';
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 4rpx;
          border-radius: 2rpx;
          background-color: #FA6138;
        }
      }
    }

    .list-item-box {
      width: 100%;
      padding: 0 60rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
    }

    .list-item {
      width: 100%;
      // min-height: 161rpx;
      padding: 40rpx 0;
      border-bottom: 1rpx solid #e6e6e6;
      // text-align: left;
      display: flex;
      flex-direction: column;
      // align-items: center;
      justify-content: center;

      .list-item-text {
        // opacity: 0.9;
        font-size: 28rpx;
        color: #1a1a1a;
      }

      .list-item-val {
        padding-top: 14rpx;
        display: flex;
        justify-content: space-between;
        align-content: center;
        align-items: center;

        .list-item-time {
          font-size: 24rpx;
          color: #999999;
          flex-shrink: 0;
        }

        .list-item-nums {
          padding-left: 10px;
          font-size: 30rpx;
          color: #FA6138;
        }
      }


    }


    .list-info-item {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;

      .list-info-img {
        width: 71rpx;
        height: 71rpx;
      }

      .list-info-text {
        width: calc(100% - 71rpx);
        padding-left: 22rpx;
        display: flex;
        flex-direction: column;

        .text-title {
          font-size: 28rpx;
          color: #1a1a1a;
        }

        .text-num {
          padding-top: 6rpx;
          font-size: 24rpx;
          color: #666666;
        }
      }
    }
  }
</style>