yanyuan/src/pagesYanyuan/ascription/ascription.vue

<template>
  <scroll-view
    class="h-screen"
    :lower-threshold="50"
    :scroll-y="true"
    :upper-threshold="50"
    :scroll-top="scrollTop"
    id="scroll"
    @scrolltoupper="handleScrollTop"
    @scrolltolower="handleScrollBottom"
  >
    <view class="w-full bg-gray text-gray-200 text-center py-4" v-if="toTop">----------已到顶部----------</view>
    <view v-for="(list, index) in lists" :key="index" class="mb-4" :class="index !== lists.length - 1 ? ' border-b' : ''">
      <view class="flex flex-col px-3 bg-white pb-4">
        <view v-if="list.cardUrl" class="flex flex-col">
          <text class="my-3">{{ list.cardType === 'MG' ? '迷宫' : list.cardType === 'ZBT' ? '找不同' : '' }}</text>
          <ProcessRestore :trainResult="list" />
        </view>
        <view v-if="list.finishResult" class="flex flex-col">
          <text class="my-3">训练结果</text>
          <ResultLevel :finishResult="list.finishResult" />
        </view>
      </view>
      <view class="flex flex-col px-3 bg-white mt-2">
        <view class="py-3 flex justify-between" @click="changeShow(index)">
          训练者
          <u-icon name="arrow-down" v-if="!list.showTrain"></u-icon>
          <u-icon name="arrow-up" v-else></u-icon>
        </view>
        <view class="flex flex-wrap pb-3" v-if="list.showTrain">
          <u-radio-group v-model="list.train" class="mr-1">
            <u-radio
              class="mr-1"
              @change="radioChange($event, list.createTime, index)"
              v-for="(item, trainIndex) in radios"
              :key="trainIndex"
              :name="item.keyUserId"
            >
              {{ item.userName }}{{ item.sex === 1 ? '(男)' : item.sex === 2 ? '(女)' : '(未知)' }}
            </u-radio>
          </u-radio-group>
        </view>
      </view>
      <view class="flex flex-col px-3" v-if="list.showTask && list.showTrain && list.tasks.length">
        <view class="py-3 flex justify-between">
          训练计划
          <u-button type="primary" size="mini" @click="chooseRecord(list.trainRecordId, list.resultType)">确定</u-button>
        </view>
        <ChooseTask :tasks="list.tasks" :time="list.createTime" :defaultId="defaultId" @changeDefaultId="changeDefaultId" />
      </view>
    </view>
    <view class="w-full bg-gray text-gray-200 text-center pt-4 pb-12" v-if="toEnd">----------我也是有底线的----------</view>
    <view class="w-full bg-gray text-gray-200 text-center pt-4 pb-12" v-else>----------加载中----------</view>
  </scroll-view>
</template>

<script>
import ResultLevel from './components/ResultLevel';
import ProcessRestore from './components/ProcessRestore';
import ChooseTask from './components/ChooseTask';

export default {
  components: { ResultLevel, ProcessRestore, ChooseTask },
  data() {
    return { lists: [], radios: [], defaultId: '', scrollTop: 0, toTop: false, toEnd: false, pageNum: 1 };
  },

  created() {
    this.queryUnknown();
    this.queryRelation();
  },

  methods: {
    async radioChange(e, time, index) {
      await this.queryRecent(e, time, index);
    },

    changeShow(index) {
      this.lists[index].showTrain = !this.lists[index].showTrain;
    },

    handleScrollTop() {
      this.toTop = true;
    },

    async handleScrollBottom() {
      if (this.toEnd) return;
      this.pageNum += 1;
      await this.queryUnknown();
    },

    /**
     * 查询无主的训练过程
     * @param { Number } pageNum 页码
     * @param { Number } pageSize 分页大小
     */
    async queryUnknown() {
      try {
        const params = {
          pageNum: this.pageNum,
          pageSize: 10,
        };
        const data = await this.$u.api.queryUnknown(params);
        if (!data.list || !data.list.length) {
          this.toEnd = true;
          return;
        }
        data.list.forEach(item => {
          item.showTrain = false;
          item.tasks = [];
          item.showTask = false;
          this.lists.push(item);
        });
      } catch (error) {
        console.error('error: ', error);
      }
    },

    /**
     * 查询所有关联的用户信息
     * @param { Number } pageNum 页码
     * @param { Number } pageSize 分页大小
     */
    async queryRelation() {
      try {
        const data = await this.$u.api.queryRelation();
        this.radios = data;
      } catch (error) {
        console.error('error: ', error);
      }
    },

    /**
     * 查询指定日期前后一周的训练计划
     * @param { Number } pageNum 页码
     * @param { Number } pageSize 分页大小
     */
    async queryRecent(keyUserId, time, index) {
      try {
        const params = { keyUserId, time };
        const data = await this.$u.api.queryRecent(params);
        this.lists[index].tasks = data;
        this.lists[index].showTask = true;
        this.setDefaultValue(data, time);
      } catch (error) {
        console.error('error: ', error);
      }
    },

    // 设置训练计划默认值
    setDefaultValue(list, time) {
      const T = this.$moment(time - 0).format('YYYY-MM-DD');
      const currentTime = this.$moment(T).valueOf().toString();
      const item = list.find(item => item.startTime === currentTime);
      this.defaultId = item && item.recordId ? item.recordId : list[0].recordId;
    },

    // 修改训练计划
    changeDefaultId(id) {
      this.defaultId = id;
    },

    /**
     * 选择训练计划
     * @param { Number } trainRecordId 训练结果id
     * @param { Number } resultType 训练结果类型0:训练结果 1:过程记录
     * @param { Number } recordId 训练计划ID
     */
    async chooseRecord(trainRecordId, resultType) {
      try {
        const params = {
          trainRecordId,
          resultType,
          recordId: this.defaultId,
        };
        await this.$u.api.chooseRecord(params);
        this.$t.ui.showToast('提交成功');
        const index = this.lists.findIndex(item => item.trainRecordId === trainRecordId);
        this.lists.splice(index, 1);
      } catch (error) {
        console.error('error: ', error);
        this.$t.ui.showToast(error.msg || '提交失败');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: $uni-bg-color-grey;
}

.bg-gray {
  background-color: $uni-bg-color-grey;
}
</style>