直播学生

src/api/index.ts

@@ -475,3 +475,20 @@ export async function getliveinfo(id: number){
 export async function getdatelist(start: string, end: string) {
     return (await get("teacherCalendar")).data
 }
+
+
+
+/**
+ * 取消直播
+ */
+
+export async function cancellive(id: number, status: number){
+    const res = await post("cancelLive",{id, status})
+    if(res.code == 0){
+        message.success(res.msg);
+        return true;
+    }else{
+        message.error(res.msg);
+        return false;
+    }
+}

src/components/LiveCount.vue

@@ -5,43 +5,50 @@
         <div class="more">查看详情</div>
         </div>
         <div class="info">
-      <div class="item">
+        <div class="item" v-for="(i, j) in list" :key="j">
-        <div style="display:flex">
+            <div style="display: flex">
-          <img src="" alt="" />
+            <img :src="i.img" alt="" />
             <div class="stuinfo">
-            <div>andy</div>
+                <div>{{ i.name }}</div>
-            <div class="lessonname">英语 A1</div>
+                <div class="lessonname">{{ i.interest }}</div>
             </div>
             </div>
-
+            <div class="takehour" v-if="i.status == 1 && livestatus == 2">
-        <div class="cancel">取消直播</div>
-      </div>
-
-       <div class="item">
-        <div style="display:flex">
-          <img src="" alt="" />
-          <div class="stuinfo">
-            <div>andy</div>
-            <div class="lessonname">英语 A1</div>
-          </div>
-        </div>
-
-        <div class="refuse">已拒绝</div>
-      </div>
-
-       <div class="item">
-        <div style="display:flex">
-          <img src="" alt="" />
-          <div class="stuinfo">
-            <div>andy</div>
-            <div class="lessonname">英语 A1</div>
-          </div>
-        </div>
-
-        <div class="takehour">
             参加时长
             <div>30min</div>
             </div>
+            <div
+            class="cancel"
+            v-if="i.status == 2 || (livestatus == 0 && i.status == 1)"
+            @click="quxiao(j)"
+            >
+            取消直播
+            </div>
+
+            <div class="refuse" v-if="i.status == 3">已拒绝</div>
+        </div>
+
+        <!-- <div class="item">
+            <div style="display:flex">
+            <img src="" alt="" />
+            <div class="stuinfo">
+                <div>andy</div>
+                <div class="lessonname">英语 A1</div>
+            </div>
+            </div>
+
+        </div>
+
+        <div class="item">
+            <div style="display:flex">
+            <img src="" alt="" />
+            <div class="stuinfo">
+                <div>andy</div>
+                <div class="lessonname">英语 A1</div>
+            </div>
+            </div>
+
+            
         </div>
         <div class="item">
             <div style="display:flex">
@@ -56,9 +63,7 @@
                 参加时长 
                 <div>30min</div>
             </div>
-      </div>
+        </div> -->
-      
-
         </div>
     </div>
 </template>
@@ -105,7 +110,7 @@
             margin: auto 0;
             text-align: center;
         }
-      > div>img {
+        > div > img {
             width: 57px;
             height: 57px;
             border-radius: 50%;
@@ -113,18 +118,20 @@
         }
         }
     }
-  .refuse{
+    .refuse {
-    color: #D22C2E;
+        color: #d22c2e;
-    margin:auto 0;
+        margin: auto 0;
+        width: 57px;
+        text-align: center;
     }
-  .cancel{
+    .cancel {
-    margin:auto 0;
+        margin: auto 0;
         width: 57px;
         height: 23px;
-    border: 1px solid #09AE99;
+        border: 1px solid #09ae99;
         line-height: 23px;
         text-align: center;
-    color: #09AE99;
+        color: #09ae99;
         border-radius: 3px;
     }
     .button {
@@ -152,12 +159,33 @@
 }
 </style>
 <script lang="ts">
-import { defineComponent } from "vue";
+import { cancellive } from '@/api';
+import { defineComponent, ref, watch } from "vue";
 
 export default defineComponent({
-  setup(){  
+    props: {
+        info: Array,
+        livestatus: Number,
+    },
+    setup(props) {
         
-    return{}
+        let list = ref<any>(props.info);
+        watch(()=> props.info,()=>{
+            // console.log(props.info)
+            list.value = props.info
+        })
+        async function quxiao(index: number){
+            console.log(index, list.value[index])
+            const res = await cancellive(list.value[index].memberid, 3);
+            if(res){
+                list.value[index].status = 3
             }
+        }
+        
+        return {
+            list,
+            quxiao
+        };
+    },
 });
 </script>

src/components/LivePlay.vue

@@ -13,7 +13,7 @@
               </div>
               <div>
                   <img src="@/static/images/livetimetake.png" alt="" class="icon">
-                  <span>{{info.vodduration}}min</span>
+                  <span>{{info.livetime}}min</span>
               </div>
                     <div>
                   <img src="@/static/images/shoucang.png" alt="" class="icon">

src/views/regime/Livedetail.vue

@@ -5,7 +5,7 @@
             <liveplay :info="liveinfo"></liveplay>
         </div>
 
-        <LiveCount></LiveCount>
+        <LiveCount :info="liveinfo.studentlist" :livestatus="liveinfo.livestatus" :zid="liveinfo.liveid"></LiveCount>
     </div>
     <VideoReview class="review" v-if="liveinfo.livestatus == 2"></VideoReview>
   </div>