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;
@Data
public class JoyfulRichTextBean {
// 服务类型（3：特色民宿：4：旅游景点，5：特色餐饮 6:当地特产 7: 应急避险 8: 医疗点位 9:运动产品）
private String type;
// 点位类型 （1：打卡点，2：服务驿站，3：民宿：4：景点，5：餐饮）
private String category;
private String title;
private String lng;
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 {
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 @@
INSERT INTO gksite.joyful_rich_text(
userId
,type
,category
,title
,address
,lng
......@@ -23,6 +24,7 @@
) VALUES (
#{userId}
,#{type}
,#{category}
,#{title}
,#{address}
,#{lng}
......@@ -46,6 +48,7 @@
SET
userId = #{userId}
,type = #{type}
,category = #{category}
,title = #{title}
,address = #{address}
,lng = #{lng}
......@@ -75,25 +78,23 @@
</update>
<select id="getJoyfulRichTextById" resultType="com.dlbridge.jadp.plugins.cmpt.dao.model.JoyfulRichText">
SELECT
id
,userId
,type
,title
,address
,lng
,lat
,content
,img_url AS imgUrl
,remark1
,remark2
,remark3
,remark4
,status
FROM
gksite.joyful_rich_text
WHERE
id = #{id}
SELECT id
, userId
, type
, title
, address
, lng
, lat
, content
, img_url AS imgUrl
, remark1
, remark2
, remark3
, remark4
, status
, category
FROM gksite.joyful_rich_text
WHERE id = #{id}
</select>
<select id="getJoyfulRichTextList" resultType="com.dlbridge.jadp.plugins.cmpt.dao.model.JoyfulRichText">
......@@ -110,6 +111,7 @@
,remark4
,type
,status
,category
FROM
gksite.joyful_rich_text
WHERE
......@@ -120,5 +122,8 @@
<if test="title != null and title != ''">
AND title like concat('%',#{title},'%')
</if>
<if test="category != null and category != ''">
AND FIND_IN_SET(#{category}, category)
</if>
</select>
</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;
public class JoyfulRichText {
private String id;
private String userId;
// 服务类型（3：特色民宿：4：旅游景点，5：特色餐饮 6:当地特产 7: 应急避险 8: 医疗点位 9:运动产品）
private String type;
// 点位类型 （1：打卡点，2：服务驿站，3：民宿：4：景点，5：餐饮）
private String category;
private String title;
private String address;
private String lng;
......
src/main/java/com/dlbridge/jadp/plugins/cmpt/service/JoyfulRichTextService.java
View file @ cdbfa57e
......@@ -82,7 +82,7 @@ public class JoyfulRichTextService {
* @return
*/
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())) {
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" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!doctype html>
<html>
<head>
<title>自助服务</title>
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="${ctxStatic}/newdermon/vendor/bootstrap/css/bootstrap.min.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()%>">
<link rel="stylesheet" href="${ctxStatic}/newdermon/css/juery-ui-1.12.css">
<!-- Favicon-->
<link rel="shortcut icon" href="https://img.geexek.com/files/home/favicon.ico">
<link rel="stylesheet"
href="${ctxStatic}/newdermon/css/custom.css?v=<%=System.currentTimeMillis()%>">
<link rel="stylesheet"
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}/leaflet/css/leaflet.css?v=<%=System.currentTimeMillis()%>" />
<link rel="stylesheet" href="${ctxStatic}/leaflet/css/leaflet_label.css" />
<script src="${ctxStatic}/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<script src="${ctxStatic}/newdermon/vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctxStatic}/layer/layer.js"></script>
<link rel="stylesheet" href="${ctxStatic}/layer/skin/layer.css">
<script
src="https://enroll.geexek.com/js/ueditor/ueditor.config-zs.js?v=<%=System.currentTimeMillis()%>"></script>
<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()%>">
<style>
.action {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.action div {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
user-select: none;
}
.submit {
display: inline-block;
width: 120px;
height: 45px;
text-align: center;
line-height: 45px;
color: white;
background: #ce3939;
border-radius: 4px;
letter-spacing: 1px;
cursor: pointer;
font-size: 16px;
}
.cancel {
width: 120px;
height: 45px;
background: #949494;
border-radius: 4px;
font-size: 16px;
color: #FFFFFF;
line-height: 45px;
text-align: center;
margin-right: 20px;
}
.input {
width: 100%;
height: 40px !important;
line-height: 40px !important;
;
border: 2px solid #F4F4F4;
border-radius: 4px;
margin-right: 30px;
margin-left: 0px;
padding-left: 12px;
background: rgba(247, 247, 247, 1);
border-radius: 4px;
border: 1px solid rgba(229, 229, 229, 1);
}
.title {
font-size: 24px;
font-weight: 500;
color: rgba(51, 51, 51, 1);
}
.title-new {
font-size: 20px;
color: rgba(51, 51, 51, 1);
margin-right: 15px;
margin-bottom: 15px;
width: 80px;
}
.section {
display: flex;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
flex-direction: column;
}
.func {
display: flex;
flex-direction: column;
/* height: 90px; */
padding: 5px 0;
}
.tip {
font-size: 16px;
color: rgba(51, 51, 51, 1);
position: absolute;
right: 45px;
top: 10px;
}
.road-notice {
top: 16px;
height: 15px;
width: 15px;
}
.road-notice-txt {
color: rgb(206, 57, 57);
font-size: 16px;
width: 430px;
display: inline-block;
}
.saveDiv {
display: flex;
justify-content: flex-end;
margin: 0 20px;
padding-top: 10px;
}
label {
/* width: auto; */
/* width: 200px; */
display: flex;
flex-direction: row;
align-items: center;
}
.label-box {
display: flex;
flex-direction: row;
align-items: center;
}
.dialog input {
width: 100% !important;
}
.dialog label input {
width: 20px !important;
height: 20px !important;
margin: 0 10px !important;
}
.cover {
width: 100%;
height: 100px;
background: rgba(247, 247, 247, 1);
border-radius: 4px;
border: 1px solid rgba(238, 238, 238, 1);
display: flex;
justify-content: center;
align-items: center;
}
.cover-img {
width: 300px;
cursor: pointer;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 300px;
}
.icon-cover {
width: 34px;
height: 34px;
background-image: url("/static/images/icon_cover.png");
background-size: 100%;
background-repeat: no-repeat;
}
.section {
width: 100% !important;
display: flex;
flex-direction: row;
align-items: center;
}
.rule-field tbody tr td:first-child {
padding-left: 0 !important;
height: auto !important;
}
tbody tr td {
font-size: 15px !important;
}
</style>
</head>
<body>
<jsp:include page="../common/header.jsp"></jsp:include>
<div class="page-content d-flex align-items-stretch main-body">
<jsp:include page="../common/menu.jsp"></jsp:include>
<div class="rght" id="sevice">
<div class="section">
<h3 class="title">自助服务</h3>
<div class="btn-toolbar mx-2 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" :class="{
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!doctype html>
<html>
<head>
<title>自助服务</title>
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="${ctxStatic}/newdermon/vendor/bootstrap/css/bootstrap.min.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()%>">
<link rel="stylesheet" href="${ctxStatic}/newdermon/css/juery-ui-1.12.css">
<!-- Favicon-->
<link rel="shortcut icon" href="https://img.geexek.com/files/home/favicon.ico">
<link rel="stylesheet"
href="${ctxStatic}/newdermon/css/custom.css?v=<%=System.currentTimeMillis()%>">
<link rel="stylesheet"
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}/leaflet/css/leaflet.css?v=<%=System.currentTimeMillis()%>"/>
<link rel="stylesheet" href="${ctxStatic}/leaflet/css/leaflet_label.css"/>
<script src="${ctxStatic}/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<script src="${ctxStatic}/newdermon/vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctxStatic}/layer/layer.js"></script>
<link rel="stylesheet" href="${ctxStatic}/layer/skin/layer.css">
<script
src="https://enroll.geexek.com/js/ueditor/ueditor.config-zs.js?v=<%=System.currentTimeMillis()%>"></script>
<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()%>">
<style>
.action {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.action div {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
user-select: none;
}
.submit {
display: inline-block;
width: 120px;
height: 45px;
text-align: center;
line-height: 45px;
color: white;
background: #ce3939;
border-radius: 4px;
letter-spacing: 1px;
cursor: pointer;
font-size: 16px;
}
.cancel {
width: 120px;
height: 45px;
background: #949494;
border-radius: 4px;
font-size: 16px;
color: #FFFFFF;
line-height: 45px;
text-align: center;
margin-right: 20px;
}
.input {
width: 100%;
height: 40px !important;
line-height: 40px !important;;
border: 2px solid #F4F4F4;
border-radius: 4px;
margin-right: 30px;
margin-left: 0px;
padding-left: 12px;
background: rgba(247, 247, 247, 1);
border-radius: 4px;
border: 1px solid rgba(229, 229, 229, 1);
}
.title {
font-size: 24px;
font-weight: 500;
color: rgba(51, 51, 51, 1);
}
.title-new {
font-size: 20px;
color: rgba(51, 51, 51, 1);
margin-right: 15px;
margin-bottom: 15px;
width: 80px;
}
.section {
display: flex;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
flex-direction: column;
}
.func {
display: flex;
flex-direction: column;
/* height: 90px; */
padding: 5px 0;
}
.tip {
font-size: 16px;
color: rgba(51, 51, 51, 1);
position: absolute;
right: 45px;
top: 10px;
}
.road-notice {
top: 16px;
height: 15px;
width: 15px;
}
.road-notice-txt {
color: rgb(206, 57, 57);
font-size: 16px;
width: 430px;
display: inline-block;
}
.saveDiv {
display: flex;
justify-content: flex-end;
margin: 0 20px;
padding-top: 10px;
}
label {
/* width: auto; */
/* width: 200px; */
display: flex;
flex-direction: row;
align-items: center;
}
.label-box {
display: flex;
flex-direction: row;
align-items: center;
}
.dialog input {
width: 100% !important;
}
.dialog label input {
width: 20px !important;
height: 20px !important;
margin: 0 10px !important;
}
.cover {
width: 100%;
height: 100px;
background: rgba(247, 247, 247, 1);
border-radius: 4px;
border: 1px solid rgba(238, 238, 238, 1);
display: flex;
justify-content: center;
align-items: center;
}
.cover-img {
width: 300px;
cursor: pointer;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 300px;
}
.icon-cover {
width: 34px;
height: 34px;
background-image: url("/static/images/icon_cover.png");
background-size: 100%;
background-repeat: no-repeat;
}
.section {
width: 100% !important;
display: flex;
flex-direction: column;
}
.section-box {
width: 100% !important;
display: flex;
flex-direction: row;
align-items: center;
}
.rule-field tbody tr td:first-child {
padding-left: 0 !important;
height: auto !important;
}
tbody tr td {
font-size: 15px !important;
}
input[type=checkbox]::before {
border: none !important;
background: none !important;
}
input[type=checkbox]:checked::before {
border: none !important;
background: none !important;
}
input[type=checkbox] {
top: 0;
left: 0;
}
</style>
</head>
<body>
<jsp:include page="../common/header.jsp"></jsp:include>
<div class="page-content d-flex align-items-stretch main-body">
<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
}" @click="queryAll">搜索</button>
</div>
<div class="add-btn" @click="addService">
<span>+</span>
<span>添加自助服务</span>
</div>
</div>
<div style="margin-top: -10px;margin-bottom: 50px">
<table style="width: 100%" class="rule-field">
<colgroup>
<col style="width:20%;">
<col style="width:40%;">
<col style="width:10%;">
<col style="width:15%;">
<col style="width:15%;">
</colgroup>
<thead>
<tr>
<th style="text-align: center">封面</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>
</tr>
</thead>
<tbody>
<tr v-if="" v-for="item in list" :data-id="item.id">
<td style="text-align: center">
<img :src="item.imgUrl" style="width:80px;height:80px;" />
</td>
<td class="name" style="text-align: left;">
<span v-text="item.title"></span>
</td>
<td style="text-align: center">
<span v-text="serviceTypes[item.type].name"></span>
</td>
<td style="text-align: center">
}" @click="queryAll">
搜索
</button>
</div>
</div>
<div style="margin-top: -10px;margin-bottom: 50px">
<table style="width: 100%" class="rule-field">
<colgroup>
<col style="width:15%;">
<col style="width:40%;">
<col style="width:10%;">
<col style="width:10%;">
<col style="width:10%;">
<col style="width:15%;">
</colgroup>
<thead>
<tr>
<th style="text-align: center">封面</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>
</tr>
</thead>
<tbody>
<tr v-if="" v-for="item in list" :data-id="item.id">
<td style="text-align: center">
<img :src="item.imgUrl" style="width:80px;height:80px;"/>
</td>
<td class="name" style="text-align: left;">
<span v-text="item.title"></span>
</td>
<td style="text-align: center">
<span v-text="serviceTypes[item.type].name"></span>
</td>
<td style="text-align: center">
<span v-text="item.categoryName"></span>
</td>
<td style="text-align: center">
<span class="badge badge-pill"
:class="[item.status==1?'badge-success':'badge-default']"
v-text="statusType[item.status]"></span>
</td>
<td style="text-align: center">
<div class="action">
<div class="opt edit.opt" @click="showEdit(item.id)">
<span class="icon-edit"></span>
<span class="edit">
:class="[item.status==1?'badge-success':'badge-default']"
v-text="statusType[item.status]"></span>
</td>
<td style="text-align: center">
<div class="action">
<div class="opt edit.opt" @click="showEdit(item.id)">
<span class="icon-edit"></span>
<span class="edit">
编辑
</span>
</div>
<div class="opt del" @click="delService(item)">
<span class="icon-del"></span>
<span class="del">
</div>
<div class="opt del" @click="delService(item)">
<span class="icon-del"></span>
<span class="del">
删除
</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<nav class="mt-2" aria-label="Page navigation">
<ul class="pagination">
<li class="page-item" v-if="page!==1" @click="preview"><a class="page-link"
href="#">Previous</a></li>
<li @click="changePage(item+1)" v-for="item,index in totalPage"
:key="item+'page'" class="page-item" :class="{active:(index+1)==page}">
<a class="page-link" href="#">{{item}}</a>
</li>
<li class="page-item" v-if="list.length===pageSize" @click="next"><a
class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
<div class="dialog" v-show="dialog" style="width:auto;height: 80vh; z-index: 99;display: flex;flex-direction: column;left: 50%;
</div>
</div>
</td>
</tr>
</tbody>
</table>
<nav class="mt-2" aria-label="Page navigation">
<ul class="pagination">
<li class="page-item" v-if="page!==1" @click="preview"><a class="page-link"
href="#">Previous</a></li>
<li @click="changePage(item+1)" v-for="item,index in totalPage"
:key="item+'page'" class="page-item" :class="{active:(index+1)==page}">
<a class="page-link" href="#">{{item}}</a>
</li>
<li class="page-item" v-if="list.length===pageSize" @click="next"><a
class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
<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;">
<div>
<span class="title" style="margin-bottom: 10px; color: #CE3939">{{title}}</span>
</div>
<div style="display: flex;flex-direction: column;flex:1;overflow-y: auto;">
<div class="func">
<div>
<span class="title-new">名称</span>
</div>
<div>
<input class="input" type="text" v-model="service.title"
placeholder="请输入功能名称，最多五个字符">
</div>
</div>
<!-- 类型 (type) -->
<div class="func">
<span class="title-new">类型</span>
<div class="label-box">
<label>
<input type="radio" v-model="service.type" :value="1"> 打卡点
</label>
<label>
<input type="radio" v-model="service.type" :value="2"> 服务驿站
</label>
<label>
<input type="radio" v-model="service.type" :value="3"> 民宿
</label>
<label>
<input type="radio" v-model="service.type" :value="4"> 景点
</label>
<label>
<input type="radio" v-model="service.type" :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;">
<div>
<span class="title" style="margin-bottom: 10px; color: #CE3939">{{title}}</span>
</div>
<div style="display: flex;flex-direction: column;flex:1;overflow-y: auto;">
<div class="func">
<div>
<span class="title-new">名称</span>
</div>
<div>
<input class="input" type="text" v-model="service.title"
placeholder="请输入功能名称，最多五个字符">
</div>
</div>
<!-- 类型 (type) // 服务类型（3：特色民宿：4：旅游景点，5：特色餐饮 6:当地特产 7: 应急避险 8: 医疗点位 9:运动产品） -->
<div class="func">
<span class="title-new">服务类型</span>
<div class="label-box">
<label>
<input type="radio" v-model="service.type" :value="3"> 特色民宿
</label>
<label>
<input type="radio" v-model="service.type" :value="4"> 旅游景点
</label>
<label>
<input type="radio" v-model="service.type" :value="5"> 特色餐饮
</label>
<label>
<input type="radio" v-model="service.type" :value="6"> 当地特产
</label>
<label>
<input type="radio" v-model="service.type" :value="7"> 应急避险
</label>
<label>
<input type="radio" v-model="service.type" :value="8"> 医疗点位
</label>
<label>
<input type="radio" v-model="service.type" :value="9"> 运动产品
</label>
</div>
</div>
<!-- 类型 (type) -->
<div class="func">
<span class="title-new">子类型</span>
<div class="label-box">
<label>
<input type="checkbox" v-model="service.category" :value="1"> 打卡点
</label>
<label>
<input type="checkbox" v-model="service.category" :value="2"> 服务驿站
</label>
<label>
<input type="checkbox" v-model="service.category" :value="3"> 民宿
</label>
<label>
<input type="checkbox" v-model="service.category" :value="4"> 景点
</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
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>
<div>
<label for="file">
<div v-if="!service.imgUrl" class="cover">
<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>
<label for="file">
<div v-if="!service.imgUrl" class="cover">
<span class="icon-cover"></span>
</div>
<script src="${ctxStatic}/vue/vue.js"></script>
<script>
var app = new Vue({
el: '#sevice',
data: {
editor: null,
list: [],
dialog: false,
title: '新增自助服务',
service: {
"id": null,
"userId": getUId(),
"type": 1,// 子类型（1：打卡点，2：服务驿站，3：民宿：4：景点，5：餐饮）
"title": null,
"address": null,
"lng": null,
"lat": null,
"content": null,
"imgUrl": null,
"remark1": null,
"remark2": null,
"remark3": null,
"remark4": null,
"status": 1, // 状态（0：草稿 1：发布）
"delFlg": null // 删除状态（0：未删除 1：已删除）
},
typeIndex: 0,
keyword: '',
page: 1,
pageSize: 10,
totalPage: 1,
serviceTypes: {
0: {
name: '全部',
value: 0,
},
1: {
name: '打卡点',
value: 1,
},
2: {
name: '服务驿站',
value: 2,
},
3: {
name: '民宿',
value: 3,
},
4: {
name: '景点',
value: 4,
},
5: {
name: '餐饮',
value: 5,
},
},
statusType: {
0: '草稿',
1: '发布'
}
},
mounted() {
const editor = UE.getEditor('container');
this.editor = editor
},
methods: {
// 展示dialog
addService() {
this.dialog = !this.dialog;
this.resetForm();
},
changePage(page) {
this.page = page
this.queryAll()
},
changeType(index) {
this.page = 1
this.typeIndex = index
this.queryAll()
},
next() {
this.page += 1
this.queryAll()
},
preview() {
this.page -= 1
this.queryAll()
},
// 重置表单
resetForm() {
this.service = {
id: null,
userId: getUId(),
type: 1,
title: '',
address: null,
lng: null,
lat: null,
content: null,
imgUrl: null,
remark1: null,
remark2: null,
remark3: null,
remark4: null,
status: 1,
delFlg: null,
};
},
// 编辑
showEdit(id) {
this.getDetail(id);
},
// 删除
delService(data) {
layer.confirm("确认要删除吗？", function () {
$.ajax({
url: '/api/joyfulRoad/delJoyfulRichText',
data: JSON.stringify(data), // 将 data 转换为 JSON 字符串
type: 'post',
contentType: 'application/json',
beforeSend: () => {
layer.load()
},
success: () => {
layer.msg('删除成功！');
},
complete: () => {
layer.closeAll()
app.queryAll();
}
});
});
},
// 保存
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;
}
this.service.content = content
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;
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;
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()
},
})
};
}
}
});
<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">联系方式</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>
<script src="${ctxStatic}/vue/vue.js"></script>
<script>
var app = new Vue({
el: '#sevice',
data: {
editor: null,
list: [],
dialog: false,
title: '新增自助服务',
service: {
"id": null,
"userId": getUId(),
"type": 3, // 服务类型（3：特色民宿：4：旅游景点，5：特色餐饮 6:当地特产 7: 应急避险 8: 医疗点位 9:运动产品）
"category": 1, // 子类型（1：打卡点，2：服务驿站，3：民宿：4：景点，5：餐饮）
"title": null,
"address": null,
"lng": null,
"lat": null,
"content": null,
"imgUrl": null,
"remark1": null,
"remark2": null,
"remark3": null,
"remark4": null,
"status": [], // 状态（0：草稿 1：发布）
"delFlg": null // 删除状态（0：未删除 1：已删除）
},
typeIndex: 0,
keyword: '',
page: 1,
pageSize: 10,
totalPage: 1,
// 3：特色民宿：4：旅游景点，5：特色餐饮 6:当地特产 7: 应急避险 8: 医疗点位 9:运动产品
serviceTypes: {
0: {
name: '全部',
value: 0,
},
3: {
name: '特色民宿',
value: 3,
},
4: {
name: '旅游景点',
value: 4,
},
5: {
name: '特色餐饮',
value: 5,
},
6: {
name: '当地特产',
value: 6,
},
7: {
name: '应急避险',
value: 7,
},
8: {
name: '医疗点位',
value: 8,
},
9: {
name: '运动产品',
value: 9,
},
},
// 子类目
categoryOptions: [
{
name: '打卡点',
value: 1,
},
{
name: '服务驿站',
value: 2,
},
{
name: '民宿',
value: 3,
},
{
name: '景点',
value: 4,
},
{
name: '餐饮',
value: 5,
},
],
statusType: {
0: '草稿',
1: '发布'
}
},
mounted() {
const editor = UE.getEditor('container');
this.editor = editor
},
methods: {
// 展示dialog
addService() {
this.dialog = !this.dialog;
this.resetForm();
},
changePage(page) {
this.page = page
this.queryAll()
},
changeType(index) {
this.page = 1
this.typeIndex = index
this.queryAll()
},
next() {
this.page += 1
this.queryAll()
},
preview() {
this.page -= 1
this.queryAll()
},
// 重置表单
resetForm() {
this.service = {
id: null,
userId: getUId(),
type: 3,
title: '',
address: null,
lng: null,
lat: null,
content: null,
imgUrl: null,
remark1: null,
remark2: null,
remark3: null,
remark4: null,
status: 1,
delFlg: null,
category: []
};
},
// 编辑
showEdit(id) {
this.getDetail(id);
},
// 删除
delService(data) {
layer.confirm("确认要删除吗？", function () {
$.ajax({
url: '/api/joyfulRoad/delJoyfulRichText',
data: JSON.stringify(data), // 将 data 转换为 JSON 字符串
type: 'post',
contentType: 'application/json',
beforeSend: () => {
layer.load()
},
success: () => {
layer.msg('删除成功！');
},
complete: () => {
layer.closeAll()
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