688 lines
16 KiB
Vue
688 lines
16 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 avatar shrink-0" :class="item.imgShape"
|
||
:src="item.img || `/static/image/phone-message/${phone}/default.png`" mode="aspectFill">
|
||
</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.chatList?.[item.chatList?.length -
|
||
1]?.time || item.time)
|
||
}}</text>
|
||
</view>
|
||
<view class="content"
|
||
v-html="item.chatList?.[item.chatList?.length - 1]?.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 class="btn flex-center flex-align-center edit" style="color: #fff;"
|
||
@click="editItem(item)">
|
||
<image :src="`/static/image/phone-message/edit.png`">
|
||
</image>
|
||
</view>
|
||
<view class="btn flex-center flex-align-center delete" @click="deleteItem(item)">
|
||
<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';
|
||
|
||
</script>
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
reactive,
|
||
computed
|
||
} from 'vue'
|
||
import {
|
||
util,
|
||
dateUtil
|
||
} from '@/utils/common.js';
|
||
// 定义事件
|
||
const emit = defineEmits(['item-click', 'delete-item', 'edit-item'])
|
||
const props = defineProps({
|
||
// 手机品牌
|
||
phone: {
|
||
type: String,
|
||
default: 'iphone'
|
||
},
|
||
list: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
})
|
||
|
||
/**
|
||
* 时间日期格式化判断
|
||
* @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)
|
||
}
|
||
|
||
/**
|
||
* 删除列表元素
|
||
*/
|
||
const deleteItem = (item) => {
|
||
emit('delete-item', item)
|
||
}
|
||
|
||
/**
|
||
* 修改元素
|
||
* @param item
|
||
*/
|
||
const editItem = (item) => {
|
||
emit('edit-item', 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;
|
||
}
|
||
|
||
.avatar {
|
||
border-radius: 50%;
|
||
}
|
||
|
||
|
||
|
||
.edit {
|
||
background-color: #5855D6;
|
||
}
|
||
|
||
.main-box {
|
||
.title-box {
|
||
margin-bottom: 6rpx;
|
||
|
||
|
||
.title {
|
||
width: 20px;
|
||
flex: 1;
|
||
color: #1A1A1A;
|
||
font-size: 32rpx;
|
||
line-height: 32rpx;
|
||
white-space: nowrap;
|
||
font-weight: 600;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.time {
|
||
flex-shrink: 0;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 苹果样式
|
||
.iphone-style {
|
||
.circle {
|
||
border-radius: 50% !important;
|
||
}
|
||
|
||
.square {
|
||
border-radius: 16rpx !important;
|
||
}
|
||
|
||
.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-radius: 50%;
|
||
}
|
||
|
||
.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>
|