feiniao-farm-h5/src/views/old_mini/modify_work/sharePage.vue

<template>
    <div class="share-page">
        <custom-header name="选择发送到" />
        <div class="share-content">
            <div class="search-wrap">
                <div class="search-input">
                    <el-input v-model="search" placeholder="搜索昵称">
                        <template #prefix>
                            <el-icon><Search /></el-icon>
                        </template>
                    </el-input>
                </div>
            </div>
            <div class="recent-chat-wrap">
                <div class="recent-title">最近聊天</div>
                <div class="recent-list">
                    <div class="recent-item" v-for="(item, index) in recentList" :key="index">
                        <img class="recent-img" src="" alt="" />
                        <div class="recent-name">{{ item.name }}</div>
                        <checkbox class="recent-checkbox" v-model="item.checked"></checkbox>
                    </div>
                </div>
            </div>
            <div class="chat-list">
                <div class="chat-item" v-for="(item, index) in chatList" :key="index">
                    <checkbox @change="changeCheck(item)" v-model="item.checked"></checkbox>
                    <div class="chat-info" :class="{'checked': item.checked}">
                        <img class="chat-img" src="" alt="" />
                        <span class="chat-name">{{ item.name }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom-btn" v-show="checkedList.length > 0">
        <div class="btn">取消</div>
        <div class="btn primary">完成</div>
    </div>
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import { Checkbox } from "vant";
import { ref } from "vue";

const search = ref("");

const chatList = ref([
    {
        name: "张三",
        checked: false,
    },
    {
        name: "张三",
        checked: false,
    },
]);

const recentList = ref([
    {
        name: "农资11",
        checked: false,
    },
    {
        name: "农资12",
        checked: false,
    },
]);

const checkedList = ref([]);
const changeCheck = (item) => {
    console.log(item,chatList.value);
    checkedList.value = chatList.value.filter((item) => item.checked);
};
</script>

<style lang="scss" scoped>
.share-page {
    width: 100%;
    height: 100vh;
    background-color: #f5f7fb;
    .share-content {
        .search-wrap {
            padding: 20px 20px 0 20px;
            .search-input {
                width: 100%;
                ::v-deep {
                    .el-input__wrapper {
                        box-shadow: none;
                        border-radius: 25px;
                    }
                }
            }
        }
        .recent-chat-wrap {
            padding: 0 20px 20px 20px;
            .recent-title {
                font-weight: 500;
                margin: 12px 0;
            }
            .recent-list {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                .recent-item {
                    position: relative;
                    .recent-img {
                        width: 54px;
                        height: 54px;
                        border-radius: 2px;
                        background: red;
                    }
                    .recent-name {
                        text-align: center;
                        margin-top: 5px;
                    }
                    .recent-checkbox{
                        position: absolute;
                        right: 3px;
                        top: 3px;
                    }
                }
            }
        }
        .chat-list {
            background-color: #fff;
            padding-top: 6px;
            .chat-item {
                padding: 10px 20px;
                display: flex;
                align-items: center;
                gap: 12px;
                .chat-info {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    .chat-img {
                        width: 46px;
                        height: 46px;
                        border-radius: 2px;
                    }
                    &.checked {
                        .chat-name {
                            color: #2199F8;
                            font-weight: 500;
                        }
                    }
                }
            }
        }
    }
}

.bottom-btn {
    position: fixed;
    bottom: 10px;
    left: 20px;    
    width: calc(100% - 40px);
    display: flex;

    .btn {
        flex: 1;
        text-align: center;
        color: #2199F8;
        padding: 10px;
        border-radius: 25px;
        border: 1px solid #2199F8;
        font-size: 16px;
        &.primary{
            background: #2199F8;
            color: #fff;
        }
    }
    .btn + .btn {
        margin-left: 15px;
    }
}
</style>