nml_mobile/src/pages/stxk/jz/wd/kcxq.vue

<script setup>
const props = defineProps({
  id: {
    type: String,
    default: undefined,
  },
})

const router = useRouter()
function handleNavLeftClick() {
  router.back()
}


function handleDetailBtnClick(item) {
  console.log('handleDetailBtnClick', item);
  router.push(`/stxk/jz/wd/kcapxq/${item.id}`)
  // overlayShow = true
}


// let overlayShow = $ref(false)
// const overlayForm = reactive({
//   kcpj: '',
//   lspj: '',
//   fwpj: '',
//   pjnr: '',
// })
// function handleOverlaySubmit() {
//   overlayShow = false
// }
</script>

<template>

  <van-sticky>
    <van-nav-bar title="课程详情" left-arrow @click-left="handleNavLeftClick">
    </van-nav-bar>
  </van-sticky>

  <div class="p-2 w-full">
    <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" class="w-full" ></van-image>

    <div class="text-sm mb-4">
      <div class="flex text-lg py-1">
        <div class="mr-4 font-bold">课程标题标题标题</div>
        <van-tag type="primary">18课时</van-tag>
      </div>
      <div class="flex py-1">
        <div class="mr-4">讲师：张春丽</div>
      </div>
      <div class="flex py-1">
        <div>开课时间：</div>
        <div>2019/12/22 — 2019/12/26（请在开课前报名）</div>
      </div>
      <div class="flex py-1">
        <div>上课地点：</div>
        <div>6.4km 相城区元和街道366号</div>
      </div>
    </div>
    <!-- <van-divider /> -->

    <van-tabs shrink swipeable>
      <van-tab title="课程详情">
        <div class="my-4">
          <div class="pre font-bold mb-2">课程简介</div>
          <div class="text-sm">
            9:00-20:30(所有乐园时间仅供参考，请于游览当天至有课服务处索取乐园时间表，以获取当天最新的活动时间详情及变更通知。9:00-20:30(所有乐园时间仅供参考，请于游览当天至有课服务处索取乐园时间表，以获取当天最新的活动时间详情及变更通知。
          </div>
        </div>

        <div class="mb-10">
          <div class="pre font-bold mb-2">教师简介</div>
          <div class="flex text-sm shadow-md p-2">
            <div class="w-1/3 flex-none flex flex-col items-center">
              <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" width="100" height="100" round
                fit="cover"></van-image>
              <div>
                <div>张春丽</div>
              </div>
            </div>
            <ul class="list-disc list-inside">
              <li>12年教学经验累</li>
              <li>计在线授课40万人次助攻</li>
              <li>多个同学获得满分成绩</li>
              <li>全国优秀教师</li>
              <li>全国优秀教师</li>
            </ul>
          </div>
        </div>
      </van-tab>
      <van-tab title="课程安排">
        <div class="my-4">
          <van-steps direction="vertical" :active="-1">
            <van-step>
              <div class="text-base">第1节课</div>
              <div class="flex justify-between items-end">
                <div>2016-07-10 09:30</div>
                <van-button plain type="primary" size="small" @click="handleDetailBtnClick(1)">查看详情</van-button>
              </div>
            </van-step>
            <van-step>
              <div class="text-base">第2节课</div>
              <div class="flex justify-between items-end">
                <div>2016-07-10 09:30</div>
                <van-button plain type="primary" size="small" @click="handleDetailBtnClick(2)">查看详情</van-button>
              </div>
            </van-step>
            <van-step>
              <div class="text-base">第3节课</div>
              <div class="flex justify-between items-end">
                <div>2016-07-10 09:30</div>
                <van-button plain type="primary" size="small" @click="handleDetailBtnClick(3)">查看详情</van-button>
              </div>
            </van-step>
          </van-steps>
        </div>
      </van-tab>
    </van-tabs>

    <!-- <van-overlay :show="overlayShow" @click="overlayShow = false" class="flex justify-center items-center">
      <div class="bg-light-900 w-9/10 p-4 rounded-md dark:bg-dark-900" @click.stop>
        <div class="flex my-2">
          <div class="font-bold text-lg mr-4">教学安排与课堂情况反馈</div>
          <van-tag type="primary">第6节课</van-tag>
        </div>

        <div class="text-sm text-dark-100 dark:text-light-900">
          9:00-20:30(所有乐园时间仅供参考，请于游览当天至有课服务处索取乐园时间表，以获取当天最新的活动时间详情及变更通知。9:00-20:30(所有乐园时间仅供参考，请于游览当天至有课服务处索取乐园时间表，以获取当天最新的活动时间详情及变更通知。
          9:00-20:30(所有乐园时间仅供参考，请于游览当天至有课服务处索取乐园时间表，以获取当天最新的活动时间详情及变更通知。9:00-20:30(所有乐园时间仅供参考，请于游览当天至有课服务处索取乐园时间表，以获取当天最新的活动时间详情及变更通知。
        </div>

        <van-divider />

        <div class="text-sm">课程已结束您可以对此进行评价</div>

        <van-form @submit="handleOverlaySubmit">
          <van-field name="kcpj" label="课程评价">
            <template #input>
              <van-rate v-model="overlayForm.kcpj" />
            </template>
          </van-field>
          <van-field name="lspj" label="老师评价">
            <template #input>
              <van-rate v-model="overlayForm.lspj" />
            </template>
          </van-field>
          <van-field name="fwpj" label="服务评价">
            <template #input>
              <van-rate v-model="overlayForm.fwpj" />
            </template>
          </van-field>
          <van-field v-model="overlayForm.pjnr" name="pjnr" placeholder="请输入评价内容..." maxlength="500" show-word-limit rows="6"
            autosize />

          <div class="text-xs text-red-900">* 只能对课程评价一次，评价后无法修改，请确认后提交</div>

          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
      </div>
    </van-overlay> -->


  </div>


</template>