tangxinyue
/
alipay-emulator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成oppo，vivo聊天界面ui

This commit is contained in:
tangxinyue 2026-03-13 10:52:42 +08:00
parent 0959867786
commit a88ddf46bc
3 changed files with 161 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/message/chat/chat-layout.vue
View File

@ -163,6 +163,7 @@ onMounted(() => {
.center-box {
overflow: hidden;
overflow-y: scroll;
padding-bottom: 12px;
}
//苹果样式

10
pages/index/index.nvue
View File

@ -255,11 +255,11 @@ const otherList = [{
name: "身份证",
path: "/pages/other/card/card"
},
// {
// icon: "/static/image/index/qita/card.png",
// name: "短信",
// path: "/pages/common/call-and-message-entry/call-and-message-entry?type=message"
// },
{
icon: "/static/image/index/qita/card.png",
name: "短信",
path: "/pages/common/call-and-message-entry/call-and-message-entry?type=message"
},
]
const data = reactive({

159
pages/message/chat-page/chat-page.vue
View File

@ -28,7 +28,14 @@
<view class="top-text" v-if="data.phone == 'iphone' && index == 0">信息 · 短信</view>
<view class="top-text" v-if="data.phone == 'huawei' && index == 0">短信/彩信</view>
<text v-if="data.phone == 'huawei'">{{ formatHuaweiTopTime(message.time) }}</text>
<text v-else>{{ formatChatTime(message.time) }}</text>
<text v-else>{{ formatChatTime(message.time) }} <text
v-if="data.phone == 'oppo' || (data.phone == 'vivo' && message.isMe)"> 中国联通
</text></text>
<image style="width: 20rpx;height: 24rpx;margin-left: 8rpx; "
v-if="data.phone == 'oppo' || (data.phone == 'vivo' && message.isMe)"
src="/static/image/phone-message/huawei/chat-ka2.png">
</image>
</view>
<view class="chat-box" :id="'msg-' + index" :class="{
'tail-right': shouldApplyTailRight(index),
@ -44,6 +51,9 @@
<text>{{ formatHuaweiBottomTime(message.time) }}</text>
<image src="/static/image/phone-message/huawei/chat-ka2.png"></image>
</view>
<view v-if="(data.phone == 'oppo' || data.phone == 'vivo') && message.isMe" class="second-info">
<text v-if="message.isMe" class="delivered">已送达</text>
</view>
</view>
</ChatLayout>
@ -69,12 +79,14 @@ const messageList = [
{
time: "2026-01-01 00:24",
content: "<p>【京东快递】快递尾号29398已放在博朗郡二期惠美家便利店，快递员电话15320547739，查看签收照片或反馈异常3.cn/2Beu-fXr</p>",
isMe: false
isMe: false,
simKa: 1
},
{
time: "2026-01-01 00:24",
content: "<p>啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>",
isMe: false
isMe: false,
simKa: 2
},
{
time: "2026-01-01 00:24",
@ -110,6 +122,10 @@ const messageList = [
time: "2026-03-12 00:24",
content: "<p>dhhahahhahs.cn</p>",
isMe: true
}, {
time: "2026-03-13 00:24",
content: "<p>dhhahahhahs.cn</p>",
isMe: false
},
]
@ -222,7 +238,7 @@ const formatChatTime = (timeStr) => {
const timeNum = `${hours}:${minutes}`;
if (diffDays === 0) {
if (data.phone == 'iphone') return `今天 ${timeNum}`;
if (data.phone == 'iphone' || data.phone == 'oppo') return `今天 ${timeNum}`;
return `${timeNum}`;
} else if (diffDays === 1) {
return `昨天 ${timeNum}`;
@ -589,6 +605,74 @@ onLoad((options) => {
}
}
// oppo样式
.oppo-style {
.m-t-16 {
margin-top: 24rpx !important;
}
.time {
color: #727377;
font-size: 24rpx;
line-height: 24rpx;
text-align: center;
margin-bottom: 20rpx;
margin-top: 48rpx;
display: flex;
justify-content: center;
align-items: center;
}
.message-item {
margin-top: 12rpx;
}
.chat-box {
display: flex;
justify-content: flex-start;
width: 100%;
.chat-bubble {
padding: 28rpx 48rpx;
background-color: #FFFFFF;
border-radius: 32rpx;
max-width: 600rpx;
font-size: 32rpx;
line-height: 44rpx;
color: #1A1A1A;
margin: 0 32rpx;
word-break: break-all;
}
}
.isMe {
.chat-box {
justify-content: flex-end;
}
.chat-bubble {
background-color: #00A1FF;
color: #fff;
}
}
.second-info {
font-size: 24rpx;
text-align: right;
padding: 0 34rpx;
margin-top: 14rpx;
padding-bottom: 6rpx;
.delivered {
font-size: 24rpx;
line-height: 24rpx;
color: #727377;
}
}
}
// 华为样式
.huawei-style {
.top-text {
@ -679,4 +763,71 @@ onLoad((options) => {
}
}
// vivo样式
.vivo-style {
.m-t-16 {
margin-top: 24rpx !important;
}
.time {
color: #ACACAC;
font-size: 24rpx;
line-height: 24rpx;
text-align: center;
margin: 40rpx 0;
display: flex;
justify-content: center;
align-items: center;
}
.message-item {
margin-top: 12rpx;
}
.chat-box {
display: flex;
justify-content: flex-start;
width: 100%;
.chat-bubble {
padding: 38rpx 38rpx 32rpx 40rpx;
background-color: #FFFFFF;
border-radius: 32rpx;
max-width: 100%;
font-size: 36rpx;
line-height: 48rpx;
color: #1A1A1A;
margin: 0 32rpx;
word-break: break-all;
}
}
.isMe {
.chat-box {
justify-content: flex-end;
}
.chat-bubble {
background-color: #0078FE;
color: #fff;
}
}
.second-info {
font-size: 24rpx;
text-align: right;
padding: 0 34rpx;
margin-top: 12rpx;
padding-bottom: 6rpx;
.delivered {
font-size: 24rpx;
line-height: 24rpx;
color: #ACACAC;
}
}
}
</style>