dvcp_v2_wechat_app/project/sanjianxi/AppGreatPowerIntegral/AppGreatPowerIntegral.vue

<template>
  <div class="AppGreatPowerIntegral">
    <div class="myIntegral">
      <p>{{ data['integral'] + data['learningIntegral'] }}</p>
      <label>我的积分</label>
    </div>
    <div class="tabs">
      <div class="item">
        <p>{{ data['integral'] }}</p>
        <label>个人积分</label>
      </div>
      <div class="item">
        <p>{{ data['familySurplusIntegral'] }}</p>
        <label>家庭积分</label>
      </div>
      <div class="item">
        <p>{{ data['learningIntegral'] }}</p>
        <label>学习强国</label>
      </div>
    </div>

    <div class="btn">
      <div class="editBtn" @click="$linkTo(`./editIntegral?partyMemberId=${user.partyId}&id=${user.id}`)">修改学习强国</div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'AppGreatPowerIntegral',
  appName: '学习强国',
  data() {
    return {
      data: {}
    }
  },
  onShow() {
    this.getIntegral()
    uni.$on('update', ()=>{
      this.getIntegral()
    })
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    getIntegral() {
      this.$instance.post('/app/appparty/getPartyIntegralDetail',null,{
        params: {
          id: this.user.id,
        }
      }).then((res) => {
        if(res?.data) {
          this.data = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.AppGreatPowerIntegral {
  .myIntegral {
    position: relative;
    padding-top: 30px;
    box-sizing: border-box;
    height: 344px;
    width: 100%;
    background: #4181FF;
    text-align: center;
    p {
      font-size: 100px;
      font-weight: 600;
      color: #FFFFFF;
    }
    label {
      font-size: 32px;
      color: #FFFFFF;
    }
  }
  .tabs {
    display: flex;
    position: absolute;
    left: 35px;
    top: 250px;
    height: 176px;
    width: 90%;
    background: #FFF;
    border-radius: 32px;
    .item {
      flex: 1;
      text-align: center;
      padding: 30px 0;
      p {
        font-size: 50px;
        color: #333333;
        font-weight: 600;
      }
      label {
        font-size: 28px;
        color: #999999;
      }
    }
  }
  .btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    padding: 16px 32px;
    box-sizing: border-box;
    display: flex;
    background: #F3F6F9;
    .editBtn {
      flex: 1;
      height: 88px;
      line-height: 88px;
      text-align: center;
      color: #FFF;
      background: #4181FF;
      border-radius: 16px;
    }
  }
}
</style>