Skip to content

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

style(service): 新增服务模块+子类型多选

parent a90d382d
Hide whitespace changes
Inline Side-by-side
Showing with 867 additions and 754 deletions
src/main/java/com/dlbridge/jadp/plugins/cmpt/bean/JoyfulRichTextBean.java
View file @ cdbfa57e
...@@ -4,7 +4,10 @@ import lombok.Data; ...@@ -4,7 +4,10 @@ import lombok.Data;
@Data @Data
public class JoyfulRichTextBean { public class JoyfulRichTextBean {
// 服务类型（3：特色民宿：4：旅游景点，5：特色餐饮 6:当地特产 7: 应急避险 8: 医疗点位 9:运动产品）
private String type; private String type;
// 点位类型 （1：打卡点，2：服务驿站，3：民宿：4：景点，5：餐饮）
private String category;
private String title; private String title;
private String lng; private String lng;
private String lat; private String lat;
......
src/main/java/com/dlbridge/jadp/plugins/cmpt/dao/mapper/JoyfulRichTextMapper.java
View file @ cdbfa57e
...@@ -20,5 +20,5 @@ public interface JoyfulRichTextMapper { ...@@ -20,5 +20,5 @@ public interface JoyfulRichTextMapper {
List<JoyfulRichText> getJoyfulRichTextById(@Param("id") String id); List<JoyfulRichText> getJoyfulRichTextById(@Param("id") String id);
List<JoyfulRichText> getJoyfulRichTextList(@Param("type") String type, @Param("title") String title); List<JoyfulRichText> getJoyfulRichTextList(@Param("type") String type, @Param("title") String title,@Param("category") String category);
} }
\ No newline at end of file
src/main/java/com/dlbridge/jadp/plugins/cmpt/dao/mapper/JoyfulRichTextMapper.xml
View file @ cdbfa57e
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
INSERT INTO gksite.joyful_rich_text( INSERT INTO gksite.joyful_rich_text(
userId userId
,type ,type
,category
,title ,title
,address ,address
,lng ,lng
...@@ -23,6 +24,7 @@ ...@@ -23,6 +24,7 @@
) VALUES ( ) VALUES (
#{userId} #{userId}
,#{type} ,#{type}
,#{category}
,#{title} ,#{title}
,#{address} ,#{address}
,#{lng} ,#{lng}
...@@ -46,6 +48,7 @@ ...@@ -46,6 +48,7 @@
SET SET
userId = #{userId} userId = #{userId}
,type = #{type} ,type = #{type}
,category = #{category}
,title = #{title} ,title = #{title}
,address = #{address} ,address = #{address}
,lng = #{lng} ,lng = #{lng}
...@@ -75,25 +78,23 @@ ...@@ -75,25 +78,23 @@
</update> </update>
<select id="getJoyfulRichTextById" resultType="com.dlbridge.jadp.plugins.cmpt.dao.model.JoyfulRichText"> <select id="getJoyfulRichTextById" resultType="com.dlbridge.jadp.plugins.cmpt.dao.model.JoyfulRichText">
SELECT SELECT id
id , userId
,userId , type
,type , title
,title , address
,address , lng
,lng , lat
,lat , content
,content , img_url AS imgUrl
,img_url AS imgUrl , remark1
,remark1 , remark2
,remark2 , remark3
,remark3 , remark4
,remark4 , status
,status , category
FROM FROM gksite.joyful_rich_text
gksite.joyful_rich_text WHERE id = #{id}
WHERE
id = #{id}
</select> </select>
<select id="getJoyfulRichTextList" resultType="com.dlbridge.jadp.plugins.cmpt.dao.model.JoyfulRichText"> <select id="getJoyfulRichTextList" resultType="com.dlbridge.jadp.plugins.cmpt.dao.model.JoyfulRichText">
...@@ -110,6 +111,7 @@ ...@@ -110,6 +111,7 @@
,remark4 ,remark4
,type ,type
,status ,status
,category
FROM FROM
gksite.joyful_rich_text gksite.joyful_rich_text
WHERE WHERE
...@@ -120,5 +122,8 @@ ...@@ -120,5 +122,8 @@
<if test="title != null and title != ''"> <if test="title != null and title != ''">
AND title like concat('%',#{title},'%') AND title like concat('%',#{title},'%')
</if> </if>
<if test="category != null and category != ''">
AND FIND_IN_SET(#{category}, category)
</if>
</select> </select>
</mapper> </mapper>
\ No newline at end of file
src/main/java/com/dlbridge/jadp/plugins/cmpt/dao/model/JoyfulRichText.java
View file @ cdbfa57e
...@@ -6,7 +6,10 @@ import lombok.Data; ...@@ -6,7 +6,10 @@ import lombok.Data;
public class JoyfulRichText { public class JoyfulRichText {
private String id; private String id;
private String userId; private String userId;
// 服务类型（3：特色民宿：4：旅游景点，5：特色餐饮 6:当地特产 7: 应急避险 8: 医疗点位 9:运动产品）
private String type; private String type;
// 点位类型 （1：打卡点，2：服务驿站，3：民宿：4：景点，5：餐饮）
private String category;
private String title; private String title;
private String address; private String address;
private String lng; private String lng;
......
src/main/java/com/dlbridge/jadp/plugins/cmpt/service/JoyfulRichTextService.java
View file @ cdbfa57e
...@@ -82,7 +82,7 @@ public class JoyfulRichTextService { ...@@ -82,7 +82,7 @@ public class JoyfulRichTextService {
* @return * @return
*/ */
public List<JoyfulRichText> getJoyfulRichTextList(JoyfulRichTextBean joyfulRichTextBean) { public List<JoyfulRichText> getJoyfulRichTextList(JoyfulRichTextBean joyfulRichTextBean) {
List<JoyfulRichText> joyfulRichTextList = joyfulRichTextMapper.getJoyfulRichTextList(joyfulRichTextBean.getType(), joyfulRichTextBean.getTitle()); List<JoyfulRichText> joyfulRichTextList = joyfulRichTextMapper.getJoyfulRichTextList(joyfulRichTextBean.getType(), joyfulRichTextBean.getTitle(),joyfulRichTextBean.getCategory());
if (StringUtils.isNotBlank(joyfulRichTextBean.getDistance())) { if (StringUtils.isNotBlank(joyfulRichTextBean.getDistance())) {
joyfulRichTextList = joyfulRichTextList.stream().filter(model -> this.notGtDistance(model, joyfulRichTextBean)).collect(Collectors.toList()); joyfulRichTextList = joyfulRichTextList.stream().filter(model -> this.notGtDistance(model, joyfulRichTextBean)).collect(Collectors.toList());
} }
......
src/main/webapp/WEB-INF/views/cmpt/service.jsp
View file @ cdbfa57e
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %> <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %> <%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>自助服务</title> <title>自助服务</title>
<!-- Bootstrap CSS--> <!-- Bootstrap CSS-->
<link rel="stylesheet" href="${ctxStatic}/newdermon/vendor/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="${ctxStatic}/newdermon/vendor/bootstrap/css/bootstrap.min.css">
<!-- Font Awesome CSS--> <!-- Font Awesome CSS-->
<link rel="stylesheet" <link rel="stylesheet"
href="${ctxStatic}/newdermon/vendor/font-awesome/css/font-awesome.min.css"> href="${ctxStatic}/newdermon/vendor/font-awesome/css/font-awesome.min.css">
<!-- Fontastic Custom icon font--> <!-- Fontastic Custom icon font-->
<link rel="stylesheet" href="${ctxStatic}/newdermon/css/fontastic.css"> <link rel="stylesheet" href="${ctxStatic}/newdermon/css/fontastic.css">
<!-- Google fonts - Poppins --> <!-- Google fonts - Poppins -->
<link rel="stylesheet" href="${ctxStatic}/newdermon/css/font-css.css"> <link rel="stylesheet" href="${ctxStatic}/newdermon/css/font-css.css">
<!-- theme stylesheet--> <!-- theme stylesheet-->
<link rel="stylesheet" <link rel="stylesheet"
href="${ctxStatic}/newdermon/css/style.default.css?v=<%=System.currentTimeMillis()%>" href="${ctxStatic}/newdermon/css/style.default.css?v=<%=System.currentTimeMillis()%>"
id="theme-stylesheet"> id="theme-stylesheet">
<!-- Custom stylesheet - for your changes--> <!-- Custom stylesheet - for your changes-->
<link rel="stylesheet" <link rel="stylesheet"
href="${ctxStatic}/newdermon/css/custom.css?v=<%=System.currentTimeMillis()%>"> href="${ctxStatic}/newdermon/css/custom.css?v=<%=System.currentTimeMillis()%>">
<link rel="stylesheet" href="${ctxStatic}/newdermon/css/juery-ui-1.12.css"> <link rel="stylesheet" href="${ctxStatic}/newdermon/css/juery-ui-1.12.css">
<!-- Favicon--> <!-- Favicon-->
<link rel="shortcut icon" href="https://img.geexek.com/files/home/favicon.ico"> <link rel="shortcut icon" href="https://img.geexek.com/files/home/favicon.ico">
<link rel="stylesheet" <link rel="stylesheet"
href="${ctxStatic}/newdermon/css/custom.css?v=<%=System.currentTimeMillis()%>"> href="${ctxStatic}/newdermon/css/custom.css?v=<%=System.currentTimeMillis()%>">
<link rel="stylesheet" <link rel="stylesheet"
href="${ctxStatic}/newdermon/css/main.css?v=<%=System.currentTimeMillis()%>"> href="${ctxStatic}/newdermon/css/main.css?v=<%=System.currentTimeMillis()%>">
<link rel="stylesheet" href="${ctxStatic}/cmpt/setting.css?v=<%=System.currentTimeMillis()%>"> <link rel="stylesheet" href="${ctxStatic}/cmpt/setting.css?v=<%=System.currentTimeMillis()%>">
<link rel="stylesheet" <link rel="stylesheet"
href="${ctxStatic}/leaflet/css/leaflet.css?v=<%=System.currentTimeMillis()%>" /> href="${ctxStatic}/leaflet/css/leaflet.css?v=<%=System.currentTimeMillis()%>"/>
<link rel="stylesheet" href="${ctxStatic}/leaflet/css/leaflet_label.css" /> <link rel="stylesheet" href="${ctxStatic}/leaflet/css/leaflet_label.css"/>
<script src="${ctxStatic}/My97DatePicker/WdatePicker.js" type="text/javascript"></script> <script src="${ctxStatic}/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<script src="${ctxStatic}/newdermon/vendor/jquery/jquery.min.js"></script> <script src="${ctxStatic}/newdermon/vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctxStatic}/layer/layer.js"></script> <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}/layer/skin/layer.css">
<script <script
src="https://enroll.geexek.com/js/ueditor/ueditor.config-zs.js?v=<%=System.currentTimeMillis()%>"></script> src="https://enroll.geexek.com/js/ueditor/ueditor.config-zs.js?v=<%=System.currentTimeMillis()%>"></script>
<script <script
src="https://enroll.geexek.com/js/ueditor/ueditor.all.js?v=<%=System.currentTimeMillis()%>"></script> src="https://enroll.geexek.com/js/ueditor/ueditor.all.js?v=<%=System.currentTimeMillis()%>"></script>
<link rel="stylesheet" href="/static/cmpt/score.css?<%=System.currentTimeMillis()%>"> <link rel="stylesheet" href="/static/cmpt/score.css?<%=System.currentTimeMillis()%>">
<style> <style>
.action { .action {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
} }
.action div { .action div {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
user-select: none; user-select: none;
} }
.submit {
.submit { display: inline-block;
display: inline-block; width: 120px;
width: 120px; height: 45px;
height: 45px; text-align: center;
text-align: center; line-height: 45px;
line-height: 45px; color: white;
color: white; background: #ce3939;
background: #ce3939; border-radius: 4px;
border-radius: 4px; letter-spacing: 1px;
letter-spacing: 1px; cursor: pointer;
cursor: pointer; font-size: 16px;
font-size: 16px; }
}
.cancel {
.cancel { width: 120px;
width: 120px; height: 45px;
height: 45px; background: #949494;
background: #949494; border-radius: 4px;
border-radius: 4px; font-size: 16px;
font-size: 16px; color: #FFFFFF;
color: #FFFFFF; line-height: 45px;
line-height: 45px; text-align: center;
text-align: center; margin-right: 20px;
margin-right: 20px; }
}
.input {
.input { width: 100%;
width: 100%; height: 40px !important;
height: 40px !important; line-height: 40px !important;;
line-height: 40px !important; border: 2px solid #F4F4F4;
; border-radius: 4px;
border: 2px solid #F4F4F4; margin-right: 30px;
border-radius: 4px; margin-left: 0px;
margin-right: 30px; padding-left: 12px;
margin-left: 0px; background: rgba(247, 247, 247, 1);
padding-left: 12px; border-radius: 4px;
background: rgba(247, 247, 247, 1); border: 1px solid rgba(229, 229, 229, 1);
border-radius: 4px; }
border: 1px solid rgba(229, 229, 229, 1);
} .title {
font-size: 24px;
.title { font-weight: 500;
font-size: 24px; color: rgba(51, 51, 51, 1);
font-weight: 500; }
color: rgba(51, 51, 51, 1);
} .title-new {
font-size: 20px;
.title-new { color: rgba(51, 51, 51, 1);
font-size: 20px; margin-right: 15px;
color: rgba(51, 51, 51, 1); margin-bottom: 15px;
margin-right: 15px; width: 80px;
margin-bottom: 15px; }
width: 80px;
} .section {
display: flex;
.section { background: rgba(255, 255, 255, 1);
display: flex; border-radius: 4px;
background: rgba(255, 255, 255, 1); flex-direction: column;
border-radius: 4px; }
flex-direction: column;
} .func {
display: flex;
.func { flex-direction: column;
display: flex; /* height: 90px; */
flex-direction: column; padding: 5px 0;
/* height: 90px; */ }
padding: 5px 0;
} .tip {
font-size: 16px;
.tip { color: rgba(51, 51, 51, 1);
font-size: 16px; position: absolute;
color: rgba(51, 51, 51, 1); right: 45px;
position: absolute; top: 10px;
right: 45px; }
top: 10px;
} .road-notice {
top: 16px;
.road-notice { height: 15px;
top: 16px; width: 15px;
height: 15px; }
width: 15px;
} .road-notice-txt {
color: rgb(206, 57, 57);
.road-notice-txt { font-size: 16px;
color: rgb(206, 57, 57); width: 430px;
font-size: 16px; display: inline-block;
width: 430px; }
display: inline-block;
} .saveDiv {
display: flex;
.saveDiv { justify-content: flex-end;
display: flex; margin: 0 20px;
justify-content: flex-end; padding-top: 10px;
margin: 0 20px; }
padding-top: 10px;
} label {
/* width: auto; */
label { /* width: 200px; */
/* width: auto; */ display: flex;
/* width: 200px; */ flex-direction: row;
display: flex; align-items: center;
flex-direction: row; }
align-items: center;
}
.label-box {
display: flex;
.label-box { flex-direction: row;
display: flex; align-items: center;
flex-direction: row; }
align-items: center;
} .dialog input {
width: 100% !important;
.dialog input { }
width: 100% !important;
} .dialog label input {
width: 20px !important;
.dialog label input { height: 20px !important;
width: 20px !important; margin: 0 10px !important;
height: 20px !important; }
margin: 0 10px !important;
} .cover {
width: 100%;
.cover { height: 100px;
width: 100%; background: rgba(247, 247, 247, 1);
height: 100px; border-radius: 4px;
background: rgba(247, 247, 247, 1); border: 1px solid rgba(238, 238, 238, 1);
border-radius: 4px; display: flex;
border: 1px solid rgba(238, 238, 238, 1); justify-content: center;
display: flex; align-items: center;
justify-content: center;
align-items: center; }
} .cover-img {
width: 300px;
.cover-img { cursor: pointer;
width: 300px; background-repeat: no-repeat;
cursor: pointer; background-position: center;
background-repeat: no-repeat; background-size: cover;
background-position: center; height: 300px;
background-size: cover; }
height: 300px;
} .icon-cover {
width: 34px;
.icon-cover { height: 34px;
width: 34px; background-image: url("/static/images/icon_cover.png");
height: 34px; background-size: 100%;
background-image: url("/static/images/icon_cover.png"); background-repeat: no-repeat;
background-size: 100%; }
background-repeat: no-repeat;
} .section {
width: 100% !important;
.section { display: flex;
width: 100% !important; flex-direction: column;
display: flex; }
flex-direction: row;
align-items: center; .section-box {
} width: 100% !important;
display: flex;
.rule-field tbody tr td:first-child { flex-direction: row;
padding-left: 0 !important; align-items: center;
height: auto !important; }
}
.rule-field tbody tr td:first-child {
tbody tr td { padding-left: 0 !important;
font-size: 15px !important; height: auto !important;
} }
</style>
</head> tbody tr td {
font-size: 15px !important;
<body> }
<jsp:include page="../common/header.jsp"></jsp:include>
<div class="page-content d-flex align-items-stretch main-body"> input[type=checkbox]::before {
<jsp:include page="../common/menu.jsp"></jsp:include> border: none !important;
<div class="rght" id="sevice"> background: none !important;
<div class="section"> }
<h3 class="title">自助服务</h3>
<div class="btn-toolbar mx-2 flex justify-between" role="toolbar" input[type=checkbox]:checked::before {
aria-label="Toolbar with button groups"> border: none !important;
<div class="btn-group mr-2" role="group" aria-label="First group"> background: none !important;
<button :class="[index==typeIndex?'btn-danger':'btn-default']" }
@click="changeType(index)" type="button"
v-for="(type,index) in serviceTypes" :key="type.name" input[type=checkbox] {
class="btn btn-sm"> top: 0;
{{type.name}} left: 0;
</button> }
</div> </style>
<div class="input-group mr-2"> </head>
<input type="text" class="form-control" placeholder="请输入搜索关键字"
@keyup.enter="queryAll" v-model="keyword" <body>
aria-label="Input group example" aria-describedby="btnGroupAddon"> <jsp:include page="../common/header.jsp"></jsp:include>
</div> <div class="page-content d-flex align-items-stretch main-body">
<button class="btn btn-sm" :class="{ <jsp:include page="../common/menu.jsp"></jsp:include>
<div class="rght" id="sevice">
<div class="section">
<div>
<h3 class="title">自助服务</h3>
<div class="add-btn" @click="addService">
<span>+</span>
<span>添加自助服务</span>
</div>
</div>
<div class="btn-toolbar flex justify-between" role="toolbar"
aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button :class="[index==typeIndex?'btn-danger':'btn-default']"
@click="changeType(index)" type="button"
v-for="(type,index) in serviceTypes" :key="type.name"
class="btn btn-sm">
{{type.name}}
</button>
</div>
<div class="input-group mr-2">
<input type="text" class="form-control" placeholder="请输入搜索关键字"
@keyup.enter="queryAll" v-model="keyword"
aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>
<button class="btn btn-sm ml-auto " :class="{
'btn-danger':keyword 'btn-danger':keyword
}" @click="queryAll">搜索</button> }" @click="queryAll">
</div> 搜索
<div class="add-btn" @click="addService"> </button>
<span>+</span> </div>
<span>添加自助服务</span> </div>
</div>
</div>
<div style="margin-top: -10px;margin-bottom: 50px">
<div style="margin-top: -10px;margin-bottom: 50px"> <table style="width: 100%" class="rule-field">
<table style="width: 100%" class="rule-field"> <colgroup>
<colgroup> <col style="width:15%;">
<col style="width:20%;"> <col style="width:40%;">
<col style="width:40%;"> <col style="width:10%;">
<col style="width:10%;"> <col style="width:10%;">
<col style="width:15%;"> <col style="width:10%;">
<col style="width:15%;"> <col style="width:15%;">
</colgroup> </colgroup>
<thead> <thead>
<tr> <tr>
<th style="text-align: center">封面</th> <th style="text-align: center">封面</th>
<th style="text-align: left">服务名称</th> <th style="text-align: left">服务名称</th>
<th style="text-align: center">类型</th> <th style="text-align: center">服务类型</th>
<th style="text-align: center">状态</th> <th style="text-align: center">子类型</th>
<th style="text-align: center">操作</th> <th style="text-align: center">状态</th>
</tr> <th style="text-align: center">操作</th>
</thead> </tr>
<tbody> </thead>
<tr v-if="" v-for="item in list" :data-id="item.id"> <tbody>
<td style="text-align: center"> <tr v-if="" v-for="item in list" :data-id="item.id">
<img :src="item.imgUrl" style="width:80px;height:80px;" /> <td style="text-align: center">
</td> <img :src="item.imgUrl" style="width:80px;height:80px;"/>
</td>
<td class="name" style="text-align: left;">
<span v-text="item.title"></span> <td class="name" style="text-align: left;">
</td> <span v-text="item.title"></span>
<td style="text-align: center"> </td>
<span v-text="serviceTypes[item.type].name"></span> <td style="text-align: center">
</td> <span v-text="serviceTypes[item.type].name"></span>
<td style="text-align: center"> </td>
<td style="text-align: center">
<span v-text="item.categoryName"></span>
</td>
<td style="text-align: center">
<span class="badge badge-pill" <span class="badge badge-pill"
:class="[item.status==1?'badge-success':'badge-default']" :class="[item.status==1?'badge-success':'badge-default']"
v-text="statusType[item.status]"></span> v-text="statusType[item.status]"></span>
</td> </td>
<td style="text-align: center"> <td style="text-align: center">
<div class="action"> <div class="action">
<div class="opt edit.opt" @click="showEdit(item.id)"> <div class="opt edit.opt" @click="showEdit(item.id)">
<span class="icon-edit"></span> <span class="icon-edit"></span>
<span class="edit"> <span class="edit">
编辑 编辑
</span> </span>
</div> </div>
<div class="opt del" @click="delService(item)"> <div class="opt del" @click="delService(item)">
<span class="icon-del"></span> <span class="icon-del"></span>
<span class="del"> <span class="del">
删除 删除
</span> </span>
</div> </div>
</div> </div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<nav class="mt-2" aria-label="Page navigation"> <nav class="mt-2" aria-label="Page navigation">
<ul class="pagination"> <ul class="pagination">
<li class="page-item" v-if="page!==1" @click="preview"><a class="page-link" <li class="page-item" v-if="page!==1" @click="preview"><a class="page-link"
href="#">Previous</a></li> href="#">Previous</a></li>
<li @click="changePage(item+1)" v-for="item,index in totalPage" <li @click="changePage(item+1)" v-for="item,index in totalPage"
:key="item+'page'" class="page-item" :class="{active:(index+1)==page}"> :key="item+'page'" class="page-item" :class="{active:(index+1)==page}">
<a class="page-link" href="#">{{item}}</a> <a class="page-link" href="#">{{item}}</a>
</li> </li>
<li class="page-item" v-if="list.length===pageSize" @click="next"><a <li class="page-item" v-if="list.length===pageSize" @click="next"><a
class="page-link" href="#">Next</a></li> class="page-link" href="#">Next</a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
<div class="dialog" v-show="dialog" style="width:auto;height: 80vh; z-index: 99;display: flex;flex-direction: column;left: 50%; <div class="dialog" v-show="dialog" style="width:auto;height: 80vh; z-index: 99;display: flex;flex-direction: column;left: 50%;
transform: translateX(-50%);margin-left:0;"> transform: translateX(-50%);margin-left:0;">
<div> <div>
<span class="title" style="margin-bottom: 10px; color: #CE3939">{{title}}</span> <span class="title" style="margin-bottom: 10px; color: #CE3939">{{title}}</span>
</div> </div>
<div style="display: flex;flex-direction: column;flex:1;overflow-y: auto;"> <div style="display: flex;flex-direction: column;flex:1;overflow-y: auto;">
<div class="func"> <div class="func">
<div> <div>
<span class="title-new">名称</span> <span class="title-new">名称</span>
</div> </div>
<div> <div>
<input class="input" type="text" v-model="service.title" <input class="input" type="text" v-model="service.title"
placeholder="请输入功能名称，最多五个字符"> placeholder="请输入功能名称，最多五个字符">
</div> </div>
</div> </div>
<!-- 类型 (type) --> <!-- 类型 (type) // 服务类型（3：特色民宿：4：旅游景点，5：特色餐饮 6:当地特产 7: 应急避险 8: 医疗点位 9:运动产品） -->
<div class="func"> <div class="func">
<span class="title-new">类型</span> <span class="title-new">服务类型</span>
<div class="label-box">
<label> <div class="label-box">
<input type="radio" v-model="service.type" :value="1"> 打卡点
</label> <label>
<label> <input type="radio" v-model="service.type" :value="3"> 特色民宿
<input type="radio" v-model="service.type" :value="2"> 服务驿站 </label>
</label> <label>
<label> <input type="radio" v-model="service.type" :value="4"> 旅游景点
<input type="radio" v-model="service.type" :value="3"> 民宿 </label>
</label> <label>
<label> <input type="radio" v-model="service.type" :value="5"> 特色餐饮
<input type="radio" v-model="service.type" :value="4"> 景点 </label>
</label> <label>
<label> <input type="radio" v-model="service.type" :value="6"> 当地特产
<input type="radio" v-model="service.type" :value="5"> 餐饮 </label>
</label> <label>
</div> <input type="radio" v-model="service.type" :value="7"> 应急避险
</div> </label>
<div class="func"> <label>
<span class="title-new">地址</span> <input type="radio" v-model="service.type" :value="8"> 医疗点位
<div> </label>
<input class="input" type="text" v-model="service.address" <label>
placeholder="请输入地址"> <input type="radio" v-model="service.type" :value="9"> 运动产品
</div> </label>
</div> </div>
<div class="func"> </div>
<span class="title-new">经度</span> <!-- 类型 (type) -->
<div> <div class="func">
<input class="input" type="number" v-model="service.lng" <span class="title-new">子类型</span>
placeholder="请输入经度（如：106.639824000000000）"> <div class="label-box">
</div> <label>
</div> <input type="checkbox" v-model="service.category" :value="1"> 打卡点
<div class="func"> </label>
<span class="title-new">纬度</span> <label>
<div> <input type="checkbox" v-model="service.category" :value="2"> 服务驿站
<input class="input" type="number" v-model="service.lat" </label>
placeholder="请输入纬度（如：26.672005000000000）"> <label>
</div> <input type="checkbox" v-model="service.category" :value="3"> 民宿
</div> </label>
<div class="func"> <label>
<span class="title-new">封面</span> <input type="checkbox" v-model="service.category" :value="4"> 景点
<span style="font-size: 16px;color: #ce3939;margin:10px 0;"> </label>
<label>
<input type="checkbox" v-model="service.category" :value="5"> 餐饮
</label>
</div>
</div>
<div class="func">
<span class="title-new">地址</span>
<div>
<input class="input" type="text" v-model="service.address"
placeholder="请输入地址">
</div>
</div>
<div class="func">
<span class="title-new">经度</span>
<div>
<input class="input" type="number" v-model="service.lng"
placeholder="请输入经度（如：106.639824000000000）">
</div>
</div>
<div class="func">
<span class="title-new">纬度</span>
<div>
<input class="input" type="number" v-model="service.lat"
placeholder="请输入纬度（如：26.672005000000000）">
</div>
</div>
<div class="func">
<span class="title-new">封面</span>
<span style="font-size: 16px;color: #ce3939;margin:10px 0;">
<span <span
style="font-size: 12px;display: inline-block;border-radius: 50%;height: 18px;width: 18px;background: #ce3939;color: white;text-align: center;">注</span> style="font-size: 12px;display: inline-block;border-radius: 50%;height: 18px;width: 18px;background: #ce3939;color: white;text-align: center;">注</span>
<span style="display: inline">建议分辨率500*500</span> <span style="display: inline">建议分辨率500*500</span>
</span> </span>
<div> <div>
<label for="file"> <label for="file">
<div v-if="!service.imgUrl" class="cover"> <div v-if="!service.imgUrl" class="cover">
<span class="icon-cover"></span> <span class="icon-cover"></span>
</div>
<img v-else class="cover cover-img" :src="service.imgUrl" />
</label>
<input id="file" type="file" style="display: none" @change="uploadFile">
</div>
</div>
<div class="func">
<span class="title-new">内容</span>
<div id="container"></div>
</div>
<div class="func">
<span class="title-new">备注 1</span>
<div>
<input class="input" type="text" v-model="service.remark1"
placeholder="请输入备注 1">
</div>
</div>
<div class="func">
<span class="title-new">备注 2</span>
<div>
<input class="input" type="text" v-model="service.remark2"
placeholder="请输入备注 2">
</div>
</div>
<div class="func">
<span class="title-new">备注 3</span>
<div>
<input class="input" type="text" v-model="service.remark3"
placeholder="请输入备注 3">
</div>
</div>
<div class="func">
<span class="title-new">备注 4</span>
<div>
<input class="input" type="text" v-model="service.remark4"
placeholder="请输入备注 4">
</div>
</div>
<!-- 状态 (status) -->
<div class="func">
<span class="title-new">状态</span>
<div class="label-box">
<label>
<input type="radio" v-model="service.status" value="0"> 草稿
</label>
<label>
<input type="radio" v-model="service.status" value="1"> 发布
</label>
</div>
</div>
</div>
<div class="saveDiv">
<span @click="cancel" class="cancel">取消</span>
<span @click="submit" class="submit">保存</span>
</div>
</div>
<div v-show="dialog"
style="position: fixed;height: 100%;width: 100%;background: black;z-index: 10;opacity: 0.5;top:0px;left:0px">
</div>
</div> </div>
<script src="${ctxStatic}/vue/vue.js"></script> <img v-else class="cover cover-img" :src="service.imgUrl"/>
<script> </label>
var app = new Vue({ <input id="file" type="file" style="display: none" @change="uploadFile">
el: '#sevice', </div>
data: { </div>
editor: null, <div class="func">
list: [], <span class="title-new">内容</span>
dialog: false, <div id="container"></div>
title: '新增自助服务', </div>
service: { <div class="func">
"id": null, <span class="title-new">备注 1</span>
"userId": getUId(), <div>
"type": 1,// 子类型（1：打卡点，2：服务驿站，3：民宿：4：景点，5：餐饮） <input class="input" type="text" v-model="service.remark1"
"title": null, placeholder="请输入备注 1">
"address": null, </div>
"lng": null, </div>
"lat": null, <div class="func">
"content": null, <span class="title-new">联系方式</span>
"imgUrl": null, <div>
"remark1": null, <input class="input" type="text" v-model="service.remark2"
"remark2": null, placeholder="请输入备注 2">
"remark3": null, </div>
"remark4": null, </div>
"status": 1, // 状态（0：草稿 1：发布） <div class="func">
"delFlg": null // 删除状态（0：未删除 1：已删除） <span class="title-new">备注 3</span>
}, <div>
typeIndex: 0, <input class="input" type="text" v-model="service.remark3"
keyword: '', placeholder="请输入备注 3">
page: 1, </div>
pageSize: 10, </div>
totalPage: 1, <div class="func">
serviceTypes: { <span class="title-new">备注 4</span>
0: { <div>
name: '全部', <input class="input" type="text" v-model="service.remark4"
value: 0, placeholder="请输入备注 4">
}, </div>
1: { </div>
name: '打卡点', <!-- 状态 (status) -->
value: 1, <div class="func">
}, <span class="title-new">状态</span>
2: { <div class="label-box">
name: '服务驿站', <label>
value: 2, <input type="radio" v-model="service.status" value="0"> 草稿
}, </label>
3: { <label>
name: '民宿', <input type="radio" v-model="service.status" value="1"> 发布
value: 3, </label>
}, </div>
4: { </div>
name: '景点', </div>
value: 4, <div class="saveDiv">
}, <span @click="cancel" class="cancel">取消</span>
5: { <span @click="submit" class="submit">保存</span>
name: '餐饮', </div>
value: 5, </div>
}, <div v-show="dialog"
}, style="position: fixed;height: 100%;width: 100%;background: black;z-index: 10;opacity: 0.5;top:0px;left:0px">
statusType: {
0: '草稿', </div>
1: '发布' </div>
} <script src="${ctxStatic}/vue/vue.js"></script>
}, <script>
mounted() { var app = new Vue({
const editor = UE.getEditor('container'); el: '#sevice',
this.editor = editor data: {
}, editor: null,
methods: { list: [],
// 展示dialog dialog: false,
addService() { title: '新增自助服务',
this.dialog = !this.dialog; service: {
this.resetForm(); "id": null,
}, "userId": getUId(),
changePage(page) { "type": 3, // 服务类型（3：特色民宿：4：旅游景点，5：特色餐饮 6:当地特产 7: 应急避险 8: 医疗点位 9:运动产品）
this.page = page "category": 1, // 子类型（1：打卡点，2：服务驿站，3：民宿：4：景点，5：餐饮）
this.queryAll() "title": null,
}, "address": null,
changeType(index) { "lng": null,
this.page = 1 "lat": null,
this.typeIndex = index "content": null,
this.queryAll() "imgUrl": null,
}, "remark1": null,
next() { "remark2": null,
this.page += 1 "remark3": null,
this.queryAll() "remark4": null,
}, "status": [], // 状态（0：草稿 1：发布）
preview() { "delFlg": null // 删除状态（0：未删除 1：已删除）
this.page -= 1 },
this.queryAll() typeIndex: 0,
}, keyword: '',
// 重置表单 page: 1,
resetForm() { pageSize: 10,
this.service = { totalPage: 1,
id: null, // 3：特色民宿：4：旅游景点，5：特色餐饮 6:当地特产 7: 应急避险 8: 医疗点位 9:运动产品
userId: getUId(), serviceTypes: {
type: 1, 0: {
title: '', name: '全部',
address: null, value: 0,
lng: null, },
lat: null, 3: {
content: null, name: '特色民宿',
imgUrl: null, value: 3,
remark1: null, },
remark2: null, 4: {
remark3: null, name: '旅游景点',
remark4: null, value: 4,
status: 1, },
delFlg: null, 5: {
}; name: '特色餐饮',
}, value: 5,
// 编辑 },
showEdit(id) { 6: {
this.getDetail(id); name: '当地特产',
}, value: 6,
// 删除 },
delService(data) { 7: {
layer.confirm("确认要删除吗？", function () { name: '应急避险',
$.ajax({ value: 7,
url: '/api/joyfulRoad/delJoyfulRichText', },
data: JSON.stringify(data), // 将 data 转换为 JSON 字符串 8: {
type: 'post', name: '医疗点位',
contentType: 'application/json', value: 8,
beforeSend: () => { },
layer.load() 9: {
}, name: '运动产品',
success: () => { value: 9,
layer.msg('删除成功！'); },
}, },
complete: () => { // 子类目
layer.closeAll() categoryOptions: [
app.queryAll(); {
} name: '打卡点',
}); value: 1,
}); },
}, {
// 保存 name: '服务驿站',
submit() { value: 2,
const service = this.service },
// 假设 service 对象已经定义并初始化 {
if (!service.imgUrl) { name: '民宿',
layer.msg("封面不能为空！", { icon: 5, duration: 1500 }); value: 3,
return; },
} {
name: '景点',
if (!service.title) { value: 4,
layer.msg("标题不能为空！", { icon: 5, duration: 1500 }); },
return; {
} name: '餐饮',
value: 5,
if (!service.address) { },
layer.msg("地址不能为空！", { icon: 5, duration: 1500 }); ],
return; statusType: {
} 0: '草稿',
1: '发布'
if (!service.lng || !service.lat) { }
layer.msg("经纬度不能为空！", { icon: 5, duration: 1500 }); },
return; mounted() {
} const editor = UE.getEditor('container');
var content = this.editor.getContent(); this.editor = editor
},
if (!content) { methods: {
layer.msg("内容不能为空！", { icon: 5, duration: 1500 }); // 展示dialog
return; addService() {
} this.dialog = !this.dialog;
this.service.content = content this.resetForm();
},
const url = this.service.id ? '/api/joyfulRoad/updJoyfulRichText' : '/api/joyfulRoad/insJoyfulRichText' changePage(page) {
$.ajax({ this.page = page
url: url, this.queryAll()
data: JSON.stringify(service), // 将 data 转换为 JSON 字符串 },
type: 'post', changeType(index) {
contentType: 'application/json', this.page = 1
beforeSend: () => { this.typeIndex = index
layer.load() this.queryAll()
}, },
success: (data) => { next() {
layer.msg('保存成功！'); this.page += 1
app.$data.dialog = false; this.queryAll()
app.queryAll(); },
}, preview() {
complete: () => { this.page -= 1
layer.closeAll() this.queryAll()
} },
}) // 重置表单
}, resetForm() {
// 返回 this.service = {
cancel() { id: null,
this.dialog = false; userId: getUId(),
}, type: 3,
// 查询所有 title: '',
queryAll() { address: null,
if (!getCId) return lng: null,
const type = this.serviceTypes[this.typeIndex].value === 0 ? null : this.serviceTypes[this.typeIndex].value lat: null,
const url = '/api/joyfulRoad/getJoyfulRichTextList/' + this.page + '/' + this.pageSize content: null,
$.ajax({ imgUrl: null,
type: 'POST', remark1: null,
contentType: 'application/json', remark2: null,
data: JSON.stringify({ remark3: null,
type, remark4: null,
title: this.keyword status: 1,
}), delFlg: null,
url, category: []
beforeSend: () => { };
layer.load() },
}, // 编辑
complete: () => { showEdit(id) {
layer.closeAll() this.getDetail(id);
}, },
success: (data) => { // 删除
this.list = data.content; delService(data) {
if (data.content.length === this.pageSize) this.totalPage = this.page + 1 layer.confirm("确认要删除吗？", function () {
} $.ajax({
}) url: '/api/joyfulRoad/delJoyfulRichText',
}, data: JSON.stringify(data), // 将 data 转换为 JSON 字符串
// 获取详情 type: 'post',
getDetail(id) { contentType: 'application/json',
$.ajax({ beforeSend: () => {
url: '/api/joyfulRoad/getJoyfulRichText/' + id, layer.load()
success: (data) => { },
if (data.content) { success: () => {
this.service = data.content; layer.msg('删除成功！');
this.editor.setContent(data.content.content) },
this.dialog = true; complete: () => {
} layer.closeAll()
},
beforeSend: () => {
layer.load()
},
complete: () => {
layer.closeAll()
},
});
},
//文件上传处理
uploadFile(obj) {
logoFile = obj.target.files[0];
if (logoFile.type && logoFile.type.indexOf("image") == -1) {
return layer.msg('请上传图片', { icon: 5 })
}
var reads = new FileReader();
reads.readAsDataURL(logoFile);
reads.onload = function () {
//将处理完的图片文件上传到阿里云服务器
//上传LOGO图片
var formData = new FormData();
formData.append("uploadImg", logoFile);
$.ajax({
url: 'https://event.geexek.com/upload/file.do', /*接口域名地址*/
type: 'post',
data: formData,
contentType: false,
processData: false,
success: function (res) {
if (res.code == "1") {
layer.msg('上传成功', { icon: 1, time: 1500 });
app.$data.service.imgUrl = res.result
} else {
console.log(res);
}
},
beforeSend: () => {
layer.load()
},
complete: () => {
layer.closeAll()
},
})
};
}
}
});
app.queryAll(); app.queryAll();
</script> }
</body> });
});
</html> },
\ No newline at end of file // 保存
submit() {
const service = {...this.service}
// 假设 service 对象已经定义并初始化
if (!service.imgUrl) {
layer.msg("封面不能为空！", {icon: 5, duration: 1500});
return;
}
if (!service.title) {
layer.msg("标题不能为空！", {icon: 5, duration: 1500});
return;
}
if (!service.address) {
layer.msg("地址不能为空！", {icon: 5, duration: 1500});
return;
}
if (!service.lng || !service.lat) {
layer.msg("经纬度不能为空！", {icon: 5, duration: 1500});
return;
}
var content = this.editor.getContent();
if (!content) {
layer.msg("内容不能为空！", {icon: 5, duration: 1500});
return;
}
service.content = content
service.category = service.category.join(',')
const url = this.service.id ? '/api/joyfulRoad/updJoyfulRichText' : '/api/joyfulRoad/insJoyfulRichText'
$.ajax({
url: url,
data: JSON.stringify(service), // 将 data 转换为 JSON 字符串
type: 'post',
contentType: 'application/json',
beforeSend: () => {
layer.load()
},
success: (data) => {
layer.msg('保存成功！');
app.$data.dialog = false;
app.queryAll();
},
complete: () => {
layer.closeAll()
}
})
},
// 返回
cancel() {
this.dialog = false;
},
// 查询所有
queryAll() {
if (!getCId) return
const type = this.serviceTypes[this.typeIndex].value === 0 ? null : this.serviceTypes[this.typeIndex].value
const url = '/api/joyfulRoad/getJoyfulRichTextList/' + this.page + '/' + this.pageSize
$.ajax({
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
type,
title: this.keyword
}),
url,
beforeSend: () => {
layer.load()
},
complete: () => {
layer.closeAll()
},
success: (data) => {
this.list = data.content.map(service => {
const category = service?.category ? service.category.split(",") : [];
const categoryName = this.categoryOptions.filter(v => category.includes(v.value.toString()))?.map((v) => v.name)?.join()
return {
...service,
categoryName: categoryName || '未设置'
}
});
if (data.content.length === this.pageSize) this.totalPage = this.page + 1
}
})
},
// 获取详情
getDetail(id) {
$.ajax({
url: '/api/joyfulRoad/getJoyfulRichText/' + id,
success: (data) => {
if (data.content) {
this.service = {...data.content, category: data.content?.category?.split(',') ?? []};
this.editor.setContent(data.content.content)
this.dialog = true;
}
},
beforeSend: () => {
layer.load()
},
complete: () => {
layer.closeAll()
},
});
},
//文件上传处理
uploadFile(obj) {
logoFile = obj.target.files[0];
if (logoFile.type && logoFile.type.indexOf("image") == -1) {
return layer.msg('请上传图片', {icon: 5})
}
var reads = new FileReader();
reads.readAsDataURL(logoFile);
reads.onload = function () {
//将处理完的图片文件上传到阿里云服务器
//上传LOGO图片
var formData = new FormData();
formData.append("uploadImg", logoFile);
$.ajax({
url: 'https://event.geexek.com/upload/file.do', /*接口域名地址*/
type: 'post',
data: formData,
contentType: false,
processData: false,
success: function (res) {
if (res.code == "1") {
layer.msg('上传成功', {icon: 1, time: 1500});
app.$data.service.imgUrl = res.result
} else {
console.log(res);
}
},
beforeSend: () => {
layer.load()
},
complete: () => {
layer.closeAll()
},
})
};
}
}
});
app.queryAll();
</script>
</body>
</html>
\ 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