358 lines
12 KiB
Plaintext
358 lines
12 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/SuperMap_Client/MasterPage/v4_0/SizeBox.Master"
|
|
CodeBehind="RelateUserPhone.aspx.cs" Title="综管平台账户绑定，轻松移动办公" Inherits="SuperMap.RealEstate.Portal.RelateUserPhone" %>
|
|
|
|
<%@ Register Assembly="RealEstate.Web" Namespace="SuperMap.RealEstate.Web.UI.WebControls" TagPrefix="smwc" %>
|
|
|
|
<asp:Content ID="Content1" ContentPlaceHolderID="HTMLHead" runat="server">
|
|
<link rel="stylesheet" href="StyleSheet/vant.css"/>
|
|
<style>
|
|
body * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
input {
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
.pagebody {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.code-btn.disabled {
|
|
background-color: rgba(255, 255, 255, 0);
|
|
color: #666;
|
|
}
|
|
|
|
.login-botton.disabled {
|
|
background-color: #c5c5c5;
|
|
}
|
|
|
|
.uni-input {
|
|
height: 40px;
|
|
padding: 8px 10px;
|
|
line-height: 40px;
|
|
font-size: 14px;
|
|
background: #FFF;
|
|
flex: 1;
|
|
}
|
|
|
|
/* #ifdef H5 */
|
|
.login-box {
|
|
padding: 40px 30px 15px 30px;
|
|
background-color: #fff;
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
color: #333;
|
|
}
|
|
/* #endif */
|
|
.logo-box {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.register-btn {
|
|
/* position: absolute; */
|
|
color: #2689ee;
|
|
font-size: 12px;
|
|
text-align: right;
|
|
/* top: 108px; */
|
|
/* right: 60px; */
|
|
}
|
|
|
|
h3 {
|
|
/* font-weight: normal; */
|
|
font-size: 24px;
|
|
margin-bottom: 20px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.input-title {
|
|
/* color: #fff; */
|
|
font-size: 14px;
|
|
padding-top: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.input-content {
|
|
display: flex;
|
|
height: 50px;
|
|
border-bottom: 1px solid #ececec;
|
|
align-items: center;
|
|
}
|
|
|
|
.uni-input {
|
|
/* color: #fff; */
|
|
background-color: unset;
|
|
padding: 0;
|
|
}
|
|
|
|
uni-input input {
|
|
color: #fff;
|
|
}
|
|
|
|
.uni-input input {
|
|
height: 40px !important;
|
|
line-height: 40px !important;
|
|
}
|
|
|
|
input[type="password"] {
|
|
height: 40px !important;
|
|
line-height: 40px !important;
|
|
}
|
|
|
|
.text-b1 {
|
|
color: #ececec
|
|
}
|
|
|
|
.code-btn {
|
|
background-color: transparent;
|
|
color: #2689ee;
|
|
font-size: 14px;
|
|
padding: 0 6px;
|
|
}
|
|
|
|
button::after {
|
|
border: 0;
|
|
}
|
|
|
|
.login-botton {
|
|
margin-top: 60px;
|
|
margin-bottom: 10px;
|
|
color: #fff;
|
|
height: 48px;
|
|
line-height: 48px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
background: linear-gradient(to left, #4698f5 0%, #5e87fb 100%);
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="JavaScript/vue.js"></script>
|
|
<script type="text/javascript" src="JavaScript/vant.min.js"></script>
|
|
<script type="text/javascript" src="JavaScript/qs_6.9.4.js"></script>
|
|
<script type="text/javascript" src="JavaScript/axios.min.js"></script>
|
|
</asp:Content>
|
|
<asp:Content ID="Content2" ContentPlaceHolderID="B" runat="server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content3" ContentPlaceHolderID="B_L" runat="server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content4" ContentPlaceHolderID="B_R" runat="server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content5" ContentPlaceHolderID="T" runat="server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content6" ContentPlaceHolderID="T_L" runat="server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content7" ContentPlaceHolderID="T_R" runat="server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content8" ContentPlaceHolderID="S_T" runat="server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content9" ContentPlaceHolderID="S" runat="server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content10" ContentPlaceHolderID="S_B" runat="server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content11" ContentPlaceHolderID="M_T" runat="server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content12" ContentPlaceHolderID="M" runat="server">
|
|
<div class="login-box" id="app">
|
|
<div>
|
|
<div>
|
|
<div class="input-title">手机号码</div>
|
|
<div class="input-content" >
|
|
<input class="uni-input" placeholder="请输入手机号" v-model="saveData.MobilePhone_Number"/>
|
|
</div>
|
|
<div class="input-title">验证码</div>
|
|
<div class="input-content">
|
|
<input class="uni-input" v-model="saveData.Verification_Code" @key.enter="postRegister" placeholder="请输入验证码">
|
|
<span class="text-b1">|</span>
|
|
<div class="code-btn" @click="getCode" :class="{'disabled':!isgetCode}">{{getCodeText}}</div>
|
|
</div>
|
|
<div class="login-botton" :class="{'disabled':ispost}" @click="postRegister" :loading="ispost">确认绑定</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:none;">
|
|
<smwc:TextBoxEx ID="User_ID" runat="server" CaptionText="用户账户内码:" Text="1"></smwc:TextBoxEx>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
const qs = Qs
|
|
|
|
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
|
|
|
|
const app = new Vue({
|
|
el: '#app',
|
|
data() {
|
|
|
|
return {
|
|
isBinding: false, //是否绑定过
|
|
cangetCode: true, // true 可以获取 false 不能获取
|
|
ispost: false,
|
|
getCodeText: '获取验证码',
|
|
codes: '',
|
|
saveData: {
|
|
action_type: 'BindPassportWithPhone',
|
|
User_ID:'',
|
|
MobilePhone_Number: '',
|
|
},
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
getCode() { // 获取验证码
|
|
let _this = this
|
|
if (!_this.cangetCode) return
|
|
let tel = _this.saveData.MobilePhone_Number
|
|
if (/^[1][3,4,5,7,8,9][0-9]{9}$/.test(tel)) {
|
|
_this.cangetCode = false
|
|
let _t = 59
|
|
let a = setInterval(() => {
|
|
// debugger
|
|
if (_t > 1) {
|
|
_t--
|
|
_this.getCodeText = _t + 's 后再次获取'
|
|
} else {
|
|
clearInterval(a)
|
|
_this.cangetCode = true
|
|
_this.getCodeText = '获取验证码'
|
|
}
|
|
}, 1000);
|
|
axios.get('http://user.eshangtech.com/Coop.Merchant/Handler/handler_ajax.ashx', {
|
|
params: {
|
|
|
|
action_type: 'GetSMSIdentityCode',
|
|
action_data: tel,
|
|
BusinessName: '驿行畅旅'
|
|
}
|
|
}
|
|
|
|
|
|
).then(response => {
|
|
let _data = response.data
|
|
|
|
if (_data && _data.ResultObject.length > 0) {
|
|
_this.codes = _data.ResultObject[0].FirstParameter
|
|
vant.Toast(_data.ResultObject[0].ResultDesc);
|
|
|
|
} else {
|
|
_this.codes = ''
|
|
vant.Toast.fail('网络错误请稍后再试');
|
|
|
|
}
|
|
})
|
|
} else {
|
|
vant.Toast.fail('请输入正确的手机号码');
|
|
|
|
}
|
|
},
|
|
postRegister() {
|
|
if (this.isBinding) return
|
|
let _this = this
|
|
let _data = _this.saveData
|
|
let _mobile = Number(_data.MobilePhone_Number)
|
|
let _code = Number(_data.Verification_Code)
|
|
_data.User_ID = document.getElementById('<%= User_ID.ClientID %>').value
|
|
|
|
_this.ispost = true
|
|
// 校验登录信息（非空）
|
|
if (!_this.checkfn(_mobile, 'mobile')) {
|
|
_this.ispost = false
|
|
return false
|
|
}
|
|
|
|
if (!_this.checkfn(_code, 'code')) {
|
|
_this.ispost = false
|
|
return false
|
|
}
|
|
|
|
_this.ispost = true
|
|
vant.Toast.loading({
|
|
message: '提交中...',
|
|
forbidClick: true,
|
|
});
|
|
axios.post('http://localhost:8010/MobileServicePlatform/Handler/handler_ajax.ashx', qs.stringify(_data)).then(res => {
|
|
|
|
|
|
if (res.data.Result_Code == '100') {
|
|
|
|
vant.Toast.success('绑定成功！')
|
|
setTimeout(function () {
|
|
close();
|
|
}, 2000)
|
|
|
|
} else {
|
|
vant.Toast.fail(res.data.Result_Desc)
|
|
|
|
}
|
|
_this.ispost = false
|
|
|
|
})
|
|
},
|
|
checkfn(val, type) { // 校验登录信息
|
|
let _this = this
|
|
let msg = ''
|
|
switch (type) {
|
|
case 'mobile':
|
|
if (val == '') {
|
|
msg = '请输入手机号码'
|
|
}
|
|
else if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(val)) {
|
|
msg = '手机号码不正确'
|
|
}
|
|
break;
|
|
|
|
case 'code':
|
|
if (!val) {
|
|
msg = '请输入验证码'
|
|
} else if (val != this.codes) {
|
|
msg = '验证码不正确'
|
|
}
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
if (msg) {
|
|
vant.Toast.fail(msg)
|
|
return false
|
|
} else {
|
|
return true
|
|
}
|
|
},
|
|
getQueryString(name) {
|
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
|
var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
|
|
var context = "";
|
|
if (r != null)
|
|
context = r[2];
|
|
reg = null;
|
|
r = null;
|
|
return context == null || context == "" || context == "undefined" ? "" : context;
|
|
}
|
|
},
|
|
created() {
|
|
let _code = this.getQueryString('code')
|
|
if (_code) {
|
|
this.getOpenid(_code)
|
|
}
|
|
console.log(_code)
|
|
},
|
|
})
|
|
</script>
|
|
</asp:Content>
|
|
<asp:Content ID="Content13" ContentPlaceHolderID="M_B" runat="server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content14" ContentPlaceHolderID="F" runat="server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content15" ContentPlaceHolderID="F_L" runat="server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content16" ContentPlaceHolderID="F_R" runat="server">
|
|
</asp:Content>
|