1

src/components/pages/race/eventCenter/myAnli.vue

@@ -17,138 +17,144 @@
         >案例设计</el-button
       >
     </div> -->
-    <div class="myAnliBox" v-if="anliBox.length > 0">
-      <div
-        :class="{ isAnliAll: an.isAll }"
-        class="anLi"
-        v-for="(an, anIndex) in anliBox"
-        :key="anIndex"
-      >
-        <div class="anliTop">
-          <div class="anliTopLeft">
-            <div>名称：广东省PBL案例征集</div>
-            <div>案例组别：{{ an.typename ? an.typename : "暂无分类" }}</div>
+    <div v-if="!isLoading">
+      <div class="myAnliBox" v-if="anliBox.length > 0">
+        <div
+          :class="{ isAnliAll: an.isAll }"
+          class="anLi"
+          v-for="(an, anIndex) in anliBox"
+          :key="anIndex"
+        >
+          <div class="anliTop">
+            <div class="anliTopLeft">
+              <div>名称：广东省PBL案例征集</div>
+              <div>案例组别：{{ an.typename ? an.typename : "暂无分类" }}</div>
+            </div>
+            <div class="anliTopRight">创建人：{{ an.name }}</div>
           </div>
-          <div class="anliTopRight">创建人：{{ an.name }}</div>
-        </div>
 
-        <div class="anliMiddle">
-          <div class="anliBox">
-            <div class="anliImg">
-              <img
-                :src="
-                  JSON.parse(an.info).cover && JSON.parse(an.info).cover.length
-                    ? JSON.parse(an.info).cover[0].url
-                    : noBanner
-                "
-                alt=""
-              />
-            </div>
-            <div class="anliNav">
-              <div>项目名称：{{ JSON.parse(an.info).title }}</div>
-              <div>单位：{{ an.schoolName }}</div>
-              <div>
-                <div
-                  :class="{ isAll: an.isAll }"
-                  class="xmjj"
-                  v-if="JSON.parse(an.info).courseText"
-                >
-                  {{ JSON.parse(an.info).courseText }}
-                </div>
-                <div v-if="JSON.parse(an.info).courseText.length > 90">
+          <div class="anliMiddle">
+            <div class="anliBox">
+              <div class="anliImg">
+                <img
+                  :src="
+                    JSON.parse(an.info).cover &&
+                    JSON.parse(an.info).cover.length
+                      ? JSON.parse(an.info).cover[0].url
+                      : noBanner
+                  "
+                  alt=""
+                />
+              </div>
+              <div class="anliNav">
+                <div>项目名称：{{ JSON.parse(an.info).title }}</div>
+                <div>单位：{{ an.schoolName }}</div>
+                <div>
                   <div
-                    class="selectJj"
-                    @click="selectJj(anIndex, 1)"
-                    v-if="!an.isAll"
+                    :class="{ isAll: an.isAll }"
+                    class="xmjj"
+                    v-if="JSON.parse(an.info).courseText"
                   >
-                    展开
-                    <!-- <img src="../../../../assets/icon/expand.png" alt="" /> -->
+                    {{ JSON.parse(an.info).courseText }}
                   </div>
-                  <div class="selectJj" @click="selectJj(anIndex, 0)" v-else>
-                    收缩
-                    <!-- <img src="../../../../assets/icon/fold.png" alt="" /> -->
+                  <div v-if="JSON.parse(an.info).courseText.length > 90">
+                    <div
+                      class="selectJj"
+                      @click="selectJj(anIndex, 1)"
+                      v-if="!an.isAll"
+                    >
+                      展开
+                      <!-- <img src="../../../../assets/icon/expand.png" alt="" /> -->
+                    </div>
+                    <div class="selectJj" @click="selectJj(anIndex, 0)" v-else>
+                      收缩
+                      <!-- <img src="../../../../assets/icon/fold.png" alt="" /> -->
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div class="personAndAutor">
-                <div>总人数：</div>
-                <div class="people">
-                  <div class="man">
-                    <img src="../../../../assets/people.png" alt />
+                <div class="personAndAutor">
+                  <div>总人数：</div>
+                  <div class="people">
+                    <div class="man">
+                      <img src="../../../../assets/people.png" alt />
+                    </div>
+                    <div class="person">
+                      {{
+                        an.info
+                          ? JSON.parse(an.info).autor.length +
+                            JSON.parse(an.info).tableData.length
+                          : 0
+                      }}人
+                    </div>
                   </div>
-                  <div class="person">
-                    {{
-                      an.info
-                        ? JSON.parse(an.info).autor.length +
-                          JSON.parse(an.info).tableData.length
-                        : 0
-                    }}人
+                  <div class="autorBox" v-if="JSON.parse(an.info).autor.length">
+                    <div>联系人：</div>
+                    <div
+                      class="Autor"
+                      v-for="(a, aIndex) in JSON.parse(an.info).autor"
+                      :key="aIndex"
+                    >
+                      {{ a.sn }}
+                    </div>
                   </div>
-                </div>
-                <div class="autorBox" v-if="JSON.parse(an.info).autor.length">
-                  <div>联系人：</div>
                   <div
-                    class="Autor"
-                    v-for="(a, aIndex) in JSON.parse(an.info).autor"
-                    :key="aIndex"
+                    class="autorBox"
+                    v-if="JSON.parse(an.info).tableData.length"
                   >
-                    {{ a.sn }}
-                  </div>
-                </div>
-                <div
-                  class="autorBox"
-                  v-if="JSON.parse(an.info).tableData.length"
-                >
-                  <div>协作者：</div>
-                  <div
-                    class="Autor"
-                    v-for="(a, aIndex) in JSON.parse(an.info).tableData"
-                    :key="aIndex"
-                  >
-                    {{ a.sn }}
+                    <div>协作者：</div>
+                    <div
+                      class="Autor"
+                      v-for="(a, aIndex) in JSON.parse(an.info).tableData"
+                      :key="aIndex"
+                    >
+                      {{ a.sn }}
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
 
-        <div class="anliBottom">
-          <div style="margin-top: 5px" :class="{ isSubmit: an.state == 1 }">
-            当前状态：{{ an.state == 0 ? "未提交" : "已提交" }}
-          </div>
-          <div class="bottomRight">
-            <div
-              class="rightButton"
-              @click="updateState(an.id, 0)"
-              v-if="an.state == 0"
-            >
-              提交
+          <div class="anliBottom">
+            <div style="margin-top: 5px" :class="{ isSubmit: an.state == 1 }">
+              当前状态：{{ an.state == 0 ? "未提交" : "已提交" }}
             </div>
-            <div class="rightButton" @click="updateState(an.id, 1)" v-else>
-              取消提交
-            </div>
-            <div class="rightButton" @click="exportAnli(an)">导出</div>
-            <!-- <div class="rightButton" @click="goTo('/anliDetail?aid=' + an.id)">
+            <div class="bottomRight">
+              <div
+                class="rightButton"
+                @click="updateState(an.id, 0)"
+                v-if="an.state == 0"
+              >
+                提交
+              </div>
+              <div class="rightButton" @click="updateState(an.id, 1)" v-else>
+                取消提交
+              </div>
+              <div class="rightButton" @click="exportAnli(an)">导出</div>
+              <!-- <div class="rightButton" @click="goTo('/anliDetail?aid=' + an.id)">
               开始教学
             </div> -->
-            <div class="rightButton" @click="goTo('/addRace?aid=' + an.id)">
-              编辑
-            </div>
-            <div class="rightButton" @click="deleteAnli(an.id)">删除</div>
-            <div
-              class="rightButton"
-              style="background: #225ac7"
-              @click="lookDetail(an.id)"
-            >
-              查看详情
+              <div class="rightButton" @click="goTo('/addRace?aid=' + an.id)">
+                编辑
+              </div>
+              <div class="rightButton" @click="deleteAnli(an.id)">删除</div>
+              <div
+                class="rightButton"
+                style="background: #225ac7"
+                @click="lookDetail(an.id)"
+              >
+                查看详情
+              </div>
             </div>
           </div>
         </div>
       </div>
+      <div class="noAnliBox" v-else>
+        <img src="../../../../assets/icon/race/isNoMessage.png" alt="" />
+      </div>
     </div>
-    <div class="noAnliBox" v-else>
-      <img src="../../../../assets/icon/race/isNoMessage.png" alt="" />
+    <div class="noAnliBox" style="width: 100%; text-align: center" v-else>
+      正在加载数据中，请稍等...
     </div>
   </div>
 </template>
@@ -158,6 +164,7 @@ export default {
   props: ["userid", "oid", "type"],
   data() {
     return {
+      isLoading: false,
       anliBox: [],
       noBanner: require("../../../../assets/noBanner.jpg"),
     };
@@ -167,6 +174,7 @@ export default {
       this.$router.push(path);
     },
     selectAnLi() {
+      this.isLoading = true;
       let params = {
         uid: this.userid,
         t: this.type,
@@ -174,6 +182,7 @@ export default {
       this.ajax
         .get(this.$store.state.api + "selectRaceList", params)
         .then((res) => {
+          this.isLoading = false;
           this.anliBox = res.data[0];
           for (var i = 0; i < this.anliBox.length; i++) {
             this.anliBox[i].isAll = "";
@@ -181,6 +190,7 @@ export default {
           }
         })
         .catch((err) => {
+          this.isLoading = false;
           console.error(err);
         });
     },