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

@@ -27,6 +27,34 @@
 
             <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">
@@ -114,7 +142,6 @@
                 width: 57px;
                 height: 57px;
                 border-radius: 50%;
-            background-color: #0f0;
             }
         }
     }
@@ -156,11 +183,60 @@
             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 { defineComponent, ref, watch } from "vue";
+import { cancellive, refusedtolive } from '@/api';
+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])
-            const res = await cancellive(list.value[index].memberid, 3);
+            console.log(index, list.value[index]);
+            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
         };
     },
 });