alipay-emulator/components/message/chat/chat-layout.vue

<template>
    <view class="page-container flex-column" :class="`${phone}-style`">
        <view class="status-placeholder w100" :style="{ height: `${data.statusBarHeight}px` }"></view>
        <view class="top-box">
            <slot name="top">
                <view class="top-container">
                    <view class="flex-align-center flex-justify-between">
                        <view class="left flex-align-center">
                            <image @click="util.goBack()" :src="`/static/image/phone-message/${phone}/back.png`">
                            </image>
                            <view class="number-box">256</view>
                        </view>
                        <view class="center">
                            <image class="img shrink-0"
                                :src="chatInfo.img || `/static/image/phone-message/${phone}/default.png`">
                            </image>
                        </view>
                        <view class="right"></view>
                    </view>
                    <view class="text-box flex-align-center flex-justify-center">
                        <text class="title">{{ chatInfo.title }}</text>
                        <uni-icons type="right" size="10" color="#D8D8D8"></uni-icons>
                    </view>
                </view>
            </slot>
        </view>
        <view class="center-box flex-1">
            <slot></slot>
        </view>
        <view class="bottom-box">
            <slot name="bottom">
                <view class="right-container flex-align-center">
                    <image class="add-img shrink-0" :src="`/static/image/phone-message/${phone}/chat-left.png`"></image>
                    <view class="search-box flex-1 flex-align-center">
                        <input class="input flex-1" placeholder="信息 · 短信" type="text">
                        <image v-if="phone == 'iphone'" class="right-icon"
                            src="/static/image/phone-message/iphone/mic.png"></image>
                    </view>
                    <view v-if="phone != 'iphone'">
                        <image class="right-icon" src="/static/image/phone-message/mi/mic.png"></image>
                    </view>
                </view>
            </slot>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { onLoad, onPageScroll } from "@dcloudio/uni-app";
import { stringUtil, util } from '@/utils/common.js';
const props = defineProps({
    // 手机品牌
    phone: {
        type: String,
        default: 'iphone'
    },
    chatInfo: {
        type: Object,
        default: {
            unRead: false,
            noNotice: false,
            img: "",
            title: "淘宝通知",
            content: "您关注的商品降价啦，快来抢购吧！",
            time: "2026-02-20 20:55:12"
        }
    }
})

const data = reactive({
    statusBarHeight: 0,
})

onMounted(() => {
    // 同步获取系统信息
    const systemInfo = uni.getSystemInfoSync();
    data.statusBarHeight = systemInfo.statusBarHeight || 0;

})

</script>
<style>
@import '@/common/main.css';
</style>
<style lang="less" scoped>
.page-container {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
}

//苹果样式
.iphone-style {


    .top-box {

        .top-container {
            padding: 32rpx 24rpx 20rpx;
            background-color: #F7F7F7;
            border-bottom: 0.5px solid #B5B5B5;

            .left {
                width: 180rpx;

                image {
                    width: 40rpx;
                    height: 40rpx;
                }

                .number-box {
                    height: 36rpx;
                    font-size: 24rpx;
                    line-height: 24rpx;
                    padding: 6rpx 10rpx;
                    border-radius: 18rpx;
                    color: #fff;
                    background-color: #0276FF;
                    margin-left: 4rpx;
                }
            }

            .center {
                .img {
                    width: 96rpx;
                    height: 96rpx;
                }
            }

            .right {
                width: 180rpx;

            }

            .text-box {
                .title {
                    font-size: 20rpx;
                    color: #1A1A1A;
                    left: 20rpx;
                    margin-right: 6rpx;
                }
            }
        }


    }

    .right-container {
        padding: 10rpx 28rpx;

        .add-img {
            width: 66rpx;
            height: 66rpx;
            margin-right: 24rpx;
        }

        .search-box {
            height: 70rpx;
            border-radius: 35rpx 35rpx 35rpx 35rpx;
            border: 2rpx solid #DFDFDF;
            padding: 0 26rpx;

            .input {
                ::v-deep .input-placeholder {
                    color: #C3C3C3;
                    font-size: 32rpx;
                    line-height: 32rpx;
                }
            }

            .right-icon {
                width: 32rpx;
                height: 32rpx;
                margin-left: 20rpx;
            }
        }

    }
}

//小米样式
.mi-style {

    .top-box {

        .top-container {
            padding: 32rpx 24rpx 20rpx;
            background-color: #F7F7F7;
            border-bottom: 0.5px solid #B5B5B5;

            .left {
                width: 180rpx;

                image {
                    width: 40rpx;
                    height: 40rpx;
                }

                .number-box {
                    height: 36rpx;
                    font-size: 24rpx;
                    line-height: 24rpx;
                    padding: 6rpx 10rpx;
                    border-radius: 18rpx;
                    color: #fff;
                    background-color: #0276FF;
                    margin-left: 4rpx;
                }
            }

            .center {
                .img {
                    width: 96rpx;
                    height: 96rpx;
                }
            }

            .right {
                width: 180rpx;

            }

            .text-box {
                .title {
                    font-size: 20rpx;
                    color: #1A1A1A;
                    left: 20rpx;
                    margin-right: 6rpx;
                }
            }
        }


    }

    .bottom-box {
        .right-container {
            padding: 10rpx 28rpx;

            .add-img {
                width: 66rpx;
                height: 66rpx;
                margin-right: 24rpx;
            }

            .search-box {
                height: 70rpx;
                border-radius: 35rpx 35rpx 35rpx 35rpx;
                border: 2rpx solid #DFDFDF;
                padding: 0 26rpx;

                .input {
                    ::v-deep .input-placeholder {
                        color: #C3C3C3;
                        font-size: 32rpx;
                        line-height: 32rpx;
                    }
                }

                .right-icon {
                    width: 32rpx;
                    height: 32rpx;
                    margin-left: 20rpx;
                }
            }

            .right-icon {
                width: 72rpx;
                height: 72rpx;
            }
        }
    }

}
</style>