Информация к новости
  • Просмотров: 782
  • Автор: sulicompany
  • Дата: 15-07-2012, 22:03
 (голосов: 0)
15-07-2012, 22:03

Работа с балансом

Категория: Программирование » VK (Вконтакте)


В уроке показано:
- работа с методом getUserBalance
- алгоритм работы приложения в зависимости от баланса: если голосов на балансе хватает, то отправляем данные на сервер, если не хватает, то просим пользователя пополнить баланс и после этого снова автоматически проводим попытку отправки данных на сервер.
- отправка данные на сервер с помощью jQuery
- правильные окончания "1 голос, 2 голоса, 5 голосов"
- использование изображения предзагрузчика


code.js


$(document).ready(function(){
var viewer_id;
var auth_key;
var wasPayBox = false; // было открыто окно "Внесите 1 голос", при нажатии на кнопку "Добавить"

VK.init(function() {
VK.loadParams(document.location.href);
viewer_id = VK.params.viewer_id;
auth_key = VK.params.auth_key;
getBalance();
updateLinks();
});


// функция обновления баланса
function getBalance(){
VK.api("getUserBalance", function(data) {
// если баланс меньше 1 голоса, то выводим ссылку "пополнить"
votes = parseInt(data.response)/100;
if (votes<1) {
$('#balance').html('Ваш баланс: ' + votes + ' ' + num_ending(votes));
$('#addVotes').show();
} else {
$('#balance').html('Ваш баланс: ' + votes + ' ' + num_ending(votes));
}
});
}



// клик по "Ваш баланс" - обновить
$('#balance').click(function() {
getBalance();
return false;
});

// клик по "Пополнить баланс"
$('#addVotes').click(function() {
VK.callMethod("showPaymentBox");
return false;
});

// баланс был изменен
VK.addCallback("onBalanceChanged", onBalanceChanged);
function onBalanceChanged(settings) {
getBalance();
if (wasPayBox) { // если вызывали окно пополнения, то вероятно пользователь пополнил баланс
wasPayBox = false;
// пробуем отправить данные снова
$('#addLink_btn').click();
}
}


// отправляем на сервер
$('#addLink_btn').click(function() {
// проверяем баланс
VK.api("getUserBalance", function(data) {
// если баланс меньше 1 голоса, то выводим окно "пополнить на 1 голос"
if (data.response<100) {
VK.callMethod("showPaymentBox",1);
wasPayBox = true;
} else {
var error = false;
var t = ''; // текст ошибок
var url = $('#url').val();
var title = $('#title').val();

// проверяем ссылку
if (url.indexOf('http://vkontakte.ru/app')!==0 && url.indexOf('http://vkontakte.ru/club')!==0 &&
url.indexOf('http://vkontakte.ru/id')!==0 && url.indexOf('http://vkontakte.ru/video')!==0 &&
url.indexOf('http://vkontakte.ru/photo')!==0 && url.indexOf('http://vkontakte.ru/note')!==0 &&
url.indexOf('http://vkontakte.ru/public')!==0) {
t += 'Вы можете добавить ссылку только на страницу сайта вконтакте.';
error=true;
}
if (url.length>50) {
// if (error) - проверка, содержит ли переменная с ошибками какой-то текст, чтобы не делать лишний перенос строки
if (error) { t += '<br />';}
t += 'Максимальная длина ссылки 50 символов!';
error=true;
}
// проверяем заголовок
if (title.length<5) {
if (error) { t += '<br />';}
t += 'Вы ввели слишком короткое описание!';
error=true;
}
if (title.length>35) {
if (error) { t += '<br />';}
t += 'Максимальная длина описания ссылки 35 символов!';
error=true;
}

// если есть ошибки
if (error) {
$('.error').html(t);
$('.success').slideUp();
$('.error').slideDown();
} else {
$('.error').hide(); // скрываем блок с ошибкой (он мог быть открыт)
// показываем предзагрузчик
$('#loader').show();
// отправляем данные на сервер
$.post('http://flapps.ru/apps/test/addlink.php', { "title": title, "url": url, "viewer_id": viewer_id, "auth_key": auth_key },
function(data){
if (data.success) {
$('.success').html(data.success.msg);
$('.error').slideUp();
$('.success').slideDown();
} else {
$('.error').html(data.error.msg);
$('.success').slideUp();
$('.error').slideDown();
}
// обновляем баланс
getBalance();
// скрываем предзагрузчик
$('#loader').fadeOut(1000);
}, "json");
}
}
});
return false;
});

});

function num_ending(number) {
var endings = ['голосов','голос','голоса'];
var num100 = number % 100;
var num10 = number % 10;
if (num100 >= 5 && num100 <= 20) {
return endings[0];
} else if (num10 == 0) {
return endings[0];
} else if (num10 == 1) {
return endings[1];
} else if (num10 >= 2 && num10 <= 4) {
return endings[2];
} else if (num10 >= 5 && num10 <= 9) {
return endings[0];
} else {
return endings[2];
}
}

/* flapps.ru */


style.css

body {
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
}

/* изображение прелоадер */
#loader {
width: 100%;
height: 100%;
position: fixed;
text-align: center;
z-index: 1000;
background-color: #fff;
opacity: 0.80;
}

#loader img{
position: absolute;
left: 50%;
top: 50%;
margin: -40px 0 0 -40px;
}

/* блоки с сообщениями */
.success {
background-color: #EFFFE8;
border: 1px solid #9BE888;
font-size: 11px;
margin: 8px;
padding: 8px 11px;
}
.error {
background-color: #FFEFE8;
border: 1px solid #E89B88;
font-size: 11px;
margin: 8px;
padding: 8px 11px;
}


index.html
НОМЕРА СТРОК ВКЛ/ВЫКЛ | ПОКАЗАТЬ/СКРЫТЬ | ВЫДЕЛИТЬ ВСЁ
<html>
<head>
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/code.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="http://vkontakte.ru/js/api/xd_connection.js?2" type="text/javascript"></script>

</head>
<body>
<!-- это блок с изображением прелоадером -->
<div id="loader" style="display:none;"><img src="http://vk.com/images/upload.gif" alt="" width="32" height="8" border="0" /></div>


<h1 style="text-align:center; border:none;">Добавить ссылку</h1>
<a href="#" id="balance" title="Кликните, чтобы обновить баланс">Ваш баланс:</a>
<a href="#" id="addVotes" title="Кликните, чтобы пополнить баланс" style="display:none; font-style:italic;">(пополнить)</a><br />
<br />


Ссылка:<br />
<input type="text" id="url" name="url" value="http://vkontakte.ru/" maxlength="50" /><br />
Описание:<br />
<input type="text" id="title" name="title" value="" maxlength="35" /><br />
<a href="#" id="addLink_btn">Добавить</a><br /><br />


<div class="error" style="display:none;"></div>
<div class="success" style="display:none;"></div>

<br />
<a href="http://flapps.ru/">http://flapps.ru/</a>

</body>
</html>


addlink.php

<?



/*
Здесь нужно провести весь процесс проверки полученных переменных (ссылка, заголовок) и списание голоса,
проверку auth_key и баланса пользователя в приложении.
*/

// просто выводим сообщение
echo '{"success":
{
"msg":"Всё прошло успешно!"
}
}';

// сообщение с ошибкой
/*
echo '{"error":
{
"msg":"Произошла ошибка!"
}
}';
*/

?>


Исходник: http://flapps.ru/example/links_getuserbalance.rar