初始化上传医疗项目到 medical-mall
This commit is contained in:
@@ -1,58 +1,87 @@
|
||||
<!-- 商家端首页 -->
|
||||
<!-- 医养综合服务商城 · 机构工作台首页 -->
|
||||
<template>
|
||||
<view class="merchant-container">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- Tab 页无返回按鈕，展示顶部安全区 + 页面标题 -->
|
||||
<!-- Tab 页无返回按钮，展示顶部安全区 + 蓝色顶栏 -->
|
||||
<view class="mp-tab-navbar">
|
||||
<text class="mp-tab-title">商家工作台</text>
|
||||
<text class="mp-tab-title">机构工作台</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<scroll-view direction="vertical" class="main-scroll" :refresher-enabled="true" :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
|
||||
<!-- 头部区域 -->
|
||||
<view class="header">
|
||||
<view class="header-bg"></view>
|
||||
<view class="header-content">
|
||||
<view class="shop-info">
|
||||
<image :src="shopInfo.shop_logo || '/static/logo.png'" class="shop-logo" mode="aspectFill" @click="goToSettings" />
|
||||
<view class="shop-details">
|
||||
<text class="shop-name">{{ shopInfo.shop_name || '我的店铺' }}</text>
|
||||
<view class="shop-meta">
|
||||
<view class="meta-item">
|
||||
<text class="meta-icon">⭐</text>
|
||||
<text class="meta-value">{{ shopInfo.rating_avg || 5.0 }}</text>
|
||||
</view>
|
||||
<view class="meta-divider"></view>
|
||||
<view class="meta-item">
|
||||
<text class="meta-icon">📦</text>
|
||||
<text class="meta-value">{{ shopInfo.total_sales || 0 }}销量</text>
|
||||
</view>
|
||||
|
||||
<!-- ===== 顶部工作台头部（浅蓝渐变，老年友好） ===== -->
|
||||
<view class="wt-header">
|
||||
<view class="wt-header-top">
|
||||
<!-- 机构信息行 -->
|
||||
<view class="wt-shop-row">
|
||||
<image :src="shopInfo.shop_logo || '/static/logo.png'" class="wt-shop-logo" mode="aspectFill" @click="goToSettings" />
|
||||
<view class="wt-shop-info">
|
||||
<text class="wt-shop-name">{{ shopInfo.shop_name || '我的机构' }}</text>
|
||||
<view class="wt-shop-meta">
|
||||
<text class="wt-meta-txt">⭐ {{ shopInfo.rating_avg || 5.0 }}</text>
|
||||
<text class="wt-meta-sep">|</text>
|
||||
<text class="wt-meta-txt">已服务 {{ shopInfo.total_sales || 0 }} 次</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="header-actions">
|
||||
<view class="action-btn" @click="goToMessages">
|
||||
<text class="action-icon">🔔</text>
|
||||
<view v-if="unreadCount > 0" class="action-badge"><text>{{ unreadCount > 99 ? '99+' : unreadCount }}</text></view>
|
||||
<!-- 头部右侧功能按钮 -->
|
||||
<view class="wt-header-btns">
|
||||
<view class="wt-icon-btn" @click="goToMessages">
|
||||
<text class="wt-icon-txt">🔔</text>
|
||||
<text class="wt-icon-label">通知</text>
|
||||
<view v-if="unreadCount > 0" class="wt-badge">
|
||||
<text class="wt-badge-txt">{{ unreadCount > 99 ? '99+' : unreadCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action-btn" @click="goToSettings">
|
||||
<text class="action-icon">⚙️</text>
|
||||
<view class="wt-icon-btn" @click="goToSettings">
|
||||
<text class="wt-icon-txt">⚙️</text>
|
||||
<text class="wt-icon-label">设置</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 今日数据双行面板（白色底，嵌在头部底部） -->
|
||||
<view class="wt-data-panel">
|
||||
<!-- 第一行：服务订单状态快捷入口 -->
|
||||
<view class="wt-panel-row">
|
||||
<view
|
||||
v-for="item in orderStatusList"
|
||||
:key="item.key"
|
||||
class="wt-panel-item"
|
||||
@click="goToOrders(item.key)"
|
||||
>
|
||||
<view class="wt-panel-num-wrap">
|
||||
<text class="wt-panel-num">{{ item.count }}</text>
|
||||
<view v-if="item.count > 0" class="wt-panel-dot"></view>
|
||||
</view>
|
||||
<text class="wt-panel-lbl">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wt-panel-sep"></view>
|
||||
<!-- 第二行：核心经营指标 -->
|
||||
<view class="wt-panel-row">
|
||||
<view class="wt-panel-item">
|
||||
<text class="wt-panel-biz-val">¥{{ formatNumber(bizStats.saleAmount) }}</text>
|
||||
<text class="wt-panel-biz-lbl">今日结算</text>
|
||||
</view>
|
||||
<view class="wt-panel-item">
|
||||
<text class="wt-panel-biz-val">{{ bizStats.orderCount || 0 }}</text>
|
||||
<text class="wt-panel-biz-lbl">今日服务单</text>
|
||||
</view>
|
||||
<view class="wt-panel-item">
|
||||
<text class="wt-panel-biz-val">{{ bizStats.visitorCount || 0 }}</text>
|
||||
<text class="wt-panel-biz-lbl">咨询人数</text>
|
||||
</view>
|
||||
<view class="wt-panel-item">
|
||||
<text class="wt-panel-biz-val">{{ bizStats.reviewCount || 0 }}</text>
|
||||
<text class="wt-panel-biz-lbl">待评价</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 骨架屏：数据首次加载中 -->
|
||||
<view v-if="!isPageReady" class="ske-body">
|
||||
<view class="ske-card-wrap">
|
||||
<view class="ske-row ske-mb16"><view class="ske-bar ske-w30 ske-h28"></view></view>
|
||||
<view class="ske-grid-row">
|
||||
<view v-for="n in 4" :key="n" class="ske-cell25">
|
||||
<view class="ske-icon-sq"></view>
|
||||
<view class="ske-bar ske-w40 ske-mt8 ske-h32"></view>
|
||||
<view class="ske-bar ske-w60 ske-mt6 ske-h20"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ske-card-wrap">
|
||||
<view class="ske-row ske-mb16"><view class="ske-bar ske-w30 ske-h28"></view></view>
|
||||
<view class="ske-grid-row">
|
||||
@@ -72,207 +101,178 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ===== 主体内容区域 ===== -->
|
||||
<view v-if="isPageReady" class="content-area">
|
||||
<!-- 今日数据卡片 -->
|
||||
<view class="stats-card">
|
||||
<view class="stats-header">
|
||||
<view class="stats-title-row">
|
||||
<text class="stats-title">📊 今日数据</text>
|
||||
<text class="stats-date">{{ currentDate }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 常用功能宫格（无色块背景，大字大图标，老年友好） -->
|
||||
<view class="wt-card">
|
||||
<view class="wt-card-hd">
|
||||
<text class="wt-card-title">常用功能</text>
|
||||
</view>
|
||||
<view class="stats-grid">
|
||||
<view class="stats-item">
|
||||
<view class="stats-icon-wrap blue">
|
||||
<text class="stats-icon">📋</text>
|
||||
</view>
|
||||
<text class="stats-value">{{ todayStats.orders || 0 }}</text>
|
||||
<text class="stats-label">订单数</text>
|
||||
<view class="feature-grid">
|
||||
<view class="feature-item" @click="goToProducts('add')">
|
||||
<view class="feat-icon-wrap"><text class="feat-icon-txt">➕</text></view>
|
||||
<text class="feat-label">发布服务</text>
|
||||
</view>
|
||||
<view class="stats-item">
|
||||
<view class="stats-icon-wrap green">
|
||||
<text class="stats-icon">💰</text>
|
||||
</view>
|
||||
<text class="stats-value">¥{{ formatNumber(todayStats.sales) }}</text>
|
||||
<text class="stats-label">销售额</text>
|
||||
<view class="feature-item" @click="goToOrders('all')">
|
||||
<view class="feat-icon-wrap"><text class="feat-icon-txt">📋</text></view>
|
||||
<text class="feat-label">服务订单</text>
|
||||
</view>
|
||||
<view class="stats-item">
|
||||
<view class="stats-icon-wrap orange">
|
||||
<text class="stats-icon">👥</text>
|
||||
</view>
|
||||
<text class="stats-value">{{ todayStats.visitors || 0 }}</text>
|
||||
<text class="stats-label">访客数</text>
|
||||
<view class="feature-item" @click="goToProducts('manage')">
|
||||
<view class="feat-icon-wrap"><text class="feat-icon-txt">🏥</text></view>
|
||||
<text class="feat-label">服务管理</text>
|
||||
</view>
|
||||
<view class="stats-item">
|
||||
<view class="stats-icon-wrap purple">
|
||||
<text class="stats-icon">📈</text>
|
||||
</view>
|
||||
<text class="stats-value">{{ todayStats.conversion || 0 }}%</text>
|
||||
<text class="stats-label">转化率</text>
|
||||
<view class="feature-item" @click="goToStatistics">
|
||||
<view class="feat-icon-wrap"><text class="feat-icon-txt">📊</text></view>
|
||||
<text class="feat-label">数据统计</text>
|
||||
</view>
|
||||
<view class="feature-item" @click="goToInventory">
|
||||
<view class="feat-icon-wrap"><text class="feat-icon-txt">💊</text></view>
|
||||
<text class="feat-label">药械库存</text>
|
||||
</view>
|
||||
<view class="feature-item" @click="goToReviews">
|
||||
<view class="feat-icon-wrap"><text class="feat-icon-txt">⭐</text></view>
|
||||
<text class="feat-label">服务评价</text>
|
||||
</view>
|
||||
<view class="feature-item" @click="goToFinance">
|
||||
<view class="feat-icon-wrap"><text class="feat-icon-txt">💰</text></view>
|
||||
<text class="feat-label">结算补贴</text>
|
||||
</view>
|
||||
<view class="feature-item" @click="goToMembers">
|
||||
<view class="feat-icon-wrap"><text class="feat-icon-txt">👴</text></view>
|
||||
<text class="feat-label">服务对象</text>
|
||||
</view>
|
||||
<view class="feature-item" @click="goToPromotions">
|
||||
<view class="feat-icon-wrap"><text class="feat-icon-txt">🎁</text></view>
|
||||
<text class="feat-label">关怀活动</text>
|
||||
</view>
|
||||
<view class="feature-item" @click="goToSettings">
|
||||
<view class="feat-icon-wrap"><text class="feat-icon-txt">🏢</text></view>
|
||||
<text class="feat-label">机构资料</text>
|
||||
</view>
|
||||
<view class="feature-item" @click="goToHealthManagement">
|
||||
<view class="feat-icon-wrap"><text class="feat-icon-txt">❤️</text></view>
|
||||
<text class="feat-label">健康管理</text>
|
||||
</view>
|
||||
<view class="feature-item" @click="goToAiConsultation">
|
||||
<view class="feat-icon-wrap"><text class="feat-icon-txt">🤖</text></view>
|
||||
<text class="feat-label">AI问诊</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 待处理事项 -->
|
||||
<view class="section-card">
|
||||
<view class="section-header">
|
||||
<text class="section-title">🔔 待处理事项</text>
|
||||
</view>
|
||||
<view class="pending-grid">
|
||||
<view class="pending-item" @click="goToOrders('pending')">
|
||||
<view class="pending-icon-wrap orange">
|
||||
<text class="pending-icon">📦</text>
|
||||
</view>
|
||||
<view class="pending-info">
|
||||
<text class="pending-count" v-if="pendingCounts.pending_shipment > 0">{{ pendingCounts.pending_shipment }}</text>
|
||||
<text class="pending-text">待发货</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pending-item" @click="goToOrders('refund')">
|
||||
<view class="pending-icon-wrap red">
|
||||
<text class="pending-icon">↩️</text>
|
||||
</view>
|
||||
<view class="pending-info">
|
||||
<text class="pending-count" v-if="pendingCounts.refund_requests > 0">{{ pendingCounts.refund_requests }}</text>
|
||||
<text class="pending-text">退款</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pending-item" @click="goToInventory">
|
||||
<view class="pending-icon-wrap yellow">
|
||||
<text class="pending-icon">⚠️</text>
|
||||
</view>
|
||||
<view class="pending-info">
|
||||
<text class="pending-count" v-if="pendingCounts.low_stock > 0">{{ pendingCounts.low_stock }}</text>
|
||||
<text class="pending-text">库存预警</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pending-item" @click="goToReviews">
|
||||
<view class="pending-icon-wrap blue">
|
||||
<text class="pending-icon">💬</text>
|
||||
</view>
|
||||
<view class="pending-info">
|
||||
<text class="pending-count" v-if="pendingCounts.pending_reviews > 0">{{ pendingCounts.pending_reviews }}</text>
|
||||
<text class="pending-text">待回复</text>
|
||||
</view>
|
||||
<!-- 待办与通知卡片 -->
|
||||
<view class="wt-card">
|
||||
<view class="wt-card-hd">
|
||||
<text class="wt-card-title">待办与通知</text>
|
||||
<view class="wt-notice-badge-wrap" v-if="noticeBadgeCount > 0">
|
||||
<text class="wt-notice-badge-txt">{{ noticeBadgeCount }} 条待处理</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 常用功能 -->
|
||||
<view class="section-card">
|
||||
<view class="section-header">
|
||||
<text class="section-title">🚀 常用功能</text>
|
||||
</view>
|
||||
<view class="shortcuts-grid">
|
||||
<view class="shortcut-item" @click="goToProducts('add')">
|
||||
<view class="shortcut-icon-wrap gradient-blue">
|
||||
<text class="shortcut-icon">➕</text>
|
||||
</view>
|
||||
<text class="shortcut-text">发布商品</text>
|
||||
</view>
|
||||
<view class="shortcut-item" @click="goToOrders('all')">
|
||||
<view class="shortcut-icon-wrap gradient-orange">
|
||||
<text class="shortcut-icon">📋</text>
|
||||
</view>
|
||||
<text class="shortcut-text">订单管理</text>
|
||||
</view>
|
||||
<view class="shortcut-item" @click="goToProducts('manage')">
|
||||
<view class="shortcut-icon-wrap gradient-green">
|
||||
<text class="shortcut-icon">📦</text>
|
||||
</view>
|
||||
<text class="shortcut-text">商品管理</text>
|
||||
</view>
|
||||
<view class="shortcut-item" @click="goToInventory">
|
||||
<view class="shortcut-icon-wrap gradient-purple">
|
||||
<text class="shortcut-icon">📊</text>
|
||||
</view>
|
||||
<text class="shortcut-text">库存管理</text>
|
||||
</view>
|
||||
<view class="shortcut-item" @click="goToPromotions">
|
||||
<view class="shortcut-icon-wrap gradient-red">
|
||||
<text class="shortcut-icon">🎯</text>
|
||||
</view>
|
||||
<text class="shortcut-text">营销活动</text>
|
||||
</view>
|
||||
<view class="shortcut-item" @click="goToStatistics">
|
||||
<view class="shortcut-icon-wrap gradient-cyan">
|
||||
<text class="shortcut-icon">📈</text>
|
||||
</view>
|
||||
<text class="shortcut-text">数据统计</text>
|
||||
</view>
|
||||
<view class="shortcut-item" @click="goToFinance">
|
||||
<view class="shortcut-icon-wrap gradient-yellow">
|
||||
<text class="shortcut-icon">💰</text>
|
||||
</view>
|
||||
<text class="shortcut-text">财务结算</text>
|
||||
</view>
|
||||
<view class="shortcut-item" @click="goToMembers">
|
||||
<view class="shortcut-icon-wrap gradient-pink">
|
||||
<text class="shortcut-icon">VIP</text>
|
||||
</view>
|
||||
<text class="shortcut-text">会员管理</text>
|
||||
</view>
|
||||
<view class="shortcut-item" @click="goToSettings">
|
||||
<view class="shortcut-icon-wrap gradient-pink">
|
||||
<text class="shortcut-icon">🏪</text>
|
||||
</view>
|
||||
<text class="shortcut-text">店铺设置</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 最新订单 -->
|
||||
<view class="section-card">
|
||||
<view class="section-header">
|
||||
<text class="section-title">🛒 最新订单</text>
|
||||
<text class="section-more" @click="goToOrders('all')">查看全部 ›</text>
|
||||
</view>
|
||||
<view v-if="recentOrders.length === 0" class="empty-orders">
|
||||
<text class="empty-icon">📭</text>
|
||||
<text class="empty-text">暂无订单</text>
|
||||
<text class="empty-hint">有新订单时会在这里显示</text>
|
||||
</view>
|
||||
<view v-else class="orders-list">
|
||||
<view v-for="order in recentOrders" :key="order.id" class="order-card" @click="goToOrderDetail(order.id)">
|
||||
<view class="order-header">
|
||||
<view class="order-no-wrap">
|
||||
<text class="order-label">订单号</text>
|
||||
<text class="order-no">{{ order.order_no }}</text>
|
||||
<view class="notice-list">
|
||||
<!-- 待上门 -->
|
||||
<view class="notice-item" @click="goToOrders('pending')" v-if="pendingCounts.pending_shipment > 0">
|
||||
<view class="notice-dot dot-orange"></view>
|
||||
<view class="notice-body">
|
||||
<view class="notice-title-row">
|
||||
<text class="notice-title">待上门服务</text>
|
||||
<view class="notice-tag tag-orange"><text>{{ pendingCounts.pending_shipment }}单</text></view>
|
||||
</view>
|
||||
<text class="order-status" :class="getOrderStatusClass(order.order_status)">{{ getOrderStatusText(order.order_status) }}</text>
|
||||
<text class="notice-desc">有用户已预约，请安排服务人员上门</text>
|
||||
</view>
|
||||
<view class="order-goods">
|
||||
<view v-for="item in order.items.slice(0, 3)" :key="item.id" class="goods-item">
|
||||
<image :src="item.image_url || '/static/images/default-product.png'" class="goods-image" mode="aspectFill" />
|
||||
<view class="goods-info">
|
||||
<text class="goods-name">{{ item.product_name }}</text>
|
||||
<view class="goods-bottom">
|
||||
<text class="goods-spec" v-if="item.sku_name">{{ item.sku_name }}</text>
|
||||
<text class="goods-qty">×{{ item.quantity }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 退款售后 -->
|
||||
<view class="notice-item" @click="goToOrders('refund')" v-if="pendingCounts.refund_requests > 0">
|
||||
<view class="notice-dot dot-red"></view>
|
||||
<view class="notice-body">
|
||||
<view class="notice-title-row">
|
||||
<text class="notice-title">取消/售后申请</text>
|
||||
<view class="notice-tag tag-red"><text>{{ pendingCounts.refund_requests }}单</text></view>
|
||||
</view>
|
||||
<text class="notice-desc">用户提交了取消或售后申请，请及时处理</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 库存预警 -->
|
||||
<view class="notice-item" @click="goToInventory" v-if="pendingCounts.low_stock > 0">
|
||||
<view class="notice-dot dot-orange"></view>
|
||||
<view class="notice-body">
|
||||
<view class="notice-title-row">
|
||||
<text class="notice-title">药械库存预警</text>
|
||||
<view class="notice-tag tag-orange"><text>{{ pendingCounts.low_stock }}种</text></view>
|
||||
</view>
|
||||
<text class="notice-desc">部分药品或医疗器械库存不足，请及时补货</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 未读消息 -->
|
||||
<view class="notice-item" @click="goToMessages" v-if="unreadCount > 0">
|
||||
<view class="notice-dot dot-gray"></view>
|
||||
<view class="notice-body">
|
||||
<view class="notice-title-row">
|
||||
<text class="notice-title">咨询消息提醒</text>
|
||||
<view class="notice-tag tag-gray"><text>{{ unreadCount }}条</text></view>
|
||||
</view>
|
||||
<text class="notice-desc">有新的用户咨询或系统消息待查看</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 空状态 -->
|
||||
<view v-if="noticeBadgeCount === 0" class="notice-empty">
|
||||
<text class="notice-empty-txt">暂无待处理事项，服务正常运转中 ✅</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 最新服务订单（商品运营风格：图片+名称+指标） -->
|
||||
<view class="wt-card">
|
||||
<view class="wt-card-hd">
|
||||
<text class="wt-card-title">最新服务订单</text>
|
||||
<text class="wt-card-more" @click="goToOrders('all')">查看全部 ›</text>
|
||||
</view>
|
||||
<view v-if="recentOrders.length === 0" class="pi-empty">
|
||||
<text class="pi-empty-txt">暂无服务订单，有新订单时会在这里显示</text>
|
||||
</view>
|
||||
<view v-else class="pi-list">
|
||||
<view
|
||||
v-for="(order, idx) in recentOrders"
|
||||
:key="order.id"
|
||||
class="pi-item"
|
||||
:class="{ 'pi-item-last': idx === recentOrders.length - 1 }"
|
||||
@click="goToOrderDetail(order.id)"
|
||||
>
|
||||
<image
|
||||
:src="order.items.length > 0 ? (order.items[0].image_url || '/static/images/default-product.png') : '/static/images/default-product.png'"
|
||||
class="pi-img"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="pi-info">
|
||||
<text class="pi-name">{{ order.items.length > 0 ? order.items[0].product_name : '服务订单' }}</text>
|
||||
<view class="pi-metrics">
|
||||
<view class="pi-metric">
|
||||
<text class="pi-metric-val">{{ getOrderStatusText(order.order_status) }}</text>
|
||||
<text class="pi-metric-lbl">服务状态</text>
|
||||
</view>
|
||||
<view class="pi-metric">
|
||||
<text class="pi-metric-val">¥{{ order.total_amount.toFixed(2) }}</text>
|
||||
<text class="pi-metric-lbl">服务金额</text>
|
||||
</view>
|
||||
<view class="pi-metric">
|
||||
<text class="pi-metric-val">{{ formatTime(order.created_at) }}</text>
|
||||
<text class="pi-metric-lbl">预约时间</text>
|
||||
</view>
|
||||
<text class="goods-price">¥{{ item.price }}</text>
|
||||
</view>
|
||||
<view v-if="order.items.length > 3" class="goods-more">
|
||||
<text>还有{{ order.items.length - 3 }}件商品</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-footer">
|
||||
<text class="order-time">{{ formatTime(order.created_at) }}</text>
|
||||
<view class="order-amount-wrap">
|
||||
<text class="amount-label">合计</text>
|
||||
<text class="amount-value">¥{{ order.total_amount.toFixed(2) }}</text>
|
||||
</view>
|
||||
<view class="pi-action-btn">
|
||||
<text class="pi-action-txt">查看</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部安全区域（需要覆盖自定义 tabbar 高度） -->
|
||||
|
||||
<!-- 底部安全区域（覆盖自定义 tabbar 高度） -->
|
||||
<view class="safe-bottom"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 商家端自定义 TabBar -->
|
||||
<!-- 机构端自定义 TabBar -->
|
||||
<merchant-tab-bar :current="0"></merchant-tab-bar>
|
||||
</view>
|
||||
</template>
|
||||
@@ -331,6 +331,21 @@
|
||||
pending_reviews: number | null
|
||||
}
|
||||
|
||||
// 经营指标（头部第二行）
|
||||
type BizStatsType = {
|
||||
saleAmount: number | null
|
||||
orderCount: number | null
|
||||
visitorCount: number | null
|
||||
reviewCount: number | null
|
||||
}
|
||||
|
||||
// 订单状态条单项类型
|
||||
type OrderStatusItemType = {
|
||||
key: string
|
||||
label: string
|
||||
count: number
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { MerchantTabBar },
|
||||
data() {
|
||||
@@ -364,7 +379,16 @@
|
||||
recentOrders: [] as OrderType[],
|
||||
unreadCount: 0,
|
||||
refreshing: false,
|
||||
isPageReady: false
|
||||
isPageReady: false,
|
||||
// 经营指标（头部第二行）
|
||||
bizStats: {
|
||||
saleAmount: null,
|
||||
orderCount: null,
|
||||
visitorCount: null,
|
||||
reviewCount: 0
|
||||
} as BizStatsType,
|
||||
// 订单状态条（由 buildOrderStatusList() 填充）
|
||||
orderStatusList: [] as OrderStatusItemType[]
|
||||
}
|
||||
},
|
||||
|
||||
@@ -372,6 +396,13 @@
|
||||
currentDate(): string {
|
||||
const now = new Date()
|
||||
return `${now.getMonth() + 1}月${now.getDate()}日`
|
||||
},
|
||||
// 待办徽标总数
|
||||
noticeBadgeCount(): number {
|
||||
return (Number(this.pendingCounts.pending_shipment) || 0)
|
||||
+ (Number(this.pendingCounts.refund_requests) || 0)
|
||||
+ (Number(this.pendingCounts.low_stock) || 0)
|
||||
+ (this.unreadCount || 0)
|
||||
}
|
||||
},
|
||||
|
||||
@@ -411,8 +442,11 @@
|
||||
this.startRealtimeSubscription()
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
this.loadAllData()
|
||||
this.startRealtimeSubscription()
|
||||
// 等待 initMerchantId 完成后再检查，若仍无有效 ID 则不请求
|
||||
if (this.merchantId) {
|
||||
this.loadAllData()
|
||||
this.startRealtimeSubscription()
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
@@ -426,14 +460,27 @@
|
||||
},
|
||||
|
||||
methods: {
|
||||
/** UUID 格式校验，非 UUID 不得用于 Supabase 过滤（否则 PostgREST 400）*/
|
||||
isValidUUID(id: string): boolean {
|
||||
return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(id)
|
||||
},
|
||||
|
||||
async initMerchantId() {
|
||||
try {
|
||||
const session = supa.getSession()
|
||||
if (session != null && session.user != null) {
|
||||
this.merchantId = session.user.getString('id') || ''
|
||||
const sid = session.user.getString('id') || ''
|
||||
if (sid && this.isValidUUID(sid)) this.merchantId = sid
|
||||
}
|
||||
if (!this.merchantId) {
|
||||
this.merchantId = uni.getStorageSync('user_id') || ''
|
||||
const stored = uni.getStorageSync('user_id') || ''
|
||||
if (stored && this.isValidUUID(stored)) {
|
||||
this.merchantId = stored
|
||||
} else if (stored) {
|
||||
// 测试账号（如 "demo-merchant-001"）不是 UUID，跳过 API 请求，进入离线演示模式
|
||||
console.warn('[MerchantIndex] 非 UUID 用户 ID，跳过 Supabase 请求:', stored)
|
||||
this.isPageReady = true
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('获取商户ID失败:', e)
|
||||
@@ -477,11 +524,14 @@
|
||||
},
|
||||
|
||||
async loadAllData() {
|
||||
// merchantId 为空时直接跳过，避免发出 merchant_id=eq. 的无效请求
|
||||
if (!this.merchantId) { this.isPageReady = true; return }
|
||||
await this.loadMerchantData()
|
||||
await this.loadTodayStats()
|
||||
await this.loadPendingCounts()
|
||||
await this.loadRecentOrders()
|
||||
await this.loadUnreadCount()
|
||||
this.buildOrderStatusList()
|
||||
this.isPageReady = true
|
||||
// 保存缓存
|
||||
try {
|
||||
@@ -508,6 +558,30 @@
|
||||
return value.toFixed(2)
|
||||
},
|
||||
|
||||
/**
|
||||
* 构建订单状态条数据
|
||||
* 数据口径与服务订单页完全对齐：
|
||||
* 待接单 -> order_status=2
|
||||
* 服务中 -> order_status=3
|
||||
* 待评价 -> 暂占位，后期对接评价状态
|
||||
* 退款售后 -> order_status=0
|
||||
*/
|
||||
buildOrderStatusList() {
|
||||
this.orderStatusList = [
|
||||
{ key: 'pending', label: '待接单', count: Number(this.pendingCounts.pending_shipment) || 0 },
|
||||
{ key: 'shipped', label: '服务中', count: 0 },
|
||||
{ key: 'review', label: '待评价', count: Number(this.pendingCounts.pending_reviews) || 0 },
|
||||
{ key: 'refund', label: '退款售后', count: Number(this.pendingCounts.refund_requests) || 0 }
|
||||
] as OrderStatusItemType[]
|
||||
// 同步经营指标
|
||||
this.bizStats = {
|
||||
saleAmount: this.todayStats.sales,
|
||||
orderCount: this.todayStats.orders,
|
||||
visitorCount: this.todayStats.visitors,
|
||||
reviewCount: Number(this.pendingCounts.pending_reviews) || 0
|
||||
}
|
||||
},
|
||||
|
||||
async loadMerchantData() {
|
||||
try {
|
||||
const response = await supa
|
||||
@@ -800,11 +874,11 @@
|
||||
},
|
||||
|
||||
getOrderStatusText(status: number): string {
|
||||
if (status === 1) return '待付款'
|
||||
if (status === 2) return '待发货'
|
||||
if (status === 3) return '已发货'
|
||||
if (status === 1) return '待支付'
|
||||
if (status === 2) return '待接单'
|
||||
if (status === 3) return '服务中'
|
||||
if (status === 4) return '已完成'
|
||||
if (status === 0) return '退款中'
|
||||
if (status === 0) return '取消/售后'
|
||||
return '未知'
|
||||
},
|
||||
|
||||
@@ -866,122 +940,116 @@
|
||||
|
||||
goToOrderDetail(orderId: string) {
|
||||
uni.navigateTo({ url: `/pages/mall/merchant/order-detail?id=${orderId}` })
|
||||
},
|
||||
|
||||
goToHealthManagement() {
|
||||
uni.navigateTo({ url: '/pages/mall/merchant/health-management' })
|
||||
},
|
||||
|
||||
goToAiConsultation() {
|
||||
uni.navigateTo({ url: '/pages/mall/merchant/ai-consultation' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.merchant-container { background-color: #f5f7fa; min-height: 100vh; }
|
||||
/* ===== 容器与滚动 ===== */
|
||||
.merchant-container { background-color: #f4f5f7; min-height: 100vh; }
|
||||
.main-scroll { height: 100vh; }
|
||||
|
||||
.header { position: relative; padding-bottom: 30rpx; }
|
||||
.header-bg { position: absolute; top: 0; left: 0; right: 0; height: 300rpx; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 0 0 40rpx 40rpx; }
|
||||
.header-content { position: relative; padding: 40rpx 30rpx 0; }
|
||||
.shop-info { display: flex; flex-direction: row; align-items: center; }
|
||||
.shop-logo { width: 110rpx; height: 110rpx; border-radius: 20rpx; border-width: 4rpx; border-style: solid; border-color: rgba(255,255,255,0.8); margin-right: 24rpx; background-color: #fff; }
|
||||
.shop-details { flex: 1; }
|
||||
.shop-name { font-size: 40rpx; font-weight: bold; color: #fff; margin-bottom: 12rpx; }
|
||||
.shop-meta { display: flex; flex-direction: row; align-items: center; }
|
||||
.meta-item { display: flex; flex-direction: row; align-items: center; }
|
||||
.meta-icon { font-size: 24rpx; margin-right: 6rpx; }
|
||||
.meta-value { font-size: 26rpx; color: rgba(255,255,255,0.9); }
|
||||
.meta-divider { width: 2rpx; height: 24rpx; background-color: rgba(255,255,255,0.3); margin-left: 20rpx; margin-right: 20rpx; }
|
||||
.header-actions { display: flex; flex-direction: row; }
|
||||
.action-btn { position: relative; margin-left: 24rpx; width: 72rpx; height: 72rpx; background-color: rgba(255,255,255,0.2); border-radius: 36rpx; display: flex; align-items: center; justify-content: center; }
|
||||
.action-icon { font-size: 36rpx; }
|
||||
.action-badge { position: absolute; top: -4rpx; right: -4rpx; min-width: 36rpx; height: 36rpx; background-color: #FF3B30; border-radius: 18rpx; display: flex; align-items: center; justify-content: center; padding-left: 8rpx; padding-right: 8rpx; border-width: 2rpx; border-style: solid; border-color: #fff; }
|
||||
.action-badge-text { font-size: 20rpx; color: #fff; font-weight: bold; }
|
||||
/* ===== 小程序顶部导航（蓝色，医养品牌色） ===== */
|
||||
.mp-tab-navbar { height: calc(88rpx + var(--status-bar-height)); padding-top: var(--status-bar-height); background-color: rgb(66, 121, 240); display: flex; flex-direction: row; align-items: center; justify-content: center; }
|
||||
.mp-tab-title { font-size: 34rpx; font-weight: bold; color: #ffffff; }
|
||||
|
||||
.content-area { padding-left: 24rpx; padding-right: 24rpx; padding-bottom: 30rpx; margin-top: 10rpx; }
|
||||
/* ===== 顶部工作台头部（浅蓝渐变，贴近 mall merchant 风格） ===== */
|
||||
.wt-header { background: linear-gradient(to right, #eef2fe, #ece9fa); padding-bottom: 0; }
|
||||
.wt-header-top { padding: 32rpx 28rpx 24rpx; }
|
||||
.wt-shop-row { display: flex; flex-direction: row; align-items: center; }
|
||||
.wt-shop-logo { width: 100rpx; height: 100rpx; border-radius: 16rpx; border-width: 3rpx; border-style: solid; border-color: rgba(255,255,255,0.7); margin-right: 20rpx; background-color: #fff; flex-shrink: 0; }
|
||||
.wt-shop-info { flex: 1; }
|
||||
.wt-shop-name { font-size: 36rpx; font-weight: bold; color: #1a1f36; margin-bottom: 8rpx; }
|
||||
.wt-shop-meta { display: flex; flex-direction: row; align-items: center; }
|
||||
.wt-meta-txt { font-size: 24rpx; color: #6b7a99; }
|
||||
.wt-meta-sep { font-size: 24rpx; color: #c0c8d8; margin-left: 12rpx; margin-right: 12rpx; }
|
||||
.wt-header-btns { display: flex; flex-direction: row; }
|
||||
.wt-icon-btn { position: relative; margin-left: 20rpx; min-width: 80rpx; height: 80rpx; border-radius: 20rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-left: 16rpx; padding-right: 16rpx; }
|
||||
.wt-icon-txt { font-size: 32rpx; line-height: 1; color: #3a4a6b; }
|
||||
.wt-icon-label { font-size: 20rpx; color: #3a4a6b; margin-top: 4rpx; }
|
||||
.wt-badge { position: absolute; top: -4rpx; right: -4rpx; min-width: 32rpx; height: 32rpx; background-color: #E1251B; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; padding-left: 6rpx; padding-right: 6rpx; border-width: 2rpx; border-style: solid; border-color: #fff; }
|
||||
.wt-badge-txt { font-size: 18rpx; color: #fff; font-weight: bold; }
|
||||
|
||||
.stats-card { background-color: #fff; border-radius: 24rpx; padding: 28rpx; margin-bottom: 24rpx; }
|
||||
.stats-header { margin-bottom: 24rpx; }
|
||||
.stats-title-row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
|
||||
.stats-title { font-size: 32rpx; font-weight: bold; color: #333; }
|
||||
.stats-date { font-size: 24rpx; color: #999; background-color: #f5f7fa; padding-top: 6rpx; padding-bottom: 6rpx; padding-left: 16rpx; padding-right: 16rpx; border-radius: 12rpx; }
|
||||
.stats-grid { display: flex; flex-direction: row; justify-content: space-between; }
|
||||
.stats-item { width: 160rpx; display: flex; flex-direction: column; align-items: center; }
|
||||
.stats-icon-wrap { width: 64rpx; height: 64rpx; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; margin-bottom: 12rpx; }
|
||||
.stats-icon-wrap.blue { background-color: #E3F2FD; }
|
||||
.stats-icon-wrap.green { background-color: #E8F5E9; }
|
||||
.stats-icon-wrap.orange { background-color: #FFF3E0; }
|
||||
.stats-icon-wrap.purple { background-color: #F3E5F5; }
|
||||
.stats-icon { font-size: 28rpx; }
|
||||
.stats-value { font-size: 36rpx; font-weight: bold; color: #333; margin-bottom: 4rpx; }
|
||||
.stats-label { font-size: 24rpx; color: #999; }
|
||||
/* 头部双行数据面板（订单状态 + 经营指标） */
|
||||
.wt-data-panel { background-color: #fff; border-radius: 16rpx 16rpx 0 0; padding-top: 8rpx; padding-bottom: 8rpx; }
|
||||
.wt-panel-row { display: flex; flex-direction: row; justify-content: space-between; padding-top: 16rpx; padding-bottom: 16rpx; }
|
||||
.wt-panel-sep { height: 1rpx; background-color: #f0f0f0; margin-left: 20rpx; margin-right: 20rpx; }
|
||||
.wt-panel-item { flex: 1; display: flex; flex-direction: column; align-items: center; }
|
||||
.wt-panel-num-wrap { position: relative; margin-bottom: 6rpx; }
|
||||
.wt-panel-num { font-size: 40rpx; font-weight: bold; color: #333; line-height: 1; }
|
||||
.wt-panel-dot { position: absolute; top: 0; right: -10rpx; width: 14rpx; height: 14rpx; background-color: #E1251B; border-radius: 7rpx; }
|
||||
.wt-panel-lbl { font-size: 22rpx; color: #999; }
|
||||
.wt-panel-biz-val { font-size: 30rpx; font-weight: bold; color: #333; margin-bottom: 6rpx; }
|
||||
.wt-panel-biz-lbl { font-size: 22rpx; color: #999; }
|
||||
|
||||
.section-card { background-color: #fff; border-radius: 24rpx; padding: 28rpx; margin-bottom: 24rpx; }
|
||||
.section-header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 24rpx; }
|
||||
.section-title { font-size: 32rpx; font-weight: bold; color: #333; }
|
||||
.section-more { font-size: 26rpx; color: #007AFF; padding-top: 8rpx; padding-bottom: 8rpx; padding-left: 16rpx; padding-right: 16rpx; background-color: #E3F2FD; border-radius: 12rpx; }
|
||||
/* ===== 内容区 ===== */
|
||||
.content-area { padding: 0 0 30rpx; }
|
||||
|
||||
.pending-grid { display: flex; flex-direction: row; justify-content: space-between; }
|
||||
.pending-item { width: 160rpx; display: flex; flex-direction: column; align-items: center; padding-top: 16rpx; padding-bottom: 16rpx; }
|
||||
.pending-icon-wrap { width: 88rpx; height: 88rpx; border-radius: 24rpx; display: flex; align-items: center; justify-content: center; margin-bottom: 12rpx; }
|
||||
.pending-icon-wrap.orange { background-color: #FFF3E0; }
|
||||
.pending-icon-wrap.red { background-color: #FFEBEE; }
|
||||
.pending-icon-wrap.yellow { background-color: #FFFDE7; }
|
||||
.pending-icon-wrap.blue { background-color: #E3F2FD; }
|
||||
.pending-icon { font-size: 40rpx; }
|
||||
.pending-info { display: flex; flex-direction: column; align-items: center; }
|
||||
.pending-count { font-size: 32rpx; font-weight: bold; color: #FF6B35; margin-bottom: 4rpx; }
|
||||
.pending-text { font-size: 24rpx; color: #666; }
|
||||
/* ===== 通用白卡片（贴边，无圆角，mall merchant 风格） ===== */
|
||||
.wt-card { background-color: #fff; margin-bottom: 16rpx; padding: 24rpx 28rpx; }
|
||||
.wt-card-hd { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 20rpx; }
|
||||
.wt-card-title { font-size: 30rpx; font-weight: bold; color: #333; }
|
||||
.wt-card-more { font-size: 26rpx; color: rgb(66, 121, 240); }
|
||||
|
||||
.shortcuts-grid { display: flex; flex-direction: row; flex-wrap: wrap; }
|
||||
.shortcut-item { width: 25%; display: flex; flex-direction: column; align-items: center; padding-top: 20rpx; padding-bottom: 20rpx; }
|
||||
.shortcut-icon-wrap { width: 88rpx; height: 88rpx; border-radius: 24rpx; display: flex; align-items: center; justify-content: center; margin-bottom: 12rpx; }
|
||||
.shortcut-icon-wrap.gradient-blue { background-color: #667eea; }
|
||||
.shortcut-icon-wrap.gradient-orange { background-color: #f093fb; }
|
||||
.shortcut-icon-wrap.gradient-green { background-color: #4facfe; }
|
||||
.shortcut-icon-wrap.gradient-purple { background-color: #a18cd1; }
|
||||
.shortcut-icon-wrap.gradient-red { background-color: #ff9a9e; }
|
||||
.shortcut-icon-wrap.gradient-cyan { background-color: #a1c4fd; }
|
||||
.shortcut-icon-wrap.gradient-yellow { background-color: #f6d365; }
|
||||
.shortcut-icon-wrap.gradient-pink { background-color: #ffecd2; }
|
||||
.shortcut-icon { font-size: 40rpx; }
|
||||
.shortcut-text { font-size: 24rpx; color: #666; }
|
||||
/* ===== 功能宫格（无背景色，大图标，老年友好） ===== */
|
||||
.feature-grid { display: flex; flex-direction: row; flex-wrap: wrap; }
|
||||
.feature-item { width: 25%; display: flex; flex-direction: column; align-items: center; padding-top: 20rpx; padding-bottom: 20rpx; }
|
||||
.feat-icon-wrap { width: 88rpx; height: 88rpx; display: flex; align-items: center; justify-content: center; margin-bottom: 12rpx; }
|
||||
.feat-icon-txt { font-size: 52rpx; line-height: 1; }
|
||||
.feat-label { font-size: 26rpx; color: #333; text-align: center; }
|
||||
|
||||
.empty-orders { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 80rpx; padding-bottom: 80rpx; }
|
||||
.empty-icon { font-size: 100rpx; margin-bottom: 20rpx; }
|
||||
.empty-text { font-size: 30rpx; color: #666; margin-bottom: 8rpx; }
|
||||
.empty-hint { font-size: 24rpx; color: #999; }
|
||||
.orders-list { display: flex; flex-direction: column; }
|
||||
.order-card { background-color: #f9fafb; border-radius: 16rpx; padding: 24rpx; margin-bottom: 16rpx; border-width: 1rpx; border-style: solid; border-color: #eee; }
|
||||
.order-header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 20rpx; }
|
||||
.order-no-wrap { display: flex; flex-direction: row; align-items: center; }
|
||||
.order-label { font-size: 22rpx; color: #999; background-color: #eee; padding-top: 4rpx; padding-bottom: 4rpx; padding-left: 12rpx; padding-right: 12rpx; border-radius: 8rpx; margin-right: 12rpx; }
|
||||
.order-no { font-size: 26rpx; color: #333; font-weight: 500; }
|
||||
.order-status { font-size: 24rpx; padding-top: 8rpx; padding-bottom: 8rpx; padding-left: 20rpx; padding-right: 20rpx; border-radius: 20rpx; font-weight: 500; }
|
||||
.status-pending { background-color: #FFF3E0; color: #FF9800; }
|
||||
.status-paid { background-color: #E3F2FD; color: #2196F3; }
|
||||
.status-shipped { background-color: #E8F5E9; color: #4CAF50; }
|
||||
.status-completed { background-color: #F3E5F5; color: #9C27B0; }
|
||||
.status-refund { background-color: #FFEBEE; color: #F44336; }
|
||||
.order-goods { margin-bottom: 16rpx; }
|
||||
.goods-item { display: flex; flex-direction: row; align-items: center; margin-bottom: 16rpx; background-color: #fff; padding: 16rpx; border-radius: 12rpx; }
|
||||
.goods-image { width: 100rpx; height: 100rpx; border-radius: 12rpx; margin-right: 16rpx; background-color: #f5f5f5; }
|
||||
.goods-info { flex: 1; }
|
||||
.goods-name { font-size: 28rpx; color: #333; margin-bottom: 8rpx; font-weight: 500; }
|
||||
.goods-bottom { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
|
||||
.goods-spec { font-size: 22rpx; color: #999; }
|
||||
.goods-qty { font-size: 24rpx; color: #999; }
|
||||
.goods-price { font-size: 28rpx; color: #FF6B35; font-weight: bold; }
|
||||
.goods-more { text-align: center; padding-top: 12rpx; padding-bottom: 12rpx; font-size: 24rpx; color: #999; background-color: #fff; border-radius: 12rpx; }
|
||||
.order-footer { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 16rpx; border-top-width: 1rpx; border-top-style: solid; border-top-color: #eee; }
|
||||
.order-time { font-size: 24rpx; color: #999; }
|
||||
.order-amount-wrap { display: flex; flex-direction: row; align-items: center; }
|
||||
.amount-label { font-size: 24rpx; color: #999; margin-right: 8rpx; }
|
||||
.amount-value { font-size: 32rpx; font-weight: bold; color: #FF6B35; }
|
||||
/* ===== 重要通知 ===== */
|
||||
.wt-notice-badge-wrap { background-color: #FFF0F0; border-radius: 20rpx; padding-top: 4rpx; padding-bottom: 4rpx; padding-left: 14rpx; padding-right: 14rpx; }
|
||||
.wt-notice-badge-txt { font-size: 22rpx; color: #E1251B; }
|
||||
.notice-empty { padding-top: 20rpx; padding-bottom: 20rpx; display: flex; align-items: center; justify-content: center; }
|
||||
.notice-empty-txt { font-size: 28rpx; color: #bbb; }
|
||||
.notice-list { display: flex; flex-direction: column; }
|
||||
.notice-item { display: flex; flex-direction: row; align-items: flex-start; padding-top: 16rpx; padding-bottom: 16rpx; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: #f5f5f5; }
|
||||
.notice-dot { width: 14rpx; height: 14rpx; border-radius: 7rpx; margin-top: 8rpx; margin-right: 18rpx; flex-shrink: 0; }
|
||||
.dot-red { background-color: #E1251B; }
|
||||
.dot-orange { background-color: #FF7800; }
|
||||
.dot-gray { background-color: #bbb; }
|
||||
.notice-body { flex: 1; }
|
||||
.notice-title-row { display: flex; flex-direction: row; align-items: center; margin-bottom: 6rpx; }
|
||||
.notice-title { font-size: 30rpx; color: #333; font-weight: 500; flex: 1; }
|
||||
.notice-tag { font-size: 22rpx; padding-top: 3rpx; padding-bottom: 3rpx; padding-left: 10rpx; padding-right: 10rpx; border-radius: 8rpx; margin-left: 12rpx; flex-shrink: 0; }
|
||||
.tag-red { background-color: #FFF0F0; color: #E1251B; }
|
||||
.tag-orange { background-color: #FFF7E6; color: #FF7800; }
|
||||
.tag-gray { background-color: #F5F5F5; color: #999; }
|
||||
.notice-desc { font-size: 26rpx; color: #999; line-height: 1.5; }
|
||||
|
||||
.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; }
|
||||
/* ===== 最新订单（商品运营风格） ===== */
|
||||
.pi-empty { padding-top: 20rpx; padding-bottom: 20rpx; display: flex; align-items: center; justify-content: center; }
|
||||
.pi-empty-txt { font-size: 28rpx; color: #bbb; }
|
||||
.pi-list { display: flex; flex-direction: column; }
|
||||
.pi-item { display: flex; flex-direction: row; align-items: center; padding-top: 16rpx; padding-bottom: 16rpx; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: #f5f5f5; }
|
||||
.pi-item-last { border-bottom-width: 0; }
|
||||
.pi-img { width: 108rpx; height: 108rpx; border-radius: 12rpx; margin-right: 20rpx; background-color: #f5f5f5; flex-shrink: 0; }
|
||||
.pi-info { flex: 1; }
|
||||
.pi-name { font-size: 30rpx; color: #333; font-weight: 500; margin-bottom: 10rpx; overflow: hidden; }
|
||||
.pi-metrics { display: flex; flex-direction: row; }
|
||||
.pi-metric { flex: 1; display: flex; flex-direction: column; }
|
||||
.pi-metric-val { font-size: 26rpx; font-weight: bold; color: #333; margin-bottom: 2rpx; }
|
||||
.pi-metric-lbl { font-size: 22rpx; color: #999; }
|
||||
.pi-action-btn { background-color: #EFF4FF; border-radius: 10rpx; padding-top: 10rpx; padding-bottom: 10rpx; padding-left: 16rpx; padding-right: 16rpx; flex-shrink: 0; margin-left: 16rpx; }
|
||||
.pi-action-txt { font-size: 24rpx; color: rgb(66, 121, 240); }
|
||||
|
||||
/* ===== 底部安全区 ===== */
|
||||
.safe-bottom { height: 160rpx; }
|
||||
|
||||
/* ===== 骨架屏 ===== */
|
||||
@keyframes ske-pulse { 0% { opacity: 1; } 50% { opacity: 0.45; } 100% { opacity: 1; } }
|
||||
.ske-body { padding: 24rpx; }
|
||||
.ske-card-wrap { background: #fff; border-radius: 24rpx; padding: 28rpx; margin-bottom: 24rpx; }
|
||||
.ske-body { padding: 16rpx 0; }
|
||||
.ske-card-wrap { background: #fff; padding: 28rpx; margin-bottom: 16rpx; }
|
||||
.ske-bar { border-radius: 8rpx; background-color: #e8e8e8; animation: ske-pulse 1.4s ease-in-out infinite; }
|
||||
.ske-icon-sq { width: 64rpx; height: 64rpx; border-radius: 16rpx; background-color: #e8e8e8; margin-bottom: 12rpx; animation: ske-pulse 1.4s ease-in-out infinite; }
|
||||
.ske-grid-row { display: flex; flex-direction: row; flex-wrap: wrap; }
|
||||
@@ -993,6 +1061,12 @@
|
||||
.ske-w30 { width: 30%; } .ske-w40 { width: 40%; } .ske-w60 { width: 60%; } .ske-w70 { width: 70%; }
|
||||
.ske-h20 { height: 20rpx; } .ske-h22 { height: 22rpx; } .ske-h26 { height: 26rpx; } .ske-h28 { height: 28rpx; } .ske-h32 { height: 32rpx; }
|
||||
.ske-mt6 { margin-top: 6rpx; } .ske-mt8 { margin-top: 8rpx; } .ske-mb8 { margin-bottom: 8rpx; } .ske-mb16 { margin-bottom: 16rpx; }
|
||||
|
||||
/* ===== 订单状态样式（order-detail 等页面引用保留） ===== */
|
||||
.status-pending { background-color: #FFF3E0; color: #FF9800; }
|
||||
.status-paid { background-color: #E3F2FD; color: #2196F3; }
|
||||
.status-shipped { background-color: #E8F5E9; color: #4CAF50; }
|
||||
.status-completed { background-color: #F3E5F5; color: #9C27B0; }
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1000,3 +1074,4 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user