效果图
html 布局
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>
博福-益普生-手机大放送
</title>
<link rel="stylesheet" href="~/Content/CommonModule/TMobileInfo/phone.css">
<link rel="stylesheet" type="text/css" href="~/Content/CommonModule/TMobileInfo/weui.css">
<link rel="stylesheet" type="text/css" href="~/Content/CommonModule/TMobileInfo/jquery-weui.css">
<link rel="stylesheet" type="text/css" href="~/Content/CommonModule/TMobileInfo/demos.css">
</head>
<body>
@*消息提示*@
<div id="toast" style="opacity: 1;display:none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<p class="weui-toast__content"></p>
</div>
</div>
<div id="pageView1" style="margin-top:20px;">
<table style="width:100%;">
<tr>
<td style="text-align:right;width:60%;">
<img style="width:50%" src="~/Content/CommonModule/TMobile/Imgs/xhlog.jpg" />
</td>
<td style="text-align:center;">
<img style="width:100%" src="~/Content/CommonModule/TMobile/Imgs/log2.png?v=1" />
</td>
</tr>
</table>
<div class="weui_cell">
<div class="weui_cell_hd">
<img style="width:100%" src="~/Content/CommonModule/TMobile/Imgs/sjbanner.png" />
</div>
</div>
<div style="padding:10px 15px;" id="numberList">
</div>
<div class="weui_btn_area"><button class="weui_btn weui_btn_primary" style="background-color:#3290E8;"type="button" οnclick="getNumber();">换一批</button> </div>
</div>
@*号码列表*@
<script id="number-tpl" type="text/html">
<% for(var i=0;i<datas.length;i++){ %>
<%if(i+1<=datas.length-1){%>
<table style="text-align:center;margin:0px auto;margin-bottom:5px;width:100%;">
<tr>
<td style="width:49%;">
<div style="border:solid 1px #ECECEC;padding:2px; border-radius:5px;" οnclick="choiseNumber('<%=datas[i].MobileNumber%>');">
<div style="display:table-row;">
<img style="width:40px; height:46px;display:table-cell;vertical-align:middle;" src="@Url.Content("~/Content/CommonModule/TMobile/Imgs/sim.png?v=1")" />
<div style="font-size:14px;line-height:20px;display:table-cell; vertical-align:middle;"><p><%=datas[i].MobileNumber%></p> <p> <%=datas[i].Des%></p> </div>
</div>
</div>
</td>
<td></td>
<td style="width:49%;">
<div style="border:solid 1px #ECECEC;padding:2px; border-radius:5px;" οnclick="choiseNumber('<%=datas[i+1].MobileNumber%>');">
<div style="display:table-row;">
<img style="width:40px; height:46px;display:table-cell;vertical-align:middle;" src="@Url.Content("~/Content/CommonModule/TMobile/Imgs/sim.png?v=1")" />
<div style="font-size:14px;line-height:20px;display:table-cell; vertical-align:middle;"><p><%=datas[i+1].MobileNumber%></p> <p> <%=datas[i+1].Des%></p> </div>
</div>
</div>
</td>
</tr>
</table>
<%i++;%>
<%}else{%>
<table style="text-align:center;margin:0px auto;margin-bottom:5px;width:100%;">
<tr>
<td style="width:49%;">
<div style="border:solid 1px #ECECEC;padding:2px; border-radius:5px;" οnclick="choiseNumber('<%=datas[i].MobileNumber%>');">
<div style="display:table-row;">
<img style="width:40px; height:46px;display:table-cell;vertical-align:middle;" src="@Url.Content("~/Content/CommonModule/TMobile/Imgs/sim.png?v=1")" />
<div style="font-size:14px;line-height:20px;display:table-cell; vertical-align:middle;"><p><%=datas[i].MobileNumber%></p> <p> <%=datas[i].Des%></p> </div>
</div>
</div>
</td>
<td></td>
<td style="width:49%;">
</td>
</tr>
</table>
<%}%>
<%}%>
</script>
<script type="text/javascript" src="~/Content/CommonModule/TMobileInfo/jquery-3.js"></script>
<script src="~/Content/CommonModule/TMobileInfo/mobileFix.js"></script>
<script src="~/Content/CommonModule/TMobileInfo/exif.js"></script>
<script src="~/Content/CommonModule/TMobileInfo/lrz.js"></script>
<script src="~/Content/CommonModule/TMobile/art-template.js"></script>
@*关闭微信分享*@
<script type="text/javascript">
try {
function onBridgeReady() {
WeixinJSBridge.call('hideOptionMenu');
}
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
} else {
onBridgeReady();
}
} catch (e) {
}
</script>
<script type="text/javascript">
//总共有几页
var totalPage = 0;
//当前页
var currentPage = 1;
//页大小
var pageSize = 10;
$(function () {
//默认加载第一页数据
currentPage = 1;
loadNumberList(currentPage);
});
//加载号码
function loadNumberList(page) {
$("#toast").show().find(".weui-toast__content").text("数据加载中");
$.ajax({
type: 'post',
dataType: "json",
url: "/CommonModule/TMobile/PageJson",
data: { page: page, rows: pageSize },
cache: false,
async: false,
success: function (data) {
$("#toast").hide();
//总页数
totalPage = data.total;
if (data.records == 0) {
$("#toast").show().find(".weui-toast__content").text("号码抢光了");
setTimeout(function () {
$("#toast").hide();
}, 2000);
}
var numberList = template("number-tpl", { datas: data.rows });
$("#numberList").html(numberList);
},
error: function (data) {
$("#toast").show().find(".weui-toast__content").text("系统繁忙，请稍候再试");
setTimeout(function () {
$("#toast").hide();
}, 3000);
}
});
}
//换一批
function getNumber() {
if (currentPage + 1 <= totalPage) {
currentPage++;
} else {
currentPage = 1;
}
loadNumberList(currentPage);
}
//选中号码
function choiseNumber(number) {
window.location.href = "/CommonModule/TMobile/TCIndex?mobile=" + number;
}
</script>
</body>
</html>
3173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
