715 lines
19 KiB
Vue
715 lines
19 KiB
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="h100 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 v-if="phone == 'iphone'" class="number-box">256</view>
|
|
</view>
|
|
<view class="center">
|
|
<image v-if="phone == 'iphone' || phone == 'huawei'" class="img shrink-0"
|
|
:src="chatInfo.img || `/static/image/phone-message/${phone}/default.png`">
|
|
</image>
|
|
<text v-if="phone != 'iphone'" class="title">{{ chatInfo.title }}</text>
|
|
<text v-if="phone == 'oppo'" class="second-text">重庆</text>
|
|
</view>
|
|
<view class="right flex-align-center">
|
|
<image v-if="phone == 'mi'" class="img shrink-0"
|
|
src="/static/image/phone-message/mi/nav-right-icon.png">
|
|
</image>
|
|
<image v-if="phone == 'oppo'" class="img shrink-0"
|
|
src="/static/image/phone-message/oppo/nav-right-icon.png">
|
|
</image>
|
|
<image v-if="phone == 'huawei'" class="img shrink-0"
|
|
src="/static/image/phone-message/huawei/chat-more.png">
|
|
</image>
|
|
<image v-if="phone == 'vivo'" class="img shrink-0"
|
|
src="/static/image/phone-message/vivo/select.png">
|
|
</image>
|
|
<image v-if="phone == 'vivo'" class="img shrink-0 m-l-50"
|
|
src="/static/image/phone-message/vivo/more.png">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view v-if="phone == 'iphone'" 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="bottom-container flex-align-center">
|
|
<image v-if="phone != 'huawei' && phone != 'vivo'" class="add-img shrink-0"
|
|
:src="`/static/image/phone-message/${phone}/chat-left.png`"></image>
|
|
<image v-if="phone == 'huawei'" class="add-img shrink-0"
|
|
:src="`/static/image/phone-message/huawei/emoji.png`"></image>
|
|
<view class="search-box flex-1 flex-align-center">
|
|
<image v-if="phone == 'huawei'" class="left-icon ka"
|
|
src="/static/image/phone-message/huawei/ka1.png"></image>
|
|
<image v-if="phone == 'huawei'" class="left-icon down"
|
|
src="/static/image/phone-message/huawei/down.png"></image>
|
|
<input class="input flex-1" :placeholder="showInfo.placeholder" type="text">
|
|
<image v-if="phone == 'iphone'" class="right-icon"
|
|
src="/static/image/phone-message/iphone/mic.png"></image>
|
|
<image v-if="phone == 'oppo'" class="right-icon" src="/static/image/phone-message/oppo/ka1.png">
|
|
</image>
|
|
</view>
|
|
<view v-if="phone != 'iphone'" class="flex-align-center">
|
|
<image v-if="phone == 'mi'" class="right-icon" src="/static/image/phone-message/mi/mic.png">
|
|
</image>
|
|
<image v-if="phone == 'oppo'" class="right-icon"
|
|
src="/static/image/phone-message/oppo/send.png">
|
|
</image>
|
|
<image v-if="phone == 'huawei'" class="right-icon"
|
|
src="/static/image/phone-message/huawei/chat-add.png">
|
|
</image>
|
|
<image v-if="phone == 'huawei'" class="right-icon m-l-34"
|
|
src="/static/image/phone-message/huawei/send.png">
|
|
</image>
|
|
<text v-if="phone == 'vivo'" class="send-text">发送</text>
|
|
</view>
|
|
</view>
|
|
</slot>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, onMounted, computed } 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,
|
|
})
|
|
|
|
// 展示文字信息
|
|
const showInfo = computed(() => {
|
|
let placeholder
|
|
switch (props.phone) {
|
|
case "iphone":
|
|
placeholder = '信息 · 短信'
|
|
break;
|
|
case "mi":
|
|
placeholder = '短信'
|
|
break;
|
|
case "oppo":
|
|
placeholder = '5G 消息'
|
|
break;
|
|
case "huawei":
|
|
placeholder = '短信/彩信'
|
|
break;
|
|
case "vivo":
|
|
placeholder = '输入内容'
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
return { placeholder }
|
|
})
|
|
|
|
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;
|
|
}
|
|
|
|
.m-l-34 {
|
|
margin-left: 34rpx;
|
|
}
|
|
|
|
.m-l-50 {
|
|
margin-left: 50rpx;
|
|
}
|
|
|
|
.center-box {
|
|
overflow: hidden;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
//苹果样式
|
|
.iphone-style {
|
|
|
|
.status-placeholder {
|
|
background-color: #F7F7F7;
|
|
}
|
|
|
|
.top-box {
|
|
|
|
.top-container {
|
|
padding: 32rpx 24rpx 20rpx;
|
|
background-color: #F7F7F7;
|
|
box-shadow: inset 0 -0.3px 0 0 #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 {
|
|
height: 96rpx;
|
|
|
|
.img {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: 180rpx;
|
|
|
|
}
|
|
|
|
.text-box {
|
|
margin-top: 10rpx;
|
|
height: 20rpx;
|
|
|
|
.title {
|
|
font-size: 20rpx;
|
|
color: #1A1A1A;
|
|
left: 20rpx;
|
|
margin-right: 6rpx;
|
|
font-weight: 500;
|
|
line-height: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.bottom-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 {
|
|
background-color: #F7F7F7 !important;
|
|
|
|
.top-box {
|
|
|
|
.top-container {
|
|
padding: 0 52rpx;
|
|
background-color: #F7F7F7;
|
|
height: 88rpx;
|
|
|
|
.left {
|
|
width: 80rpx;
|
|
|
|
image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.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 {
|
|
.title {
|
|
font-size: 36rpx;
|
|
color: #1A1A1A;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: 80rpx;
|
|
text-align: right;
|
|
|
|
.img {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.text-box {
|
|
.title {
|
|
font-size: 20rpx;
|
|
color: #1A1A1A;
|
|
left: 20rpx;
|
|
margin-right: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.bottom-box {
|
|
.bottom-container {
|
|
padding: 20rpx 28rpx;
|
|
|
|
.add-img {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
}
|
|
|
|
.search-box {
|
|
height: 96rpx;
|
|
border-radius: 28rpx;
|
|
padding: 0 42rpx;
|
|
margin: 0 20rpx;
|
|
background-color: #E8E8E8;
|
|
|
|
.input {
|
|
::v-deep .input-placeholder {
|
|
color: #8B8B8B;
|
|
font-size: 30rpx;
|
|
line-height: 28rpx;
|
|
}
|
|
}
|
|
|
|
.right-icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
|
|
.right-icon {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
//oppo样式
|
|
.oppo-style {
|
|
background-color: #F0F1F3 !important;
|
|
|
|
.top-box {
|
|
|
|
.top-container {
|
|
padding: 0 52rpx;
|
|
background-color: #F0F1F3;
|
|
height: 88rpx;
|
|
box-shadow: inset 0 -0.3px 0 0 #D0D1D3;
|
|
|
|
.left {
|
|
|
|
image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.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 {
|
|
flex: 1;
|
|
height: 100%;
|
|
margin: 0 18rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
.title {
|
|
font-size: 36rpx;
|
|
color: #1A1A1A;
|
|
font-weight: 500;
|
|
line-height: 36rpx;
|
|
}
|
|
|
|
.second-text {
|
|
color: #6F6F6F;
|
|
font-size: 28rpx;
|
|
line-height: 28rpx;
|
|
margin-top: 14rpx;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
text-align: right;
|
|
|
|
.img {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.text-box {
|
|
.title {
|
|
font-size: 20rpx;
|
|
color: #1A1A1A;
|
|
left: 20rpx;
|
|
margin-right: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.bottom-box {
|
|
background-color: #FAFAFA;
|
|
|
|
.bottom-container {
|
|
padding: 16rpx 32rpx 50rpx;
|
|
|
|
.add-img {
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
}
|
|
|
|
.search-box {
|
|
height: 84rpx;
|
|
border-radius: 42rpx;
|
|
padding: 0 38rpx;
|
|
margin: 0 16rpx;
|
|
background-color: #E6E6E6;
|
|
|
|
.input {
|
|
::v-deep .input-placeholder {
|
|
color: #6C6C6E;
|
|
font-size: 32rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
}
|
|
|
|
.right-icon {
|
|
width: 32rpx;
|
|
height: 40rpx;
|
|
margin-right: 14rpx;
|
|
}
|
|
}
|
|
|
|
.right-icon {
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
//华为样式
|
|
.huawei-style {
|
|
background-color: #F1F5F8 !important;
|
|
|
|
.top-box {
|
|
|
|
.top-container {
|
|
padding: 0 32rpx;
|
|
background-color: #F1F5F8;
|
|
height: 88rpx;
|
|
|
|
.left {
|
|
|
|
image {
|
|
width: 76rpx;
|
|
height: 76rpx;
|
|
}
|
|
|
|
.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 {
|
|
flex: 1;
|
|
height: 100%;
|
|
margin: 0 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.img {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
flex-shrink: 0;
|
|
margin-right: 18rpx;
|
|
}
|
|
|
|
.title {
|
|
font-size: 40rpx;
|
|
color: #1A1A1A;
|
|
font-weight: 500;
|
|
line-height: 36rpx;
|
|
}
|
|
|
|
.second-text {
|
|
color: #6F6F6F;
|
|
font-size: 28rpx;
|
|
line-height: 28rpx;
|
|
margin-top: 14rpx;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
text-align: right;
|
|
|
|
.img {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.text-box {
|
|
.title {
|
|
font-size: 20rpx;
|
|
color: #1A1A1A;
|
|
left: 20rpx;
|
|
margin-right: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.bottom-box {
|
|
background-color: #FFFFFF;
|
|
|
|
.bottom-container {
|
|
padding: 12rpx 32rpx;
|
|
|
|
.add-img {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
|
|
.search-box {
|
|
height: 76rpx;
|
|
border-radius: 42rpx;
|
|
padding: 0 28rpx;
|
|
margin: 0 30rpx;
|
|
background-color: #F4F4F4;
|
|
|
|
.ka {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
|
|
.down {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.input {
|
|
margin-left: 34rpx;
|
|
|
|
::v-deep .input-placeholder {
|
|
color: #606060;
|
|
font-size: 30rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
}
|
|
|
|
.right-icon {
|
|
width: 32rpx;
|
|
height: 40rpx;
|
|
margin-right: 14rpx;
|
|
}
|
|
}
|
|
|
|
.right-icon {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
//vivo样式
|
|
.vivo-style {
|
|
background-color: #F6F6F6 !important;
|
|
|
|
.top-box {
|
|
|
|
.top-container {
|
|
padding: 66rpx 52rpx 20rpx 42rpx;
|
|
background-color: #F6F6F6;
|
|
|
|
.left {
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.center {
|
|
flex: 1;
|
|
height: 100%;
|
|
margin: 0 18rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
.title {
|
|
font-size: 34rpx;
|
|
color: #1A1A1A;
|
|
font-weight: 500;
|
|
line-height: 34rpx;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
text-align: right;
|
|
|
|
.img {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.text-box {
|
|
.title {
|
|
font-size: 20rpx;
|
|
color: #1A1A1A;
|
|
left: 20rpx;
|
|
margin-right: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.bottom-box {
|
|
background-color: #fff;
|
|
|
|
.bottom-container {
|
|
padding: 20rpx 48rpx;
|
|
|
|
.search-box {
|
|
height: 64rpx;
|
|
border-radius: 16rpx;
|
|
padding: 0 18rpx;
|
|
margin-right: 42rpx;
|
|
background-color: #F2F2F2;
|
|
|
|
.input {
|
|
::v-deep .input-placeholder {
|
|
color: #C8C8C8;
|
|
font-size: 30rpx;
|
|
line-height: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.send-text {
|
|
|
|
color: #9CC9FF;
|
|
font-size: 34rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |