完成解题页面

src/components/challenges/challenges.vue

@@ -34,7 +34,8 @@
     </div>
     <el-scrollbar height="490px">
     <div class="all-card">
-      <el-button v-for="(c,index) in data" class="buttons" @click="bcard(index)">
+      <el-button v-for="(c,index) in data" class="buttons" @click="bcard(index)"
+                 :type="c.is_solved ? 'warning':''" >
         <div class="card">
         <div class="card-name">
           {{c.name}}
@@ -78,19 +79,51 @@
         <div class="description"><!-- 题目描述-->
           {{challenges.description}}
         </div>
-        <div class="attchment">
+
+        <div class="attachment"><!-- 附件or连接-->
+          <div v-if="attachment[0]==''" class="link"></div>
+          <div v-else class="link">
+          <el-link type="primary" id="link">题目链接</el-link>
+          </div>
+          <div v-if="attachment.length<2" class="file"></div>
+          <div v-else class="file">
+            <el-link type="primary" id="file">附件下载</el-link>
+          </div>
+        </div>
+
+      </div>
+      <div class="foot">
+        <div class="submit">
+          <el-form :model="formData" ref="vForm"  label-position="left" label-width="80px"
+                   size="default" >
+            <el-row>
+              <el-col :span="16" class="grid-cell">
+                <el-form-item label="" label-width="0" >
+                  <el-input v-if="challenges.is_solved" v-model="formData.flag" disabled type="text" placeholder="flag" ></el-input>
+                  <el-input v-else v-model="formData.flag" type="text" placeholder="flag" ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8" class="grid-cell">
+                <div class="static-content-item">
+                  <el-button v-if="challenges.is_solved"  @click="submitflag" disabled>submit</el-button>
+                  <el-button v-else @click="submitflag">submit</el-button>
+                  <el-popover
+                      class="item" effect="dark" placement="top" trigger="click"
+                  >
+                    <div slot="content" style="float: left;font-size:0;">
+                      　<span style="font-size: 14px;" v-for="h in challenges.hints">{{h}}<br/></span>
+                    </div>
+                    <template #reference>
+                      <el-button>hint</el-button>
+                    </template>
+                  </el-popover>
+                </div>
+
+              </el-col>
+            </el-row>
+          </el-form>
+
         </div>
-<!--        <el-popover-->
-<!--            placement="top-start"-->
-<!--            title="Title"-->
-<!--            :width="200"-->
-<!--            trigger="hover"-->
-<!--            content="this is content, this is content, this is content"-->
-<!--        >-->
-<!--          <template #reference>-->
-<!--            <el-button>Hover to activate</el-button>-->
-<!--          </template>-->
-<!--        </el-popover>-->
       </div>
 
     </el-card>
@@ -108,14 +141,20 @@ import {
   Setting,
 } from '@element-plus/icons-vue'
 import axios from "axios";
+import { ElNotification } from 'element-plus';
+
 
 export default {
   data() {
     return {
+      formData: {
+        flag: "",
+      },
       challengetype: '',
       data:[],
       challenges:[],
-      tags:[]
+      tags:[],
+      attachment:[],
     }
   },
 
@@ -124,18 +163,68 @@ export default {
 
       this.challenges = this.data[index]
       this.tags = this.data[index].tags.split(',')
+      this.attachment = this.data[index].attachment
+
+      //判断是否显示连接与附件
+      if(this.attachment!=undefined && this.attachment.length==0){
+        if(this.attachment[0]==''){
+          console.log('no link')
+        }
+        else{
+          var link = document.getElementById("link");
+          link.href = this.attachment[0];
+        }
+        if(this.attachment[1]==''){
+          var file = document.getElementById("file");
+          file.href = this.attachment[1];
+        }
+
+      }
+
+    },
+    submitflag(){
+      //提交flag
+      axios({
+        method:'post',
+        url:'/api/v1/user/submitflag',
+        headers:{
+          'Content-Type':'application/json;charset=UTF-8'
+        },
+        data:{
+          "cid":this.challenges.id,
+          "flag":this.formData.flag,
+        }
+      }).then(res=>{
+        console.log(res.data)
+        if(res.data.code===200){
+          ElNotification.success({
+            title: 'Success',
+            message: '提交成功',
+            duration: 2000
+          });
+          this.formData.flag = ''
+        }
+        else{
+          ElNotification.error({
+            title: '提交失败',
+            message: res.data.msg,
+            duration: 2000
+          });
+
+        }
+      })
     },
 
-
+    //选中分类
     handleSelect(index) {
       this.challengetype = index;
       axios.get("/api/v1/user/challenges/" + index).then(res => {
         if (res.data.code === 200) {
-
           this.data = res.data.data;
         }
       })
       this.challenges=[];
+
     },
   }
 }
@@ -179,6 +268,11 @@ export default {
         font-weight: normal;
         margin-top: 10px;
       }
+      .attachment{
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 5px;
+      }
     }
   }
   .all-card{