wallet_app/src/views/im/detail/index.vue

<template>
    <div class="container">
        <div class="box-item">
            <div class="item-title">
                <div class="text-lf">群聊成员</div>
                <div class="text-ri" @click="checkMember">查看8名群成员<svg-icon class="item-icon" name="right1"/></div>
            </div>
            <div class="member-box">
                <div class="member-li" v-for="item in 8">
                    <van-image class="member-img" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
                    <div>希希子</div>
                </div>
                <div class="member-li" @click="addMember">
                    <div class="add">
                        <svg-icon class="add-icon" name="add3" />
                    </div>
                    <div>邀请</div>
                </div>
            </div>
        </div>
        <van-cell-group class="user-bar-list">
            <van-cell
                title="群聊名称"
                :value="information.name"
                is-link @click="changeUpdateName(1)"
            ></van-cell>
            <van-cell title="群二维码" :value="information.qrCode" is-link @click="goQrcode">
                <template #value>
                    <svg-icon class="qrcode-icon" name="qrcode"/>
                </template>
            </van-cell>
            <van-cell
                title="群公告"
                :value="information.notice" @click="showNotice = true"
                is-link
            ></van-cell>
            <van-cell
                title="我在群里的昵称" class="user-bar-list-last" @click="changeUpdateName(2)"
                :value="information.nickname"
                is-link
            ></van-cell>
        </van-cell-group>
        <van-cell-group class="user-bar-list">
            <van-cell center title="消息免打扰">
                <template #right-icon>
                    <van-switch v-model="disturb" active-color="#4765DD" inactive-color="#D9D9D9"/>
                </template>
            </van-cell>
            <van-cell center title="置顶聊天" class="user-bar-list-last">
                <template #right-icon>
                    <van-switch v-model="topStory" active-color="#4765DD " inactive-color="#D9D9D9 "/>
                </template>
            </van-cell>
        </van-cell-group>
        <van-cell-group class="user-bar-list">
            <van-cell class="user-bar-list-last" title="查看聊天记录" is-link @click="goChatDetail"></van-cell>
        </van-cell-group>
        <div class="exit" @click="showExit = true">退出群聊</div>
        <!-- 修改信息弹框 -->
        <van-popup v-model:show="showUpdateName" :style="{ borderRadius:'25px' }">
            <div class="pop-content-password">
                <div class="pop-title-password">{{type == 1?'修改群聊名称':'修改昵称'}}</div>
                <van-field v-model="newName" class="pop-input" placeholder="请输入名称" />
                <div class="pop-btn-password">
                    <van-button type="default" class="btn-password cancel" @click="cancel">{{ $t('wallet.Cancel') }}</van-button>
                    <van-button type="default" class="btn-password confirm" @click="popConfirm" :disabled="isDisabledConfirm">{{ $t('wallet.Sure') }}</van-button>
                </div>
            </div>
        </van-popup>
        <!-- 公告弹框 -->
        <van-popup v-model:show="showNotice" position="bottom" round style="height:280px">
            <div class="pop-content">
                <div class="pop-title">
                    <div @click="showNotice = false">取消</div>
                    <div class="save" @click="changeUpdateNotice">保存</div>
                </div>
                <van-field class="textarea-item"
                    v-model="newNotice"
                    rows="2"
                    autosize
                    type="textarea"
                    placeholder="请输入公告内容..."
                    show-word-limit
                />
            </div>
        </van-popup>
        <!-- 退出群聊弹框 -->
        <van-popup v-model:show="showExit" :style="{ borderRadius:'25px' }">
            <div class="pop-content-password">
                <div class="pop-title-password">确定要退出群聊吗？</div>
                <div class="pop-btn-password" style="margin-top: 50px;">
                    <van-button type="default" class="btn-password cancel" @click="showExit = false">{{ $t('wallet.Cancel') }}</van-button>
                    <van-button type="default" class="btn-password confirm" @click="popConfirm">{{ $t('wallet.Sure') }}</van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { useRouter,useRoute } from 'vue-router'
import { reactive } from 'vue'
import { showNotify } from 'vant';
const router = useRouter();


const information = reactive({
    name:'群聊',
    qrCode:'',
    notice:'367657',
    nickname:'vs大放送'
})
const type = ref(1);//1:修改群聊名称  2：修改我的群昵称
const disturb = ref(true);
const topStory = ref(false);
const showUpdateName = ref(false);
const isDisabledConfirm = ref(false);
const showNotice = ref(false);
const showExit = ref(false);
const newName = ref('');
const newNotice = ref('');
const changeUpdateName = (val) => {
    type.value = val;
    newName.value = val == 1?information.name:information.nickname
    showUpdateName.value = true;
}
// 群聊名称取消
const cancel = () => {
    showUpdateName.value = false;
}
// 群聊名称确定
const popConfirm = () => {
    if(!newName.value){
        showNotify({ type: 'warning', message: '请输入名称' });
        return;
    }
    isDisabledConfirm.value = true;
    setTimeout(() => {
        isDisabledConfirm.value = false;
        showUpdateName.value = false;
        if(type.value == 1){
            information.name = newName.value;
        }else{
            information.nickname = newName.value;
        }
    }, 1000);
}
// 群公告
const changeUpdateNotice = () => {
    if(!newNotice.value){
        showNotify({ type: 'warning', message: '请输入公告内容' });
        return;
    }
    setTimeout(() => {
        showNotice.value = false;
        information.notice = newNotice.value;
    }, 500);
}
// 跳转群二维码页面
const goQrcode = () => {
    router.push('qrcode')
}
// 跳转聊天记录
const goChatDetail = () => {
    router.push('chatLog')
}
// 跳转添加成员页面
const addMember = () => {
    router.push('addMember')
}
// 跳转查看成员页面
const checkMember = () => {
    router.push('checkMember')
}
</script>

<style lang="less" scoped>
.container{
    margin: 16px;
    .box-item{
        background-color: #fff;
        border-radius: 12px;
        padding: 12px 16px 0;
        margin-bottom: 16px;
        .item-title{
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #8D8D8D;
            .text-lf{
                font-weight: 500;
                font-size: 15px;
                color: #000000;
            }
            .text-ri{
                display: flex;
                align-items: center;
                .item-icon{
                    width: 20px;
                    height: 20px;
                    color: #969799;
                }
            }
        }
        .member-box{
            margin-top: 12px;
            flex-wrap: wrap;
            display: flex;
            .member-li{
                width: calc(100% / 5);
                display: flex;
                flex-direction: column;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 10px;
                color: #000000;
                padding-bottom: 17px;
                align-items: center;
                .member-img{
                    width: 44px;
                    height: 44px;
                    margin-bottom: 4px;
                    flex-shrink: 0;
                }
                .add{
                    width: 44px;
                    height: 44px;
                    margin-bottom: 4px;
                    border-radius: 22px;
                    background: #F2F2F2;
                    position: relative;
                    .add-icon{
                        width: 20px;
                        height: 20px;
                        position: absolute;
                        top:50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                    }
                }
            }
        }
    }
    .user-bar-list{
        background-color: #fff;
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 16px;
        .van-cell {
            // height: 44px;
            background: @bg-color1;
            border-bottom: 1px solid @bg-color1;
            font-size: 15px;
            &::after {
                border-bottom: 1px solid #f2f2f2;
            }
        }
        :deep(.van-cell__title){
            font-family: PingFang SC, PingFang SC;
            font-weight: 500 ;
            font-size: 15px;
            color: #000000;
        }
        :deep(.van-cell__value){
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 15px;
            color: #8D8D8D;
        }
        .user-bar-list-last::after {
            border-bottom: 0;
        }
        .qrcode-icon{
            width: 24px;
            height: 24px;
        }
    }
    .exit{
        height: 44px;
        background-color: #fff;
        border-radius: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 15px;
        color: #FF0000;
        text-align: center;
        line-height: 44px;
    }
    .pop-content-password{
        padding: 27px 35px 25px 34px;
        .pop-title-password{
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 17px;
            color: #000000;
            text-align: center;
        }
        .pop-input{
            background: #F2F2F2;
            border-radius: 8px;
            height: 40px;
            margin: 21px 0 31px;
        }
        .pop-btn-password{
            display: flex;
            justify-content: center;
            .btn-password{
                width: 83px;
                height: 29px;
                line-height: 29px;
                padding: 5px 0 !important;
                border-radius: 6px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 15px;
                box-sizing:border-box;
            }
            .cancel{
                margin-right: 17px !important;
                border: 1px solid #D8D8D8;
                color: #000 !important;
            }
            .confirm{
                background: @theme-color1;
                color: #FFF;
                font-weight: 500;
                border: none !important;
            }
        }
    }
    :deep(.van-popup--center) {
        margin: 0 40px !important;
        width: auto !important;
    }
    .pop-content{
        background: #F7F8FA;
        height: 280px;
        .pop-title{
            background: #fff;
            padding: 0 20px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 15px;
            color: #4F4F4F;
            .save{
                font-weight: 500;
                color: #4765DD;
            }
        }
        .textarea-item{
            background: #F7F8FA !important;
            :deep(.van-cell__value){
                font-weight: 400 !important;
                font-size: 15px !important;
            }
        }
        .textarea-item :deep(textarea::placeholder) {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 15px;
            color: #8D8D8D;
        }
    }
}
</style>