backup: 子客服改造前保本版本（逍遥梦UI+商家客服页mock）
This commit is contained in:
XingQue
47
pages/merchant-kefu-list/merchant-kefu-list.js
Normal file
47
pages/merchant-kefu-list/merchant-kefu-list.js
Normal file
@@ -0,0 +1,47 @@
|
||||
/** 客服列表 - UI 预览，mock 数据 */
|
||||
Page({
|
||||
data: {
|
||||
statusBar: 20,
|
||||
list: [
|
||||
{
|
||||
id: 1,
|
||||
nickname: '客服总管-阿星',
|
||||
avatar: '/images/default-avatar.png',
|
||||
uid: '1008601',
|
||||
isChief: true,
|
||||
isFinance: false,
|
||||
orderCount: 128,
|
||||
settleCount: 96,
|
||||
settleAmount: '12800.00',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
nickname: '财务-小李',
|
||||
avatar: '/images/default-avatar.png',
|
||||
uid: '1008602',
|
||||
isChief: false,
|
||||
isFinance: true,
|
||||
orderCount: 56,
|
||||
settleCount: 52,
|
||||
settleAmount: '6800.00',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
const sys = wx.getSystemInfoSync();
|
||||
this.setData({ statusBar: sys.statusBarHeight || 20 });
|
||||
},
|
||||
|
||||
goBack() {
|
||||
wx.navigateBack();
|
||||
},
|
||||
|
||||
copyUid(e) {
|
||||
wx.setClipboardData({ data: e.currentTarget.dataset.uid || '' });
|
||||
},
|
||||
|
||||
onAction(e) {
|
||||
wx.showToast({ title: '后端接入后生效', icon: 'none' });
|
||||
},
|
||||
});
|
||||
5
pages/merchant-kefu-list/merchant-kefu-list.json
Normal file
5
pages/merchant-kefu-list/merchant-kefu-list.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"backgroundColor": "#fff8e1",
|
||||
"usingComponents": {}
|
||||
}
|
||||
47
pages/merchant-kefu-list/merchant-kefu-list.wxml
Normal file
47
pages/merchant-kefu-list/merchant-kefu-list.wxml
Normal file
@@ -0,0 +1,47 @@
|
||||
<view class="sub-page sj-page">
|
||||
<view class="status-bar" style="height:{{statusBar}}px"></view>
|
||||
<view class="sub-nav flexb">
|
||||
<text class="back" bindtap="goBack">‹</text>
|
||||
<text class="sub-nav-title">客服列表</text>
|
||||
<text class="back placeholder"></text>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="sub-scroll" enhanced show-scrollbar="{{false}}">
|
||||
<view wx:for="{{list}}" wx:key="id" class="kefu-card sj-mx20">
|
||||
<view class="kefu-head flex">
|
||||
<image class="kefu-av" src="{{item.avatar}}" mode="aspectFill"/>
|
||||
<view class="kefu-info">
|
||||
<view class="flex">
|
||||
<text class="kefu-name">{{item.nickname}}</text>
|
||||
<text wx:if="{{item.isChief}}" class="badge badge-chief">总管</text>
|
||||
<text wx:if="{{item.isFinance}}" class="badge badge-finance">财务</text>
|
||||
</view>
|
||||
<view class="uid-row flex">
|
||||
<text class="kefu-uid">ID: {{item.uid}}</text>
|
||||
<text class="copy-link" bindtap="copyUid" data-uid="{{item.uid}}">复制</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="kefu-stats flexa">
|
||||
<view class="stat-box flexmc">
|
||||
<text class="stat-n">{{item.orderCount}}</text>
|
||||
<text class="stat-l">接单数</text>
|
||||
</view>
|
||||
<view class="stat-box flexmc">
|
||||
<text class="stat-n">{{item.settleCount}}</text>
|
||||
<text class="stat-l">结算数</text>
|
||||
</view>
|
||||
<view class="stat-box flexmc">
|
||||
<text class="stat-n">¥{{item.settleAmount}}</text>
|
||||
<text class="stat-l">结算金额</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="kefu-actions flexa">
|
||||
<text class="act" bindtap="onAction">查看订单</text>
|
||||
<text class="act" bindtap="onAction">权限管理</text>
|
||||
<text class="act act-del" bindtap="onAction">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="load-tip">预览 · 接口就绪后对接真实数据</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
109
pages/merchant-kefu-list/merchant-kefu-list.wxss
Normal file
109
pages/merchant-kefu-list/merchant-kefu-list.wxss
Normal file
@@ -0,0 +1,109 @@
|
||||
@import '../../styles/shangjia-xym-common.wxss';
|
||||
|
||||
.sub-nav {
|
||||
padding: 0 24rpx 12rpx;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 60rpx;
|
||||
font-size: 48rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.back.placeholder { opacity: 0; }
|
||||
|
||||
.sub-nav-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #343434;
|
||||
}
|
||||
|
||||
.sub-scroll {
|
||||
height: calc(100vh - 120rpx);
|
||||
}
|
||||
|
||||
.kefu-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
margin-top: 12rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.kefu-av {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 16rpx;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.kefu-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-left: 8rpx;
|
||||
font-size: 20rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 6rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.badge-chief { background: #ffb508; }
|
||||
.badge-finance { background: #1b6ef3; }
|
||||
|
||||
.kefu-uid {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.copy-link {
|
||||
margin-left: 12rpx;
|
||||
font-size: 22rpx;
|
||||
color: #1b6ef3;
|
||||
}
|
||||
|
||||
.kefu-stats {
|
||||
margin-top: 20rpx;
|
||||
padding: 16rpx 0;
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.stat-n {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #e67e22;
|
||||
}
|
||||
|
||||
.stat-l {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.kefu-actions {
|
||||
margin-top: 16rpx;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.act {
|
||||
font-size: 24rpx;
|
||||
color: #1b6ef3;
|
||||
}
|
||||
|
||||
.act-del {
|
||||
color: #e64340;
|
||||
}
|
||||
|
||||
.load-tip {
|
||||
text-align: center;
|
||||
padding: 32rpx;
|
||||
font-size: 22rpx;
|
||||
color: #bbb;
|
||||
}
|
||||
Reference in New Issue
Block a user