beelink/src/components/LiveCount.vue

<template>
    <div class="cont">
        <div class="title">
        <div>{{lan.$t('shangkexuesheng')}}</div>
        <div class="more" @click="toxq">{{lan.$t('chakanxiangqing')}}</div>
        </div>
        <div class="info">
        <div class="item" v-for="(i, j) in list" :key="j">
            <div style="display: flex">
                <img :src="i.img" alt="" />
                <div class="stuinfo">
                    <div>{{ i.name }}</div>
                    <div class="lessonname">{{ i.interest }}</div>
                </div>
            </div>
            <div class="takehour" v-if="i.status == 1 && livestatus == 2">
                {{lan.$t('canjiashichang')}}
                <div>{{i.length}}min</div>
            </div>
            <div
                class="cancel"
                v-if="i.status == 2 || (livestatus == 0 && i.status == 1)"
                @click="quxiao(j)"
            >
                {{lan.$t('quxiaozhibo')}}
            </div>

            <div class="refuse" v-if="i.status == 3">{{lan.$t('yijujue')}}</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">
                    {{lan.$t('jujueyuanyintext')}}
                </div>
                <div class="body">
                    <div class="jubao">{{lan.$t('juejueyuanyin')}}</div>
                    <a-textarea
                        v-model:value="text"
                        class="text"
                    />
                </div>
                <div class="submit-btn" @click="sum">
                    {{lan.$t('querenjujue')}}
                </div>
            </a-modal>
        </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">
            <img src="" alt="" />
            <div class="stuinfo">
                <div>andy</div>
                <div class="lessonname">英语 A1</div>
            </div>
            </div>

            <div class="takehour">
                参加时长 
                <div>30min</div>
            </div>
        </div> -->
        </div>
    </div>
</template>
<style lang="scss" scoped>
.cont {
    width: 316px;
    height: 563px;
    background-color: #fff;
    border-radius: 17px;
    padding: 0 28px;
    position: relative;
    overflow: auto;
    .title {
        padding: 23px 0 11px 0;
        font-size: 13px;
        color: #111;
        line-height: 1;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        .more {
        color: #999999;
        font-size: 11px;
        cursor: pointer;
        }
    }
    .info {
        .item {
            display: flex;
            align-content: center;
            justify-content: space-between;
            margin-top: 23px;
            font-size: 10px;
            .stuinfo {
                margin: auto 0;
                margin-left: 11px;
                color: #111111;
                .lessonname {
                color: #666666;
                }
            }
            .takehour {
                color: #08ae98;
                font-size: 11px;
                margin: auto 0;
                text-align: center;
            }
            > div > img {
                width: 57px;
                height: 57px;
                border-radius: 50%;
            }
        }
    }
    .refuse {
        color: #d22c2e;
        margin: auto 0;
        width: 57px;
        text-align: center;
    }
    .cancel {
        margin: auto 0;
        width: 57px;
        height: 23px;
        border: 1px solid #09ae99;
        line-height: 23px;
        text-align: center;
        cursor: pointer;
        color: #09ae99;
        border-radius: 3px;
    }
    .button {
        position: absolute;
        width: 260px;
        bottom: 28px;
        display: flex;
        justify-content: space-between;
        > div {
            width: 114px;
            height: 23px;
            border-radius: 3px;
            font-size: 10px;
            color: #fff;
            line-height: 23px;
            text-align: center;
        }
        .modify {
            background-color: #08ae98;
        }
        .del {
            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, refusedtolive } from '@/api';
import router from '@/router';
import { useI18n } from '@/utils/i18n';
import { defineComponent, ref, toRaw, watch } from "vue";

export default defineComponent({
    props: {
        info: Array,
        livestatus: Number,
        zid:Number
    },
    setup(props) {
        const lan: any = useI18n();
        const modalNode = () => document.getElementsByClassName('modal-container')[0]
        const updatePhoneVisible = ref(false)
        const sid = ref(0)
        const list = ref<any>(props.info);
        const text = ref("")

        watch(()=> props.info,()=>{
            // console.log(props.info)
            list.value = props.info
        })
        async function quxiao(index: number){
            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[sid.value].status = 3;
                hidePhoneModal();
            }
        }
        function toxq(){
            router.push({path:"/regime/studentlist",query:{liveid:props.zid}})
            console.log(props.zid,"aaa")
        }

        
        return {
            list,
            quxiao,
            modalNode,
            updatePhoneVisible,
            hidePhoneModal,
            sum,
            text,
            toxq,
            lan
        };
    },
});
</script>