<!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;
|
}
|
|
.login-yzm-btn {
|
width: 80px;
|
height: 38px;
|
}
|
</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="在此输入验证码">
|
</div>
|
<div class="mui-input-row" style="height: 60px">
|
<label>点击更换验证码</label>
|
<a href="javascript:void(0);" title="点击更换验证码" class="login-yzm-btn">
|
<img class="imgcode"
|
th:src="@{/captcha/captchaImage(type=${captchaType})}"/>
|
</a>
|
</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 captchaType = [[${captchaType}]]; //验证码类型
|
|
mui.init();
|
|
//获取验证码
|
$('.imgcode').click(function () {
|
var url = "../captcha/captchaImage?type=" + captchaType + "&s=" + Math.random();
|
$(".imgcode").attr("src", url);
|
});
|
|
|
//绑定提交
|
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>
|
