161 lines
5.3 KiB
HTML
161 lines
5.3 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>等级编辑 - H5</title>
|
|||
|
|
<link rel="stylesheet" href="../css/mobile.css">
|
|||
|
|
<style>
|
|||
|
|
.level-detail-row {
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
border-top: 2px solid #4CAF50;
|
|||
|
|
}
|
|||
|
|
.level-detail-content {
|
|||
|
|
padding: 15px;
|
|||
|
|
border-left: 3px solid #4CAF50;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
}
|
|||
|
|
.detail-form-group {
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 8px 0;
|
|||
|
|
border-bottom: 1px solid #eee;
|
|||
|
|
}
|
|||
|
|
.detail-form-group:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
.detail-label {
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333;
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
.detail-input {
|
|||
|
|
flex: 1;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
.detail-input input {
|
|||
|
|
width: 80px;
|
|||
|
|
padding: 5px;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.detail-actions {
|
|||
|
|
margin-top: 15px;
|
|||
|
|
text-align: center;
|
|||
|
|
padding-top: 15px;
|
|||
|
|
border-top: 2px solid #eee;
|
|||
|
|
}
|
|||
|
|
.coupon-modal {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: rgba(0,0,0,0.5);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
z-index: 1000;
|
|||
|
|
}
|
|||
|
|
.coupon-modal-content {
|
|||
|
|
background: white;
|
|||
|
|
padding: 20px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
width: 90%;
|
|||
|
|
max-width: 400px;
|
|||
|
|
}
|
|||
|
|
.expand-btn {
|
|||
|
|
background: #4CAF50;
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
padding: 8px 12px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
.expand-btn:hover {
|
|||
|
|
background: #45a049;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="page-container">
|
|||
|
|
<!-- 页面头部 -->
|
|||
|
|
<div class="page-header">
|
|||
|
|
<button class="back-btn" onclick="goBack()">←</button>
|
|||
|
|
<div class="page-title" id="page-title">等级编辑</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 页面内容 -->
|
|||
|
|
<div class="page-content">
|
|||
|
|
<!-- 操作按钮 -->
|
|||
|
|
<div style="margin-bottom: 15px;">
|
|||
|
|
<button class="btn btn-secondary" onclick="goBack()">关闭</button>
|
|||
|
|
<button class="btn btn-primary" onclick="submitEdit()">提交</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 等级编辑表格 -->
|
|||
|
|
<table class="simple-table">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>等级</th>
|
|||
|
|
<th>等级名称</th>
|
|||
|
|
<th>等级详情</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody id="level-edit-table">
|
|||
|
|
<!-- 数据将通过JavaScript动态填充 -->
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 优惠券弹窗 -->
|
|||
|
|
<div id="coupon-modal" class="coupon-modal hidden" onclick="closeCouponModal(event)">
|
|||
|
|
<div class="coupon-modal-content" onclick="event.stopPropagation()">
|
|||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
|
|||
|
|
<h3>添加优惠券</h3>
|
|||
|
|
<button onclick="closeCouponModal()" style="background: none; border: none; font-size: 18px;">×</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label class="form-label">优惠券名称</label>
|
|||
|
|
<input type="text" id="coupon-name" class="form-input" value="生日优惠券">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label class="form-label">优惠券门槛金额</label>
|
|||
|
|
<input type="number" id="coupon-threshold" class="form-input" value="10" min="0">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label class="form-label">优惠券减免金额</label>
|
|||
|
|
<input type="number" id="coupon-discount" class="form-input" value="1" min="0">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label class="form-label">优惠券有效时间</label>
|
|||
|
|
<select id="coupon-validity" class="form-select">
|
|||
|
|
<option value="1">1天</option>
|
|||
|
|
<option value="7">7天</option>
|
|||
|
|
<option value="30">30天</option>
|
|||
|
|
<option value="90">90天</option>
|
|||
|
|
<option value="365">1年</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="text-align: right; margin-top: 20px;">
|
|||
|
|
<button class="btn btn-secondary" onclick="closeCouponModal()">取消</button>
|
|||
|
|
<button class="btn btn-primary" onclick="submitCoupon()">确认添加</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="../js/mobile-common.js"></script>
|
|||
|
|
<script src="../js/pages/level-edit.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|