預約業(yè)務語法說明
更新時間：2019-12-10
預約業(yè)務主要適用于服務模型。
使用步驟：
1.在 “模型管理 -> 服務 -> 模型設(shè)置” 中，開啟預約業(yè)務。
2. 預約表單在提交時有四種驗證方式：關(guān)閉驗證、注冊會員、手機驗證、驗證碼驗證。在 “預約表單”中， 自定義配置提交預約表單時所要填寫的字段。選擇驗證方式
3.在模型詳情中配置預約表單代碼。
1）表單提交地址：/addreserve.html
2）提交時必須要傳入的內(nèi)容：
- 提交預約的詳情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="http://www.geetest.com/demo/libs/gt.js"></script>
<script src="http://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('沒有短信配置發(fā)送短信無效')
}
})
}
//默認處理函數(shù)
?
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(), // 加隨機數(shù)防止緩存
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", // 產(chǎn)品形式，包括：float，popup
width: "300px"
}, handler);
}
});
}
?
//發(fā)送短信函數(shù)
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('驗證尚未通過，需通過驗證后才能下發(fā)短信');
}
$.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('發(fā)送短信成功');
} else if (data.status === false) {
alert('驗證失敗:'+data.msg);
that.captchaObj.reset();
}
}
});
?
}
</script>
?
<script>
//不發(fā)送短信
new GeTest({
formId: '#form1'
})
//發(fā)送短信
new GeTest({
formId: '#form2',
sendMsg:true
})
?
</script>
③驗證手機
<style>
*{padding:0; margin:0;}
form{margin:0 auto;}
</style>
{# 片段開始:header #} {{ Materiel.id_591ff74f2782be330835bc06 }} {# 片段結(jié)束:header #}
{# 片段開始:usertop #} {{ Materiel.id_5925352d5b6d761fbd3069e2 }} {# 片段結(jié)束:usertop #}
<script src="http://www.geetest.com/demo/libs/gt.js"></script>
<script src="http://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('沒有短信配置發(fā)送短信無效')
}
})
}
//默認處理函數(shù)
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(), // 加隨機數(shù)防止緩存
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", // 產(chǎn)品形式，包括：float，popup
width: "300px"
}, handler);
}
});
}
?
//發(fā)送短信函數(shù)
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('驗證尚未通過，需通過驗證后才能下發(fā)短信');
}
$.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('發(fā)送短信成功');
} else if (data.status === false) {
alert('驗證失敗:'+data.msg);
that.captchaObj.reset();
}
}
});
?
}
</script>
?
<script>
//不發(fā)送短信
new GeTest({
formId: '#form1'
})
//發(fā)送短信
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="http://www.geetest.com/demo/libs/gt.js"></script>
<script src="http://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('沒有短信配置發(fā)送短信無效')
}
})
}
//默認處理函數(shù)
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(), // 加隨機數(shù)防止緩存
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", // 產(chǎn)品形式，包括：float，popup
width: "300px"
}, handler);
}
});
}
</script>
<script>
//不發(fā)送短信
new GeTest({
formId: '#form1'
})
//發(fā)送短信
new GeTest({
formId: '#form2',
sendMsg:true
})
</script
?
