You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
199 lines
8.6 KiB
199 lines
8.6 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
|
<meta name="renderer" content="webkit"> |
|
<meta name="viewport" |
|
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> |
|
<meta name="robots" content="index, follow"/> |
|
<title>{ms:channel type="parent"}${field.typetitle}{/ms:channel}</title> |
|
<meta name="keywords" content="${field.typekeyword}"> |
|
<meta name="description" content="${field.typedescrip}"> |
|
<meta http-equiv="Cache-Control" content="no-transform"/> |
|
<meta http-equiv="Cache-Control" content="no-siteapp"/> |
|
<meta name="applicable-device" content="pc,mobile"/> |
|
<link href="/{ms:global.style/}css/style.css" rel="stylesheet"/> |
|
<link href="/{ms:global.style/}css/css.css" rel="stylesheet"/> |
|
<script src="/{ms:global.style/}js/jquery-1.8.3.min.js"></script> |
|
<script type="text/javascript" src="/{ms:global.style/}js/jquery.superslide.2.1.1.js">//pc导航</script> |
|
<script src="/{ms:global.style/}js/anim.js">//动画</script> |
|
<script type="text/javascript" src="/{ms:global.style/}js/basic.js"></script> |
|
<!--引入vue库--> |
|
<script type="text/javascript" src="/static/plugins/vue/2.6.9/vue.min.js"></script> |
|
<!--引入element-ui库--> |
|
<script src="${base}/static/plugins/element-ui/2.15.8/index.min.js"></script> |
|
<link rel="stylesheet" href="/static/plugins/element-ui/2.15.8/theme-chalk/index.min.css"> |
|
<!--网络请求框架--> |
|
<script src="/static/plugins/axios/0.18.0/axios.min.js"></script> |
|
<script src="/static/plugins/qs/6.6.0/qs.min.js"></script> |
|
<script src="/static/plugins/ms/2.0/ms.umd.js"></script> |
|
<script src="/static/plugins/ms/2.0/ms-el-form.umd.js"></script> |
|
</head> |
|
<body> |
|
<#include "header.htm" /> |
|
<div class="o_big"> |
|
{ms:channel type="parent"} |
|
<img src="{@ms:file field.typelitpic/}" alt="CMS,免费CMS,免费开源Java CMS,CMS系统,Java CMS,CMS内容管理系统,企业CMS,HTML网页模板,CMS模板,CMS源码,网站源码,信创系统软件,安可系统,网站建设,模板网站,建站模板,建站工具,建站平台,建站工具"/> |
|
<h1>${field.typetitle}</h1> |
|
{/ms:channel} |
|
</div> |
|
<!--正文begin--> |
|
<!--文章内容开始--> |
|
<div class="right fr"> |
|
|
|
<!-- 留言表单 --> |
|
<div id="form" v-loading="loading" v-cloak> |
|
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right" size="small" |
|
class="message"> |
|
<!--称呼姓名--> |
|
<el-form-item label="称呼姓名" prop="leaveName"> |
|
<el-input |
|
v-model="form.leaveName" |
|
:disabled="false" |
|
:readonly="false" |
|
:style="{width: '100%'}" |
|
:clearable="true" |
|
placeholder="请输入称呼姓名"> |
|
</el-input> |
|
</el-form-item> |
|
<!--联系电话--> |
|
<el-form-item label="联系电话" prop="leavePhone"> |
|
<el-input |
|
v-model="form.leavePhone" |
|
:disabled="false" |
|
:readonly="false" |
|
:style="{width: '100%'}" |
|
:clearable="true" |
|
placeholder="请输入联系电话"> |
|
</el-input> |
|
</el-form-item> |
|
<!--留言--> |
|
<el-form-item label="留言" prop="content"> |
|
<el-input |
|
type="textarea" :rows="5" |
|
:disabled="false" |
|
:readonly="form.id>0?true:false" |
|
v-model="form.content" |
|
:style="{width: '100%'}" |
|
placeholder="请输入留言"> |
|
</el-input> |
|
</el-form-item> |
|
<el-form-item label="验证码" prop="rand_code"> |
|
<el-row> |
|
<el-col :span="10"> |
|
<el-input v-model="form.rand_code" |
|
:disabled="false" :readonly="false" :clearable="true" |
|
placeholder="请输入验证码"> |
|
</el-input> |
|
</el-col> |
|
<el-col :span="6"> |
|
<img height="40px" :src="verifCode" @click="code" style="margin-left: 10px"/> |
|
</el-col> |
|
</el-row> |
|
</el-form-item> |
|
<!--验证码--> |
|
|
|
<el-form-item label=" "> |
|
<el-button @click="save" type="primary" :loading="loading" style="width: 200px"> |
|
{{loading?'提交留言中':'提交留言'}} |
|
</el-button> |
|
</el-form-item> |
|
</el-form> |
|
</el-form> |
|
</div> |
|
<!--正文end--> |
|
<#include "footer.htm" /> |
|
<script language="javascript" src="/{ms:global.style/}js/foot.js"></script> |
|
</body> |
|
<script> |
|
var form = new Vue({ |
|
el: '#form', |
|
data: function () { |
|
return { |
|
verifCode: "/code.do" + new Date().getTime(), |
|
loading: false, |
|
saveDisabled: false, |
|
//表单数据 |
|
form: { |
|
// 称呼姓名 |
|
leaveName: '', |
|
// 联系电话 |
|
leavePhone: '', |
|
// 留言 |
|
content: '', |
|
// 验证码 |
|
rand_code: '', |
|
}, |
|
rules: { |
|
// 称呼姓名 |
|
leaveName: [{"required": true, "message": "称呼姓名不能为空"}, { |
|
"min": 0, |
|
"max": 255, |
|
"message": "称呼姓名长度必须为0-255" |
|
}], |
|
// 联系电话 |
|
leavePhone: [{ |
|
"required": true, |
|
"message": "联系电话不能为空" |
|
}, { |
|
"pattern": /^([0-9]{3,4}-)?[0-9]{7,8}$|^\d{3,4}-\d{3,4}-\d{3,4}$|^1[0-9]{10}$/, |
|
"message": "联系电话格式不匹配" |
|
}, {"min": 0, "max": 255, "message": "联系电话长度必须为0-255"}], |
|
// 留言 |
|
content: [{"required": true, "message": "留言不能为空"}], |
|
// 验证码 |
|
rand_code: [{"required": true, "message": "验证码不能为空"}], |
|
}, |
|
} |
|
}, |
|
watch: {}, |
|
components: {}, |
|
computed: {}, |
|
methods: { |
|
code: function () { |
|
this.verifCode = "/code.do?t=" + new Date().getTime(); |
|
}, |
|
save: function (e) { |
|
e.preventDefault();//阻止默认事件跳转 |
|
var that = this; |
|
that.$refs.form.validate(function (valid) { |
|
if (valid) { |
|
that.form.modelName = "留言板"; //modelName需要填写自己的模型昵称 |
|
ms.http.post("/mdiy/form/data/save.do", that.form).then(function (res) { |
|
if (res.result) { |
|
that.$notify({ |
|
title: '成功', |
|
type: 'success', |
|
message: '感谢您的参与!' |
|
}); |
|
that.$refs.form.resetFields(); //清空表单 |
|
} else { |
|
if (res.msg == '验证码错误!') { |
|
that.$notify({ |
|
title: '失败', |
|
message: res.msg, |
|
type: 'warning' |
|
}); |
|
} else { |
|
that.$alert('需要安装留言插件才能使用，请先进入后台MStore安装留言插件使用。<a href="http://store.mingsoft.net/#/detail?id=310&type=plugin" target="_blank">查看留言插件</a>', '留言插件提示', { |
|
dangerouslyUseHTMLString: true |
|
}); |
|
} |
|
} |
|
that.code(); |
|
}) |
|
} |
|
}) |
|
|
|
} |
|
} |
|
}); |
|
|
|
</script> |
|
</html> |
|
<style> |
|
.message { |
|
width: 40%; |
|
margin: 20px auto; |
|
} |
|
</style> |