XingQue/Wechat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

60
pages/merchant-kefu-key/merchant-kefu-key.js Normal file
View File

@@ -0,0 +1,60 @@
/** 客服邀请码/秘钥 - UI 预览，后端接入前使用 mock 数据 */
Page({
data: {
statusBar: 20,
gudingCode: 'XQKF2026',
kefuTips: '客服秘钥用于绑定子客服账号，后端接口就绪后将自动替换为真实数据。',
sublist: [{ name: '全部' }, { name: '未使用' }, { name: '已使用' }],
subCurrent: 0,
list: [
{ id: 1, typeName: '财务', code: 'CW-8X2K9P', status: 0, adddate: '2026-06-10' },
{ id: 2, typeName: '总管', code: 'ZG-3M7N1Q', status: 1, adddate: '2026-06-08', usedate: '2026-06-12', user: { nickname: '客服小张', avatar: '/images/default-avatar.png' } },
],
showQrcodeTips: false,
},
onLoad() {
const sys = wx.getSystemInfoSync();
this.setData({ statusBar: sys.statusBarHeight || 20 });
},
goBack() {
wx.navigateBack();
},
copyFixed() {
wx.setClipboardData({ data: this.data.gudingCode });
},
switchSub(e) {
this.setData({ subCurrent: Number(e.currentTarget.dataset.idx) });
},
addKey() {
wx.showToast({ title: '后端接入后可添加', icon: 'none' });
},
copyCode(e) {
wx.setClipboardData({ data: e.currentTarget.dataset.code || '' });
},
delKey() {
wx.showToast({ title: '预览数据不可删除', icon: 'none' });
},
showTips() {
this.setData({ showQrcodeTips: true });
},
closeTips() {
this.setData({ showQrcodeTips: false });
},
previewQr() {
wx.previewImage({
urls: ['https://xy-1314784552.cos.ap-guangzhou.myqcloud.com/uploads/images/ewm.png'],
});
},
noop() {},
});

5
pages/merchant-kefu-key/merchant-kefu-key.json Normal file
View File

@@ -0,0 +1,5 @@
{
"navigationStyle": "custom",
"backgroundColor": "#fff8e1",
"usingComponents": {}
}

69
pages/merchant-kefu-key/merchant-kefu-key.wxml Normal file
View File

@@ -0,0 +1,69 @@
<view class="sub-page pagebg">
<image class="page-bg-img" src="https://bintao.xmxym88.com/xcx/static/images/bg.png" mode="widthFix"/>
<view class="page-body">
<view class="status-bar" style="height:{{statusBar}}px"></view>
<view class="nav-bar flexb">
<text class="back" bindtap="goBack">‹</text>
<text class="nav-title">邀请码</text>
<text class="back placeholder"></text>
</view>
<scroll-view scroll-y class="list-scroll" show-scrollbar="{{false}}">
<view wx:if="{{gudingCode}}" class="fixed-code-card flexb">
<view class="fixed-code-main">
<text class="fixed-code-lbl">固定邀请码：</text>
<text class="fixed-code-val">{{gudingCode}}</text>
</view>
<view class="copy-btn" bindtap="copyFixed">复制</view>
</view>
<view wx:if="{{kefuTips}}" class="tips-bar">{{kefuTips}}</view>
<view class="toolbar flexb">
<view class="sub-tabs flexa">
<view wx:for="{{sublist}}" wx:key="name" class="sub-tab {{subCurrent==index?'on':''}}" data-idx="{{index}}" bindtap="switchSub">{{item.name}}</view>
</view>
<view class="add-btn" bindtap="addKey">添加</view>
</view>
<view class="help-row flexb" bindtap="showTips">
<text class="help-link">秘钥使用方法</text>
<text class="help-arrow">›</text>
</view>
<view wx:for="{{list}}" wx:key="id" class="key-item">
<view class="key-row flexb">
<view class="tag-type">{{item.typeName}}</view>
<view class="key-code" bindtap="copyCode" data-code="{{item.code}}">{{item.code}}</view>
<view class="status-txt {{item.status==0?'unused':'used'}}">{{item.status==0?'未使用':'已使用'}}</view>
</view>
<view class="key-meta">生成日期：{{item.adddate}}</view>
<view wx:if="{{item.status==1}}" class="key-meta">使用日期：{{item.usedate}}</view>
<view wx:if="{{item.user.nickname}}" class="key-user flex">
<image class="user-av" src="{{item.user.avatar}}" mode="aspectFill"/>
<text>使用人：{{item.user.nickname}}</text>
</view>
<view class="key-actions flexb">
<text class="act-copy" bindtap="copyCode" data-code="{{item.code}}">复制秘钥</text>
<text class="act-del" bindtap="delKey" data-id="{{item.id}}">删除</text>
</view>
</view>
<view wx:if="{{!list.length}}" class="empty-tip">暂无卡密</view>
<view class="load-tip">预览 · 接口就绪后对接真实数据</view>
</scroll-view>
</view>
<view wx:if="{{showQrcodeTips}}" class="mask" bindtap="closeTips">
<view class="popup" catchtap="noop">
<view class="popup-title">秘钥使用方法</view>
<scroll-view scroll-y class="popup-scroll">
<view class="popup-txt">把秘钥发给客服，用户扫下方二维码输入秘钥即可绑定。</view>
<view class="qr-wrap">
<image class="qr-img" src="https://xy-1314784552.cos.ap-guangzhou.myqcloud.com/uploads/images/ewm.png" mode="widthFix" bindtap="previewQr"/>
</view>
</scroll-view>
<view class="popup-close" bindtap="closeTips">关闭</view>
</view>
</view>
</view>

335
pages/merchant-kefu-key/merchant-kefu-key.wxss Normal file
View File

@@ -0,0 +1,335 @@
.pagebg {
min-height: 100vh;
background: #f5f5f5;
position: relative;
overflow: hidden;
}
.page-bg-img {
width: 100%;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 0;
max-height: 420rpx;
}
.page-body {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
min-height: 100vh;
box-sizing: border-box;
}
.status-bar,
.nav-bar {
flex-shrink: 0;
}
.nav-bar {
padding: 0 24rpx;
height: 88rpx;
align-items: center;
}
.nav-title {
font-size: 34rpx;
font-weight: 700;
color: #343434;
}
.back {
width: 60rpx;
font-size: 48rpx;
color: #333;
}
.back.placeholder {
opacity: 0;
}
.flex { display: flex; align-items: center; }
.flexb { display: flex; align-items: center; justify-content: space-between; }
.flexa { display: flex; align-items: center; justify-content: space-around; }
.list-scroll {
flex: 1;
height: calc(100vh - 88rpx);
padding: 0 20rpx 30rpx;
box-sizing: border-box;
}
.fixed-code-card {
background: #fff;
border-radius: 20rpx;
padding: 24rpx;
margin: 10rpx 0 16rpx;
align-items: center;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}
.fixed-code-main {
flex: 1;
min-width: 0;
}
.fixed-code-lbl {
font-size: 28rpx;
color: #333;
font-weight: 700;
}
.fixed-code-val {
display: block;
margin-top: 8rpx;
font-size: 32rpx;
color: #f00;
font-weight: 700;
word-break: break-all;
}
.copy-btn {
padding: 16rpx 32rpx;
min-height: 64rpx;
border-radius: 10rpx;
background: linear-gradient(180deg, #fae04d, #ffc0a3);
color: #492f00;
font-size: 28rpx;
font-weight: 700;
flex-shrink: 0;
margin-left: 16rpx;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.tips-bar {
background: #fff7e6;
border: 1rpx solid #ffd591;
border-radius: 12rpx;
padding: 18rpx 20rpx;
font-size: 26rpx;
color: #ad6800;
line-height: 1.5;
margin-bottom: 16rpx;
}
.toolbar {
margin-bottom: 12rpx;
padding: 6rpx 0;
align-items: center;
}
.sub-tabs {
flex: 1;
background: #fff;
border-radius: 12rpx;
padding: 6rpx;
}
.sub-tab {
padding: 16rpx 24rpx;
font-size: 26rpx;
color: #666;
border-radius: 8rpx;
}
.sub-tab.on {
background: #1b6ef3;
color: #fff;
}
.add-btn {
margin-left: 16rpx;
padding: 16rpx 32rpx;
min-height: 64rpx;
background: #1b6ef3;
color: #fff;
border-radius: 10rpx;
font-size: 28rpx;
font-weight: 700;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.help-row {
background: #fff;
border-radius: 12rpx;
padding: 22rpx 24rpx;
margin-bottom: 16rpx;
align-items: center;
}
.help-link {
font-size: 28rpx;
color: #1b6ef3;
font-weight: 700;
}
.help-arrow {
font-size: 36rpx;
color: #999;
}
.key-item {
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
margin-bottom: 16rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
.key-row {
align-items: flex-start;
margin-bottom: 10rpx;
}
.tag-type {
font-size: 22rpx;
color: #fff;
background: #1b6ef3;
padding: 6rpx 14rpx;
border-radius: 6rpx;
margin-right: 12rpx;
flex-shrink: 0;
}
.key-code {
flex: 1;
font-size: 30rpx;
font-weight: 700;
color: #333;
word-break: break-all;
padding-right: 12rpx;
}
.status-txt {
font-size: 24rpx;
flex-shrink: 0;
}
.status-txt.unused { color: #0a0; }
.status-txt.used { color: #aaa; }
.key-meta {
font-size: 24rpx;
color: #aaa;
margin-top: 8rpx;
}
.key-user {
align-items: center;
margin-top: 10rpx;
font-size: 24rpx;
color: #666;
}
.user-av {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
margin-right: 10rpx;
}
.key-actions {
margin-top: 16rpx;
padding-top: 16rpx;
border-top: 1rpx dashed #eee;
}
.act-copy,
.act-del {
font-size: 28rpx;
padding: 12rpx 24rpx;
border-radius: 8rpx;
}
.act-copy {
color: #007aff;
background: #eef6ff;
}
.act-del {
color: #fff;
background: #f56c6c;
}
.empty-tip {
text-align: center;
color: #999;
padding: 80rpx 0;
font-size: 28rpx;
}
.load-tip {
text-align: center;
padding: 32rpx;
font-size: 22rpx;
color: #bbb;
}
.mask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 99;
display: flex;
align-items: flex-end;
}
.popup {
width: 100%;
background: #fff;
border-radius: 26rpx 26rpx 0 0;
padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
}
.popup-title {
font-size: 32rpx;
font-weight: 700;
padding: 30rpx;
}
.popup-scroll {
max-height: 60vh;
padding: 0 30rpx;
box-sizing: border-box;
}
.popup-txt {
font-size: 28rpx;
line-height: 1.6;
color: #333;
}
.qr-wrap {
background: #f9f9f9;
margin-top: 30rpx;
text-align: center;
padding: 20rpx;
}
.qr-img {
width: 100%;
}
.popup-close {
margin: 20rpx 30rpx 0;
text-align: center;
padding: 24rpx;
background: #1b6ef3;
color: #fff;
border-radius: 12rpx;
font-size: 30rpx;
font-weight: 700;
}