添加tabbar及分类

This commit is contained in:
2026-03-23 12:00:28 +08:00
parent b9a48478b9
commit 9efd2bc3a3
332 changed files with 1438 additions and 467 deletions

View File

@@ -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>