xuexiaole-mobile/src/pages/inspector/releasePlan/selectBook.vue

<template>
  <view class="page">
    <view class="back_bar"> <BackBar title="选择教材" /></view>
    <view class="books">
      <view
        v-for="(item, index) of books"
        :key="index"
        :class="{ 'book-item': true, active: selectId === item.id }"
        :style="{
          background: itemCover(item.bookVersionId).bgColor,
          fontSize: item.textBookName.length > 10 ? '28rpx' : '38rpx',
        }"
        @click="selectBook(item)"
      >
        <text class="book_grade" :data-content="item.textBookName">
          {{ item.textBookName }}
        </text>
        <wd-img
          v-if="selectId === item.id"
          class="checked"
          :src="checked"
          width="40rpx"
          height="40rpx"
        />
      </view>
    </view>
    <wd-loadmore :state="state" @reload="loadmore" />
    <view class="footer">
      <button class="footer-btn" @click="clickNext">下一步</button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getBooks } from '@/api/modules/inspector'
import checked from '@/static/svg/checked.svg'
import { bookVersionConfig, colorConfig } from './config'
const books = ref<any[]>([])
const selectRow = ref<any>({})
const selectId = ref<number>(-1)
const itemCover = computed(() => {
  return (id: number) => {
    const idx = bookVersionConfig.findIndex(i => i.includes(Number(id))) + 1
    return colorConfig[idx || 1]
  }
})
function selectBook(item: any) {
  let row = plan.value.planList[plan.value.index]
  selectRow.value = item
  row = {
    ...row,
    bookId: item.textBookId,
    bookName: item.textBookName,
  }
  selectId.value = item.id
  plan.value.planList[plan.value.index] = { ...row }
  plan.value.row = row
}
const plan = ref<any>({})
const queryObj = ref<any>({})
const state = ref<string>('finished')
function clickNext() {
  if (selectId.value === -1) {
    uni.showToast({
      title: '请先选择教材再进行下一步',
      icon: 'none',
      duration: 3000,
    })
    return
  } else if (
    !(
      selectRow.value.businessFlag &&
      selectRow.value.businessFlag.includes('1') &&
      plan.value.row.taskType === 1
    )
  ) {
    uni.showToast({
      title: '该教材暂无同步练习',
      icon: 'none',
      duration: 3000,
    })
  }
  uni.setStorageSync('plan', plan.value)
  uni.navigateTo({ url: '/pages/inspector/releasePlan/selectChapter' })
}
async function getBooksData(params: any) {
  try {
    uni.showLoading({
      title: '加载中...',
    })
    state.value = 'loading'
    const data = await getBooks(params)

    books.value = [...books.value, ...data.rows]
    state.value = data.rows.length < 10 ? 'finished' : 'loading'
  } catch (error) {
    state.value = 'error'
  } finally {
    uni.hideLoading()
  }
}
function loadmore() {
  queryObj.value.current.value++
  getBooksData(queryObj.value)
}
onMounted(() => {
  plan.value = uni.getStorageSync('plan')
  queryObj.value = {
    userId: plan.value.userId,
    gradeId: '',
    current: 1,
    subjectId: plan.value.row.subjectId,
  }
  getBooksData(queryObj.value)
})
onShow(() => {})
</script>
<style lang="scss" scoped>
.page {
  padding: 0 30rpx 30rpx 30rpx;
  box-sizing: border-box;
  .back_bar {
    margin-bottom: 30rpx;
  }
  .books {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .book-item {
      width: 210rpx;
      height: 280rpx;
      background: #fdeb47;
      border-radius: 20rpx;
      font-family: 'Kingnam Bobo';
      // font-size: 38rpx;
      line-height: 56rpx;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 30rpx 30rpx 0;
      padding: 0 30rpx;
      box-sizing: border-box;
      text-align: center;
      color: #fff;

      &:nth-child(3n) {
        margin-right: 0;
      }
      .checked {
        position: absolute;
        bottom: 0;
        right: 0;
      }
      .book_grade {
        @include font-stroke(#4b4b68, 4.6rpx);
        letter-spacing: 8rpx;
      }
    }
    .active {
      border: 2rpx solid #615dff;
    }
  }
}
.footer {
  position: fixed;
  display: flex;
  justify-content: center;
  bottom: 0;
  height: 122rpx;
  width: 100vw;
  left: 0;
  padding-top: 16rpx;
  box-sizing: border-box;
  background: #fff;
  border-top: 1rpx solid #f6f6f6;
  .footer-btn {
    margin: auto;
    width: 440rpx;
    height: 90rpx;
    background: #615dff;
    font-size: 30rpx;
    line-height: 90rpx;
    color: #fff;
    font-weight: 600;
  }
}
</style>