web-base-h5/pages/bonus/index.vue

<template>
  <view class="main">
    <view class="totals-summary-bar">
      <view class="total-item">
        <text class="total-label">本月合计</text>
        <text class="total-amount primary-amount">{{
          formatCurrency(monthIncomeTotal)
        }}</text>
      </view>
      <view class="total-separator"></view>
      <view class="total-item">
        <text class="total-label">昨日合计</text>
        <text class="total-amount secondary-amount">{{
          formatCurrency(toSum)
        }}</text>
      </view>
    </view>
    <template>
      <sgsy
        v-if="navIndex == 0"
        ref="sgsyData"
        :checkRule="marketList[0].isShow"
        :num="page.pageNum"
      />
      <fgsy
        v-if="navIndex == 1"
        ref="sgsyData"
        :checkRule="marketList[0].isShow"
      />
      <hignfsy
        v-if="navIndex == 2"
        ref="sgsyData"
        :checkRule="marketList[0].isShow"
      />
      <hfsy
        v-if="navIndex == 3"
        ref="sgsyData"
        :checkRule="marketList[0].isShow"
      />
      <sbydsy
        v-if="navIndex == 4"
        ref="sgsyData"
        :checkRule="marketList[0].isShow"
      />
      <fgqsy
        v-if="navIndex == 5"
        ref="sgsyData"
        :checkRule="marketList[0].isShow"
      />
      <ckkj
        v-if="navIndex == 6"
        ref="sgsyData"
        :checkRule="marketList[0].isShow"
      />
    </template>
  </view>
</template>

<script>
import * as api from '@/config/login.js'
import * as apis from '@/config/market.js'
import * as api1 from '@/config/bonus.js'
import { setToken } from '@/config/auth.js'
import store from '@/store'
import sgsy from '@/components/bonus/sgsy.vue'
import fgsy from '@/components/bonus/fgsy.vue'
import hignfsy from '@/components/bonus/hignfsy.vue'
import hfsy from '@/components/bonus/hfsy.vue'
import sbydsy from '@/components/bonus/sbydsy.vue'
import fgqsy from '@/components/bonus/fgqsy.vue'
import ckkj from '@/components/bonus/ckkj.vue'
export default {
  data() {
    return {
      toSum: 0,
      index: null,
      userInfo: [],
      marketList: [
        {
          text: '奖金来源',
          id: 3,
          path: '/marketDynamics',
          name: 'bonusSource',
          isShow: false,
        },
      ],
      navList: [
        {
          name: '首购收益',
          path: 0,
          value: 'firstPurchase',
          menuKey: '',
        },
        {
          name: '复购收益',
          path: 1,
          value: 'repurchaseEarnings',
          menuKey: '',
        },
        {
          name: '海粉收益',
          path: 2,
          value: 'hignFans',
          menuKey: '',
        },
        {
          name: '海粉收益',
          path: 3,
          value: 'seaFans',
          menuKey: '',
        },
        // { name: '圣宝云代收益',path:4,value:"sbyd",menuKey:''},
        {
          name: '复购券收益',
          path: 5,
          value: 'repurchaseTicket',
          menuKey: '',
        },
        // {
        // 	name: '创客空间收益',
        // 	path: 6,
        // 	value: "markerSpaceEarnings",
        // 	menuKey: ''
        // },
      ],
      navIndex: 0,
      page: {
        pageSize: 50,
        pageNum: 1,
      },
      monthIncomeTotal: 0,
    }
  },
  components: {
    sgsy,
    fgsy,
    hignfsy,
    hfsy,
    sbydsy,
    fgqsy,
    ckkj,
  },
  onLoad() {
    // this.getMenuLists()
    this.getSum()
  },
  methods: {
    getSum() {
      api1.queryBonusTotal({}).then(res => {
        console.log(res, '....res====aa')
        this.toSum = res.rows[0].realIncomeTotal
        this.monthIncomeTotal = res.rows[0].monthIncomeTotal
      })
    },
    bindPickerChange(e) {
      this.index = e.detail.value
    },
    clickHref(index) {
      let that = this
      this.navIndex = index
      this.page.pageNum = 1
    },
    formatCurrency(value) {
      let num = parseFloat(value)
      if (isNaN(num)) {
        num = 0
      }
      const fixedNum = num.toFixed(2)
      const parts = fixedNum.split('.')
      parts[0] = parts[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')
      return parts.join('.')
    },
    // getMenuLists() {
    //   api.menuList().then(res => {
    //     console.log(res, '....resmenu')
    //     res.data.forEach(item => {
    //       this.navList.forEach(items => {
    //         if (item.menuKey == items.value) {
    //           items.menuKey = item.menuKey
    //         }
    //       })
    //       if (this.marketList[0].name == item.menuKey) {
    //         this.marketList[0].isShow = true
    //       }
    //     })
    //   })
    // },
    // async onReachBottom() {
    // 	this.page.pageNum+1
    // 	this.$refs.sgsyData.getDataList(this.page.pageNum+=1);
    // },
  },
}
</script>
<style lang="scss">
.totals-summary-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #ffffff;
  padding: 24rpx 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.06);
  margin-top: 16rpx;
  margin-bottom: 20rpx;

  .total-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;

    .total-label {
      font-size: 26rpx;
      color: #777777;
      margin-bottom: 8rpx;
    }

    .total-amount {
      font-size: 36rpx;
      font-weight: 600;
    }

    .primary-amount {
      color: #005bac; // Theme color
    }

    .secondary-amount {
      color: #333333;
    }
  }

  .total-separator {
    width: 1rpx;
    height: 60rpx; // Adjust as needed
    background-color: #e0e0e0;
  }
}
.sum-val {
  background-color: #fff;
  // height: 100rpx;
  line-height: 60rpx;
  text-align: right;
  margin-top: 10rpx;
  padding-right: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  span {
    font-size: 34rpx;
    font-weight: bold;
    margin-left: 10rpx;
  }
}

/*左侧分类视图*/
.left_scrol_style {
  white-space: nowrap;
  width: 100%;
  background: #fff;
}

.texts {
  color: #333;
  font-size: 26rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* width:200rpx; */
  text-align: right;
}

.select-text {
  display: flex;
  margin-right: 20rpx;
  font-size: 26rpx;
  color: #333;
  position: relative;
}

.selIcon {
  width: 30rpx;
  height: 30rpx;
  margin: 5rpx 0 0 20rpx;
}

page {
  background-color: #f2f2f2;
}

.styles {
  border: none !important;
  color: #fff !important;
  background: #005bac;
}

.top-lists {
  width: fit-content;
  display: flex;
  padding: 30rpx 30rpx 0 0;
  background-color: #fff;
  height: 80rpx;
  line-height: 80rpx;

  .nav-view {
    width: 200rpx;
    cursor: pointer;
    padding: 0 26rpx;
    height: 44rpx;
    border-radius: 10rpx;
    border: 1rpx solid #999999;
    font-size: 14rpx;
    text-align: center;
    line-height: 44rpx;
    margin-left: 20rpx;
    color: #999;
  }
}
</style>