预约业务语法说明
更新时间：2019-12-10
预约业务主要适用于服务模型。
使用步骤：
1.在 “模型管理 -> 服务 -> 模型设置” 中，开启预约业务。
2. 预约表单在提交时有四种验证方式：关闭验证、注册会员、手机验证、验证码验证。在 “预约表单”中， 自定义配置提交预约表单时所要填写的字段。选择验证方式
3.在模型详情中配置预约表单代码。
1）表单提交地址：/addreserve.html
2）提交时必须要传入的内容：
- 提交预约的详情id
- 预约的时间
使用示例：
<form action="/addreserve.html" method="POST">
<div class="row">
<label for="">姓名：</label> <input type="text" name="name">
</div>
<div class="row">
<label for="">电话：</label> <input type="text" name="tel">
</div>
<input type="hidden" name="hashid" value="5d09e3812f03b963fc2b4b32"> //表单ID
<input type="hidden" name="detailid" value="5d0b6d0f2f03b938c323abe3"> //详情ID
<input type="hidden" name="time[]" value="2019/06/21 8:00-2019/06/21 9:00"> //预约时间
<button>提交</button>
</form>
<!-- Code injected by live-server -->
<script type="text/javascript">
//
if ('WebSocket' in window) {
(function () {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
var parent = elem.parentElement || head;
parent.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|?)_cacheOverride=d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
parent.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
}
// ]]>
</script>
<style>
.send{
height: 30px;
background-color: #fff;
}
</style>
<script src="//www.geetest.com/demo/libs/gt.js"></script>
<script src="//static.westarcloud.com/test/5c048df6a8497e03aa0665a0/js/jquery1.11.3.min.js"></script>
<div class="box">
<h3>登录后方可提交表单</h3>
{% if User.uid == '' %}
你还没有登录，无法看到表单
<a target="_blank" href="/userlogin.html">去登陆</a><a target="_blank" href="/userreg.html">去注册</a>
<p>使用模板引擎对 User.uid 进行判断，如果User.uid=='' 则表明用户未登录，反之则为已登录。
可以此为判断条件灵活配表单验证，配置提交前置条件。验证形式不限于未登录不显示表单这一种</p>
{%else%}
<form action="/addreserve.html" method="post" id="form4">
<h3>登录后的显示表单，随意与demo 123组合</h3>
<div >
<div >称呼:</div><input type="text" name="name" placeholder="请输入称呼">
</div>
<div >
<div >手机:</div><input type="text" name="tel" placeholder="请输入手机号码">
</div>
<input type="hidden" name="hashid" value="5d09e3812f03b963fc2b4b32">
<input type="hidden" name="detailid" value="5d08a7f82f03b91dfd1c30e3">
<input type="hidden" name="time[]" value="2019/06/19 6:00-2019/06/19 7:00">
<input type="hidden" name="moduletype" value="reserve">
<br>
<input type="hidden" name="basetype" value="reserve">
<input type="submit" value="提交">
</form>
{%endif%}
</div>
<script>
function GeTest(opt) {
this.form = $(opt.formId);
this.keyBox = this.form.find('.captcha');
this.sendMsg = opt.sendMsg || false;
this.captchaObj = '';
this.getKey();
var that = this;
this.form.on('click', '.send', function (e) {
e.preventDefault();
if (that.sendMsg) {
that.getMsg();
}
else {
alert('没有短信配置发送短信无效')
}
})
}
//默认处理函数
GeTest.prototype.getKey = function () {
var that = this;
function handler(captchaObj) {
that.captchaObj = captchaObj;
captchaObj.appendTo(that.keyBox);
captchaObj.onReady(function () {
that.form.find(".wait").hide();
});
}
$.ajax({
url: "/front/interface/geetest?t=" + (new Date()).getTime(), // 加随机数防止缓存
type: "get",
dataType: "json",
success: function (data) {
that.form.find('.text').hide();
that.form.find('.wait').show();
initGeetest({
gt: data.gt,
challenge: data.challenge,
offline: !data.success, // 表示用户后台检测极验服务器是否宕机
new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
product: "float", // 产品形式，包括：float，popup
width: "300px"
}, handler);
}
});
}
//发送短信函数
GeTest.prototype.getMsg = function () {
var that = this;
if(that.form.find('input[name="tel"]').val()=='')
{
return alert('手机号表单不能为空');
}
var result = that.captchaObj.getValidate()
if(!result)
{
return alert('验证尚未通过，需通过验证后才能下发短信');
}
$.ajax({
url: '/sendsmscode.html',
type: 'POST',
dataType: 'json',
data: {
mobile: that.form.find('input[name="tel"]').val(),
geetest_challenge: result.geetest_challenge,
geetest_validate: result.geetest_validate,
geetest_seccode: result.geetest_seccode
},
success: function (res) {
let data=typeof res=='object'?res:JSON.parse(res);
if (data.status === true) {
alert('发送短信成功');
} else if (data.status === false) {
alert('验证失败:'+data.msg);
that.captchaObj.reset();
}
}
});
}
</script>
<script>
//不发送短信
new GeTest({
formId: '#form1'
})
//发送短信
new GeTest({
formId: '#form2',
sendMsg:true
})
</script>
③验证手机
<style>
*{padding:0; margin:0;}
form{margin:0 auto;}
</style>
{# 片段开始:header #} {{ Materiel.id_591ff74f2782be330835bc06 }} {# 片段结束:header #}
{# 片段开始:usertop #} {{ Materiel.id_5925352d5b6d761fbd3069e2 }} {# 片段结束:usertop #}
<script src="//www.geetest.com/demo/libs/gt.js"></script>
<script src="//static.westarcloud.com/test/5c048df6a8497e03aa0665a0/js/jquery1.11.3.min.js"></script>
<form action="/addreserve.html" method="post" id="form2">
<div class="row">
<div class="label">称呼:</div><input type="text" name="name" placeholder="请输入称呼">
</div>
<div class="row">
<div class="label">手机:</div><input type="text" name="tel" placeholder="请输入手机号码">
<button class="send" data-url="/sendsmscode.html">获取验证码</button>
</div>
<div class="row">
<div class="label">验证码:</div> <input type="text" name="code" placeholder="请输入验证码">
</div>
<input type="hidden" name="hashid" value="5d09e3812f03b963fc2b4b32">
<input type="hidden" name="detailid" value="5d08a7f82f03b91dfd1c30e3">
<input type="hidden" name="time[]" value="2019/06/19 6:00-2019/06/19 7:00">
<input type="hidden" name="moduletype" value="reserve">
<br>
<input type="hidden" name="basetype" value="reserve">
<div>
<label>完成验证：</label>
<div class="captcha">
<div class="text">
行为验证™ 安全组件加载中
</div>
<div class="show wait">
<div class="loading">
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<div class="loading-dot"></div>
</div>
</div>
</div>
</div>
<input type="submit" value="提交">
</form>
<script>
function GeTest(opt) {
this.form = $(opt.formId);
this.keyBox = this.form.find('.captcha');
this.sendMsg = opt.sendMsg || false;
this.captchaObj = '';
this.getKey();
var that = this;
this.form.on('click', '.send', function (e) {
e.preventDefault();
if (that.sendMsg) {
that.getMsg();
}
else {
alert('没有短信配置发送短信无效')
}
})
}
//默认处理函数
GeTest.prototype.getKey = function () {
var that = this;
function handler(captchaObj) {
that.captchaObj = captchaObj;
captchaObj.appendTo(that.keyBox);
captchaObj.onReady(function () {
that.form.find(".wait").hide();
});
}
$.ajax({
url: "/front/interface/geetest?t=" + (new Date()).getTime(), // 加随机数防止缓存
type: "get",
dataType: "json",
success: function (data) {
that.form.find('.text').hide();
that.form.find('.wait').show();
initGeetest({
gt: data.gt,
challenge: data.challenge,
offline: !data.success, // 表示用户后台检测极验服务器是否宕机
new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
product: "float", // 产品形式，包括：float，popup
width: "300px"
}, handler);
}
});
}
//发送短信函数
GeTest.prototype.getMsg = function () {
var that = this;
if(that.form.find('input[name="tel"]').val()=='')
{
return alert('手机号表单不能为空');
}
var result = that.captchaObj.getValidate()
if(!result)
{
return alert('验证尚未通过，需通过验证后才能下发短信');
}
$.ajax({
url: '/sendsmscode.html',
type: 'POST',
dataType: 'json',
data: {
mobile: that.form.find('input[name="tel"]').val(),
geetest_challenge: result.geetest_challenge,
geetest_validate: result.geetest_validate,
geetest_seccode: result.geetest_seccode
},
success: function (res) {
let data=typeof res=='object'?res:JSON.parse(res);
if (data.status === true) {
alert('发送短信成功');
} else if (data.status === false) {
alert('验证失败:'+data.msg);
that.captchaObj.reset();
}
}
});
}
</script>
<script>
//不发送短信
new GeTest({
formId: '#form1'
})
//发送短信
new GeTest({
formId: '#form2',
sendMsg:true
})
</script>
④验证码验证
<style>
.box{
width: 440px;
margin:20px auto;
background: #fff;
padding:20px;
border-radius: 4px;
font-size:14px;
line-height:2;
}
.box a{
font-size:14px;
margin-right: 10px;
text-decoration: underline;
}
</style>
<script src="//www.geetest.com/demo/libs/gt.js"></script>
<script src="//static.westarcloud.com/test/5c048df6a8497e03aa0665a0/js/jquery1.11.3.min.js"></script>
<form action="/addreserve.html" method="post" id="form1">
<h3>单纯验证码DEMO 1</h3>
<div class="row">
<div class="label">称呼:</div><input type="text" name="name" placeholder="请输入称呼">
</div>
<div class="row">
<div class="label">手机:</div><input type="text" name="tel" placeholder="请输入手机号码">
</div>
<input type="hidden" name="id" value="5d033cda4db67f1a193df39b">
<input type="hidden" name="hashid" value="5c26c80d4db67f32c02f6214">
<input type="hidden" name="moduletype" value="products">
<br>
<input type="hidden" name="basetype" value="products">
<div>
<label>完成验证：</label>
<div class="captcha">
<div class="text">
行为验证™ 安全组件加载中
</div>
</div>
</div>
<input type="submit" value="提交">
</form>
<script>
function GeTest(opt) {
this.form = $(opt.formId);
this.keyBox = this.form.find('.captcha');
this.sendMsg = opt.sendMsg || false;
this.captchaObj = '';
this.getKey();
var that = this;
this.form.on('click', '.send', function (e) {
e.preventDefault();
if (that.sendMsg) {
that.getMsg();
}
else {
alert('没有短信配置发送短信无效')
}
})
}
//默认处理函数
GeTest.prototype.getKey = function () {
var that = this;
function handler(captchaObj) {
that.captchaObj = captchaObj;
captchaObj.appendTo(that.keyBox);
captchaObj.onReady(function () {
that.form.find(".wait").hide();
});
}
$.ajax({
url: "/front/interface/geetest?t=" + (new Date()).getTime(), // 加随机数防止缓存
type: "get",
dataType: "json",
success: function (data) {
that.form.find('.text').hide();
that.form.find('.wait').show();
initGeetest({
gt: data.gt,
challenge: data.challenge,
offline: !data.success, // 表示用户后台检测极验服务器是否宕机
new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
product: "float", // 产品形式，包括：float，popup
width: "300px"
}, handler);
}
});
}
</script>
<script>
//不发送短信
new GeTest({
formId: '#form1'
})
//发送短信
new GeTest({
formId: '#form2',
sendMsg:true
})
</script
