education-lifanghe/front/src/pages/referral-records/index.vue

<template>
  <view class="lf-page records-page">
    <view class="lf-nav">
      <view>
        <view class="lf-nav__title">推荐记录</view>
        <view class="lf-nav__sub">按家长、手机号、渠道和状态查询</view>
      </view>
      <view class="lf-pill">{{ total }} 条</view>
    </view>

    <view class="lf-card filter-card">
      <view class="search-box">
        <u-icon name="search" color="#6f7c78" size="22"></u-icon>
        <input v-model="filters.keyword" placeholder="搜索家长、手机号、渠道" confirm-type="search" @confirm="refresh" />
      </view>
      <view class="chip-row">
        <button v-for="item in statusOptions" :key="item.value" :class="['filter-chip', filters.status === item.value && 'filter-chip--active']" @click="changeStatus(item.value)">
          {{ item.label }}
        </button>
      </view>
      <button class="query-button" @click="refresh">查询</button>
    </view>

    <view v-for="record in list" :key="record.id" class="lf-card record-card">
      <view>
        <view class="record-card__name">{{ record.name }}</view>
        <view class="record-card__meta">{{ record.phone || '-' }} · {{ record.childGrade || '-' }} · {{ record.channel || '-' }}</view>
      </view>
      <view class="record-card__right">
        <text>{{ record.status }}</text>
        <strong>+{{ record.reward }}</strong>
      </view>
    </view>

    <view class="load-state">{{ loadText }}</view>
    <u-toast ref="toast"></u-toast>
  </view>
</template>

<script>
import { getReferralRecords } from '../../services/educationApi'
import { getStoredAccount, refreshStoredAccount } from '../../services/accountSession'

export default {
  data() {
    return {
      list: [],
      total: 0,
      loading: false,
      finished: false,
      filters: {
        keyword: '',
        status: 'all',
        pageNum: 1,
        pageSize: 10,
      },
      statusOptions: [
        { label: '全部', value: 'all' },
        { label: '已注册', value: '已注册' },
        { label: '已预约', value: '已预约' },
        { label: '已到课', value: '已到课' },
        { label: '已报名', value: '已报名' },
      ],
    }
  },
  computed: {
    loadText() {
      if (this.loading) return '加载中...'
      if (this.finished) return this.list.length ? '没有更多了' : '暂无推荐记录'
      return '上拉加载更多'
    },
  },
  async onShow() {
    await refreshStoredAccount()
    await this.refresh()
  },
  async onPullDownRefresh() {
    await this.refresh()
    uni.stopPullDownRefresh()
  },
  onReachBottom() {
    this.loadMore()
  },
  methods: {
    changeStatus(status) {
      this.filters.status = status
      this.refresh()
    },
    async refresh() {
      this.filters.pageNum = 1
      this.finished = false
      await this.load(true)
    },
    async loadMore() {
      if (this.loading || this.finished) return
      this.filters.pageNum += 1
      await this.load(false)
    },
    async load(reset) {
      const account = getStoredAccount()
      if (!account) {
        uni.reLaunch({ url: '/pages/login/index' })
        return
      }
      this.loading = true
      try {
        const res = await getReferralRecords(account.id, this.filters)
        if (res.ok === false) {
          this.$refs.toast.show({ message: res.message || '推荐记录加载失败', type: 'error' })
          return
        }
        const data = res.data?.records || res.records || {}
        this.total = data.total || 0
        this.list = reset ? (data.list || []) : this.list.concat(data.list || [])
        this.finished = this.list.length >= this.total
      } finally {
        this.loading = false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.filter-card,
.record-card {
  margin-top: 18rpx;
  padding: 28rpx;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 12rpx;
  height: 74rpx;
  padding: 0 22rpx;
  border-radius: 16rpx;
  background: #f3f8ef;
}

.search-box input {
  flex: 1;
  color: #17312d;
  font-size: 26rpx;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-top: 18rpx;
}

.filter-chip {
  height: 52rpx;
  padding: 0 18rpx;
  border: 1rpx solid #dce8dc;
  border-radius: 999rpx;
  color: #6f7c78;
  background: #ffffff;
  font-size: 22rpx;
  font-weight: 900;
}

.filter-chip--active {
  color: #0b4f46;
  border-color: #9ae9dc;
  background: #dff8ee;
}

.query-button {
  width: 100%;
  height: 68rpx;
  margin-top: 18rpx;
  border-radius: 16rpx;
  color: #ffffff;
  background: #0b4f46;
  font-size: 25rpx;
  font-weight: 900;
}

.record-card {
  display: flex;
  justify-content: space-between;
  gap: 18rpx;
}

.record-card__name {
  color: #17312d;
  font-size: 30rpx;
  font-weight: 900;
}

.record-card__meta {
  margin-top: 8rpx;
  color: #6f7c78;
  font-size: 22rpx;
  line-height: 1.45;
}

.record-card__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10rpx;
}

.record-card__right text {
  padding: 8rpx 14rpx;
  border-radius: 999rpx;
  color: #0b4f46;
  background: #dff8ee;
  font-size: 20rpx;
  font-weight: 900;
}

.record-card__right strong {
  color: #ff7a59;
  font-size: 28rpx;
}

.load-state {
  padding: 28rpx 0 80rpx;
  color: #6f7c78;
  font-size: 23rpx;
  text-align: center;
}
</style>