exam_mp/pages/user/invited.vue

<script setup>
import Container from "../../components/Container/Container.vue";
import { ref, onMounted } from "vue";
import { request } from "../../utils/request";
import utils from "../../utils/common";
import Empty from "../../components/Empty/Empty.vue";
const list = ref([]);

const titleList = ref([
  {
    label: "已邀请",
    value: 0,
    key: "number_of_invitations",
  },
  // {
  //   label: "可免费解锁科目",
  //   value: 0,
  //   key: "unlockable_subjects",
  // },
  // {
  //   label: "已免费解锁科目",
  //   value: 0,
  //   key: "unlocked_subject",
  // },
]);

onMounted(() => {
  request("api/question_bank/question_reception/invite_user_form/list").then(
    (res) => {
      if (!res.data) return;
      list.value = res.data.data;
    }
  );

  request("api/question_bank/question_reception/user_share_forms/detail").then(
    (res) => {
      if (!res.data) return;
      titleList.value.forEach((item) => {
        item.value = res.data[item.key] || 0;
      });
    }
  );
});
</script>
<template>
  <Container title="邀请记录" headerColor="#fff" bgColor="#f8f8f8">
    <view class="contariner">
      <view class="title">
        <view v-for="item in titleList" class="item" :key="item.label">
          <view class="label">{{ item.label }}</view>
          <view class="value">{{ item.value }}</view>
        </view>
      </view>
      <view class="list" v-if="list.length">
        <scroll-view scroll-y class="card" v-for="item in list" :key="item.id">
          <view class="left">
            <image
              class="avatar"
              :src="item.invited_user_info?.userpic"
              mode="scaleToFill"
            />
            <div class="info">
              <div class="name">{{ item.invited_user_info?.username }}</div>
              <div class="num">答题数: {{ item.number_of_answers }}题</div>
            </div>
          </view>
          <div class="right">
            {{ utils.timestampToString(item.insert_time) }}
          </div>
        </scroll-view>
      </view>
      <Empty text="暂无数据" v-else />
    </view>
  </Container>
</template>
<style scoped lang="scss">
@import "@/uni.scss";

.contariner {
  display: flex;
  flex-direction: column;
  gap: 24rpx;

  .title {
    background: url("https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/mSSwWMeK16KulBkYTchvlCXuJ2DaFceeuhS6MLz6.png")
      no-repeat center center;
    background-size: cover;
    height: 181rpx;
    // display: grid;
    // grid-template-columns: repeat(3, 1fr);
    display: flex;
    align-items: center;
    justify-content: center;

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;

      .value {
        font-size: 48rpx;
        color: #000000;
      }
    }
  }

  .list {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
    height: 100%;
    .card {
      background-color: #fff;
      padding: 24rpx 16rpx;
      display: flex;
      justify-content: space-between;
      border-radius: 16rpx;
      flex: 1;

      .left {
        display: flex;
        gap: 24rpx;
        flex: 1;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #000000;

        .avatar {
          width: 56rpx;
          height: 56rpx;
          border-radius: 50%;
        }

        .info {
          display: flex;
          flex-direction: column;
          gap: 24rpx;
          justify-content: center;
          margin-bottom: 7rpx;

          .name {
            font-weight: bold;
          }
          .num {
            font-size: 20rpx;
          }
        }
      }

      .right {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
}
</style>