优化升级
This commit is contained in:
@@ -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: '',
|
||||
bar1: '',
|
||||
bar2: '',
|
||||
bar3: '',
|
||||
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>
|
||||
<!-- 右,右边距 -->
|
||||
|
||||
+1
-1
@@ -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"></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"></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>';
|
||||
|
||||
Reference in New Issue
Block a user