优化升级

This commit is contained in:
2026-09-17 10:36:48 +08:00
parent a65cdd5b3b
commit 4ecb1a0a43
12 changed files with 299 additions and 38 deletions
@@ -54,16 +54,80 @@ layui.config({
});
}
// 返回顶部
// 咨询弹窗样式(仅注入一次)
if (!$('#xmContactStyle').length) {
$('head').append(
'<style id="xmContactStyle">' +
'.xm-cp{padding:0;overflow:hidden;border-radius:10px;}' +
'.xm-cp-hero{text-align:center;padding:32px 30px 24px;background:linear-gradient(135deg,#1f3a6b 0%,#2a5298 100%);position:relative;}' +
'.xm-cp-close{position:absolute;top:12px;right:14px;width:32px;height:32px;border:none;background:rgba(255,255,255,0.15);border-radius:50%;color:#fff;font-size:22px;line-height:32px;cursor:pointer;transition:background .2s;}' +
'.xm-cp-close:hover{background:rgba(255,255,255,0.3);}' +
'.xm-cp-hero h3{font-size:22px;font-weight:600;color:#fff;margin-bottom:8px;}' +
'.xm-cp-hero p{font-size:14px;color:rgba(255,255,255,0.7);line-height:1.6;}' +
'.xm-cp-body{padding:30px;background:#fff;text-align:center;}' +
'.xm-cp-qr{width:180px;height:180px;background:#f8fafd;border-radius:14px;padding:8px;border:1px solid #e8edf5;margin:0 auto 12px;transition:transform .25s,box-shadow .25s;}' +
'.xm-cp-qr:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,20,50,0.10);}' +
'.xm-cp-qr img{width:100%;height:100%;border-radius:8px;object-fit:cover;}' +
'.xm-cp-qr-label{font-size:14px;font-weight:600;color:#0b1a33;display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:4px;}' +
'.xm-cp-qr-label .layui-icon{font-size:16px;}' +
'.xm-cp-qr-tip{font-size:13px;color:#8b9ab5;}' +
'</style>'
);
}
// 右侧浮层工具栏(保持原 fixbar 样式)
util.fixbar({
bgcolor: '#165DFF',
bar1: '&#xe606;',
bar1: '&#xe63a;',
bar2: '&#xe676;',
bar3: '&#xe604;',
click: function (type) {
if (type == 'bar1') {
window.open('tencent://message/?Menu=yes&uin=575073565');
if (type === 'bar1') {
openContactLayer('wechat');
} else if (type === 'bar2') {
openContactLayer('qq');
} else if (type === 'bar3') {
$('html,body').animate({scrollTop: 0}, 300);
}
}
});
// 咨询弹窗公共方法
window.openContactLayer = function(type) {
var isWx = type === 'wechat';
var heroTitle = isWx ? '微信客服' : 'QQ客服';
var heroDesc = isWx ? '长按或扫描二维码,添加微信好友<br>技术顾问一对一为您解答疑问' : '长按或扫描二维码,添加QQ好友<br>技术顾问一对一为您解答疑问';
var qrImg = isWx ? '/static/assets/images/img_wx.png' : '/static/assets/images/img_qq.png';
var qrAlt = isWx ? '微信二维码' : 'QQ二维码';
var qrLabel = isWx
? '<i class="layui-icon layui-icon-dialogue" style="color:#07c160;"></i> 微信扫码'
: '<i class="layui-icon layui-icon-login-qq" style="color:#12b7f5;"></i> QQ扫码';
var html = '<div class="xm-cp">' +
'<div class="xm-cp-hero">' +
'<button type="button" class="xm-cp-close" onclick="layui.layer.closeAll()">×</button>' +
'<h3>' + heroTitle + '</h3>' +
'<p>' + heroDesc + '</p>' +
'</div>' +
'<div class="xm-cp-body">' +
'<div class="xm-cp-qr"><img src="' + qrImg + '" alt="' + qrAlt + '"/></div>' +
'<div class="xm-cp-qr-label">' + qrLabel + '</div>' +
'<div class="xm-cp-qr-tip">长按识别或截图扫码</div>' +
'</div>' +
'</div>';
layer.open({
type: 1,
title: false,
closeBtn: 0,
shade: 0.35,
area: ['380px'],
content: html,
success: function (layero) {
layero.css('border-radius', '10px');
}
});
};
}
// 同步当前滚动位置
@@ -78,7 +78,7 @@
<br>
扫码咨询,更好的为您服务
<br>
Copyright © 2020~2026 www.djangoadmin.cn. All rights reserved.
Copyright © 2021~2026 www.djangoadmin.cn. All rights reserved.
</p>
</td>
<!-- 右,右边距 -->
@@ -78,7 +78,7 @@
<br>
扫码咨询,更好的为您服务
<br>
Copyright © 2020~2026 www.djangoadmin.cn. All rights reserved.
Copyright © 2021~2026 www.djangoadmin.cn. All rights reserved.
</p>
</td>
<!-- 右,右边距 -->
@@ -82,7 +82,7 @@
<br>
扫码咨询,更好的为您服务
<br>
Copyright © 2020~2026 www.djangoadmin.cn. All rights reserved.
Copyright © 2021~2026 www.djangoadmin.cn. All rights reserved.
</p>
</td>
<!-- 右,右边距 -->
@@ -78,7 +78,7 @@
<br>
扫码咨询,更好的为您服务
<br>
Copyright © 2020~2026 www.djangoadmin.cn. All rights reserved.
Copyright © 2021~2026 www.djangoadmin.cn. All rights reserved.
</p>
</td>
<!-- 右,右边距 -->
@@ -84,7 +84,7 @@
<br>
扫码咨询,更好的为您服务
<br>
Copyright © 2020~2026 www.djangoadmin.cn. All rights reserved.
Copyright © 2021~2026 www.djangoadmin.cn. All rights reserved.
</p>
</td>
<!-- 右,右边距 -->
@@ -78,7 +78,7 @@
<br>
扫码咨询,更好的为您服务
<br>
Copyright © 2020~2026 www.djangoadmin.cn. All rights reserved.
Copyright © 2021~2026 www.djangoadmin.cn. All rights reserved.
</p>
</td>
<!-- 右,右边距 -->
@@ -214,7 +214,7 @@
<div class="layui-container">
<div class="layui-row layui-col-space30">
<div class="footer-copyright">
<p>Copyright © 2020~2026 www.djangoadmin.cn. All rights reserved.</p>
<p>Copyright © 2021~2026 www.djangoadmin.cn. All rights reserved.</p>
<p><a href="http://beian.miit.gov.cn/" target="_black">苏ICP备19005170号</a></p>
</div>
</div>
@@ -437,7 +437,7 @@
</ul>
<div class="price-btn">
<a th:href="'/goods/detail/'+${item['id']}" class="layui-btn layui-btn-radius layui-btn-lg">选择此版本</a>
<a href="tencent://message/?Menu=yes&uin=575073565" class="layui-btn layui-btn-radius layui-btn-lg" target="_blank">立即咨询</a>
<a href="javascript:;" class="layui-btn layui-btn-radius layui-btn-lg" onclick="openConsultLayer()">立即咨询</a>
</div>
</div>
</div>
@@ -588,6 +588,8 @@
</div>
</script>
<!-- 引入咨询弹窗 -->
<div th:replace="~{./public/consult :: consult}"></div>
<!-- 引入脚部 -->
<footer th:replace="~{./public/footer :: footer}"></footer>
<script>
@@ -0,0 +1,188 @@
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<!-- 咨询弹窗 fragment -->
<div th:fragment="consult">
<style>
/* ========== 咨询弹窗 ========== */
.xm-consult-popup {
padding: 0;
}
.xm-consult-header {
text-align: center;
padding: 28px 24px 12px;
background: linear-gradient(135deg, #1f3a6b 0%, #2a5298 100%);
border-radius: 8px 8px 0 0;
position: relative;
}
.xm-consult-header .xm-close-btn {
position: absolute;
top: 8px;
right: 8px;
width: 30px;
height: 30px;
border: none;
background: rgba(255,255,255,0.2);
border-radius: 50%;
color: #fff;
font-size: 20px;
line-height: 30px;
cursor: pointer;
padding: 0;
transition: background 0.2s;
}
.xm-consult-header .xm-close-btn:hover {
background: rgba(255,255,255,0.35);
}
.xm-consult-header h3 {
font-size: 20px;
font-weight: 600;
color: #fff;
margin-bottom: 6px;
}
.xm-consult-header p {
font-size: 13px;
color: rgba(255,255,255,0.75);
}
.xm-consult-body {
display: flex;
justify-content: center;
gap: 36px;
padding: 28px 24px 20px;
background: #f8fafd;
}
.xm-consult-item {
text-align: center;
}
.xm-consult-qr {
width: 140px;
height: 140px;
background: #fff;
border-radius: 12px;
padding: 8px;
box-shadow: 0 4px 16px rgba(0,20,50,0.08);
border: 1px solid #e8edf5;
margin-bottom: 10px;
transition: transform 0.25s, box-shadow 0.25s;
}
.xm-consult-qr:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,20,50,0.12);
}
.xm-consult-qr img {
width: 100%;
height: 100%;
border-radius: 6px;
object-fit: cover;
}
.xm-consult-label {
font-size: 14px;
font-weight: 600;
color: #0b1a33;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
margin-bottom: 3px;
}
.xm-consult-label .layui-icon {
font-size: 16px;
}
.xm-consult-tip {
font-size: 12px;
color: #8b9ab5;
}
.xm-consult-footer {
text-align: center;
padding: 14px 24px 20px;
background: #f8fafd;
border-top: 1px solid #eef2f8;
border-radius: 0 0 8px 8px;
}
.xm-consult-footer p {
font-size: 13px;
color: #4a5a72;
margin-bottom: 4px;
}
.xm-consult-footer p:last-child {
margin-bottom: 0;
}
.xm-consult-footer .layui-icon {
font-size: 14px;
margin-right: 3px;
}
.xm-consult-footer a {
color: #1f3a6b;
text-decoration: none;
}
.xm-consult-footer a:hover {
text-decoration: underline;
}
@media (max-width: 480px) {
.xm-consult-body {
gap: 20px;
padding: 20px 16px 16px;
}
.xm-consult-qr {
width: 110px;
height: 110px;
}
}
</style>
<!-- 咨询弹窗模板 -->
<script type="text/html" id="layerConsult">
<div class="xm-consult-popup">
<div class="xm-consult-header">
<button type="button" class="xm-close-btn" onclick="layer.closeAll()">×</button>
<h3>扫码咨询</h3>
<p>选择您方便的方式,联系我们</p>
</div>
<div class="xm-consult-body">
<div class="xm-consult-item">
<div class="xm-consult-qr">
<img src="/static/assets/images/img_wx.png" alt="微信二维码"/>
</div>
<div class="xm-consult-label">
<i class="layui-icon layui-icon-dialogue" style="color:#07c160;"></i>
微信客服
</div>
<p class="xm-consult-tip">长按或扫码添加好友</p>
</div>
<div class="xm-consult-item">
<div class="xm-consult-qr">
<img src="/static/assets/images/img_qq.png" alt="QQ二维码"/>
</div>
<div class="xm-consult-label">
<i class="layui-icon layui-icon-login-qq" style="color:#12b7f5;"></i>
QQ客服
</div>
<p class="xm-consult-tip">长按或扫码添加好友</p>
</div>
</div>
<div class="xm-consult-footer">
<p><i class="layui-icon layui-icon-username"></i> 官方QQ客服: <a href="tencent://message/?Menu=yes&uin=575073565" target="_blank">575073565</a></p>
<p><i class="layui-icon layui-icon-dialogue"></i> 邮箱: <a href="mailto:djangoadmin@126.com">djangoadmin@126.com</a></p>
</div>
</div>
</script>
<!-- 咨询弹窗脚本 -->
<script>
function openConsultLayer() {
layui.use(['layer'], function () {
layui.layer.open({
type: 1,
title: false,
closeBtn: 0,
shade: 0.35,
area: ['440px'],
content: document.getElementById('layerConsult').innerHTML,
success: function (layero) {
layero.css('border-radius', '10px');
}
});
});
}
</script>
</div>
</html>
@@ -43,7 +43,7 @@
</div>
</div>
<div class="footer-copyright">
<p>Copyright © 2020~2026 www.djangoadmin.cn. All rights reserved.</p>
<p>Copyright © 2021~2026 www.djangoadmin.cn. All rights reserved.</p>
<p><a href="http://beian.miit.gov.cn/" target="_black">苏ICP备19005170号</a></p>
</div>
</div>
@@ -10,6 +10,12 @@
.layui-btn-danger {
background-color: #FF5722 !important;
}
.layui-table-cell {
height: auto !important;
white-space: normal !important;
word-break: break-all;
line-height: 22px;
}
.layer-get-code > .lay-code-group > button {
position: absolute;
right: 0;
@@ -40,13 +46,13 @@
<div style="margin-top: 10px;">
<table id="orderTable" lay-filter="orderTable"></table>
<div class="ew-vip-code-group layui-text">
<p style="margin-bottom: 14px;">尊敬的用户,欢迎您成为《小蚂蚁云》官方平台注册会员。如遇订单支付异常或紧急情况,请通过以下方式联系我们,客服看到消息后会及时回复处理。</p>
<p style="margin-bottom: 14px;">如遇订单支付异常、授权问题或紧急情况,请通过以下方式联系客服,我们将第一时间为您处理。</p>
<div style="display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
<span class="layui-btn layui-btn-sm layui-btn-primary" style="cursor: pointer;" onclick="showQrCode('/static/assets/images/img_qq.png', 'QQ客服二维码')">
<i class="layui-icon layui-icon-login-qq"></i> QQ扫码咨询
<span class="layui-btn layui-btn-sm layui-btn-primary" style="cursor: pointer;" onclick="openContactLayer('wechat')">
<i class="layui-icon layui-icon-dialogue"></i> 微信扫码咨询
</span>
<span class="layui-btn layui-btn-sm layui-btn-primary" style="cursor: pointer;" onclick="showQrCode('/static/assets/images/img_wx.png', '微信客服二维码')">
<i class="layui-icon layui-icon-login-wechat"></i> 微信扫码咨询
<span class="layui-btn layui-btn-sm layui-btn-primary" style="cursor: pointer;" onclick="openContactLayer('qq')">
<i class="layui-icon layui-icon-login-qq"></i> QQ扫码咨询
</span>
</div>
</div>
@@ -75,11 +81,6 @@
<a class="layui-btn layui-btn-xs" href="/goods/detail/{{d.productId}}">重新购买</a>
{{# } }}
</script>
<script type="text/html" id="tableBarName">
<span class="icon-text" lay-event="detail" style="color: #333;cursor: pointer;">
<i class="layui-icon">&#xe602;</i> {{d.orderTitle}}
</span>
</script>
<!-- 输入图形验证码弹窗 -->
<script type="text/html" id="layerGetCode">
@@ -103,17 +104,6 @@
<!-- 引入脚部 -->
<footer th:replace="~{./public/footer :: footer}"></footer>
<script type="text/javascript" th:inline="none">
// 显示二维码弹窗
function showQrCode(imgSrc, title) {
layui.layer.open({
type: 1,
title: title,
area: ['280px', '340px'],
shadeClose: true,
content: '<div style="text-align: center; padding: 20px;"><img src="' + imgSrc + '" style="width: 200px; height: 200px;"><p style="margin-top: 12px; color: #666; font-size: 13px;">长按或扫码添加客服</p></div>'
});
}
layui.use(['layer', 'table', 'util', 'admin'], function () {
var $ = layui.jquery;
var layer = layui.layer;
@@ -133,8 +123,19 @@
{field: '', width: 60, title: '序号', align: 'center', templet: function(d){
return d.LAY_TABLE_INDEX+1;
}},
{toolbar: '#tableBarName', align: 'center', title: '授权产品', minWidth: 200},
{field: 'validName', align: 'center', title: '授权时长', minWidth: 90, width: 90},
{
templet: function(d){
var html = '<div class="xm-order-title" lay-event="detail" style="cursor:pointer;text-align:left;line-height:22px;">'
+ '<div style="font-weight:600;color:#333;margin-bottom:2px;"><i class="layui-icon">&#xe602;</i> ' + d.orderTitle + '</div>'
+ '<div style="font-size:12px;color:#999;">版本:' + d.specName + ',授权时长:' + d.validName + '</div>'
+ '</div>';
return html;
},
align: 'center',
title: '授权产品',
minWidth: 300
},
// {field: 'validName', align: 'center', title: '授权时长', minWidth: 90, width: 90},
{
templet: function (d) {
return '<span style="color: #ff6700;">¥' + d.paymentAmount + '</span>';
@@ -406,8 +407,14 @@
htmlStr += ' <tr>';
htmlStr += ' <th>付款金额:</th>';
htmlStr += ' <td><span style="color: #ff6700;">¥' + data.paymentAmount + '</span></td>';
htmlStr += ' <th>到期时间:</th>';
htmlStr += ' <td>' + (data.authorizationTime ? util.toDateString(data.authorizationTime, 'yyyy-MM-dd HH:mm:ss') : '永久') + '</td>';
htmlStr += ' <th>支付方式:</th>';
if (data.paymentType == 1) {
htmlStr += ' <td><span class="layui-badge layui-bg-blue">支付宝</span></td>';
} else if (data.paymentType == 2) {
htmlStr += ' <td><span class="layui-badge" style="background:#07c160;">微信</span></td>';
} else {
htmlStr += ' <td><span class="layui-badge layui-bg-gray">未支付</span></td>';
}
htmlStr += ' </tr>';
htmlStr += ' <tr>';
htmlStr += ' <th>当前版本:</th>';