src/api/base.ts

@@ -25,6 +25,8 @@ axios.interceptors.response.use((response)=>{
     }
     return response;
 },(error)=>{
+    login[0]();
+    login.splice(0,1);
     message.error(error.response.data.message)
     return Promise.reject(error) 
 })

src/api/index.ts

@@ -793,3 +793,19 @@ export async function register(data: any){
         return false;
     }
 }
+
+/**
+ * 拒绝学生直播
+ * 
+ */
+
+export async function refusedtolive(signupid: number, msg: string){
+    const res = await get<any>("refusedToLive",{signupid, msg})
+    if(res.code == 0){
+        message.success(res.msg)
+        return true;
+    }else{
+        message.error(res.msg)
+        return false;
+    }
+}

src/components/LiveCount.vue

@@ -7,26 +7,54 @@
         <div class="info">
         <div class="item" v-for="(i, j) in list" :key="j">
             <div style="display: flex">
-            <img :src="i.img" alt="" />
+                <img :src="i.img" alt="" />
-            <div class="stuinfo">
+                <div class="stuinfo">
-                <div>{{ i.name }}</div>
+                    <div>{{ i.name }}</div>
-                <div class="lessonname">{{ i.interest }}</div>
+                    <div class="lessonname">{{ i.interest }}</div>
-            </div>
+                </div>
             </div>
             <div class="takehour" v-if="i.status == 1 && livestatus == 2">
-            参加时长
+                参加时长
-            <div>30min</div>
+                <div>30min</div>
             </div>
             <div
-            class="cancel"
+                class="cancel"
-            v-if="i.status == 2 || (livestatus == 0 && i.status == 1)"
+                v-if="i.status == 2 || (livestatus == 0 && i.status == 1)"
-            @click="quxiao(j)"
+                @click="quxiao(j)"
             >
-            取消直播
+                取消直播
             </div>
 
             <div class="refuse" v-if="i.status == 3">已拒绝</div>
         </div>
+        <div class="modal-container">
+            <a-modal
+                centered
+                :footer="null"
+                :getContainer="modalNode"
+                dialogClass="modal-dialog"
+                v-model:visible="updatePhoneVisible"
+                @cancel="hidePhoneModal"
+            >
+                <template v-slot:closeIcon>
+                    <img src="@/static/images/delete.png" class="close" />
+                </template>
+                <!-- 换绑手机号第一步 -->
+                <div class="yuanyin">
+                    请输入您举着该学生参与直播的原因
+                </div>
+                <div class="body">
+                    <div class="jubao">拒绝原因</div>
+                    <a-textarea
+                        v-model:value="text"
+                        class="text"
+                    />
+                </div>
+                <div class="submit-btn" @click="sum">
+                    确认拒绝
+                </div>
+            </a-modal>
+        </div>
 
         <!-- <div class="item">
             <div style="display:flex">
@@ -91,31 +119,30 @@
     }
     .info {
         .item {
-        display: flex;
+            display: flex;
-        align-content: center;
+            align-content: center;
-        justify-content: space-between;
+            justify-content: space-between;
-        margin-top: 23px;
+            margin-top: 23px;
-        font-size: 10px;
+            font-size: 10px;
-        .stuinfo {
+            .stuinfo {
-            margin: auto 0;
+                margin: auto 0;
-            margin-left: 11px;
+                margin-left: 11px;
-            color: #111111;
+                color: #111111;
-            .lessonname {
+                .lessonname {
-            color: #666666;
+                color: #666666;
+                }
+            }
+            .takehour {
+                color: #08ae98;
+                font-size: 11px;
+                margin: auto 0;
+                text-align: center;
+            }
+            > div > img {
+                width: 57px;
+                height: 57px;
+                border-radius: 50%;
             }
-        }
-        .takehour {
-            color: #08ae98;
-            font-size: 11px;
-            margin: auto 0;
-            text-align: center;
-        }
-        > div > img {
-            width: 57px;
-            height: 57px;
-            border-radius: 50%;
-            background-color: #0f0;
-        }
         }
     }
     .refuse {
@@ -141,26 +168,75 @@
         display: flex;
         justify-content: space-between;
         > div {
-        width: 114px;
+            width: 114px;
-        height: 23px;
+            height: 23px;
-        border-radius: 3px;
+            border-radius: 3px;
-        font-size: 10px;
+            font-size: 10px;
-        color: #fff;
+            color: #fff;
-        line-height: 23px;
+            line-height: 23px;
-        text-align: center;
+            text-align: center;
         }
         .modify {
-        background-color: #08ae98;
+            background-color: #08ae98;
         }
         .del {
-        background-color: #d12c2e;
+            background-color: #d12c2e;
         }
     }
+    ::v-deep(.modal-dialog) {
+        border-radius: 28px;
+        overflow: hidden;
+        padding: 0;
+        width: 569px !important;
+
+       
+        .close {
+            width: 14px;
+            height: 14px;
+        }
+        .yuanyin{
+            margin-top: 13px;
+            font-size: 11px;
+            color: #111;
+            font-weight: bold;
+        }
+        .body{
+            display: flex;
+            margin-top: 34px;
+            .jubao{
+                font-size: 11px;
+                color: #808080;
+                margin-right: 28px;
+                 
+            }
+            .text{
+                width: 359px;
+                height: 85px;
+                font-size: 11px;
+
+            }
+        }
+        .submit-btn {
+            width: 63px;
+            height: 23px;
+            background: #08AE98;
+            border-radius: 3px;
+            font-size: 10px;
+            font-weight: 500;
+            color: #FFFFFF;
+            text-align: center;
+            line-height: 23px;
+            cursor: pointer;
+            user-select: none;
+            margin-top: 57px;
+        }
+       
+    }
 }
 </style>
 <script lang="ts">
-import { cancellive } from '@/api';
+import { cancellive, refusedtolive } from '@/api';
-import { defineComponent, ref, watch } from "vue";
+import { defineComponent, ref, toRaw, watch } from "vue";
 
 export default defineComponent({
     props: {
@@ -168,23 +244,46 @@ export default defineComponent({
         livestatus: Number,
     },
     setup(props) {
+        const modalNode = () => document.getElementsByClassName('modal-container')[0]
+        const updatePhoneVisible = ref(false)
+        const sid = ref(0)
+        const list = ref<any>(props.info);
+        const text = ref("")
 
-        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])
+            console.log(index, list.value[index]);
-            const res = await cancellive(list.value[index].memberid, 3);
+            sid.value = index;
+            updatePhoneVisible.value = true;
+            // const res = await cancellive(list.value[index].memberid, 3);
+            // if(res){
+            //     list.value[index].status = 3
+            // }
+        }
+        function hidePhoneModal(): void {
+            updatePhoneVisible.value = false;
+            text.value = "";
+        }
+        async function sum(){
+            console.log(sid.value, text.value)
+            const res = await refusedtolive(list.value[sid.value].signupid, text.value);
             if(res){
-                list.value[index].status = 3
+                list.value[sid.value].status = 3;
+                hidePhoneModal();
             }
         }
         
         return {
             list,
-            quxiao
+            quxiao,
+            modalNode,
+            updatePhoneVisible,
+            hidePhoneModal,
+            sum,
+            text
         };
     },
 });