backup: 子客服改造前保本版本(逍遥梦UI+商家客服页mock)

This commit is contained in:
XingQue
2026-06-20 01:50:14 +08:00
parent 0767e23f11
commit a751708d6e
49 changed files with 8189 additions and 5268 deletions

View File

@@ -1,109 +1,110 @@
// tab-bar/index.js — 三端固定,无身份切换
const app = getApp();
import { getTabRole } from '../utils/primary-role.js';
const roleCfg = {
normal: {
name: '点单老板',
tabList: [
{ pagePath: 'pages/index/index', text: '商城', iconPath: '/images/home.png', selectedIconPath: '/images/home.png' },
{ pagePath: 'pages/category/category', text: '分类', iconPath: '/images/category.png', selectedIconPath: '/images/category.png' },
{ pagePath: 'pages/messages/messages', text: '消息', iconPath: '/images/messages.png', selectedIconPath: '/images/messages.png' },
{ pagePath: 'pages/mine/mine', text: '我的', iconPath: '/images/mine.png', selectedIconPath: '/images/mine.png' },
],
},
dashou: {
name: '接单员',
tabList: [
{ pagePath: 'pages/accept-order/accept-order', text: '接单池', iconPath: '/images/order-pool.png', selectedIconPath: '/images/order-pool.png' },
{ pagePath: 'pages/fighter-orders/fighter-orders', text: '订单', iconPath: '/images/orders.png', selectedIconPath: '/images/orders.png' },
{ pagePath: 'pages/messages/messages', text: '消息', iconPath: '/images/messages.png', selectedIconPath: '/images/messages.png' },
{ pagePath: 'pages/fighter/fighter', text: '我的', iconPath: '/images/mine.png', selectedIconPath: '/images/mine.png' },
],
},
shangjia: {
name: '商家',
tabList: [
{ pagePath: 'pages/merchant-orders/merchant-orders', text: '订单', iconPath: '/images/orders.png', selectedIconPath: '/images/orders.png' },
{ pagePath: 'pages/messages/messages', text: '消息', iconPath: '/images/messages.png', selectedIconPath: '/images/messages.png' },
{ pagePath: 'pages/merchant/merchant', text: '我的', iconPath: '/images/mine.png', selectedIconPath: '/images/mine.png' },
],
},
};
Component({
data: {
selectedIndex: 0,
tabList: [],
currentRole: 'normal',
badgeText: '',
},
lifetimes: {
attached() {
this.refresh();
this._badgeListener = (data) => {
if (data.badgeText !== undefined) {
this.setData({ badgeText: data.badgeText });
}
};
this._roleListener = () => this.refresh();
app.on('tabBarBadgeChanged', this._badgeListener);
app.on('currentRoleChanged', this._roleListener);
},
detached() {
if (this._badgeListener) app.off('tabBarBadgeChanged', this._badgeListener);
if (this._roleListener) app.off('currentRoleChanged', this._roleListener);
},
},
pageLifetimes: {
show() {
this.refresh();
const globalBadge = app.globalData.messageManager?.tabBarBadgeText || '';
if (this.data.badgeText !== globalBadge) {
this.setData({ badgeText: globalBadge });
}
this._syncUnreadWithDebounce();
},
},
methods: {
_syncUnreadWithDebounce() {
if (this._syncTimer) clearTimeout(this._syncTimer);
this._syncTimer = setTimeout(() => {
if (app && app.loadConversations) app.loadConversations();
}, 300);
},
refresh() {
const token = wx.getStorageSync('token');
let role = getTabRole(app);
if (!token) {
role = 'normal';
}
app.globalData.currentRole = role;
wx.setStorageSync('currentRole', role);
let cfg = roleCfg[role];
if (!cfg) {
cfg = roleCfg.normal;
role = 'normal';
}
const list = cfg.tabList.map((v, i) => ({ ...v, index: i }));
const pages = getCurrentPages();
const curRoute = pages.length ? pages[pages.length - 1].route : '';
let idx = list.findIndex((t) => t.pagePath === curRoute);
if (idx === -1) idx = 0;
this.setData({ currentRole: role, tabList: list, selectedIndex: idx });
},
switchTab(e) {
const path = e.currentTarget.dataset.path;
const idx = e.currentTarget.dataset.index;
if (idx === this.data.selectedIndex) return;
wx.redirectTo({ url: '/' + path });
},
},
});
// tab-bar/index.js — 三端固定,无身份切换
const app = getApp();
import { getTabRole } from '../utils/primary-role.js';
const roleCfg = {
normal: {
name: '点单老板',
tabList: [
{ pagePath: 'pages/index/index', text: '商城', iconPath: '/images/home.png', selectedIconPath: '/images/home.png' },
{ pagePath: 'pages/category/category', text: '分类', iconPath: '/images/category.png', selectedIconPath: '/images/category.png' },
{ pagePath: 'pages/messages/messages', text: '消息', iconPath: '/images/messages.png', selectedIconPath: '/images/messages.png' },
{ pagePath: 'pages/mine/mine', text: '我的', iconPath: '/images/mine.png', selectedIconPath: '/images/mine.png' },
],
},
dashou: {
name: '接单员',
tabList: [
{ pagePath: 'pages/accept-order/accept-order', text: '接单池', iconPath: '/images/order-pool.png', selectedIconPath: '/images/order-pool.png' },
{ pagePath: 'pages/fighter-orders/fighter-orders', text: '订单', iconPath: '/images/orders.png', selectedIconPath: '/images/orders.png' },
{ pagePath: 'pages/messages/messages', text: '消息', iconPath: '/images/messages.png', selectedIconPath: '/images/messages.png' },
{ pagePath: 'pages/fighter/fighter', text: '我的', iconPath: '/images/mine.png', selectedIconPath: '/images/mine.png' },
],
},
shangjia: {
name: '商家',
tabList: [
{ pagePath: 'pages/merchant-home/merchant-home', text: '首页', iconPath: '/images/home.png', selectedIconPath: '/images/home.png' },
{ pagePath: 'pages/messages/messages', text: '消息', iconPath: '/images/messages.png', selectedIconPath: '/images/messages.png' },
{ pagePath: 'pages/merchant-orders/merchant-orders', text: '订单', iconPath: '/images/orders.png', selectedIconPath: '/images/orders.png' },
{ pagePath: 'pages/merchant/merchant', text: '我的', iconPath: '/images/mine.png', selectedIconPath: '/images/mine.png' },
],
},
};
Component({
data: {
selectedIndex: 0,
tabList: [],
currentRole: 'normal',
badgeText: '',
},
lifetimes: {
attached() {
this.refresh();
this._badgeListener = (data) => {
if (data.badgeText !== undefined) {
this.setData({ badgeText: data.badgeText });
}
};
this._roleListener = () => this.refresh();
app.on('tabBarBadgeChanged', this._badgeListener);
app.on('currentRoleChanged', this._roleListener);
},
detached() {
if (this._badgeListener) app.off('tabBarBadgeChanged', this._badgeListener);
if (this._roleListener) app.off('currentRoleChanged', this._roleListener);
},
},
pageLifetimes: {
show() {
this.refresh();
const globalBadge = app.globalData.messageManager?.tabBarBadgeText || '';
if (this.data.badgeText !== globalBadge) {
this.setData({ badgeText: globalBadge });
}
this._syncUnreadWithDebounce();
},
},
methods: {
_syncUnreadWithDebounce() {
if (this._syncTimer) clearTimeout(this._syncTimer);
this._syncTimer = setTimeout(() => {
if (app && app.loadConversations) app.loadConversations();
}, 300);
},
refresh() {
const token = wx.getStorageSync('token');
let role = getTabRole(app);
if (!token) {
role = 'normal';
}
app.globalData.currentRole = role;
wx.setStorageSync('currentRole', role);
let cfg = roleCfg[role];
if (!cfg) {
cfg = roleCfg.normal;
role = 'normal';
}
const list = cfg.tabList.map((v, i) => ({ ...v, index: i }));
const pages = getCurrentPages();
const curRoute = pages.length ? pages[pages.length - 1].route : '';
let idx = list.findIndex((t) => t.pagePath === curRoute);
if (idx === -1) idx = 0;
this.setData({ currentRole: role, tabList: list, selectedIndex: idx });
},
switchTab(e) {
const path = e.currentTarget.dataset.path;
const idx = e.currentTarget.dataset.index;
if (idx === this.data.selectedIndex) return;
wx.redirectTo({ url: '/' + path });
},
},
});

View File

@@ -1,24 +1,23 @@
<view class="tab-bar">
<view class="bar-row">
<view class="tab-capsule">
<block wx:for="{{tabList}}" wx:key="index">
<view
class="tab-item {{selectedIndex === index ? 'active' : ''}}"
data-path="{{item.pagePath}}"
data-index="{{index}}"
catchtap="switchTab"
>
<view class="badge-container" wx:if="{{item.pagePath === 'pages/messages/messages' && badgeText}}">
<view class="tab-badge">{{badgeText}}</view>
</view>
<image
class="tab-icon"
src="{{selectedIndex === index ? item.selectedIconPath : item.iconPath}}"
mode="aspectFit"
/>
<text class="tab-text">{{item.text}}</text>
</view>
</block>
</view>
</view>
</view>
<view class="c-tab-spacer"></view>
<view class="c-tab-outer">
<view class="c-tab-bar">
<block wx:for="{{tabList}}" wx:key="index">
<view
class="c-tab-item"
data-path="{{item.pagePath}}"
data-index="{{index}}"
catchtap="switchTab"
>
<view class="c-tab-dot" wx:if="{{item.pagePath === 'pages/messages/messages' && badgeText}}">
<text class="c-tab-dot-t">{{badgeText}}</text>
</view>
<image
class="c-tab-ico"
mode="aspectFit"
src="{{selectedIndex === index ? item.selectedIconPath : item.iconPath}}"
/>
<text class="c-tab-txt {{selectedIndex === index ? 'c-tab-txt-on' : ''}}">{{item.text}}</text>
</view>
</block>
</view>
</view>

View File

@@ -1,124 +1,73 @@
/* tab-bar — 三端固定,全宽 Tab 胶囊 */
.c-tab-spacer {
flex-shrink: 0;
width: 100%;
height: calc(100rpx + env(safe-area-inset-bottom));
}
.tab-bar {
position: fixed;
.c-tab-outer {
background: #fff;
border-top: 1rpx solid #e5e5e5;
bottom: 0;
left: 0;
position: fixed;
right: 0;
z-index: 9999;
display: flex;
justify-content: center;
align-items: flex-end;
z-index: 99999;
padding-bottom: env(safe-area-inset-bottom);
background: transparent;
}
.bar-row {
display: flex;
align-items: center;
margin-bottom: 15rpx;
padding: 0 24rpx;
width: 100%;
.c-tab-bar {
align-items: flex-end;
box-sizing: border-box;
}
.tab-capsule {
flex: 1;
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-around;
height: 100rpx;
background: #000000;
border-radius: 50rpx;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.8);
padding: 0 20rpx;
position: relative;
overflow: hidden;
min-height: 100rpx;
padding-top: 8rpx;
}
.tab-capsule::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.15) 20%,
rgba(255, 255, 255, 0.22) 50%,
rgba(255, 255, 255, 0.15) 80%,
transparent 100%
);
animation: shine 8s infinite;
z-index: 1;
}
@keyframes shine {
0% { left: -60%; }
15% { left: 100%; }
100% { left: 100%; }
}
.tab-item {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
.c-tab-item {
align-items: center;
justify-content: center;
min-width: 70rpx;
display: flex;
flex: 1;
flex-direction: column;
justify-content: flex-end;
padding-bottom: 4rpx;
position: relative;
}
.tab-icon {
width: 44rpx;
height: 44rpx;
margin-bottom: 4rpx;
filter: brightness(0) invert(1);
opacity: 0.9;
.c-tab-ico {
height: 48rpx;
width: 48rpx;
}
.tab-text {
.c-tab-txt {
color: #999;
font-size: 20rpx;
color: #aaa;
margin-top: 4rpx;
}
.c-tab-txt-on {
color: #ffd061;
font-weight: 600;
}
.c-tab-dot {
align-items: center;
background: #fa3534;
border-radius: 16rpx;
display: flex;
height: 32rpx;
justify-content: center;
min-width: 32rpx;
padding: 0 6rpx;
position: absolute;
right: 18%;
top: 0;
z-index: 2;
}
.active .tab-icon {
opacity: 1;
filter: brightness(0) invert(1) drop-shadow(0 0 8rpx #00aaff);
}
.active .tab-text {
color: #00aaff;
font-weight: 500;
}
.badge-container {
position: absolute;
top: -10rpx;
right: -15rpx;
z-index: 100;
pointer-events: none;
}
.tab-badge {
min-width: 36rpx;
height: 36rpx;
line-height: 36rpx;
padding: 0 10rpx;
background: #ff3b30;
.c-tab-dot-t {
color: #fff;
font-size: 22rpx;
font-weight: bold;
border-radius: 36rpx;
text-align: center;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
border: 1rpx solid rgba(255, 255, 255, 0.4);
}
page {
padding-bottom: 100rpx;
font-size: 20rpx;
line-height: 1;
}