web-zk-h5/pages/selfService/monthlyHistory/monthlyHistoryDetail.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.memberCode }}</view>
        </view>
        <view class="line_box">
          <view class="line1">{{ '会员姓名' }}</view>
          <view class="line2">{{ item.memberName }}</view>
        </view>
        <view class="line_box">
          <view class="line1">{{ '注册等级' }}</view>
          <view class="line2">{{ item.pkGradeVal }}</view>
        </view>
        <view class="line_box">
          <view class="line1">{{ '真实奖衔' }}</view>
          <view class="line2">{{ item.pkAwardsVal }}</view>
        </view>
        <view class="line_box">
          <view class="line1">{{ '首购业绩' }}</view>
          <view class="line2">{{ item.firstAchieve | decimalFormat }}</view>
        </view>
        <view class="line_box">
          <view class="line1">{{ '复购业绩' }}</view>
          <view class="line2">{{
            item.repurchaseAchieve | decimalFormat
          }}</view>
        </view>
      </view>
    </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="
              () => {
                getDetail(), (sxShow = false)
              }
            "
            >筛选</view
          >
          <view class="top_red" @click="sxShow = false">{{ '返回' }}</view>
        </view>
        <view class="typesBox">
          <view class="typeTitle">
            {{ '会员编号' }}
          </view>
          <view class="choiceBox">
            <view class="flex_btn" style="width: 100%">
              <u--input
                :placeholder="'请输入'"
                v-model="queryParams.memberCode"
                border="none"
              ></u--input>
            </view>
          </view>
        </view>
        <view class="typesBox">
          <view class="typeTitle">
            {{ '会员姓名' }}
          </view>
          <view class="choiceBox">
            <view class="flex_btn" style="width: 100%">
              <u--input
                :placeholder="'请输入'"
                v-model="queryParams.memberName"
                border="none"
              ></u--input>
            </view>
          </view>
        </view>
        <view class="typesBox">
          <view class="typeTitle">
            {{ '注册等级' }}
          </view>
          <view class="choiceBox">
            <view
              @click="gradeShow = true"
              class="flex_btn"
              style="width: 100%"
            >
              <u--input
                :placeholder="'请输入'"
                v-model="queryParams.gradeName"
                border="none"
              ></u--input>
            </view>

            <u-picker
              @cancel="gradeShow = false"
              :show="gradeShow"
              ref="uPicker"
              :columns="gradeList"
              @confirm="confirm"
              keyName="gradeName"
            ></u-picker>
          </view>
        </view>
        <view class="typesBox">
          <view class="typeTitle">
            {{ '真实奖衔' }}
          </view>
          <view class="choiceBox">
            <view
              @click="awardsShow = true"
              class="flex_btn"
              style="width: 100%"
            >
              <u--input
                :placeholder="'请选择'"
                v-model="queryParams.awardsName"
                border="none"
              ></u--input>
            </view>
            <u-picker
              @cancel="awardsShow = false"
              :show="awardsShow"
              ref="uPicker"
              :columns="awardsList"
              @confirm="confirm2"
              keyName="label"
            ></u-picker>
          </view>
        </view>
        <view class="popup_bottom">
          <view class="bottom_btn thebtn1" @click="clearAll">清空筛选条件</view>
          <view
            class="bottom_btn thebtn2"
            @click="
              () => {
                getDetail(), (sxShow = false)
              }
            "
            >{{ '确定' }}
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import * as sel from '@/config/selfService.js'
import { getGradeList } from '@/config/bonus.js'
export default {
  filters: {
    decimalFormat(value) {
      return Number(value).toFixed(2)
    },
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        month: '',
        placeDept: '',
      },
      themonth: '',
      theplaceDept: '',
      tableData: [],
      total: 0,
      sxShow: false,
      gradeList: [],
      awardsList: [],
      gradeShow: false,
      awardsShow: false,
    }
  },
  onNavigationBarButtonTap() {
    this.sxShow = true
  },
  onLoad(query) {
    this.themonth = query.month
    this.theplaceDept = query.placeDept
    this.getOthers()
    this.getDetail()
  },
  methods: {
    confirm(e) {
      this.queryParams.gradeName = e.value[0].gradeName
      this.queryParams.pk_grade = e.value[0].pkId
      this.gradeShow = false
    },
    confirm2(e) {
      this.queryParams.awardsName = e.value[0].label
      this.queryParams.pk_awards = e.value[0].value
      this.awardsShow = false
    },
    getOthers() {
      getGradeList().then(res => {
        this.gradeList = [res.data]
      })
      sel.getAwardsList().then(res => {
        this.awardsList = [res.data]
      })
    },
    clearAll() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 50,
      }
      this.getDetail()
    },
    //触底触发
    onReachBottom() {
      if (this.queryParams.pageSize * this.queryParams.pageNum < this.total) {
        this.loadStatus = 'loading'
        this.queryParams.pageSize = this.queryParams.pageSize + 50
        setTimeout(() => {
          this.getDetail()
          this.loadStatus = 'loadmore'
        }, 500)
      } else {
        this.loadStatus = 'nomore'
      }
    },
    getDetail() {
      this.queryParams.month = this.themonth
      this.queryParams.placeDept = this.theplaceDept
      sel.getMonthAchieveDetail(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;
      }
    }
  }

  .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>