260 lines
10 KiB
HTML
260 lines
10 KiB
HTML
<!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="self"}${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="/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="contact-us-box">
|
||
<div class="contact-us-box-content">
|
||
{ms:channel type="self"}
|
||
<img src="{@ms:file field.typelitpic/}" alt="摩尔基石"/>
|
||
<div class="info-box">
|
||
<ul>
|
||
<li>
|
||
<div class="icon-box">
|
||
<img src="/{ms:global.style/}/images/f1icon1.png" alt="联系方式"/>
|
||
</div>
|
||
<div class="info-content-box">
|
||
<p><b>联系方式</b></p>
|
||
<a href="tel:025-83683523"><p>025-83683523</p></a>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
|
||
<div class="icon-box">
|
||
<img src="/{ms:global.style/}/images/f1icon2.png" alt="公司地址"/>
|
||
</div>
|
||
<div class="info-content-box">
|
||
<p><b>公司地址</b></p>
|
||
<p>北京市朝阳区香宾路66号保利广场东座2层201室</p>
|
||
<p>南京市建邺区北纬国际中心A栋7楼</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
|
||
<div class="icon-box">
|
||
<img src="{@ms:file global.logo/}" style="height:auto;margin-top:5px" alt="汉邦唐科技"/>
|
||
</div>
|
||
<div class="info-content-box">
|
||
<p><b>扫描下方二维码，关注官方公众号</b></p>
|
||
<p>更多资讯，更多信息，实时了解！</p>
|
||
</div></li>
|
||
<li style="border:none">
|
||
<img style="width:120px;height:120px" src="{@ms:file global.foot.qrCode/}" alt="二维码"/>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
{/ms:channel}
|
||
</div>
|
||
<div class="contact-us-box-content">
|
||
<div class="contact-us-box-content-form">
|
||
<h1 style="font-size:40px">商务合作</h1>
|
||
<p style="font-size:16px;margin:20px 0 30px">请提供以下信息，以便尽快与您取得联系。</p>
|
||
<!-- 留言表单 -->
|
||
<div id="form" v-loading="loading" v-cloak>
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="top"
|
||
class="message">
|
||
<!--称呼姓名-->
|
||
<el-row>
|
||
<el-col :span="11">
|
||
<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-col>
|
||
<el-col :span="2"> </el-col>
|
||
<!--联系电话-->
|
||
<el-col :span="11">
|
||
<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-col>
|
||
</el-row>
|
||
<!--留言-->
|
||
<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 :src="verifCode" @click="code" style="margin-left: 10px; height:40px"/>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--<div class="o_big">
|
||
{ms:channel type="self"}
|
||
<img src="{@ms:file field.typelitpic/}" alt="摩尔基石"/>
|
||
<h1>${field.typetitle}</h1>
|
||
{/ms:channel}
|
||
</div>-->
|
||
<!--正文begin-->
|
||
<!--文章内容开始-->
|
||
<div class="right fr">
|
||
|
||
</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: 100%;
|
||
margin: 20px auto;
|
||
}
|
||
#form *{
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
}
|
||
</style>
|