ch-tgr/src/views/User/Point.vue

<template>
  <BasePage>

    <div class="balance point">
      <div class="top">
        <div class="line">
          <b class="tit">
            当前积分 <van-icon name="question-o" @click.stop="showTerm = true"></van-icon>
          </b>

        </div>

        <div class="line">
          <b class="num">
            {{ data.total.totalsum?.toFixed(2) }}
          </b>
        </div>

        <div class="line">
          <div class="pn">
            累计收入:
            <p>{{ data.total?.positivesum?.toFixed(2) }}</p>
          </div>
          <div class="r pn">
            累计支出:
            <p>{{ Math.abs((data.total?.negativesum))?.toFixed(2) }}</p>
          </div>
        </div>
      </div>

      <div class="botom">
        <div class="date_box">
          <div class="date" @click="showDate = true">
            {{ date[0] }}-
            <p>{{ (parseInt(date[1]) < 10) ? `0${parseInt(date[1])}` : parseInt(date[1]) }}</p>
                <img src="/img/down.png" alt="">
          </div>

          <div class="count">
            <div>
              <span>收入</span>
              <p> {{ data.total?.positivesumcurrent?.toFixed(2) }}</p>
            </div>

            <div>
              <span>支出</span>
              <p> {{ Math.abs((data.total?.negativesumcurrent))?.toFixed(2) }}</p>
            </div>
          </div>
        </div>
        <!-- 
        <van-tabs v-model:active="active" type="card" class="tabs" color="#374c6d">
          <van-tab title="全部"></van-tab>
          <van-tab title="礼包"></van-tab>
          <van-tab title="商家"></van-tab>
          <van-tab title="商城"></van-tab>
          <van-tab title="分成"></van-tab>
        </van-tabs> -->

        <BaseList ref="baselist" url="/v1/client/DUserxiaofeijifensClient" class="_m_" :params="searchParams">
          <template #default="{ item }">
            <div class="list" :key="item.TradeCode">
              <table width="100%" cellpadding="0" cellspacing="0">
                <tbody>
                  <tr>
                    <td>
                      <div style="margin-bottom: 2vw;">{{ $route.meta.title }}：{{
                        item.balance?.toFixed(2) }}</div>
                    </td>
                    <td style="text-align: right;">
                      <van-tag :type="item.nums > 0 ? 'primary' : 'danger'" style="margin-bottom: 2vw;">
                        {{ item.nums > 0 ? "增加：+" : "减少："
                        }}{{ (item.nums).toFixed(2) }}
                      </van-tag>
                    </td>
                  </tr>
                  <tr v-if="item.remark">
                    <td colspan="2">
                      <div style="line-height: 5vw;word-break: break-all; color: #999">
                        备注：{{ item.remark }}
                      </div>
                    </td>
                  </tr>
                  <tr v-if="item.ordernum">
                    <td colspan="2">
                      <div style="line-height: 5vw;word-break: break-all;color: #999;display: inline;">
                        订单：{{ item.ordernum }}
                      </div>
                      <u style="color: #535353; margin-left: 1.667vw"
                        @click="$copyText(item.ordernum); $showSuccessToast('复制成功')">复制</u>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2">
                      <div style="line-height: 5vw;word-break: break-all;color: #999;display: inline;">
                        时间：{{ $formatGMT(item.addtime, 'yyyy-MM-dd HH:mm:ss') }}
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </template>
        </BaseList>
      </div>
    </div>

    <van-popup v-model:show="showDate" position="bottom">
      <van-date-picker v-model="currentDate" title="选择年月" :columns-type="['year', 'month']" @confirm="onconfirm"
        @cancel="showDate = false" />
    </van-popup>
    <van-action-sheet v-model:show="showTerm" safe-area-inset-bottom :title="`${this.$route.meta.title}说明`" closeable
      style="min-height: 50%; padding: 0px 10px 10px 10px">
      <div class="w100 html" v-html="data.Term" />
    </van-action-sheet>

  </BasePage>
</template>
<script>
export default {
  name: 'Point',
  mounted() {
    this.init();
  },
  data() {
    return {
      data: {
        total: {
          Balance: 8888.88,
          TotalBalance: 20000.00,
          MonthBalance: 5200.00,
          MonthReduceBalance: 1311.12,
        },
        Term: '余额说明：余额可用于提现、购物等。',
      },
      date: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
      currentDate: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
      show: false,
      showDate: false,
      searchParams: {
        // type: 'Balance',
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
      },
      loading: false,
      showTerm: false,
      list: [],
    }
  },
  methods: {
    init() {
      this.$get('/v1/client/DUserxiaofeijifensClient/statistics', this.searchParams).then(data => {
        this.data.total = data.data;
      }).catch(err => {
        this.$showFailToast(err.message || '加载失败');
      })
    },
    onconfirm(value) {
      this.date = this.currentDate;
      this.showDate = false;
      this.searchParams.year = Number.parseInt(this.currentDate[0]);
      this.searchParams.month = Number.parseInt(this.currentDate[1]);
      this.init();
      this.$refs.baselist.refresh()
    },
    changeTabs(e) {
      this.show = false;
    },
    onShowTerm() {
      this.showTerm = true;
    }
  }
}
</script>