web-base-h5/pages/selfService/monthlyHistory/monthlyHistory.vue

<template>
  <view class="content">
    <template v-if="tableData.length > 0">
      <view class="thecontent" v-for="(item, index) in tableData" :key="index">
        <view class="line_box">
          <view class="line1">{{ '月份' }}</view>
          <view class="line2">{{ item.month }}</view>
        </view>
        <view class="line_box">
          <view class="line1">{{ '左区首购累计业绩' }}</view>
          <view class="line2 bluetext" @click="getMonth(item, 1)">{{
            item.asumPv | decimalFormat
          }}</view>
        </view>
        <view class="line_box">
          <view class="line1">{{ '右区首购累计业绩' }}</view>
          <view class="line2 bluetext" @click="getMonth(item, 2)">{{
            item.bsumPv | decimalFormat
          }}</view>
        </view>
        <!-- <view class="line_box">
					<view class='line1'>{{'左区复购累计业绩'}}</view>
					<view class='line2 bluetext' @click="getMonth(item,1)">{{item.repASumPv|decimalFormat}}</view>
				</view> -->
        <!-- <view class="line_box">
					<view class='line1'>{{'右区复购累计业绩'}}</view>
					<view class='line2 bluetext' @click="getMonth(item,2)">{{item.repBSumPv|decimalFormat}}</view>
				</view> -->
        <view class="line_box">
          <view class="line1">{{ '血缘首购业绩' }}</view>
          <view class="line2 bluetext" @click="getMonth(item, 0)">{{
            item.firstAchieve | decimalFormat
          }}</view>
        </view>
        <!-- <view class="line_box">
					<view class='line1'>{{'血缘复购业绩'}}</view>
					<view class='line2 bluetext' @click="getMonth(item,0)">{{item.repurchaseAchieve|decimalFormat}}
					</view>
				</view> -->
      </view>
      <u-loadmore :status="loadStatus" />
    </template>

    <u-empty
      v-else
      mode="list"
      icon="http://cdn.uviewui.com/uview/empty/list.png"
    >
    </u-empty>
    <u-popup
      :show="sxShow"
      mode="right"
      @close="sxShow = false"
      :closeOnClickOverlay="false"
    >
      <view class="rightPopup">
        <view class="popup_top">
          <view
            @click="
              () => {
                getDataList(), (sxShow = false)
              }
            "
            >筛选</view
          >
          <view class="top_red" @click="sxShow = false">{{ '返回' }}</view>
        </view>
        <view class="typesBox">
          <view class="typeTitle">
            {{ '月份' }}
          </view>
          <view class="choiceBox" @click="riliShow = true">
            <view class="flex_btn" style="width: 100%">
              {{ queryParams.month ? queryParams.month : '请选择' }}
            </view>
            <u-picker
              :show="riliShow"
              ref="uPicker"
              :columns="yearsColumns"
              @confirm="confirm"
              @cancel="riliShow = false"
            ></u-picker>
          </view>
        </view>
        <view class="popup_bottom">
          <view class="bottom_btn thebtn1" @click="clearAll">清空筛选条件</view>
          <view
            class="bottom_btn thebtn2"
            @click="
              () => {
                getDataList(), (sxShow = false)
              }
            "
            >{{ '确定' }}
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import * as sel from '@/config/selfService.js'

export default {
  filters: {
    decimalFormat(value) {
      return Number(value).toFixed(2)
    },
  },
  data() {
    return {
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        month: null,
      },
      total: 0,
      loadStatus: 'loadmore',
      sxShow: false,
      riliShow: false,
      yearsColumns: [
        [2022, 2023, 2024, 2025, 2026, 2027, 2028, 2029, 2030],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      ], // 可选的年份
    }
  },
  onNavigationBarButtonTap() {
    this.sxShow = true
  },
  onLoad() {
    this.getDataList()
  },
  methods: {
    confirm(e) {
      if (e.value[1] < 10) {
        e.value[1] = '0' + e.value[1]
      }
      this.queryParams.month = e.value[0] + '-' + e.value[1]
      this.riliShow = false
    },
    clearAll() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 50,
        month: null,
      }
      this.riliShow = false
      this.getDataList()
    },
    getMonth(row, index) {
      uni.navigateTo({
        url:
          '/pages/selfService/monthlyHistory/monthlyHistoryDetail?month=' +
          row.month +
          '&placeDept=' +
          index,
      })
    },
    //触底触发
    onReachBottom() {
      if (this.queryParams.pageSize * this.queryParams.pageNum < this.total) {
        this.loadStatus = 'loading'
        this.queryParams.pageSize = this.queryParams.pageSize + 50
        setTimeout(() => {
          this.getDataList()
          this.loadStatus = 'loadmore'
        }, 500)
      } else {
        this.loadStatus = 'nomore'
      }
    },
    getDataList() {
      sel.getMonthAchieve(this.queryParams).then(res => {
        this.tableData = res.rows
        this.total = res.total
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  background: #f2f2f2;
  padding-bottom: 20rpx;

  .thecontent {
    background-color: #ffffff;
    margin-top: 20rpx;
    padding: 10rpx 23rpx 30rpx 23rpx;

    .line_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;

      .line1 {
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #999999;
      }

      .line2 {
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
      }

      .line3 {
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: rgba(251, 48, 36, 1);
      }

      .bluetext {
        color: #48b2fd;
        text-decoration: underline;
      }
    }

    .bgrightBox {
      margin-top: 20rpx;
      padding-top: 20rpx;
      display: flex;
      justify-content: flex-end;
      border-top: 1rpx solid #eeeeee;
    }
  }

  .rightPopup {
    width: 645rpx;
    height: 100%;
    overflow: auto;

    .popup_top {
      padding: 25rpx;
      background-color: rgba(176, 196, 222, 0.45);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;

      .top_red {
        color: #005bac;
      }
    }

    .typesBox {
      margin-top: 40rpx;

      .typeTitle {
        padding: 0 24rpx;
        font-size: 30rpx;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #333333;
      }

      .choiceBox {
        padding: 0 12rpx;
        display: flex;
        margin-top: 17rpx;
        align-items: center;
        flex-wrap: wrap;

        .flex_btn {
          background-color: rgba(176, 196, 222, 0.45);
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 14rpx 48rpx;
          border-radius: 26rpx;
          font-size: 24rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #333333;
          margin: 17rpx 5rpx;
        }

        .timesbtn {
          flex: 1;
        }

        .selectbtn {
          background-color: #005bac;
          color: #ffffff;
        }
      }
    }

    .popup_bottom {
      display: flex;
      align-items: center;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;

      .bottom_btn {
        flex: 1;
        padding: 20rpx 0;
        text-align: center;
        font-size: 28rpx;
      }

      .thebtn1 {
        background-color: rgba(176, 196, 222, 0.45);
        color: #333333;
      }

      .thebtn2 {
        background-color: #005bac;
        color: #ffffff;
      }
    }
  }
}
</style>