<!doctype html>
|
<html lang="zh-cn" xmlns:th=http://www.thymeleaf.org>
|
<head>
|
<meta charset="utf-8">
|
<title>服务解绑</title>
|
<meta name="viewport"
|
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
|
<link rel="stylesheet" th:href="@{/ajax/libs/mui/css/mui.min.css}">
|
<style>
|
.mui-content {
|
margin: 0 6px;
|
}
|
.mui-content-padded {
|
margin: 10px;
|
width: 96%;
|
margin: auto;
|
margin-top: 8px;
|
}
|
.mui-radio.mui-left input[type=radio] {
|
left: 1px;
|
}
|
.mui-checkbox.mui-left label, .mui-radio.mui-left label {
|
padding-right: 20px;
|
padding-left: 35px;
|
}
|
.mui-btn-block {
|
width: 96%;
|
margin: auto;
|
margin-top: 10px;
|
padding: 8px 0;
|
}
|
.mui-input-row label ~ input {
|
float: left;
|
width: 50%;
|
}
|
.mui-input-row label {
|
width: 27%;
|
}
|
.btn {
|
margin-top: 4px;
|
margin-right: 2px;
|
float: right;
|
background: #EC971F;
|
color: #fff;
|
padding: 5px 5px;
|
}
|
.ts {
|
margin-top: 10px;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="mui-content">
|
<div class="mui-content-padded">
|
<form class="mui-input-group">
|
<div class="mui-input-row">
|
<label>手机号</label>
|
<input id="phone" type="text" class="mui-input-clear" placeholder="请输入手机号">
|
</div>
|
<div class="mui-input-row">
|
<label>验证码</label>
|
<input id="code" style="width: 45%;" type="text" class="mui-input-clear" placeholder="5分钟内有效">
|
<div id="count">
|
<button type="button" class="btn" onclick="getCheck()">获取验证码</button>
|
</div>
|
</div>
|
</form>
|
</div>
|
<button class="mui-btn mui-btn-block mui-btn-danger" onclick="unBinding()">点击解绑</button>
|
</div>
|
<script th:src="@{/js/jquery.min.js}"></script>
|
<script th:src="@{/wx/wx-common.js}"></script>
|
<script th:src="@{/ajax/libs/mui/js/mui.js}"></script>
|
<script th:inline="javascript">
|
|
var openid = [[${openid}]]; //用户的openid
|
var c = 60; //获取验证码后的倒计时
|
mui.init();
|
|
//获取验证码
|
function getCheck() {
|
var phone = document.getElementById("phone").value;
|
if (phone == null || phone.trim() == '') {
|
mui.alert("手机号不能为空", '提示', ["确定"], function() {}, "div");
|
return;
|
}
|
var flag = /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(phone);
|
if (!flag) {
|
mui.alert("手机号格式不正确", '提示', ["确定"], function() {}, "div");
|
return;
|
}
|
|
//请求参数
|
var data = JSON.stringify({
|
"interfaceId": "app_1004",
|
"sign": "01",
|
"outId": "01-01",
|
"reqDateTime": new Date(),
|
"data": {
|
"openid": openid,
|
"mobile": phone
|
}
|
});
|
|
$.ajax({
|
type: "POST",
|
url: "../wx/gateway",
|
dataType: "json",
|
contentType: "application/json;charset=UTF-8",
|
data: data,
|
success: function (result) {
|
if (result.code == "0000") {
|
mui.toast("校验码已发送");
|
//倒计时计数
|
count();
|
} else {
|
mui.alert(result.msg, '提示', ["确定"], function() {}, "div");
|
}
|
}
|
});
|
}
|
|
//倒计时计数
|
function count() {
|
$("#count").html('');
|
$("#count").addClass("ts");
|
var interval = setInterval(function () {//定义定时器
|
if (c == 0) {
|
clearInterval(interval);//清除定时器
|
$("#count").removeClass("ts");
|
$("#count").html('<button type="button" class="btn" onclick="getCheck()">获取验证码</button>');
|
c = 60;
|
} else {
|
$("#count").html(c + 's后重试');
|
c--;
|
}
|
}, 1000);
|
}
|
|
//绑定提交
|
function unBinding() {
|
var phone = document.getElementById("phone").value;
|
if (phone == null || phone.trim() == '') {
|
mui.alert("手机号不能为空！", '提示', ["确定"], function() {}, "div");
|
return;
|
}
|
var flag = /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(phone);
|
if (!flag) {
|
mui.alert("手机号格式不正确！", '提示', ["确定"], function() {}, "div");
|
return;
|
}
|
var code = document.getElementById("code").value;
|
// if (code == null || code.trim() == '') {
|
// mui.alert("验证码不能为空！", '提示', ["确定"], function() {}, "div");
|
// return;
|
// }
|
|
var data = {
|
"openid": openid,
|
"mobile": phone,
|
"msgCode": code
|
};
|
wxCommon.postJson("../wx/unBandOpenId", data,function (result) {
|
if (result.code == "0000") {
|
mui.toast("解绑成功！");
|
} else {
|
mui.alert(result.msg, '提示', ["确定"], function() {}, "div");
|
}
|
});
|
}
|
</script>
|
</body>
|
|
</html>
|
