restore: 恢复橙色逍遥梦UI版本(2ea2860)到主分支
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
XingQue
170
components/kefu-float/kefu-float.js
Normal file
170
components/kefu-float/kefu-float.js
Normal file
@@ -0,0 +1,170 @@
|
||||
import { openCustomerServiceChat, resolveKefuIconUrl } from '../../utils/kefu-nav.js';
|
||||
|
||||
const CS_HOUR_START = 8;
|
||||
const CS_HOUR_END = 23;
|
||||
|
||||
function getCsOnlineStatus() {
|
||||
const hour = new Date().getHours();
|
||||
const online = hour >= CS_HOUR_START && hour < CS_HOUR_END;
|
||||
return {
|
||||
csOnline: online,
|
||||
csHoursText: '8:00-23:00',
|
||||
csStatusText: online ? '在线' : '在线时间',
|
||||
};
|
||||
}
|
||||
|
||||
Component({
|
||||
properties: {
|
||||
bottom: { type: String, value: '200rpx' },
|
||||
},
|
||||
|
||||
data: {
|
||||
mode: 'full',
|
||||
sessionHidden: false,
|
||||
csUnread: 0,
|
||||
floatY: 520,
|
||||
iconUrl: '',
|
||||
csOnline: false,
|
||||
csHoursText: '8:00-23:00',
|
||||
csStatusText: '在线时间',
|
||||
},
|
||||
|
||||
lifetimes: {
|
||||
attached() {
|
||||
const app = getApp();
|
||||
this._syncIcon();
|
||||
this._syncFromGlobal();
|
||||
this._initFloatY();
|
||||
this._convHandler = () => this.syncCsUnread();
|
||||
this._configHandler = () => this._syncIcon();
|
||||
if (app.on) {
|
||||
app.on('conversationsUpdated', this._convHandler);
|
||||
app.on('unreadCountChanged', this._convHandler);
|
||||
app.on('configApplied', this._configHandler);
|
||||
}
|
||||
this.syncCsUnread();
|
||||
this._syncOnlineStatus();
|
||||
},
|
||||
detached() {
|
||||
const app = getApp();
|
||||
if (app.off) {
|
||||
if (this._convHandler) {
|
||||
app.off('conversationsUpdated', this._convHandler);
|
||||
app.off('unreadCountChanged', this._convHandler);
|
||||
}
|
||||
if (this._configHandler) {
|
||||
app.off('configApplied', this._configHandler);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
pageLifetimes: {
|
||||
show() {
|
||||
this._syncIcon();
|
||||
this._syncFromGlobal();
|
||||
this.syncCsUnread();
|
||||
this._syncOnlineStatus();
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
_syncOnlineStatus() {
|
||||
this.setData(getCsOnlineStatus());
|
||||
},
|
||||
_syncIcon() {
|
||||
const url = resolveKefuIconUrl(getApp());
|
||||
if (url && url !== this.data.iconUrl) {
|
||||
this.setData({ iconUrl: url });
|
||||
}
|
||||
},
|
||||
|
||||
_initFloatY() {
|
||||
const app = getApp();
|
||||
if (app.globalData.kefuFloatY != null) {
|
||||
this.setData({ floatY: app.globalData.kefuFloatY });
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const sys = wx.getSystemInfoSync();
|
||||
const defaultY = Math.floor((sys.windowHeight || 600) * 0.55);
|
||||
this.setData({ floatY: defaultY });
|
||||
} catch (e) {
|
||||
this.setData({ floatY: 520 });
|
||||
}
|
||||
},
|
||||
|
||||
_syncFromGlobal() {
|
||||
const app = getApp();
|
||||
const sessionHidden = !!app.globalData.kefuFloatSessionHidden;
|
||||
const mode = app.globalData.kefuFloatMode || 'full';
|
||||
this.setData({ sessionHidden, mode });
|
||||
},
|
||||
|
||||
onFloatMove(e) {
|
||||
const y = e.detail && e.detail.y;
|
||||
if (y == null) return;
|
||||
const app = getApp();
|
||||
app.globalData.kefuFloatY = y;
|
||||
},
|
||||
|
||||
syncCsUnread() {
|
||||
if (this.data.sessionHidden) return;
|
||||
if (!wx.goEasy?.im?.latestConversations) return;
|
||||
wx.goEasy.im.latestConversations({
|
||||
onSuccess: (res) => {
|
||||
const list = res.content?.conversations || res.conversations || [];
|
||||
let unread = 0;
|
||||
list.forEach((c) => {
|
||||
if (c.type === 'cs' || c.teamId === 'support_team') {
|
||||
unread += c.unread || 0;
|
||||
}
|
||||
});
|
||||
if (unread !== this.data.csUnread) {
|
||||
this.setData({ csUnread: unread });
|
||||
}
|
||||
},
|
||||
onFailed: () => {},
|
||||
});
|
||||
},
|
||||
|
||||
onIconError() {
|
||||
this._syncIcon();
|
||||
},
|
||||
|
||||
onContact() {
|
||||
openCustomerServiceChat();
|
||||
},
|
||||
|
||||
onHideTap(e) {
|
||||
if (e && e.stopPropagation) e.stopPropagation();
|
||||
const app = getApp();
|
||||
app.globalData.kefuFloatMode = 'mini';
|
||||
this.setData({ mode: 'mini' });
|
||||
},
|
||||
|
||||
onExpand(e) {
|
||||
if (e && e.stopPropagation) e.stopPropagation();
|
||||
const app = getApp();
|
||||
app.globalData.kefuFloatMode = 'full';
|
||||
this.setData({ mode: 'full' });
|
||||
},
|
||||
|
||||
onSessionDismiss(e) {
|
||||
if (e && e.stopPropagation) e.stopPropagation();
|
||||
wx.showModal({
|
||||
title: '隐藏联系客服',
|
||||
content: '本次使用期间不再显示此按钮。清空后台重新进入小程序后会再次出现。',
|
||||
confirmText: '确定隐藏',
|
||||
cancelText: '取消',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
const app = getApp();
|
||||
app.globalData.kefuFloatSessionHidden = true;
|
||||
this.setData({ sessionHidden: true });
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
4
components/kefu-float/kefu-float.json
Normal file
4
components/kefu-float/kefu-float.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
44
components/kefu-float/kefu-float.wxml
Normal file
44
components/kefu-float/kefu-float.wxml
Normal file
@@ -0,0 +1,44 @@
|
||||
<movable-area class="kefu-movable-area" wx:if="{{!sessionHidden}}">
|
||||
<movable-view
|
||||
class="kefu-movable-view"
|
||||
direction="vertical"
|
||||
y="{{floatY}}"
|
||||
damping="40"
|
||||
friction="2"
|
||||
bindchange="onFloatMove"
|
||||
>
|
||||
<block wx:if="{{mode === 'full'}}">
|
||||
<view class="kefu-wrap">
|
||||
<view class="kefu-float kefu-float--full">
|
||||
<view class="kefu-unread-badge" wx:if="{{csUnread > 0}}">{{csUnread > 99 ? '99+' : csUnread}}</view>
|
||||
<view class="kefu-float-main" catchtap="onContact">
|
||||
<image class="kefu-float-icon-img" src="{{iconUrl}}" mode="aspectFit" binderror="onIconError"/>
|
||||
<view class="kefu-text-col">
|
||||
<text class="kefu-float-text">联系客服</text>
|
||||
<text class="kefu-float-sub kefu-float-sub--warn" wx:if="{{csUnread > 0}}">有新消息</text>
|
||||
<text class="kefu-float-sub {{csOnline ? 'kefu-float-sub--online' : ''}}" wx:else>{{csStatusText}} {{csHoursText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="kefu-float-close" catchtap="onHideTap">
|
||||
<text>×</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="kefu-permanent-row" catchtap="onSessionDismiss">
|
||||
<text class="kefu-permanent-label">本次不再显示</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block wx:else>
|
||||
<view class="kefu-wrap kefu-wrap--mini">
|
||||
<view class="kefu-float kefu-float--mini" catchtap="onContact" bindlongpress="onExpand">
|
||||
<view class="kefu-unread-badge kefu-unread-badge--mini" wx:if="{{csUnread > 0}}">{{csUnread > 99 ? '99+' : csUnread}}</view>
|
||||
<image class="kefu-float-mini-icon-img" src="{{iconUrl}}" mode="aspectFit" binderror="onIconError"/>
|
||||
</view>
|
||||
<view class="kefu-permanent-row kefu-permanent-row--mini" catchtap="onSessionDismiss">
|
||||
<text class="kefu-permanent-label">隐藏</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</movable-view>
|
||||
</movable-area>
|
||||
186
components/kefu-float/kefu-float.wxss
Normal file
186
components/kefu-float/kefu-float.wxss
Normal file
@@ -0,0 +1,186 @@
|
||||
.kefu-movable-area {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
.kefu-movable-view {
|
||||
width: auto;
|
||||
height: auto;
|
||||
pointer-events: auto;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.kefu-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.kefu-float {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.kefu-float--full {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
background: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
|
||||
border-radius: 999rpx;
|
||||
box-shadow: 0 8rpx 28rpx rgba(7, 193, 96, 0.45);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.85);
|
||||
overflow: visible;
|
||||
animation: kefu-pulse 2.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes kefu-pulse {
|
||||
0%, 100% { box-shadow: 0 8rpx 28rpx rgba(7, 193, 96, 0.45); }
|
||||
50% { box-shadow: 0 8rpx 36rpx rgba(7, 193, 96, 0.65), 0 0 0 8rpx rgba(7, 193, 96, 0.12); }
|
||||
}
|
||||
|
||||
.kefu-unread-badge {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
right: -6rpx;
|
||||
min-width: 36rpx;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
padding: 0 8rpx;
|
||||
background: #fa5151;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
border-radius: 18rpx;
|
||||
border: 3rpx solid #fff;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.kefu-unread-badge--mini {
|
||||
top: -6rpx;
|
||||
right: -4rpx;
|
||||
}
|
||||
|
||||
.kefu-float-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 18rpx 24rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.kefu-float-main:active {
|
||||
opacity: 0.88;
|
||||
}
|
||||
|
||||
.kefu-float-icon-img {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
margin-right: 12rpx;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: 4rpx;
|
||||
}
|
||||
|
||||
.kefu-text-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.kefu-float-text {
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.kefu-float-sub {
|
||||
font-size: 20rpx;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
margin-top: 2rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.kefu-float-sub--online {
|
||||
color: #e8ffe8;
|
||||
}
|
||||
|
||||
.kefu-float-sub--warn {
|
||||
color: #fff3e0;
|
||||
}
|
||||
|
||||
.kefu-float-close {
|
||||
width: 52rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 34rpx;
|
||||
line-height: 1;
|
||||
border-left: 1rpx solid rgba(255, 255, 255, 0.25);
|
||||
border-radius: 0 999rpx 999rpx 0;
|
||||
}
|
||||
|
||||
.kefu-float-close:active {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.kefu-permanent-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top: 6rpx;
|
||||
padding: 4rpx 10rpx;
|
||||
}
|
||||
|
||||
.kefu-permanent-row:active {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.kefu-permanent-row--mini {
|
||||
margin-top: 4rpx;
|
||||
padding: 2rpx 8rpx;
|
||||
}
|
||||
|
||||
.kefu-permanent-label {
|
||||
font-size: 20rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.kefu-wrap--mini {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.kefu-float--mini {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
|
||||
box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.45);
|
||||
border: 3rpx solid #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: kefu-pulse 2.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.kefu-float--mini:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.kefu-float-mini-icon-img {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: 4rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user