txyx_pc/src/pages/personal/components/MyCourse/wlzb/index.vue

<script setup>
import { getFullUrl, getAvatarUrl } from '~/utils/helper';
import { Search as IconSearch } from '@element-plus/icons-vue';

let nj = $ref([])

request({
  url: '/jcxx/grade/index',
  data: {
    limit: 99
  }
}).then(res => {
  if (res.code === '1') {
    nj = [{ n: '全部', v: undefined }].concat(res.data.page_data.map(({ grade_name, grade_id }) => ({ v: grade_id, n: grade_name })))
  }
})

const queryForm = reactive({
  grade_id: undefined,
  page: 1
})

// 我创建的
let data_wcjd = $ref([])

request({
  url: '/kzkt/zbkc_kcdg/my_course'
}).then(res => {
  if (res.code === '1') {
    data_wcjd = res.data
  }
})


</script>
  
<template>
  <div class="w-full shadow flex flex-col rounded-md">
    <div class="flex justify-end px-8 py-2">
      <div class="w-100px h-50px flex_center rounded bg-hex-00A3FF text-white cursor-pointer" @click="handleClickAdd">创建
      </div>
      <div class="w-500px h-50px ml-8">
        <el-input class="w-500px h-full rounded-md" placeholder="搜索关键字" v-model="keyword">
          <template #suffix>
            <div class="w-26px h-26px bg-hex-00A3FF rounded-md flex justify-center items-center cursor-pointer"
              @click="queryData()">
              <el-icon size="13" color="#fff">
                <IconSearch />
              </el-icon>
            </div>
          </template>
        </el-input>
      </div>
    </div>

    <div class="px-4">
      <check-row v-model="queryForm.grade_id" label="年级" :items="nj"></check-row>
      <!-- <check-row v-model="queryForm.subject_id" label="分册" :items="fc"></check-row> -->

    </div>

    <div class="flex flex-wrap justify-between">
      <div class="w-647px h-155px rounded-xl shadow-lg mb-7 flex" v-for="i in data_wcjd">
        <div class="w-264px h-full flex-none">
          <img :src="getFullUrl(i.img)" alt="" class="w-full h-full" />
        </div>
        <div class="p-2 pr-6 flex-auto flex flex-col">
          <div class="flex justify-between w-full items-center py-1">
            <div class="font-bold">{{ i.name }}</div>
            <div class="text-hex-949494 text-sm flex justify-between items-center">
              <i-bx:edit-alt class="mr-2 cursor-pointer" />
              <i-ep:delete class="cursor-pointer" />
            </div>
          </div>

          <div class="text-sm text-hex-949494 py-1">
            {{ i.kcjj }}
          </div>

          <div class="text-sm py-1 flex-auto">
            <span>{{ i.nj }}</span>
            <span class="mx-2">|</span>
            <span>{{ i.xk }}</span>
          </div>

          <div class="flex text-sm justify-between items-center">
            <div class="cursor-pointer flex items-center">
              <el-avatar :size="16" :src="i.tx" />
              <span class="ml-1">{{
              i.kz_master_teacher
              }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>