LeonMMcoset/leonapp
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

feat(审核页面): 使用SweetAlert2替换模态框实现拒绝功能

Browse Source 
替换原生的Bootstrap模态框为SweetAlert2弹窗，提升用户体验和界面美观度。新增SweetAlert2的CSS和JS依赖，并实现拒绝原因输入和表单提交功能。
This commit is contained in:
Leonmmcoset
2025-07-08 19:25:53 +08:00
parent a980eb7a1c
commit 9efa8fff7c
1 changed files with 36 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
admin/review_apps.php
View File

@@ -72,6 +72,8 @@ if (!($conn instanceof mysqli)) {
<title>应用审核 - <?php echo APP_STORE_NAME; ?></title> <title>应用审核 - <?php echo APP_STORE_NAME; ?></title>
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet"> <link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- SweetAlert2 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<!-- 自定义CSS --> <!-- 自定义CSS -->
<link rel="stylesheet" href="../styles.css"> <link rel="stylesheet" href="../styles.css">
<!-- Fluent Design 模糊效果 --> <!-- Fluent Design 模糊效果 -->
@@ -165,38 +167,44 @@ if (!($conn instanceof mysqli)) {
<input type="hidden" name="app_id" value="<?php echo $app['id']; ?>"> <input type="hidden" name="app_id" value="<?php echo $app['id']; ?>">
<div class="d-flex gap-2"> <div class="d-flex gap-2">
<button type="submit" name="review_action" value="approve" class="btn btn-success flex-grow-1">通过</button> <button type="submit" name="review_action" value="approve" class="btn btn-success flex-grow-1">通过</button>
<button type="button" class="btn btn-danger flex-grow-1" data-bs-toggle="modal" data-bs-target="#rejectModal<?php echo $app['id']; ?>">拒绝</button> <button type="button" class="btn btn-danger flex-grow-1" onclick="showRejectReason(<?php echo $app['id']; ?>, '<?php echo addslashes(htmlspecialchars($app['name'])); ?>')">拒绝</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
<!-- 拒绝原因模态框 --> <script>
<div class="modal fade" id="rejectModal<?php echo $app['id']; ?>" tabindex="-1" aria-labelledby="rejectModalLabel" aria-hidden="true"> function showRejectReason(appId, appName) {
<div class="modal-dialog"> Swal.fire({
<div class="modal-content"> title: '拒绝应用: ' + appName,
<div class="modal-header"> html: '<textarea id="rejectionReason" class="swal2-textarea" rows="3" placeholder="请详细说明拒绝原因，帮助开发者改进应用"></textarea>',
<h5 class="modal-title" id="rejectModalLabel">拒绝应用: <?php echo htmlspecialchars($app['name']); ?></h5> confirmButtonText: '确认拒绝',
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> cancelButtonText: '取消',
</div> showCancelButton: true,
<form method="post"> validationMessage: '请输入拒绝原因',
<div class="modal-body"> preConfirm: () => {
<input type="hidden" name="app_id" value="<?php echo $app['id']; ?>"> const reason = document.getElementById('rejectionReason').value;
<div class="form-floating mb-3"> if (!reason) {
<textarea class="form-control" id="rejection_reason<?php echo $app['id']; ?>" name="rejection_reason" rows="3" required></textarea> Swal.showValidationMessage('请输入拒绝原因');
<label for="rejection_reason<?php echo $app['id']; ?>">拒绝原因</label> }
<div class="form-text">请详细说明拒绝原因，帮助开发者改进应用</div> return reason;
</div> }
</div> }).then((result) => {
<div class="modal-footer"> if (result.isConfirmed) {
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button> const form = document.createElement('form');
<button type="submit" name="review_action" value="reject" class="btn btn-danger">确认拒绝</button> form.method = 'post';
</div> form.innerHTML = `
</form> <input type="hidden" name="app_id" value="${appId}">
</div> <input type="hidden" name="review_action" value="reject">
</div> <input type="hidden" name="rejection_reason" value="${encodeURIComponent(result.value)}">
</div> `;
document.body.appendChild(form);
form.submit();
}
});
}
</script>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>
<?php endif; ?> <?php endif; ?>
@@ -204,5 +212,7 @@ if (!($conn instanceof mysqli)) {
<!-- Bootstrap JS with Popper --> <!-- Bootstrap JS with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- SweetAlert2 JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
</body> </body>
</html> </html>