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';
import { ElMessage } from 'element-plus';

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({
  keyword: '',
  grade_id: undefined,
  page: 1
})

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

function queryData() {
  request({
    url: '/kzkt/zbkc/index',
    data: queryForm
  }).then(res => {
    if (res.code === '1') {
      data_wcjd = res.data.page_data
      total = res.data.total_rows * 1
    }
  })
}
queryData()

watch(queryForm, () => {
  queryData()
})

const router = useRouter()
function handleClickAdd() {
  router.push({ name: 'personal_create_wlzb_add' })
}
function handleClickEdit(i) {
  router.push({ name: 'personal_create_wlzb_edit', params: { id: i.id } })

}

function handleClickDetail(i) {
  router.push({ name: 'personal_create_wlzb_kcdg', params: { id: i.id } })
}

function handleClickDel(i) {
  request({
    url: '/kzkt/zbkc/delete',
    data: {
      kz_id: i.id
    }
  }).then(res => {
    if (res.code === '1') {
      ElMessage.success('已删除')
      queryData()
    }
  })
}

</script>

<template>
  <div class="w-full shadow bg-white rounded-md flex items-center px-36 py-4">
    <div class="text-lg text-hex-050026">网络直播</div>
    <el-divider direction="vertical" />
    <div class="text-sm">
      <span class="text-hex-949494">我的课程</span>
      <span class="text-hex-949494"> - 我创建的</span>
      <span> - 网络直播</span>
    </div>
  </div>

  <div class="w-full shadow bg-white flex flex-col rounded-md divide-y mt-4">
    <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="queryForm.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="p-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 class="flex flex-wrap justify-between">
        <template v-if="data_wcjd.length">
          <div class="w-647px h-155px rounded-xl shadow-lg cursor-pointer mb-7 flex" v-for="i in data_wcjd"
            @click="handleClickDetail(i)">
            <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" @click.stop="handleClickEdit(i)" />
                  <i-ep:delete class="cursor-pointer" @click.stop="handleClickDel(i)" />
                </div>
              </div>

              <div class="text-sm text-hex-949494 py-1 line-clamp-2 overflow-ellipsis h-12 ">
                {{ i.kcjj }}
              </div>

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

              <div class="flex text-sm justify-between items-center">
                <div class="cursor-pointer flex items-center">
                  <el-avatar :size="16" :src="getFullUrl(i.master_user_avatar)" />
                  <span class="ml-1">{{
                  i.master_teacher
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </template>
        <div v-else class="flex justify-center w-full">
          <el-empty description="暂无数据" />
        </div>
      </div>

      <div class="flex justify-end mb-8">
        <el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="queryForm.page" />
      </div>
    </div>


  </div>
</template>