You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
251 lines
7.8 KiB
251 lines
7.8 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
<link rel="stylesheet" href="./css/swiper-3.4.2.min.css">
|
|
</head>
|
|
|
|
<body>
|
|
<img class="loading" src="./img/loading.png" alt="">
|
|
|
|
<div id="home" class="container">
|
|
<div id="bb" class="my-account">
|
|
<div class="account-header">
|
|
<a href="#home" class="account-back"></a>
|
|
<img class="bg" src="./img/account.jpg" alt="">
|
|
</div>
|
|
<div class="bb-list">
|
|
</div>
|
|
<img class="bg" style="margin-top: 10px;" src="./img/IMG_3620.jpg" alt="">
|
|
</div>
|
|
|
|
<div id="list" class="billing list-class">
|
|
<div class="account-header billing-header">
|
|
<a href="javascript:history.back(-1)" class="account-back"></a>
|
|
<div class="card-box">
|
|
<div class="card-number"></div>
|
|
<img class="bg" id="m1" src="./img/m1.png" alt="">
|
|
<div class="filter">
|
|
<div class="filter-item active" data-query-key="nearlyWeek">近一周</div>
|
|
<div class="filter-item" data-query-key="nearlyMonth">近一月</div>
|
|
<div class="filter-item" data-query-key="lastThreeMonths">近三月</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="billing-list">
|
|
</div>
|
|
</div>
|
|
<div class="header">
|
|
|
|
</div>
|
|
<div class="banner">
|
|
<!-- <img class="bg top-header" src="./img/t.jpg" alt=""> -->
|
|
<a href="#bb" id="my_account_rn" class="account"></a>
|
|
<a href="#list" id="mx_rn" class="mx"></a>
|
|
</div>
|
|
<div class="home-box">
|
|
<img class="bg" src="./img/1.jpg" alt="">
|
|
<div class="font-animation-box">
|
|
<div class="box-list">
|
|
<div>21312312</div>
|
|
<div>--1231231</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<img src="./img/lun.jpg" alt="">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="./img/lun.jpg" alt="">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="./img/lun.jpg" alt="">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="./img/lun.jpg" alt="">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="./img/lun.jpg" alt="">
|
|
</div>
|
|
</div>
|
|
<!-- 如果需要分页器 -->
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
|
|
<img class="bg" src="./img/2.jpg" alt="">
|
|
<img class="bg" src="./img/3.jpg" alt="">
|
|
<img class="bg" src="./img/4.jpg" alt="">
|
|
<img class="bg" src="./img/5.jpg" alt="">
|
|
<img class="bg" src="./img/6.jpg" alt="">
|
|
<img class="bg footer" src="./img/7.jpg" alt="">
|
|
<p class="tips"></p>
|
|
|
|
</div>
|
|
|
|
<script src="./js/swiper-3.4.2.min.js"></script>
|
|
<script src="./js/jquery-3.6.1.min.js"></script>
|
|
<script src="./js/moment.js"></script>
|
|
<script src="./1.js"></script>
|
|
<script>
|
|
function hideLoading() {
|
|
setTimeout(() => {
|
|
$('.loading').hide();
|
|
}, 500)
|
|
}
|
|
hideLoading();
|
|
|
|
$(async function () {
|
|
let nearlyMonth = [], lastThreeMonths = [], nearlyWeek = [];
|
|
|
|
new Swiper('.swiper-container', {
|
|
loop: true,
|
|
pagination: '.swiper-pagination',
|
|
autoplay: 3000,
|
|
paginationClickable: true
|
|
})
|
|
|
|
$('#my_account_rn,#mx_rn').on('click', () => {
|
|
window?.ReactNativeWebView?.postMessage(1)
|
|
})
|
|
|
|
$('.account-back').on('click', () => {
|
|
window?.ReactNativeWebView?.postMessage(0)
|
|
})
|
|
|
|
$("#m1").each(function () {
|
|
if (this.complete) {
|
|
console.log('complete', this.height)
|
|
$('.billing-list').css('paddingTop', this.height)
|
|
} else {
|
|
$($(this)).on('load', function () {
|
|
// image now loaded
|
|
$('.billing-list').css('paddingTop', this.height)
|
|
|
|
console.log('load', this.height)
|
|
|
|
});
|
|
}
|
|
});
|
|
|
|
$('.filter-item').click(function () {
|
|
hideLoading();
|
|
|
|
$('.loading').show();
|
|
$('.filter-item').removeClass('active');
|
|
const key = $(this).attr('data-query-key');
|
|
$(this).addClass('active')
|
|
if (key === 'nearlyMonth') {
|
|
renderBillingDom(nearlyMonth)
|
|
} else if (key === 'lastThreeMonths') {
|
|
renderBillingDom(lastThreeMonths)
|
|
} else if (key === 'nearlyWeek') {
|
|
renderBillingDom(nearlyWeek)
|
|
}
|
|
})
|
|
|
|
$('.account,.mx').on('click', () => {
|
|
$('.loading').show()
|
|
hideLoading();
|
|
})
|
|
|
|
|
|
$.ajax({
|
|
url: "https://parking.houzhisoft.com/json.php?id=1",
|
|
type: "GET",
|
|
success(result) {
|
|
const currentDate = moment();
|
|
const nearlyWeekS = moment().subtract(7, 'days');
|
|
const nearlyMonthS = moment().subtract(1, 'months');
|
|
const lastThreeMonthsS = moment().subtract(3, 'months');
|
|
result?.map(item => {
|
|
if (moment(item.time).isAfter(nearlyWeekS)) {
|
|
nearlyWeek.unshift(item);
|
|
}
|
|
if (moment(item.time).isAfter(nearlyMonthS)) {
|
|
nearlyMonth.unshift(item);
|
|
}
|
|
if (moment(item.time).isAfter(lastThreeMonthsS)) {
|
|
lastThreeMonths.unshift(item);
|
|
}
|
|
})
|
|
renderBillingDom(nearlyWeek)
|
|
|
|
}
|
|
})
|
|
function renderBillingDom(arr) {
|
|
const billingHtmlArr = arr.map(item => {
|
|
const { type, name, amount, time, money } = item;
|
|
return `
|
|
<div class="item">
|
|
<div class="card-l">
|
|
<div class="row">
|
|
<p class="name">${name}</p>
|
|
${type == 0 ? `<div class="add">${amount}</div>` : ` <div class="add jian">${amount}</div>`}
|
|
</div>
|
|
<div class="row">
|
|
<div class="time">${time}</div>
|
|
<div class="ye">余额：${money}</div>
|
|
</div>
|
|
</div>
|
|
<img class="bg" src="./img/m2.png" alt="">
|
|
</div>
|
|
`
|
|
})
|
|
$('.billing-list').html(billingHtmlArr)
|
|
}
|
|
|
|
$('.account-back').click(function () {
|
|
$('.my-account').removeClass('moveRight')
|
|
})
|
|
|
|
|
|
$.ajax({
|
|
url: "./config.json",
|
|
success: function (result) {
|
|
console.log(result, 'result')
|
|
if (result) {
|
|
const { showApp, fontAnimationList, bottomTips, cardList, billingList, billingCardNumber } = result;
|
|
if (!showApp) {
|
|
$('body').html('')
|
|
} else {
|
|
$('.tips').html(bottomTips);
|
|
const cardHtmlArr = cardList.map((item, index) => {
|
|
const { cardId, cardCode, money } = item
|
|
return `
|
|
<div class="item card-item">
|
|
<div class="card">${cardId} <span>${cardCode}</span></div>
|
|
<div class="money">${money}</div>
|
|
<a class="toList" data-index=${index} href="#list"></a>
|
|
<img class="bg" src="./img/IMG_3619.png" alt="">
|
|
</div>
|
|
`
|
|
})
|
|
|
|
$('.bb-list').html(cardHtmlArr.join(''))
|
|
$('.card-number').text(billingCardNumber)
|
|
$('.box-list').html(`<div>${fontAnimationList[0]}</div><div>${fontAnimationList[1]}</div>`)
|
|
$('.toList').each(function () {
|
|
$(this).click(() => {
|
|
$('.my-account ').addClass('moveRight')
|
|
console.log($(this).attr('data-index'), 'wwww')
|
|
$('.card-number').text(cardList[$(this).attr('data-index')]?.cardId)
|
|
})
|
|
})
|
|
}
|
|
} else {
|
|
$('body').html('')
|
|
}
|
|
}
|
|
});
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|
|
|