web-retail-h5/pages/bonus/regional-assessment/index.vue

<template>
  <view class="regional-assessment">
    <u-navbar title="区域考核" :autoBack="true"></u-navbar>
    <view class="content">
      <scroll-view scroll-y class="list-scroll" @scrolltolower="onReachBottom">
        <template v-if="list.length > 0">
          <view
            v-for="(item, index) in list"
            :key="index"
            class="assessment-card"
          >
            <view class="card-main">
              <view class="card-row">
                <text class="label">考核区域</text>
                <text class="value">{{ item.assessAddress }}</text>
              </view>
              <view class="card-row">
                <text class="label">考核期间</text>
                <text class="value">{{ item.assessPeriod }}</text>
              </view>
              <view class="card-row">
                <text class="label">开始时间</text>
                <text class="value">{{ item.assessStartDate }}</text>
              </view>
              <view class="card-row">
                <text class="label">结束时间</text>
                <text class="value">{{ item.assessEndDate }}</text>
              </view>
            </view>
            <view class="card-footer" @click="toggleDetails(index)">
              <text>查看详情</text>
              <u-icon
                :name="item.expanded ? 'arrow-up' : 'arrow-down'"
              ></u-icon>
            </view>
            <view v-if="item.expanded" class="card-details">
              <view
                v-for="(detail, detailIndex) in item.regionAssessDetailVoList"
                :key="detailIndex"
                class="details-content"
              >
                <view class="card-row">
                  <text class="label">考核日期</text>
                  <text class="value">{{ detail.assessDate }}</text>
                </view>
                <view class="card-row">
                  <text class="label">考核状态</text>
                  <text
                    class="value"
                    :class="getStatusClass(detail.assessStatus)"
                    >{{ detail.assessStatusVal }}</text
                  >
                </view>
              </view>
            </view>
          </view>
          <u-loadmore :status="loadStatus" />
        </template>
        <u-empty
          v-else-if="loadStatus !== 'loading'"
          mode="list"
          text="暂无考核记录"
        ></u-empty>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { getRegionAssessmentRecord } from '@/config/mine.js'
export default {
  data() {
    return {
      list: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loadStatus: 'loading',
    }
  },
  onLoad() {
    this.loadData()
  },
  onPullDownRefresh() {
    this.pageNum = 1
    this.loadData().then(() => {
      uni.stopPullDownRefresh()
    })
  },
  onReachBottom() {
    if (this.loadStatus === 'nomore' || this.loadStatus === 'loading') {
      return
    }
    this.pageNum++
    this.loadData()
  },
  methods: {
    async loadData() {
      this.loadStatus = 'loading'
      try {
        const res = await getRegionAssessmentRecord({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        })
        if (res.code === 200) {
          const newItems = res.rows.map(item => ({
            ...item,
            expanded: false,
          }))
          if (this.pageNum === 1) {
            this.list = newItems
          } else {
            this.list = [...this.list, ...newItems]
          }
          this.total = res.total
          if (this.list.length >= this.total) {
            this.loadStatus = 'nomore'
          } else {
            this.loadStatus = 'loadmore'
          }
        } else {
          this.loadStatus = 'loadmore'
          uni.$u.toast(res.msg || '加载失败')
        }
      } catch (error) {
        this.loadStatus = 'loadmore'
        uni.$u.toast('加载失败，请重试')
      }
    },
    toggleDetails(index) {
      this.list[index].expanded = !this.list[index].expanded
      this.$forceUpdate() // uni-app sometimes needs a little help to re-render
    },
    getStatusClass(status) {
      if (status === 2) {
        // 考核不通过
        return 'status-fail'
      }
      return ''
    },
  },
}
</script>

<style lang="scss" scoped>
.regional-assessment {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  overflow: hidden;
}
.list-scroll {
  height: 100%;
}
.assessment-card {
  background-color: #ffffff;
  border-radius: 8px;
  margin: 12px;
  padding: 16px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}

.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  line-height: 48rpx;
  padding: 8rpx 0;

  .label {
    color: #646566;
  }

  .value {
    color: #323233;
  }

  .status-fail {
    color: #fa3534;
  }
}

.card-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #969799;
  font-size: 24rpx;
  padding-top: 24rpx;
  margin-top: 24rpx;
  border-top: 1px solid #f2f2f2;
  cursor: pointer;

  .u-icon {
    margin-left: 8rpx;
  }
}

.card-details {
  margin-top: 24rpx;
  padding-top: 24rpx;
  border-top: 1px solid #f2f2f2;
}
</style>