添加tabbar及分类
This commit is contained in:
@@ -2,11 +2,9 @@
|
||||
<template>
|
||||
<view class="messages-page">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view style="padding-top: var(--status-bar-height); background-color: #ffffff; display: flex; flex-direction: row; align-items: flex-end; border-bottom: 1rpx solid #eeeeee; box-sizing: border-box; height: calc(88rpx + var(--status-bar-height));">
|
||||
<view style="display: flex; flex-direction: row; align-items: center; padding: 0 30rpx; height: 88rpx;" @click="uni.navigateBack()">
|
||||
<text style="font-size: 44rpx; color: #333333; line-height: 1; margin-right: 6rpx;">‹</text>
|
||||
<text style="font-size: 28rpx; color: #333333;">返回</text>
|
||||
</view>
|
||||
<!-- Tab 页无返回按鈕,展示顶部安全区 + 页面标题 -->
|
||||
<view class="mp-tab-navbar">
|
||||
<text class="mp-tab-title">消息</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="header">
|
||||
@@ -14,7 +12,7 @@
|
||||
<text class="header-subtitle">与客户的聊天记录</text>
|
||||
</view>
|
||||
|
||||
<scroll-view class="messages-list" scroll-y :refresher-enabled="true" :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
|
||||
<scroll-view class="messages-list" direction="vertical" :refresher-enabled="true" :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
|
||||
<view v-if="loading && conversations.length === 0" class="loading-container">
|
||||
<text class="loading-icon">⏳</text>
|
||||
<text class="loading-text">加载中...</text>
|
||||
@@ -50,11 +48,14 @@
|
||||
|
||||
<view class="safe-bottom"></view>
|
||||
</scroll-view>
|
||||
<!-- 商家端自定义 TabBar -->
|
||||
<merchant-tab-bar :current="1"></merchant-tab-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="uts">
|
||||
import supa from '@/components/supadb/aksupainstance.uts'
|
||||
import MerchantTabBar from '@/components/merchant-tabbar/MerchantTabBar.uvue'
|
||||
|
||||
type MessageType = {
|
||||
id: string
|
||||
@@ -80,6 +81,7 @@
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { MerchantTabBar },
|
||||
data() {
|
||||
return {
|
||||
conversations: [] as ConversationType[],
|
||||
@@ -212,6 +214,9 @@
|
||||
<style>
|
||||
.messages-page { background-color: #f5f7fa; min-height: 100vh; display: flex; flex-direction: column; }
|
||||
|
||||
.mp-tab-navbar { height: calc(88rpx + var(--status-bar-height)); padding-top: var(--status-bar-height); background-color: #ffffff; display: flex; flex-direction: row; align-items: center; justify-content: center; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: #f0f0f0; }
|
||||
.mp-tab-title { font-size: 34rpx; font-weight: bold; color: #333333; }
|
||||
|
||||
.header { background-color: #fff; padding-top: 60rpx; padding-bottom: 24rpx; padding-left: 30rpx; padding-right: 30rpx; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: #eee; }
|
||||
.header-title { font-size: 44rpx; font-weight: bold; color: #333; display: block; margin-bottom: 8rpx; }
|
||||
.header-subtitle { font-size: 26rpx; color: #999; }
|
||||
@@ -242,5 +247,5 @@
|
||||
.unread-num { font-size: 22rpx; color: #fff; font-weight: bold; }
|
||||
.conv-arrow { font-size: 40rpx; color: #ccc; margin-left: 10rpx; }
|
||||
|
||||
.safe-bottom { height: 30rpx; }
|
||||
.safe-bottom { height: 160rpx; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user