Dữ liệu sử dụng được kết nối với maimai.vn demo
Trong dịch vụ quản lý maimai.vn, bạn chọn menu Bán hàng -> Khách hàng
HTML<div class="demo"> <div id="offline" style="display:none"> <div id="left" style="width:470px;min-height:150px;border-right:solid 1px #fff;float:left"> <form class="form" id="register-form" onsubmit="return register()"> <b>Đăng ký tài khoản</b><br /> <input type="text" name="email" id="email" class="required" style="width:400px" placeholder="Email" onchange="verify(true)" /><span id="validate-email" class="validate"></span> <input type="text" name="name" id="name" class="required" style="width:400px" placeholder="Tên (ít nhất 2 ký tự, chỉ bao gồm chữ cái, chữ số và dấu gạch dưới)" onchange="verify(false)" /><span id="validate-user" class="validate"></span> <input type="password" name="password" id="password" class="required" style="width:400px" placeholder="Mật khẩu (ít nhất 6 ký tự)" /><br /> <input type="password" id="password2" class="required" style="width:400px" placeholder="Nhập lại mật khẩu" /><br /> <input type="text" name="phone" id="phone" class="required" style="width:400px" placeholder="Điện thoại" /><br /> <input type="text" name="birthDate" id="birthDate" style="width:400px" placeholder="Ngày sinh (mm/dd/yyyy)" /><br /> <input type="text" name="fullname" id="fullname" style="width:400px" placeholder="Tên đầy đủ" /><br /> <select name="country" id="country" onchange="onChangeCountry('offline')"></select> <select name="city" id="city" onchange="onChangeCity('offline')"></select> <select name="district" id="district"></select> <input type="text" name="address" id="address" style="width:400px" placeholder="Điạ chỉ" /><br /> <input type="hidden" id="invalidnameoremail" value="" /> <select name="sex" id="sex"><option value="1">Nam</option><option value="2">Nữ</option></select><br /> <button>Đăng ký</button> </form> </div> <div id="right" style="width:230px;float:right"> <form class="form" id="login-form" onsubmit="return login()"> <b>Đăng nhập</b><br /> <input type="text" name="name" id="login-name" class="required" style="width:200px" placeholder="Tên" /><br /> <input type="password" name="password" id="login-password" class="required" style="width:200px" placeholder="Mật khẩu" /><br /> <button>Đăng nhập</button> </form> <span class="validate"></span> </div> <div style="clear:both"></div> </div> <div id="online" style="display:none"> <div id="left" style="width:470px;min-height:150px;border-right:solid 1px #fff;float:left"> <form class="form" id="account-form" onsubmit="return editAccount()"> <b>Thông tin tài khoản</b><br /> <input type="text" name="email" id="account-email" class="readonly" style="width:400px" readonly="readonly" placeholder="Email" /><br /> <input type="text" name="name" id="account-name" class="readonly" style="width:400px" readonly="readonly" placeholder="Tên (ít nhất 2 ký tự, chỉ bao gồm chữ cái, chữ số và dấu gạch dưới)" /><br /> <input type="password" name="password" id="account-password" class="required" style="width:400px" placeholder="Mật khẩu (ít nhất 6 ký tự)" /><br /> <input type="password" id="account-password2" class="required" style="width:400px" placeholder="Nhập lại mật khẩu" /><br /> <input type="text" name="phone" id="account-phone" class="required" style="width:400px" placeholder="Điện thoại" /><br /> <input type="text" name="birthDate" id="account-birthDate" style="width:400px" placeholder="Ngày sinh (mm/dd/yyyy)" /><br /> <input type="text" name="fullname" id="account-fullname" style="width:400px" placeholder="Tên đầy đủ" /><br /> <select name="country" id="country" onchange="onChangeCountry('online')"></select> <select name="city" id="city" onchange="onChangeCity('online')"></select> <select name="district" id="district"></select> <input type="text" name="address" id="account-address" style="width:400px" placeholder="Điạ chỉ" /><br /> <select name="sex" id="account-sex"><option value="1">Nam</option><option value="2">Nữ</option></select><br /> <button>Cập nhật</button> </form> </div> <div id="right" style="width:230px;float:right;"> <a href="javascript:" onclick="logout()">Đăng xuất</a><br /> <a href="order">Danh sách hóa đơn</a> </div> <div style="clear:both"></div> </div> </div>
Javascript/CSS<link href="//api.maimai.vn/content/demo.css" rel="stylesheet" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//api.maimai.vn/scripts/mget.js"></script> <script src="//api.maimai.vn/scripts/jsrender.js"></script> <script> function verify(isEmail) { if (isEmail) { mAccount.verify($('#email').val(), true, settings, function (data) { if (data) $('#validate-email').html(''); else $('#validate-email').html(' Email không hợp lệ hoặc đã được sử dụng!'); $('#invalidnameoremail').val(data ? '' : '1'); }); } else { mAccount.verify($('#name').val(), false, settings, function (data) { if (data) $('#validate-user').html(''); else $('#validate-user').html(' Tên không hợp lệ hoặc đã được sử dụng!'); $('#invalidnameoremail').val(data ? '' : '1'); }); } } var settings = { company: 'demo', apikey: 'Xwrok26ZNzWDsoow2CUzDrnOScY5aCJrIxlsh3JQjuE%3d', activated: true//active user right after registering } $(document).ready(function () { viewAccount(); }); function onChangeCountry(status) { mGeo.getCities($('#' + status + ' #country').val(), settings, function (data) { if (data) $('#' + status + ' #city').html($('#geoTemplate').render(data)); onChangeCity(status); }); } function onChangeCity(status) { mGeo.getDistricts($('#' + status + ' #city').val(), settings, function (data) { if (data) $('#' + status + ' #district').html($('#geoTemplate').render(data)); }); } function viewAccount() { if (mAccount.isLoggedIn()) { $('#offline').hide(); $('#online').show(); mGeo.getCountries(settings, function (data) { if (data) $('#online #country').html($('#geoTemplate').render(data)); onChangeCountry('online'); }); getAccount(); } else { $('#online').hide(); $('#offline').show(); mGeo.getCountries(settings, function (data) { if (data) $('#offline #country').html($('#geoTemplate').render(data)); onChangeCountry('offline'); }); } } function register() { if ($('#name').val().length < 2) { alert('Tên không hợp lệ!'); $('#name').focus(); return false; } if (!mHelper.validateEmail($('#email').val())) { alert('Email không hợp lệ!'); $('#email').focus(); return false; } if ($('#password').val().length < 6) { alert('Mật khẩu không hợp lệ!'); $('#password').focus(); return false; } if ($('#password').val() != $('#password2').val()) { alert('Mật khẩu không khớp!'); $('#password2').focus(); return false; } if (!$('#phone').val()) { alert('Hãy nhập số điện thoại của bạn!'); $('#phone').focus(); return false; } if ('1' == $('#invalidnameoremail').val()) { alert('Tên hoặc email không hợp lệ!'); return false; } mAccount.registerJSON(mHelper.getFormData($('#register-form')), settings, function (data) { $('#left').html('<div class="notice">Bạn đã đăng ký thành công!</div>'); }, function (errorThrown, jqXHR) { alert(jqXHR.responseText); }); return false; } function login() { if ($('#login-name').val().length < 2) { alert('Tên không hợp lệ!'); $('#login-name').focus(); return false; } if ($('#login-password').val().length < 6) { alert('Mật khẩu không hợp lệ!'); $('#login-password').focus(); return false; } mAccount.login($('#login-name').val(), $('#login-password').val(), settings, function (data) { if (data.account) viewAccount(); else $('#right .validate').html('<div class="notice">Đăng nhập thất bại, hãy kiểm tra tên và mật khẩu của bạn!</div>'); }); return false; } function logout() { mAccount.logout(settings, function () { viewAccount(); }); } function getAccount() { mAccount.getInfoDetail(settings, function (data) { if (data.account) { $('#account-email').val(data.account.email); $('#account-name').val(data.account.name); $('#account-phone').val(data.account.phone); $('#account-fullname').val(data.account.fullname); $('#account-sex').val(data.account.sex); $('#account-birthDate').val(mHelper.formatDatetime(data.account.birthDate, 'MM/dd/yyyy', true)); $('#account-address').val(data.account.address); } else $('#online').html('<div class="notice">Không tìm thấy thông tin thành viên!</div>'); }); return false; } function editAccount() { if ($('#account-password').val() && $('#account-password').val().length < 6) { alert('Mật khẩu không hợp lệ!'); $('#account-password').focus(); return false; } if ($('#account-password').val() != $('#account-password2').val()) { alert('Mật khẩu không khớp!'); $('#account-password2').focus(); return false; } if (!$('#account-phone').val()) { alert('Hãy nhập số điện thoại của bạn!'); $('#account-phone').focus(); return false; } mAccount.editJSON(mHelper.getFormData($('#account-form')), settings, function (data) { alert('Thông tin đã được cập nhật thành công!' + data); viewAccount(); }, function (errorThrown, jqXHR) { alert(jqXHR.responseText); }); return false; } </script>
Xem thêm mô tả API