附件出题沿用答题卡

src/pages/process/fjct/[ze_id]/[zs_id].vue

@@ -41,7 +41,7 @@
                        :show-file-list="false"
                        :on-change="uploadFile"
                        v-loading.fullscreen.lock="fullscreenLoading"
-                       accept=".jpg,.png,.jpeg,.docx,.doc,.mp4,.pdf,.ppt,.pptx,.xls,.xlsx"
+                       accept=".jpg,.png,.jpeg"
                        class="upload-demo"
             >
               <el-button type="primary" color="#003eee">
@@ -52,7 +52,7 @@
               </el-button>
               <template #tip>
                 <div class="el-upload__tip">
-                  上传文件格式支持 jpg,png,jpeg,docx,doc,mp4,pdf,ppt,pptx,xls,xlsx
+                  上传文件格式支持 jpg,png,jpeg
                 </div>
               </template>
             </el-upload>
@@ -143,32 +143,41 @@
       </div>
 
     </el-form>
-    <ul class="card-list py-15px pl-20px">
-      <li v-for="item in cardList" class="relative py-15px" :class="chooseCheck === item.zs_id?'selected':''">
-        <div class="choose">
-          <p class="set-check">
-            <input type="radio" :id="item.zs_id" :value="item.zs_id" v-model="chooseCheck">
-            <label :for="item.zs_id"></label>
-          </p>
-        </div>
-        <div class="w-162px h-108px m-auto overflow-hidden">
-          <img class="w-full"
-               src="https://yzy.bozedu.net/data/upload/exam_package/20230329/1521/210900241/5-1521-210900241-4096-20230329101520/image_20230329101519044.jpg"
-               alt="">
-        </div>
-        <h3 class="mt-10px mb-10px px-20px text-13px leading-20px truncate text-center">{{item.zs_name}}</h3>
-        <button type="button" class="op-btn block m-auto">查看</button>
-      </li>
-    </ul>
-    <div class="mt-20px page-new flex justify-end">
-      <el-pagination v-model:current-page="cur_page" v-model:page-size="limit" layout="total,prev, pager, next" :total="total" :background="true" @current-change="handleSelectionChange"></el-pagination>
+    <div v-if="cardList.length > 0">
+      <ul class="card-list py-15px pl-20px">
+        <li v-for="item in cardList" class="relative py-15px" :class="chooseCheck === item.zs_id?'selected':''">
+          <div class="choose">
+            <p class="set-check">
+              <input type="radio" :id="item.zs_id" :value="item.zs_id" v-model="chooseCheck">
+              <label :for="item.zs_id"></label>
+            </p>
+          </div>
+          <div class="w-162px h-108px m-auto overflow-hidden">
+            <img class="w-full"
+                 :src="item.fj_content[0].url"
+                 alt="">
+          </div>
+          <h3 class="mt-10px mb-10px px-20px text-13px leading-20px truncate text-center">{{item.zs_name}}</h3>
+          <button type="button" class="op-btn block m-auto" :disabled="item.not_allowed" @click="imgShow(item)">查看</button>
+        </li>
+      </ul>
+      <div class="mt-20px page-new flex justify-end">
+        <el-pagination v-model:current-page="cur_page" v-model:page-size="limit" layout="total,prev, pager, next" :total="total" :background="true" @current-change="handleSelectionChange"></el-pagination>
+      </div>
     </div>
+    <div v-else class="no-data">
+      <div>
+        <h3 class="no-data-img"></h3>
+        <h4 class="mt-25px text-18px text-hex-0048e5 text-center">暂无数据</h4>
+      </div>
+    </div>
+
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="dialogVisible = false" class="mr-15px" size="large">
           <span class="px-10px">取消</span>
         </el-button>
-        <el-button size="large" color="#003eee" type="primary" @click="dialogVisible = false">
+        <el-button size="large" color="#003eee" type="primary" :disabled="chooseCheck === ''" @click="chooseCardSub">
           <span class="px-10px">确定</span>
         </el-button>
       </span>
@@ -180,7 +189,14 @@
       <div class="loading-icon"></div>
       <h3 class="text-16px text-center text-hex-959595">客户端处理中，耐心等待……</h3>
     </div>
-
+  </div>
+  <div class="preview-box" v-if="showPreview">
+    <el-icon class="preview-close cursor-pointer" @click="showPreview = false"><CloseBold /></el-icon>
+    <el-carousel class="h-full overflow-y-auto" :autoplay="false" indicator-position="none">
+      <el-carousel-item v-for="item in imgPreview" :key="item">
+        <img class="m-auto block" :src="item.url" alt="">
+      </el-carousel-item>
+    </el-carousel>
   </div>
   <commonFooter/>
 </template>
@@ -333,7 +349,7 @@ function getDetail() {
 }
 
 const uploadFile = (file) => {
-  console.log(file, 87)
+  // console.log(file, 87)
   fullscreenLoading = true;
   REQUEST.upload({
     url: '/upload/main/file',
@@ -347,7 +363,7 @@ const uploadFile = (file) => {
   }).then(res => {
     fullscreenLoading = false;
     if (res.code === '1') {
-      console.log(res.data, 89)
+      // console.log(res.data, 89)
       let file_info = {
         name: res.data.file_name,
         url: res.data.url
@@ -447,7 +463,7 @@ function getScanStatus(scan_batch) {
   })
 }
 
-let limit = $ref(10)
+let limit = $ref(8)
 let total = $ref(0)
 let cur_page = $ref(1)
 let exam_time = $ref([])
@@ -455,6 +471,7 @@ let keyword = $ref('')
 let cardList = $ref([]);
 const chooseCard = () => {
   getListData();
+  chooseCheck = '';
   dialogVisible = true;
 
 }
@@ -480,6 +497,11 @@ function getListData() {
       cardList = res.data.page_data;
       total = Number(res.data.total_rows);
       cur_page = Number(res.data.page_now);
+      for(let i in cardList) {
+        for(let j in cardList[i].fj_content) {
+          cardList[i].not_allowed = /\.(docx|doc|pdf|ppt|pptx|xls|xlsx|mp4)/.test(cardList[i].fj_content[j].url);
+        }
+      }
     }
   })
 }
@@ -501,6 +523,21 @@ function filterData() {
   cur_page = 1;
   getListData();
 }
+function chooseCardSub() {
+  for(let i in cardList) {
+    if(cardList[i].zs_id === chooseCheck) {
+      fileList = cardList[i].fj_content;
+    }
+  }
+  dialogVisible = false;
+
+}
+let imgPreview = $ref([]);
+let showPreview = $ref(false)
+function imgShow(item) {
+  imgPreview = item.fj_content;
+  showPreview = true;
+}
 </script>
 
 <style lang="scss">
@@ -519,11 +556,14 @@ function filterData() {
 ::v-deep .el-radio__input.is-checked + .el-radio__label {
   color: #003eee;
 }
+::v-deep .el-carousel__container{
+  height: 100%;
+}
 
 .card-list {
   display: flex;
   flex-wrap: wrap;
-  max-height: 480px;
+  max-height: 515px;
   overflow-y: auto;
 
   li {
@@ -579,6 +619,12 @@ function filterData() {
   font-size: 14px;
   color: #003eee;
   text-align: center;
+  &:disabled{
+    background: #ccc;
+    border-color: #ccc;
+    color: #fff;
+    pointer-events: none;
+  }
 }
 
 .choose {
@@ -652,4 +698,43 @@ function filterData() {
   height: 72px;
   background: url("/images/loading-new.gif") center no-repeat;
 }
+.no-data {
+  width: 100%;
+  height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .no-data-img {
+    width: 233px;
+    height: 199px;
+    background: url("/images/no-data.png") center no-repeat;
+  }
+}
+.preview-box{
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2100;
+  background: rgba(0,0,0,.5);
+  .preview-close{
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    font-size: 40px;
+    color: #fff;
+    z-index:2200 ;
+  }
+  .el-carousel__item{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow-y: auto;
+  }
+  img{
+    max-width: 80% !important;
+  }
+}
 </style>