159 lines
4.4 KiB
Vue
159 lines
4.4 KiB
Vue
<template>
|
||
<view class="li-message-page">
|
||
<!-- 自定义导航栏 -->
|
||
<wd-navbar :bordered="false"
|
||
custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
|
||
safeAreaInsetTop fixed placeholder>
|
||
<template #left>
|
||
<text class="li-text-42 li-ml-25">聊天</text>
|
||
</template>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<template #title>
|
||
<view class="li-flex-center li-ml-200">
|
||
<text class="ri-brush-3-line li-text-46 li-mr-30" @click="clearMsg"></text>
|
||
<text class="ri-search-eye-line li-text-46 li-pt-2" @click="search"></text>
|
||
</view>
|
||
</template>
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<template #right>
|
||
<view class="li-flex-center li-mr-25">
|
||
<text class="ri-brush-3-line li-text-46 li-mr-30" @click="clearMsg"></text>
|
||
<text class="ri-search-eye-line li-text-46 li-pt-2" @click="search"></text>
|
||
</view>
|
||
</template>
|
||
<!-- #endif -->
|
||
</wd-navbar>
|
||
<!-- 导航栏背景 -->
|
||
<view class="nav-bg-layer"></view>
|
||
|
||
<!-- 通知栏 -->
|
||
<wd-notice-bar class="li-mt-20" :scrollable="false" color="#37A5FF"
|
||
background-color="rgba(217, 237, 255, 0.35)">
|
||
<template #prefix>
|
||
<text class="ri-volume-up-fill li-text-35 li-mr-10 li-ml-20"></text>
|
||
</template>
|
||
向左滑动可删除消息，删除后无法恢复。
|
||
<template #suffix>
|
||
<text class="ri-close-line li-text-38 li-mr-10 li-text-#B1B0B0"></text>
|
||
</template>
|
||
</wd-notice-bar>
|
||
|
||
<!-- list -->
|
||
<view v-if="messageList.length>0">
|
||
<wd-swipe-action v-for="(item,index) in messageList">
|
||
<view @click="chatDetail" class="li-bg-white li-px-30">
|
||
<view class="li-flex li-items-center li-bottom-border1 li-py-20">
|
||
<wd-badge modelValue="12" top='10' right="2" :max='99'>
|
||
<image class="li-w-100 li-h-100 li-rd-50%" src="/static/logo.png" mode=""></image>
|
||
</wd-badge>
|
||
<view class=" li-ml-30 li-w-80%">
|
||
<view class="li-flex li-justify-between li-items-center">
|
||
<text class="li-text-30 li-single-line">订单提醒</text>
|
||
<text class="li-text-26 li-text-#B1B0B0">2025/12/12</text>
|
||
</view>
|
||
<view class="li-single-line li-text-25 li-text-#B1B0B0 li-mt-10">
|
||
1.15新版出炉，足迹"随笔功能"上线，记录线，记录线，记录1.15新版出炉，足迹"随笔功能"上线，记录线，记录线，记录
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<template #right>
|
||
<view class="action">
|
||
<view class="button" style="background: #E2231A;" @click="handleAction('操作3')">删除</view>
|
||
</view>
|
||
</template>
|
||
</wd-swipe-action>
|
||
</view>
|
||
<view v-if="messageList.length==0" class="!li-mt-300">
|
||
<wd-status-tip :image="uni.$globalData?.RESOURCE_URL+'tip/message.png'" tip="暂无待处理会话" />
|
||
</view>
|
||
<!-- 顶部提示条（成功/失败消息提示） -->
|
||
<wd-toast />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
const messageList = ref([])
|
||
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
|
||
import { useToast } from '@/uni_modules/wot-design-uni'
|
||
const Toast = useToast()
|
||
|
||
onPullDownRefresh(() => {
|
||
uni.stopPullDownRefresh()
|
||
})
|
||
|
||
onReachBottom(() => {
|
||
|
||
})
|
||
|
||
const clearMsg = () => {
|
||
Toast.info('暂无消息')
|
||
}
|
||
const search = () => {
|
||
Toast.info('暂无消息')
|
||
}
|
||
|
||
const handleAction = (action : string) => {
|
||
console.log(action);
|
||
}
|
||
const chatDetail = () => {
|
||
uni.navigateTo({
|
||
url: '/pagesA/chat/index'
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.li-message-page {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
background: linear-gradient(to bottom,
|
||
rgba(217, 237, 255, 0.9) 0%,
|
||
rgba(255, 255, 255, 1) 20%,
|
||
rgba(255, 255, 255, 1) 40%,
|
||
rgba(255, 255, 255, 1) 60%,
|
||
rgba(255, 255, 255, 1) 80%,
|
||
rgba(255, 255, 255, 1) 100%);
|
||
background-attachment: fixed;
|
||
}
|
||
|
||
|
||
// 导航栏背景层
|
||
.nav-bg-layer {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: var(--window-top);
|
||
background: linear-gradient(to bottom,
|
||
rgba(217, 237, 255, 0.95),
|
||
rgba(217, 237, 255, 0.85));
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
z-index: 998;
|
||
}
|
||
|
||
::v-deep .wd-navbar {
|
||
z-index: 999;
|
||
}
|
||
|
||
.action {
|
||
height: 100%;
|
||
border-radius: 4rpx 0 0 4rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.button {
|
||
display: inline-block;
|
||
padding: 0 30rpx;
|
||
height: 100%;
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
}
|
||
</style> |