Skip to content

G
gk
Commit bde0ef86 authored by daniel's avatar daniel
Browse files
Options

feat(guide): 赛事列表引导页

parent 904adec0
Show whitespace changes
Inline Side-by-side
Showing with 842 additions and 1 deletion
src/main/java/com/dlbridge/jadp/plugins/cmpt/bean/CmptPageDTO.java 0 → 100644
View file @ bde0ef86
package com.dlbridge.jadp.plugins.cmpt.bean;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import lombok.Data;
@Data
public class CmptPageDTO {
private String partnerId;
private String keyword;
private int page = 1; // 默认页码为 0
private int pageSize = 20; // 默认每页条数为 10
/**
* 将当前对象的分页信息转换为 Spring Data 的 Pageable 对象
* @return Pageable 对象
*/
public Pageable toPageable() {
return PageRequest.of(page-1, pageSize);
}
}
src/main/java/com/dlbridge/jadp/plugins/cmpt/web/GuideController.java 0 → 100644
View file @ bde0ef86
package com.dlbridge.jadp.plugins.cmpt.web;
import com.dlbridge.jadp.common.interceptor.PageView;
import com.dlbridge.jadp.plugins.cmpt.bean.CmptPageDTO;
import com.dlbridge.jadp.plugins.cmpt.bean.Partner;
import com.dlbridge.jadp.plugins.cmpt.dao.model.Cmpt;
import com.dlbridge.jadp.plugins.cmpt.service.CmptService;
import com.dlbridge.jadp.plugins.cmpt.utils.Page;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiResponse;
import io.swagger.annotations.ApiResponses;
import lombok.extern.log4j.Log4j2;
import org.apache.commons.lang3.ObjectUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;
import springfox.documentation.annotations.ApiIgnore;
import javax.annotation.Resource;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RequestMapping(value = "/gk/guide/")
@RestController
@ApiIgnore
@Log4j2
public class GuideController {
@Resource
private CmptService cmptService;
@RequestMapping("index/{cmptId}")
@PageView
public ModelAndView index(@PathVariable("cmptId") Integer cmptId, ModelAndView mv) {
Cmpt cmpt = cmptService.queryCmptBycmptId(cmptId);
mv.setViewName("cmpt/guide");
mv.addObject("cmpt", cmpt);
return mv;
}
/**
* 小程序赛事列表接口
* @return 赛事列表
*/
@PostMapping(value = "/cmpt")
@ApiResponses({
@ApiResponse(code = 200, message = "成功"),
@ApiResponse(code = -1, message = "失败", response = ObjectUtils.Null.class),
@ApiResponse(code = 200, message = "成功", response = Page.class, responseContainer = "List")})
@ApiOperation(value = "赛事列表", notes = "赛事列表,与查询接口一致", tags = "首页接口")
public Page<List<Cmpt>> cmpt(@RequestBody CmptPageDTO cmptPageDTO) {
String partnerId = cmptPageDTO.getPartnerId();
Partner partner = cmptService.getPartnerById(partnerId);
Map<String,String> param = new HashMap<>();
param.put("partnerId",partnerId);
param.put("userId",partner.getUserId()+"");
Page<List<Cmpt>> result = cmptService.queryCmpt(cmptPageDTO.toPageable(), param);
result.setCode(200);
return result;
}
}
src/main/webapp/WEB-INF/views/cmpt/bag.jsp
View file @ bde0ef86
...@@ -450,6 +450,9 @@ ...@@ -450,6 +450,9 @@
<label> <label>
<input type="radio" v-model="bag.status" value="2"> 待处理 <input type="radio" v-model="bag.status" value="2"> 待处理
</label> </label>
<label>
<input type="radio" v-model="bag.status" value="3"> 已处理
</label>
</div> </div>
</div> </div>
</div> </div>
...@@ -486,11 +489,16 @@ ...@@ -486,11 +489,16 @@
{ {
name: "待处理", name: "待处理",
value: 2 value: 2
},
{
name: "已处理",
value: 3
} }
], ],
statusEnum: { statusEnum: {
1: "提交", 1: "提交",
2: "待处理", 2: "待处理",
3: "已处理",
}, },
bag: { bag: {
"id": null, "id": null,
......
src/main/webapp/WEB-INF/views/cmpt/guide.jsp 0 → 100644
View file @ bde0ef86
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fns" uri="/WEB-INF/tlds/fns.tld" %>
<%@ taglib prefix="fnc" uri="/WEB-INF/tlds/fnc.tld" %>
<c:set var="ctx"
value="${pageContext.request.contextPath}${fns:getAdminPath()}" />
<c:set var="path"
value="${pageContext.request.contextPath}${fns:getPath()}" />
<c:set var="jaaproot" value="${pageContext.request.contextPath}" />
<c:set var="ctxStatic" value="${pageContext.request.contextPath}/static" />
<!-- JavaScript files-->
<script src="${ctxStatic}/newdermon/vendor/jquery/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta name="description" content="">
<meta name="robots" content="all,follow">
<!-- Bootstrap CSS-->
<link rel="stylesheet"
href="${ctxStatic}/newdermon/vendor/bootstrap/css/bootstrap.min.css">
<!-- 自定义css -->
<link rel="stylesheet" href="${ctxStatic}/css/base.css">
<!-- Font Awesome CSS-->
<link rel="stylesheet"
href="${ctxStatic}/newdermon/vendor/font-awesome/css/font-awesome.min.css">
<!-- Fontastic Custom icon font-->
<link rel="stylesheet" href="${ctxStatic}/newdermon/css/fontastic.css">
<!-- Google fonts - Poppins -->
<link rel="stylesheet" href="${ctxStatic}/newdermon/css/font-css.css">
<!-- theme stylesheet-->
<link rel="stylesheet"
href="${ctxStatic}/newdermon/css/style.default.css?v=<%=System.currentTimeMillis()%>"
id="theme-stylesheet">
<!-- Custom stylesheet - for your changes-->
<link rel="stylesheet"
href="${ctxStatic}/newdermon/css/custom.css?v=<%=System.currentTimeMillis()%>">
<!-- Favicon-->
<link rel="shortcut icon"
href="https://img.geexek.com/files/home/favicon.ico">
<script type="text/javascript" charset="utf-8"
src="${ctxStatic}/layer/layer.js"></script>
<link rel="stylesheet" href="${ctxStatic}/layer/skin/layer.css">
<link rel="stylesheet"
href="${ctxStatic}/cmpt/index.css?v=<%=System.currentTimeMillis()%>">
<link rel="stylesheet"
href="${ctxStatic}/cmpt/setting.css?v=<%=System.currentTimeMillis()%>">
<title>赛事引导</title>
<style>
.inner {
width: 100%;
height: 180px;
background: #ce3939;
border-radius: 4px;
margin: 20px 20px;
position: relative;
color: white;
}
.inner:hover {
background: #5d82af !important;
/* 添加!important确保优先级 */
}
.main-body {
width: 1186px;
background-color: #E7ECF2;
}
</style>
</head>
<body>
<style type="text/css">
</style>
<div class="page">
<jsp:include page="../common/header.jsp"></jsp:include>
<div id="app"
class="page-content main-body grid grid-cols-3 gap-5 box-border">
<div class="inner p-3 shadow-sm"
style="background: #ce3939;" v-for="item in cmpts"
@click="toDetail(item)" :key="item.cmptId">
<div class="flex flex-col h-full w-full gap-y-2">
<div class="flex-1 font-bold text-2xl">
{{item.cmptName}}
</div>
<!-- <div class="flex flex-row items-center">
<span>状态：</span>
<span>
{{item.cmptStatus}}
</span>
</div> -->
<span class="time">{{item.startTimeStr}}</span>
<span class="btn btn-light">
查看赛事
</span>
</div>
</div>
</div>
</div>
<script
src="${ctxStatic}/newdermon/vendor/popper.js/umd/popper.min.js"></script>
<script
src="${ctxStatic}/newdermon/vendor/bootstrap/js/bootstrap.min.js"></script>
<script
src="${ctxStatic}/newdermon/vendor/jquery.cookie/jquery.cookie.js"></script>
<script
src="${ctxStatic}/newdermon/vendor/jquery-validation/jquery.validate.min.js"></script>
<script src="${ctxStatic}/jscolor/jscolor.js"></script>
<script src="${ctxStatic}/vue/vue.js"></script>
<!-- Main File-->
<script src="${ctxStatic}/newdermon/js/front.js"></script>
<script
type="text/javascript">var ctx = '${ctx}', ctxStatic = '${ctxStatic}';</script>
<script>
// var cmptData = ${ cmpt }; // 直接输出JSON对象
// 或者如果cmpt是复杂对象，可以序列化为JSON
const cmpt = JSON.parse('${fns:toJson(cmpt)}');
$(".header-second-titile").text("赛事列表")
//
new Vue({
el: '#app',
data: {
cmpts: [],
cmptStatusEnum: {
0: '未开始',
1: '进行中',
2: '已结束'
}
},
mounted() {
this.fetchData()
},
methods: {
getQueryParams() {
const params = {};
window.location.search.substring(1).split('&').forEach(pair => {
const [key, value] = pair.split('=');
if (key) params[key] = decodeURIComponent(value || '');
});
return params;
},
toDetail(item) {
// 获取当前URL中的参数部分
const currentUrl = window.location.href;
const params = this.getQueryParams()
// 构建目标URL
const targetUrl = window.location.origin + "/gk/cmpt/" + item.cmptId + "?" + new URLSearchParams({ ...params, cId: item.cmptId });
window.location.href = targetUrl;
},
fetchData() {
const params = this.getQueryParams()
const url = "/gk/guide/cmpt"
$.ajax({
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
page: 1,
pageSize: 100,
partnerId: params?.partnerId
}),
url,
beforeSend: () => {
layer.load()
},
complete: () => {
layer.closeAll()
},
success: (res) => {
this.cmpts = res.content
}
})
},
},
});
</script>
</body>
</html>
\ No newline at end of file
src/main/webapp/static/css/base.css
View file @ bde0ef86
.box-border {
box-sizing: border-box;
}
/* Flex 布局相关 */ /* Flex 布局相关 */
.flex { .flex {
display: flex; display: flex;
...@@ -173,6 +177,210 @@ ...@@ -173,6 +177,210 @@
font-weight: normal; font-weight: normal;
} }
/* 字体大小相关 */
.text-xs {
font-size: 0.75rem;
/* 12px */
}
.text-sm {
font-size: 0.875rem;
/* 14px */
}
.text-base {
font-size: 1rem;
/* 16px */
}
.text-lg {
font-size: 1.125rem;
/* 18px */
}
.text-xl {
font-size: 1.25rem;
/* 20px */
}
.text-2xl {
font-size: 1.5rem;
/* 24px */
}
.text-3xl {
font-size: 1.875rem;
/* 30px */
}
.text-4xl {
font-size: 2.25rem;
/* 36px */
}
.text-5xl {
font-size: 3rem;
/* 48px */
}
/* 固定像素值字体大小 */
.text-12 {
font-size: 12px;
}
.text-14 {
font-size: 14px;
}
.text-16 {
font-size: 16px;
}
.text-18 {
font-size: 18px;
}
.text-20 {
font-size: 20px;
}
.text-24 {
font-size: 24px;
}
.text-28 {
font-size: 28px;
}
.text-32 {
font-size: 32px;
}
.text-36 {
font-size: 36px;
}
.text-40 {
font-size: 40px;
}
.text-48 {
font-size: 48px;
}
/* 高度相关 */
.h-full {
height: 100%;
}
.h-screen {
height: 100vh;
}
.h-auto {
height: auto;
}
.h-1\/2 {
height: 50%;
}
.h-1\/3 {
height: 33.333333%;
}
.h-2\/3 {
height: 66.666667%;
}
/* 固定高度值 */
.h-16 {
height: 16px;
}
.h-20 {
height: 20px;
}
.h-24 {
height: 24px;
}
.h-32 {
height: 32px;
}
.h-40 {
height: 40px;
}
.h-48 {
height: 48px;
}
.h-64 {
height: 64px;
}
.h-80 {
height: 80px;
}
.h-96 {
height: 96px;
}
/* 最小/最大高度 */
.min-h-0 {
min-height: 0;
}
.min-h-full {
min-height: 100%;
}
.min-h-screen {
min-height: 100vh;
}
.max-h-full {
max-height: 100%;
}
.max-h-screen {
max-height: 100vh;
}
/* 宽度相关 (补充现有宽度类) */
.w-1\/4 {
width: 25%;
}
.w-3\/4 {
width: 75%;
}
.w-1\/5 {
width: 20%;
}
.w-2\/5 {
width: 40%;
}
.w-3\/5 {
width: 60%;
}
.w-4\/5 {
width: 80%;
}
.w-screen {
width: 100vw;
}
/* 宽度相关 */ /* 宽度相关 */
.w-full { .w-full {
width: 100%; width: 100%;
...@@ -194,6 +402,88 @@ ...@@ -194,6 +402,88 @@
width: 66.666667%; width: 66.666667%;
} }
.w-1\/4 {
width: 25%;
}
.w-3\/4 {
width: 75%;
}
.w-1\/5 {
width: 20%;
}
.w-2\/5 {
width: 40%;
}
.w-3\/5 {
width: 60%;
}
.w-4\/5 {
width: 80%;
}
.w-screen {
width: 100vw;
}
/* 固定宽度值 */
.w-16 {
width: 16px;
}
.w-20 {
width: 20px;
}
.w-24 {
width: 24px;
}
.w-32 {
width: 32px;
}
.w-40 {
width: 40px;
}
.w-48 {
width: 48px;
}
.w-64 {
width: 64px;
}
.w-80 {
width: 80px;
}
.w-96 {
width: 96px;
}
/* 最小/最大宽度 */
.min-w-0 {
min-width: 0;
}
.min-w-full {
min-width: 100%;
}
.max-w-full {
max-width: 100%;
}
.max-w-screen {
max-width: 100vw;
}
/* 显示相关 */ /* 显示相关 */
.block { .block {
display: block; display: block;
...@@ -211,6 +501,79 @@ ...@@ -211,6 +501,79 @@
display: none; display: none;
} }
/* Grid 布局相关 */
.grid {
display: grid;
}
.grid-flow-row {
grid-auto-flow: row;
}
.grid-flow-col {
grid-auto-flow: column;
}
.grid-flow-dense {
grid-auto-flow: dense;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-none {
grid-template-columns: none;
}
.grid-rows-1 {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid-rows-2 {
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid-rows-3 {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
.grid-rows-4 {
grid-template-rows: repeat(4, minmax(0, 1fr));
}
.grid-rows-5 {
grid-template-rows: repeat(5, minmax(0, 1fr));
}
.grid-rows-6 {
grid-template-rows: repeat(6, minmax(0, 1fr));
}
.grid-rows-none {
grid-template-rows: none;
}
/* 间距相关 - 基于rem单位 */ /* 间距相关 - 基于rem单位 */
.gap-0 { .gap-0 {
gap: 0; gap: 0;
...@@ -286,6 +649,56 @@ ...@@ -286,6 +649,56 @@
column-gap: 3rem; column-gap: 3rem;
} }
/* 水平间距 (gap-x) */
.gap-x-0 {
column-gap: 0;
}
.gap-x-1 {
column-gap: 0.25rem;
}
.gap-x-2 {
column-gap: 0.5rem;
}
.gap-x-3 {
column-gap: 1rem;
}
.gap-x-4 {
column-gap: 1.5rem;
}
.gap-x-5 {
column-gap: 3rem;
}
/* 垂直间距 (gap-y) */
.gap-y-0 {
row-gap: 0;
}
.gap-y-1 {
row-gap: 0.25rem;
}
.gap-y-2 {
row-gap: 0.5rem;
}
.gap-y-3 {
row-gap: 1rem;
}
.gap-y-4 {
row-gap: 1.5rem;
}
.gap-y-5 {
row-gap: 3rem;
}
/* 行高相关 */ /* 行高相关 */
.lh-1 { .lh-1 {
line-height: 1; line-height: 1;
...@@ -488,3 +901,149 @@ ...@@ -488,3 +901,149 @@
.cursor-zoom-out { .cursor-zoom-out {
cursor: zoom-out; cursor: zoom-out;
} }
/* ... 现有代码 ... */
/* 边框宽度 */
.border-0 {
border-width: 0;
}
.border-1 {
border-width: 1px;
}
.border-2 {
border-width: 2px;
}
.border-4 {
border-width: 4px;
}
.border-8 {
border-width: 8px;
}
/* 边框样式 */
.border-solid {
border-style: solid;
}
.border-dashed {
border-style: dashed;
}
.border-dotted {
border-style: dotted;
}
.border-double {
border-style: double;
}
.border-none {
border-style: none;
}
/* 边框颜色 - 基础颜色 */
.border-transparent {
border-color: transparent;
}
.border-current {
border-color: currentColor;
}
.border-black {
border-color: #000;
}
.border-white {
border-color: #fff;
}
.border-gray {
border-color: #9ca3af;
}
.border-red {
border-color: #ef4444;
}
.border-blue {
border-color: #3b82f6;
}
/* 圆角 */
.rounded-none {
border-radius: 0;
}
.rounded-sm {
border-radius: 0.125rem;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-2xl {
border-radius: 1rem;
}
.rounded-full {
border-radius: 9999px;
}
/* 单边边框 */
.border-t-1 {
border-top-width: 1px;
}
.border-r-1 {
border-right-width: 1px;
}
.border-b-1 {
border-bottom-width: 1px;
}
.border-l-1 {
border-left-width: 1px;
}
/* 单边圆角 */
.rounded-t-none {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.rounded-r-none {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.rounded-b-none {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.rounded-l-none {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* ... 现有代码 ... */
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment