718 lines
17 KiB
Vue
718 lines
17 KiB
Vue
<template>
|
||
<view :style="`${phone}-style`">
|
||
<uni-swipe-action class="swipe-action">
|
||
<!-- 使用插槽 （请自行给定插槽内容宽度）-->
|
||
<uni-swipe-action-item class="swipe-action-item" v-for="(item, index) in list" :key="item.id">
|
||
<view class="flex flex-align-center " @click="clickItem(item)">
|
||
|
||
<view class="item flex w100">
|
||
<view class="flex flex-align-center left-box">
|
||
<view :class="{ 'opacity-0': !item.unRead }" class="dot shrink-0"><text
|
||
v-if="phone == 'huawei' || phone == 'oppo'">{{ item.unReadNumber
|
||
> 99
|
||
? '99+' : (item.unReadNumber || 1) }}</text>
|
||
</view>
|
||
<image class="img shrink-0"
|
||
:src="item.img || `/static/image/phone-message/${phone}/default.png`">
|
||
</image>
|
||
</view>
|
||
<view class="border-box m-l-24 flex-1 flex flex-align-start">
|
||
<view class="main-box flex-1">
|
||
<view class="title-box flex-between">
|
||
<text class="title">{{ item.title }}</text>
|
||
<text class="time">{{ formatDate(item.time) }}</text>
|
||
</view>
|
||
<view class="content">{{ item.content }}</view>
|
||
</view>
|
||
<view class="box-right h100 flex-column flex-align-center">
|
||
<image v-if="phone == 'iphone'" class="m-t-4"
|
||
src="/static/image/phone-message/iphone/right.png"></image>
|
||
<image v-if="item.noNotice && phone == 'iphone'" class="m-t-8"
|
||
src="/static/image/phone-message/iphone/notice.png"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template v-slot:right>
|
||
<view class="flex flex-align-center" style="margin-left: 1px;">
|
||
<view v-if="phone == 'iphone'" class="btn flex-center flex-align-center edit">
|
||
<image src="/static/image/phone-message/iphone/mute.png"></image>
|
||
</view>
|
||
<view class="btn flex-center flex-align-center delete">
|
||
<image
|
||
:src="`/static/image/phone-message/${phone == 'huawei' || phone == 'vivo' ? 'huawei' : 'iphone'}/delete.png`">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
</uni-swipe-action-item>
|
||
</uni-swipe-action>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import { stringUtil } from '@/utils/common.js';
|
||
|
||
const defaultList = [
|
||
{
|
||
id: stringUtil.uuid(),
|
||
unRead: true,
|
||
unReadNumber: 100,
|
||
noNotice: true,
|
||
img: "",
|
||
title: "系统通知",
|
||
content: "您的账户于今日 08:30 在异地登录，请确认是否为本人操作。",
|
||
time: "2026-03-11 08:31:00"
|
||
},
|
||
{
|
||
id: stringUtil.uuid(),
|
||
unRead: true,
|
||
noNotice: true,
|
||
img: "",
|
||
title: "12306",
|
||
content: "市燃管办温馨提示：依法安全文明燃放烟花爆竹，共护平安幸福家园呵呵哈哈哈还好共护平安幸福家园呵呵哈哈哈还好",
|
||
time: "2026-03-10 14:30:00"
|
||
},
|
||
{
|
||
id: stringUtil.uuid(),
|
||
unRead: false,
|
||
noNotice: false,
|
||
img: "",
|
||
title: "支付宝支付",
|
||
content: "支付成功，您在XX超市消费了 45.00 元。",
|
||
time: "2026-03-10 18:20:15"
|
||
},
|
||
{
|
||
id: stringUtil.uuid(),
|
||
unRead: false,
|
||
noNotice: false,
|
||
img: "",
|
||
title: "花呗提醒",
|
||
content: "本月账单已出，请在 9 号前还款，避免逾期记录。",
|
||
time: "2026-03-09 09:00:00"
|
||
},
|
||
{
|
||
id: stringUtil.uuid(),
|
||
unRead: true,
|
||
noNotice: false,
|
||
img: "",
|
||
title: "顺丰速运",
|
||
content: "您的快递已到达XX驿站，凭取件码 8899 取件。",
|
||
time: "2026-03-01 10:15:22"
|
||
},
|
||
{
|
||
id: stringUtil.uuid(),
|
||
unRead: false,
|
||
noNotice: true,
|
||
img: "",
|
||
title: "蚂蚁森林",
|
||
content: "您的好友偷走了你 5g 绿色能量，快去看看吧！",
|
||
time: "2026-02-28 07:45:10"
|
||
},
|
||
{
|
||
id: stringUtil.uuid(),
|
||
unRead: false,
|
||
noNotice: false,
|
||
img: "",
|
||
title: "余额宝",
|
||
content: "昨日收益已到账，恭喜您获得收益 0.58 元。",
|
||
time: "2026-02-27 06:30:00"
|
||
},
|
||
{
|
||
id: stringUtil.uuid(),
|
||
unRead: false,
|
||
noNotice: false,
|
||
img: "",
|
||
title: "10086",
|
||
content: "【流量使用提示】您本月的套餐流量已使用达 80%，请注意余额。",
|
||
time: "2026-02-26 15:10:45"
|
||
},
|
||
{
|
||
id: stringUtil.uuid(),
|
||
unRead: true,
|
||
noNotice: false,
|
||
img: "",
|
||
title: "饿了么",
|
||
content: "您的外卖已送达，祝您用餐愉快，别忘了给骑手五星好评哦~",
|
||
time: "2026-02-25 12:40:33"
|
||
},
|
||
{
|
||
id: stringUtil.uuid(),
|
||
unRead: false,
|
||
noNotice: false,
|
||
img: "",
|
||
title: "淘宝通知",
|
||
content: "您关注的商品降价啦，快来抢购吧！",
|
||
time: "2026-02-20 20:55:12"
|
||
}
|
||
]
|
||
</script>
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
reactive,
|
||
computed
|
||
} from 'vue'
|
||
import {
|
||
util,
|
||
dateUtil
|
||
} from '@/utils/common.js';
|
||
// 定义事件
|
||
const emit = defineEmits(['item-click'])
|
||
const props = defineProps({
|
||
// 手机品牌
|
||
phone: {
|
||
type: String,
|
||
default: 'iphone'
|
||
},
|
||
list: {
|
||
type: Array,
|
||
default: () => defaultList
|
||
}
|
||
})
|
||
|
||
/**
|
||
* 时间日期格式化判断
|
||
* @param date
|
||
*/
|
||
const formatDate = (date) => {
|
||
if (props.phone == 'oppo') {
|
||
return dateUtil.formatMessageTime(date, true)
|
||
} else if (props.phone == 'huawei') {
|
||
return dateUtil.formatMessageTime(date, true, 'YYYY年M月D日')
|
||
} else if (props.phone == 'vivo') {
|
||
let d = date;
|
||
if (typeof d === 'string') {
|
||
d = new Date(d.replace(/-/g, '/'));
|
||
} else if (typeof d === 'number') {
|
||
d = new Date(d);
|
||
}
|
||
const isCurrentYear = d.getFullYear() === new Date().getFullYear();
|
||
return dateUtil.formatMessageTime(date, true, isCurrentYear ? 'M月D日' : 'YYYY/M/D')
|
||
} else {
|
||
return dateUtil.formatMessageTime(date)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 点击列表元素
|
||
*/
|
||
const clickItem = (item) => {
|
||
emit('item-click', item)
|
||
}
|
||
</script>
|
||
<style>
|
||
@import '@/common/main.css';
|
||
</style>
|
||
<style lang="less" scoped>
|
||
.m-t-4 {
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.m-t-8 {
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.m-l-24 {
|
||
margin-left: 24rpx;
|
||
}
|
||
|
||
.opacity-0 {
|
||
opacity: 0;
|
||
}
|
||
|
||
.swipe-action-item {
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
// 苹果样式
|
||
.iphone-style {
|
||
|
||
.swipe-action {
|
||
margin-top: 28rpx;
|
||
}
|
||
|
||
.swipe-action-item:first-child {
|
||
.border-box {
|
||
position: relative;
|
||
}
|
||
|
||
.border-box::before {
|
||
position: absolute;
|
||
content: '';
|
||
width: 100%;
|
||
height: 1px;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: #D8D8D8;
|
||
transform: scaleY(0.3);
|
||
}
|
||
}
|
||
|
||
.item {
|
||
padding: 0 0 0 14rpx;
|
||
height: 146rpx;
|
||
align-items: center;
|
||
|
||
.dot {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
background-color: #007BFD;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.img {
|
||
width: 84rpx;
|
||
height: 84rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
|
||
.border-box {
|
||
position: relative;
|
||
padding: 18rpx 14rpx 14rpx 0;
|
||
height: 100%;
|
||
// box-shadow: inset 0 -0.3px 0 0 #D8D8D8;
|
||
}
|
||
|
||
.border-box::after {
|
||
position: absolute;
|
||
content: '';
|
||
width: 100%;
|
||
height: 1px;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: #D8D8D8;
|
||
transform: scaleY(0.3);
|
||
}
|
||
|
||
.main-box {
|
||
.title-box {
|
||
margin-bottom: 6rpx;
|
||
|
||
.title {
|
||
color: #1A1A1A;
|
||
font-size: 32rpx;
|
||
line-height: 32rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.time {
|
||
color: #838383;
|
||
font-size: 28rpx;
|
||
line-height: 28rpx;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
font-size: 28rpx;
|
||
line-height: 38rpx;
|
||
color: #838383;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.box-right {
|
||
image {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
width: 140rpx;
|
||
height: 146rpx;
|
||
|
||
image {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
}
|
||
|
||
.delete {
|
||
background-color: #FC3E30;
|
||
}
|
||
|
||
.edit {
|
||
background-color: #5855D6;
|
||
}
|
||
}
|
||
|
||
// 小米样式
|
||
.mi-style {
|
||
.item {
|
||
padding-top: 44rpx;
|
||
height: 170rpx;
|
||
|
||
.left-box {
|
||
position: relative;
|
||
height: 40px;
|
||
align-items: flex-start;
|
||
padding-left: 54rpx;
|
||
}
|
||
|
||
.dot {
|
||
position: absolute;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
background-color: #FA3D30;
|
||
border-radius: 50%;
|
||
left: 16rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.img {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
}
|
||
|
||
.border-box {
|
||
position: relative;
|
||
padding: 4rpx 52rpx 8rpx 0;
|
||
margin-left: 22rpx;
|
||
height: 100%;
|
||
}
|
||
|
||
.main-box {
|
||
.title-box {
|
||
margin-bottom: 6rpx;
|
||
|
||
.title {
|
||
color: #1A1A1A;
|
||
font-size: 32rpx;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.time {
|
||
color: #9A9A9A;
|
||
font-size: 26rpx;
|
||
line-height: 28rpx;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
font-size: 26rpx;
|
||
line-height: 38rpx;
|
||
color: #656565;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.box-right {
|
||
image {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
width: 140rpx;
|
||
height: 146rpx;
|
||
|
||
image {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
}
|
||
|
||
.delete {
|
||
background-color: #FC3E30;
|
||
}
|
||
|
||
.edit {
|
||
background-color: #5855D6;
|
||
}
|
||
}
|
||
|
||
// oppo样式
|
||
.oppo-style {
|
||
.item {
|
||
padding-top: 28rpx;
|
||
height: 178rpx;
|
||
|
||
.left-box {
|
||
position: relative;
|
||
height: 40px;
|
||
align-items: flex-start;
|
||
padding-left: 34rpx;
|
||
}
|
||
|
||
.dot {
|
||
position: absolute;
|
||
padding: 4rpx 10rpx;
|
||
background-color: #E93A22;
|
||
color: #FFFFFF;
|
||
line-height: 20rpx;
|
||
font-size: 20rpx;
|
||
border-radius: 16rpx;
|
||
right: -8rpx;
|
||
top: -4rpx;
|
||
z-index: 1;
|
||
border: 2rpx solid #FFFFFF;
|
||
}
|
||
|
||
.img {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
}
|
||
|
||
.border-box {
|
||
position: relative;
|
||
padding: 4rpx 34rpx 28rpx 0;
|
||
margin-left: 32rpx;
|
||
height: 100%;
|
||
}
|
||
|
||
.main-box {
|
||
.title-box {
|
||
margin-bottom: 16rpx;
|
||
|
||
.title {
|
||
color: #1A1A1A;
|
||
font-size: 32rpx;
|
||
line-height: 32rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.time {
|
||
color: #656565;
|
||
font-size: 26rpx;
|
||
line-height: 28rpx;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
font-size: 28rpx;
|
||
line-height: 38rpx;
|
||
color: #737373;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.box-right {
|
||
image {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
width: 140rpx;
|
||
height: 146rpx;
|
||
|
||
image {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
}
|
||
|
||
.delete {
|
||
background-color: #FC3E30;
|
||
}
|
||
|
||
}
|
||
|
||
// 华为样式
|
||
.huawei-style {
|
||
.item {
|
||
padding: 0 32rpx;
|
||
height: 156rpx;
|
||
align-items: center;
|
||
|
||
.left-box {
|
||
position: relative;
|
||
height: 40px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.dot {
|
||
position: absolute;
|
||
padding: 6rpx 10rpx;
|
||
background-color: #E93A22;
|
||
color: #FFFFFF;
|
||
line-height: 20rpx;
|
||
font-size: 20rpx;
|
||
border-radius: 16rpx;
|
||
right: -8rpx;
|
||
top: -12rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.img {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
}
|
||
|
||
.border-box {
|
||
padding: 18rpx 0;
|
||
position: relative;
|
||
margin-left: 30rpx;
|
||
margin-top: 2rpx;
|
||
height: 100%;
|
||
box-shadow: 0 -0.3px 0 0 #CFCFCF;
|
||
}
|
||
|
||
// .border-box::after {
|
||
// position: absolute;
|
||
// content: '';
|
||
// width: 100%;
|
||
// height: 1px;
|
||
// bottom: 0;
|
||
// left: 0;
|
||
// right: 0;
|
||
// background-color: #CFCFCF;
|
||
// transform: scaleY(0.3);
|
||
// }
|
||
|
||
.main-box {
|
||
.title-box {
|
||
margin-bottom: 6rpx;
|
||
|
||
.title {
|
||
color: #1A1A1A;
|
||
font-size: 32rpx;
|
||
line-height: 32rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.time {
|
||
color: #656565;
|
||
font-size: 24rpx;
|
||
line-height: 28rpx;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
font-size: 28rpx;
|
||
line-height: 38rpx;
|
||
color: #6F6F6F;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.box-right {
|
||
image {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
width: 140rpx;
|
||
height: 156rpx;
|
||
|
||
image {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
}
|
||
}
|
||
|
||
.delete {
|
||
background-color: #F4F4F4;
|
||
}
|
||
|
||
}
|
||
|
||
// vivo样式
|
||
.vivo-style {
|
||
.item {
|
||
padding: 0 50rpx 0 24rpx;
|
||
height: 172rpx;
|
||
align-items: center;
|
||
|
||
|
||
.dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
background-color: #409DFE;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
|
||
.img {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.border-box {
|
||
padding: 28rpx 0 18rpx;
|
||
position: relative;
|
||
margin-left: 24rpx;
|
||
margin-top: 2rpx;
|
||
height: 100%;
|
||
}
|
||
|
||
.main-box {
|
||
.title-box {
|
||
margin-bottom: 18rpx;
|
||
|
||
.title {
|
||
color: #1A1A1A;
|
||
font-size: 32rpx;
|
||
line-height: 32rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.time {
|
||
color: #7C7C7C;
|
||
font-size: 26rpx;
|
||
line-height: 26rpx;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
font-size: 28rpx;
|
||
line-height: 38rpx;
|
||
color: #6F6F6F;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.box-right {
|
||
image {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
width: 140rpx;
|
||
height: 156rpx;
|
||
|
||
image {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
}
|
||
}
|
||
|
||
.delete {
|
||
background-color: #F4F4F4;
|
||
}
|
||
|
||
}
|
||
</style>
|