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

Mã nguồn
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