|
|
@ -1,16 +1,22 @@ |
|
|
<template> |
|
|
<template> |
|
|
<view class="messages-page"> |
|
|
<view class="messages-page"> |
|
|
<view class="top-safe" :style="{ height: menuButtonInfo.top + 'px' }"></view> |
|
|
<view class="messages-fixed"> |
|
|
<view class="float-bar"> |
|
|
<view class="top-safe" :style="{ height: menuButtonInfo.top + 'px' }"></view> |
|
|
<view class="home-back" @tap="backHome"> |
|
|
<view class="float-bar"> |
|
|
<text class="home-back-icon">‹</text> |
|
|
<view class="home-back" @tap="backHome"> |
|
|
<text>返回首页</text> |
|
|
<text class="home-back-icon">‹</text> |
|
|
|
|
|
<text>返回首页</text> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="head"> |
|
|
|
|
|
<view class="title">消息</view> |
|
|
|
|
|
<view class="sub-row"> |
|
|
|
|
|
<view class="sub">聊天列表,未完成的陪伴。</view> |
|
|
|
|
|
<view class="top-btn" @tap="scrollToTop">顶部</view> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="head"> |
|
|
<view class="messages-fixed-holder"></view> |
|
|
<view class="title">消息</view> |
|
|
|
|
|
<view class="sub">聊天列表,未完成的陪伴。</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="room-card" v-for="item in requests" :key="item.id" @tap="openRecord(item)" @longpress="confirmDelete(item)"> |
|
|
<view class="room-card" v-for="item in requests" :key="item.id" @tap="openRecord(item)" @longpress="confirmDelete(item)"> |
|
|
<view class="avatar-wrap"> |
|
|
<view class="avatar-wrap"> |
|
|
<image class="avatar-img" v-if="item.avatarUrl" :src="item.avatarUrl" mode="aspectFill"></image> |
|
|
<image class="avatar-img" v-if="item.avatarUrl" :src="item.avatarUrl" mode="aspectFill"></image> |
|
|
@ -167,6 +173,12 @@ |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
backHome() { uni.switchTab({ url: '/pages/index/index' }) }, |
|
|
backHome() { uni.switchTab({ url: '/pages/index/index' }) }, |
|
|
|
|
|
scrollToTop() { |
|
|
|
|
|
uni.pageScrollTo({ |
|
|
|
|
|
scrollTop: 0, |
|
|
|
|
|
duration: 260 |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
confirmDelete(item) { |
|
|
confirmDelete(item) { |
|
|
if (!item || !item.id) return |
|
|
if (!item || !item.id) return |
|
|
this.deleteTarget = item |
|
|
this.deleteTarget = item |
|
|
@ -217,13 +229,18 @@ |
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
page { background: #f7f9ff; } |
|
|
page { background: #f7f9ff; } |
|
|
.messages-page { min-height: 100vh; padding: 0 30rpx 230rpx; box-sizing: border-box; color: #151a2d; background: radial-gradient(circle at 18% 8%, rgba(169,255,231,.42), transparent 280rpx), linear-gradient(180deg, #fbfdff, #eef4ff); } |
|
|
.messages-page { min-height: 100vh; padding: 0 30rpx 230rpx; box-sizing: border-box; color: #151a2d; background: radial-gradient(circle at 18% 8%, rgba(169,255,231,.42), transparent 280rpx), linear-gradient(180deg, #fbfdff, #eef4ff); } |
|
|
|
|
|
.messages-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 0 30rpx 24rpx; box-sizing: border-box; background: radial-gradient(circle at 18% 8%, rgba(169,255,231,.42), transparent 280rpx), linear-gradient(180deg, #fbfdff 0%, #f7fbff 100%); } |
|
|
|
|
|
.messages-fixed-holder { height: 310rpx; } |
|
|
.float-bar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; } |
|
|
.float-bar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; } |
|
|
.home-back { display: flex; align-items: center; height: 58rpx; padding: 0 22rpx 0 12rpx; border: 1rpx solid rgba(255,255,255,.88); border-radius: 999rpx; color: rgba(22,27,46,.66); background: rgba(255,255,255,.66); backdrop-filter: blur(20rpx); box-shadow: 0 14rpx 36rpx rgba(96,112,160,.12), inset 0 1rpx 0 rgba(255,255,255,.95); font-size: 23rpx; font-weight: 800; } |
|
|
.home-back { display: flex; align-items: center; height: 58rpx; padding: 0 22rpx 0 12rpx; border: 1rpx solid rgba(255,255,255,.88); border-radius: 999rpx; color: rgba(22,27,46,.66); background: rgba(255,255,255,.66); backdrop-filter: blur(20rpx); box-shadow: 0 14rpx 36rpx rgba(96,112,160,.12), inset 0 1rpx 0 rgba(255,255,255,.95); font-size: 23rpx; font-weight: 800; } |
|
|
.home-back:active { transform: scale(.95); background: rgba(169,255,231,.7); } |
|
|
.home-back:active { transform: scale(.95); background: rgba(169,255,231,.7); } |
|
|
.home-back-icon { margin-right: 6rpx;padding-bottom: 6rpx; font-size: 40rpx; line-height: 50rpx; font-weight: 400; } |
|
|
.home-back-icon { margin-right: 6rpx;padding-bottom: 6rpx; font-size: 40rpx; line-height: 50rpx; font-weight: 400; } |
|
|
.head { padding-top: 10rpx; } |
|
|
.head { padding-top: 10rpx; } |
|
|
.title { font-size: 52rpx; font-weight: 800; } |
|
|
.title { font-size: 52rpx; font-weight: 800; } |
|
|
.sub { margin-top: 12rpx; color: rgba(21,26,45,.5); font-size: 25rpx; } |
|
|
.sub-row { margin-top: 12rpx; display: flex; align-items: center; justify-content: space-between; } |
|
|
|
|
|
.sub { color: rgba(21,26,45,.5); font-size: 25rpx; } |
|
|
|
|
|
.top-btn { flex-shrink: 0; margin-left: 18rpx; height: 50rpx; padding: 0 22rpx; border-radius: 999rpx; line-height: 50rpx; color: #11162a; background: #a9ffe7; box-shadow: 0 12rpx 26rpx rgba(96,112,160,.12); font-size: 23rpx; font-weight: 800; } |
|
|
|
|
|
.top-btn:active { transform: scale(.95); opacity: .82; } |
|
|
.room-card { display: flex; align-items: center; margin-top: 26rpx; padding: 28rpx; border-radius: 36rpx; background: rgba(255,255,255,.64); border: 1rpx solid rgba(255,255,255,.86); box-shadow: 0 22rpx 60rpx rgba(96,112,160,.12); } |
|
|
.room-card { display: flex; align-items: center; margin-top: 26rpx; padding: 28rpx; border-radius: 36rpx; background: rgba(255,255,255,.64); border: 1rpx solid rgba(255,255,255,.86); box-shadow: 0 22rpx 60rpx rgba(96,112,160,.12); } |
|
|
.room-card.active { background: rgba(17,22,42,.92); color: #fff; } |
|
|
.room-card.active { background: rgba(17,22,42,.92); color: #fff; } |
|
|
.avatar-wrap { position: relative; flex-shrink: 0; width: 78rpx; height: 78rpx; margin-right: 20rpx; } |
|
|
.avatar-wrap { position: relative; flex-shrink: 0; width: 78rpx; height: 78rpx; margin-right: 20rpx; } |
|
|
|