|
|
@@ -1,243 +1,263 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
- <meta name="divport" content="width=device-width, initial-scale=1.0">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
|
- <link rel="stylesheet" href="/assets/frontend/recharge/reset.css">
|
|
|
- <link rel="stylesheet" href="/assets/frontend/recharge/icon.css">
|
|
|
- <title>充值</title>
|
|
|
- <style>
|
|
|
- .page {
|
|
|
- height: 100vh;
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .content{
|
|
|
- padding-top: 0.40rem;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- height: 100%;
|
|
|
- margin:0 auto;
|
|
|
- width: 8.00rem;
|
|
|
- background-color: #f8f8f8;
|
|
|
- }
|
|
|
- .phone-wrap {
|
|
|
- width: 7.50rem;
|
|
|
- padding:0 0.15rem 0.15rem;
|
|
|
- }
|
|
|
- .phone-item {
|
|
|
- width: 100%;
|
|
|
- height: 0.35rem;
|
|
|
- border-bottom: 2px solid #eee;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- }
|
|
|
- .phone-item input {
|
|
|
- flex:1;
|
|
|
- font-size: 0.16rem;
|
|
|
- background-color: #f8f8f8;
|
|
|
- }
|
|
|
- .phone-item .phone-nick{
|
|
|
- color:#999999;
|
|
|
- font-size: 0.13rem;
|
|
|
- }
|
|
|
- .recharge-wrap {
|
|
|
- width: 7.50rem;
|
|
|
- padding: 0.15rem;
|
|
|
- padding-top: 0rpx;
|
|
|
- padding-bottom: 0rpx;
|
|
|
+<meta charset="UTF-8">
|
|
|
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+<meta name="divport" content="width=device-width, initial-scale=1.0">
|
|
|
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
|
+<link rel="stylesheet" href="/assets/frontend/recharge/reset.css">
|
|
|
+<link rel="stylesheet" href="/assets/frontend/recharge/icon.css">
|
|
|
+<title>充值</title>
|
|
|
+<style>
|
|
|
+.page {
|
|
|
+ height: 100vh;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.content{
|
|
|
+ padding-top: 0.40rem;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ margin:0 auto;
|
|
|
+ width: 8.00rem;
|
|
|
+ background-color: #f8f8f8;
|
|
|
+}
|
|
|
+.phone-wrap {
|
|
|
+ width: 7.50rem;
|
|
|
+ padding:0 0.15rem 0.15rem;
|
|
|
+}
|
|
|
+.phone-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 0.35rem;
|
|
|
+ border-bottom: 2px solid #eee;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- }
|
|
|
- .recharge-title {
|
|
|
- font-size: 0.16rem;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
+}
|
|
|
+.phone-item input {
|
|
|
+ flex:1;
|
|
|
+ font-size: 0.16rem;
|
|
|
+ background-color: #f8f8f8;
|
|
|
+}
|
|
|
+.phone-item .phone-nick{
|
|
|
+ color:#999999;
|
|
|
+ font-size: 0.13rem;
|
|
|
+}
|
|
|
+.recharge-wrap {
|
|
|
+ width: 7.50rem;
|
|
|
+ padding: 0.15rem;
|
|
|
+ padding-top: 0rpx;
|
|
|
+ padding-bottom: 0rpx;
|
|
|
|
|
|
- .exchange-section {
|
|
|
- margin-top: 0.10rem;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- /* justify-content: space-between; */
|
|
|
- }
|
|
|
- .exchange-box {
|
|
|
- width: 1.25rem;
|
|
|
- height: 0.71rem;
|
|
|
- border: 0.01rem solid #7D73DC;
|
|
|
- border-radius: 0.10rem;
|
|
|
- margin-bottom: 0.15rem;
|
|
|
- color: #999999;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- cursor: pointer;
|
|
|
- margin-right: 0.40rem;
|
|
|
- }
|
|
|
- .exchange-box:nth-child(4n){
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
+}
|
|
|
+.recharge-title {
|
|
|
+ font-size: 0.16rem;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
|
|
|
- .exchange-top {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
+.exchange-section {
|
|
|
+ margin-top: 0.10rem;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ /* justify-content: space-between; */
|
|
|
+}
|
|
|
+.exchange-box {
|
|
|
+ width: 1.25rem;
|
|
|
+ height: 0.71rem;
|
|
|
+ border: 0.01rem solid #7D73DC;
|
|
|
+ border-radius: 0.10rem;
|
|
|
+ margin-bottom: 0.15rem;
|
|
|
+ color: #999999;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 0.40rem;
|
|
|
+}
|
|
|
+.exchange-box:nth-child(4n){
|
|
|
+ margin-right: 0;
|
|
|
+}
|
|
|
|
|
|
- .exchange-pic {
|
|
|
- height: auto;
|
|
|
- width: 0.18rem;
|
|
|
- margin-right: 0.07rem;
|
|
|
- }
|
|
|
+.exchange-top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
|
|
|
- .diamonds-num {
|
|
|
- font-size: 0.16rem;
|
|
|
- color: #261A00;
|
|
|
- }
|
|
|
-
|
|
|
+.exchange-pic {
|
|
|
+ height: auto;
|
|
|
+ width: 0.18rem;
|
|
|
+ margin-right: 0.07rem;
|
|
|
+}
|
|
|
|
|
|
- /* .actvie {
|
|
|
- color: #FFFFFF;
|
|
|
- } */
|
|
|
+.diamonds-num {
|
|
|
+ font-size: 0.16rem;
|
|
|
+ color: #261A00;
|
|
|
+}
|
|
|
|
|
|
- .diamonds-name {
|
|
|
- font-size: 0.12rem;
|
|
|
- margin-left: 0.04rem;
|
|
|
- }
|
|
|
|
|
|
- .exchange-price {
|
|
|
- font-size: 0.12rem;
|
|
|
- margin-top: 0.10rem;
|
|
|
- }
|
|
|
+/* .actvie {
|
|
|
+ color: #FFFFFF;
|
|
|
+} */
|
|
|
|
|
|
- .current {
|
|
|
- background: linear-gradient(90deg, #629CFF, #7870F1);
|
|
|
- box-shadow: 0px 3px 5px 0px rgba(126, 114, 220, 0.59);
|
|
|
- color: #FFFFFF !important;
|
|
|
- }
|
|
|
- .current .diamonds-num{
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- .mode-wrap{
|
|
|
- width: 7.50rem;
|
|
|
- height: 1.15rem;
|
|
|
- padding: 0.15rem;
|
|
|
- padding-top:0rpx;
|
|
|
-
|
|
|
- }
|
|
|
- .mode-wrap .mode-title{
|
|
|
- font-size: 0.16rem;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .mode-item{
|
|
|
- width: 7.50rem;
|
|
|
- height: 0.20rem;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 0.10rem;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- }
|
|
|
- .mode-left{
|
|
|
- font-size: 0.14rem;
|
|
|
-
|
|
|
- }
|
|
|
- .mode-left .zicon-weixin{
|
|
|
- font-size: 0.27rem;
|
|
|
- color: #46BB36;
|
|
|
- margin-right: 0.07rem;
|
|
|
- }
|
|
|
- .mode-left .zicon-alipay{
|
|
|
- color:#02A9F1;
|
|
|
- font-size: 0.27rem;
|
|
|
- margin-right: 0.07rem;
|
|
|
- }
|
|
|
- .pay-ic{
|
|
|
- font-size: 0.20rem;
|
|
|
- }
|
|
|
- .zicon-xuanze{
|
|
|
- color: #46BB36;
|
|
|
- }
|
|
|
- .zicon-xuanze1{
|
|
|
- color: #999;
|
|
|
- }
|
|
|
- .mode-tips{
|
|
|
- width: 7.50rem;
|
|
|
- align-items: flex-start;
|
|
|
- margin-top: 0.20rem;
|
|
|
-
|
|
|
- }
|
|
|
- .mode-tips .zicon-tishi{
|
|
|
- font-size: 0.14rem;
|
|
|
- color: #FFCE00;
|
|
|
- margin-top: 8rpx;
|
|
|
- }
|
|
|
- .mode-tips .mode-txt{
|
|
|
- /* width: 2.25rem; */
|
|
|
- margin-left: 0.05rem;
|
|
|
- color: #999999;
|
|
|
- font-size: 0.12rem;
|
|
|
- }
|
|
|
+.diamonds-name {
|
|
|
+ font-size: 0.12rem;
|
|
|
+ margin-left: 0.04rem;
|
|
|
+}
|
|
|
|
|
|
- .recharge-btn{
|
|
|
- width: 2.90rem;
|
|
|
- height: 0.40rem;
|
|
|
- background: #EEEEEE;
|
|
|
- border-radius: 0.20rem;
|
|
|
- margin: 0.50rem auto 0.10rem;
|
|
|
- font-size: 0.15rem;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .recharge-btn.active{
|
|
|
- background: linear-gradient(90deg, #629CFF, #7870F1);
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- @media(max-width: 500px) {
|
|
|
- .content{
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .phone-wrap{
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .recharge-wrap{
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .mode-wrap{
|
|
|
- width: 100%;
|
|
|
+.exchange-price {
|
|
|
+ font-size: 0.12rem;
|
|
|
+ margin-top: 0.10rem;
|
|
|
+}
|
|
|
|
|
|
- }
|
|
|
- .mode-item{
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- form{width:100%} .mode-tips .mode-txt { margin-left: 0.05rem;color: #999999;font-size: 0.12rem;max-width: 3.4rem;line-height: 0.16rem;}
|
|
|
- }
|
|
|
- .warning{
|
|
|
- color:#E6A23C !important;
|
|
|
- }
|
|
|
+.current {
|
|
|
+ background: linear-gradient(90deg, #629CFF, #7870F1);
|
|
|
+ box-shadow: 0px 3px 5px 0px rgba(126, 114, 220, 0.59);
|
|
|
+ color: #FFFFFF !important;
|
|
|
+}
|
|
|
+.current .diamonds-num{
|
|
|
+ color: #FFFFFF;
|
|
|
+}
|
|
|
+.mode-wrap{
|
|
|
+ width: 7.50rem;
|
|
|
+ height: 1.15rem;
|
|
|
+ padding: 0.15rem;
|
|
|
+ padding-top:0rpx;
|
|
|
+
|
|
|
+}
|
|
|
+.mode-wrap .mode-title{
|
|
|
+ font-size: 0.16rem;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.mode-item{
|
|
|
+ width: 7.50rem;
|
|
|
+ height: 0.20rem;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 0.10rem;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+}
|
|
|
+.mode-left{
|
|
|
+ font-size: 0.14rem;
|
|
|
+
|
|
|
+}
|
|
|
+.mode-left .zicon-weixin{
|
|
|
+ font-size: 0.27rem;
|
|
|
+ color: #46BB36;
|
|
|
+ margin-right: 0.07rem;
|
|
|
+}
|
|
|
+.mode-left .zicon-alipay{
|
|
|
+ color:#02A9F1;
|
|
|
+ font-size: 0.27rem;
|
|
|
+ margin-right: 0.07rem;
|
|
|
+}
|
|
|
+.pay-ic{
|
|
|
+ font-size: 0.20rem;
|
|
|
+}
|
|
|
+.zicon-xuanze{
|
|
|
+ color: #46BB36;
|
|
|
+}
|
|
|
+.zicon-xuanze1{
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+.mode-tips{
|
|
|
+ width: 7.50rem;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-top: 0.20rem;
|
|
|
+
|
|
|
+}
|
|
|
+.mode-tips .zicon-tishi{
|
|
|
+ font-size: 0.14rem;
|
|
|
+ color: #FFCE00;
|
|
|
+ margin-top: 8rpx;
|
|
|
+}
|
|
|
+.mode-tips .mode-txt{
|
|
|
+ /* width: 2.25rem; */
|
|
|
+ margin-left: 0.05rem;
|
|
|
+ color: #999999;
|
|
|
+ font-size: 0.12rem;
|
|
|
+}
|
|
|
+
|
|
|
+.recharge-btn{
|
|
|
+ width: 2.90rem;
|
|
|
+ height: 0.40rem;
|
|
|
+ background: #EEEEEE;
|
|
|
+ border-radius: 0.20rem;
|
|
|
+ margin: 0.50rem auto 0.10rem;
|
|
|
+ font-size: 0.15rem;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.recharge-btn.active{
|
|
|
+ background: linear-gradient(90deg, #629CFF, #7870F1);
|
|
|
+ color: #FFFFFF;
|
|
|
+}
|
|
|
+
|
|
|
+.inpt-section{
|
|
|
+ margin-bottom: 0.10rem;
|
|
|
+ width: 100%;
|
|
|
+ height: 0.50rem;
|
|
|
+ padding: 0 0.15rem;
|
|
|
+ line-height: 0;
|
|
|
+ border-bottom: 1px solid #F1F1F1;
|
|
|
+}
|
|
|
+.inpt-section .moneyInpt{
|
|
|
+ font-size: 0.14rem;
|
|
|
+ color:#333;
|
|
|
+ /* width: 100%; */
|
|
|
+ flex:1;
|
|
|
+ background:transparent;
|
|
|
+}
|
|
|
+.money-tips{
|
|
|
+ color:#999999;
|
|
|
+ font-size: 0.13rem;
|
|
|
+}
|
|
|
+@media(max-width: 500px) {
|
|
|
+ .content{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .phone-wrap{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .recharge-wrap{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .mode-wrap{
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ }
|
|
|
+ .mode-item{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ form{width:100%} .mode-tips .mode-txt { margin-left: 0.05rem;color: #999999;font-size: 0.12rem;max-width: 3.4rem;line-height: 0.16rem;}
|
|
|
+}
|
|
|
+.warning{
|
|
|
+ color:#E6A23C !important;
|
|
|
+}
|
|
|
|
|
|
- </style>
|
|
|
- <script>
|
|
|
- !(function(win, doc) {
|
|
|
- function setFontSize() {
|
|
|
+</style>
|
|
|
+<script>
|
|
|
+ !(function(win, doc) {
|
|
|
+ function setFontSize() {
|
|
|
var docEl = doc.documentElement;
|
|
|
var winWidth = docEl.clientWidth;
|
|
|
doc.documentElement.style.fontSize = (winWidth / 1920) * 100 + "px";
|
|
|
- }
|
|
|
- var userAgent = navigator.userAgent;
|
|
|
- win.addEventListener("resize", function() {
|
|
|
+ }
|
|
|
+ var userAgent = navigator.userAgent;
|
|
|
+ win.addEventListener("resize", function() {
|
|
|
if (navigator.userAgent !== userAgent) {
|
|
|
location.reload();
|
|
|
}
|
|
|
- });
|
|
|
- setFontSize();
|
|
|
- })(window, document);
|
|
|
- </script>
|
|
|
+ });
|
|
|
+ setFontSize();
|
|
|
+ })(window, document);
|
|
|
+</script>
|
|
|
</head>
|
|
|
<body>
|
|
|
- <div class="page">
|
|
|
+<div class="page">
|
|
|
|
|
|
- <div class="content">
|
|
|
- <form method="post" action="/index/recharge/recharge_pc">
|
|
|
+ <div class="content">
|
|
|
+ <form method="post" action="/index/recharge/recharge_pc">
|
|
|
<div class="phone-wrap row">
|
|
|
<div class="phone-item row">
|
|
|
<input type="text" name="mobile" placeholder="请输入注册手机号" class="phoneInpt" oninput="onInpt()" autofocus="true"/>
|
|
|
@@ -262,15 +282,19 @@
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="inpt-section row">
|
|
|
+ <input type="number" name="money" placeholder="请输入1-1000任意整数金额" class="moneyInpt" oninput="onMoneyInpt()" />
|
|
|
+ <span class="money-tips" ></span>
|
|
|
+ </div>
|
|
|
<div class="mode-wrap" >
|
|
|
<div class="mode-title">充值方式</div>
|
|
|
- <!--<div class="mode-item row" data-type="wechat">
|
|
|
+ <div class="mode-item row" data-type="wechat">
|
|
|
<div class="mode-left row">
|
|
|
<div class="zicon zicon-weixin"></div>
|
|
|
<div>微信充值</div>
|
|
|
</div>
|
|
|
<div class="zicon pay-ic zicon-xuanze1"></div>
|
|
|
- </div>-->
|
|
|
+ </div>
|
|
|
<div class="mode-item row" data-type="alipay">
|
|
|
<div class="mode-left row">
|
|
|
<div class="zicon zicon-alipay"></div>
|
|
|
@@ -288,10 +312,10 @@
|
|
|
<input type="hidden" name="pay_type" value="alipay" class="payType">
|
|
|
<input type="hidden" name="rc_id" value="1" class="rcId">
|
|
|
<!--<div class="recharge-btn center active">立即充值</div>-->
|
|
|
- </form>
|
|
|
- </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
|
|
|
- </div>
|
|
|
+</div>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
|
|
@@ -309,6 +333,8 @@
|
|
|
var id = $(this).data("id");
|
|
|
$(".rcId").val(id);
|
|
|
console.log($(".rcId").val());
|
|
|
+ $(".moneyInpt").val('');
|
|
|
+ $(".money-tips").html('').removeClass("warning");
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
@@ -369,7 +395,6 @@
|
|
|
}else{
|
|
|
$(".phone-nick").html('未搜到该用户').addClass("warning");
|
|
|
}
|
|
|
-
|
|
|
}else{
|
|
|
alert("系统提示","失败");
|
|
|
}
|
|
|
@@ -377,4 +402,23 @@
|
|
|
);
|
|
|
},1400);
|
|
|
}
|
|
|
+
|
|
|
+ var timer2
|
|
|
+ function onMoneyInpt(){
|
|
|
+ if(timer2){
|
|
|
+ // console.log('正清空中---')
|
|
|
+ clearTimeout(timer2);
|
|
|
+ timer2=null;
|
|
|
+ }
|
|
|
+ timer2=setTimeout(function(){
|
|
|
+ var money = $(".moneyInpt").val();
|
|
|
+ if(! /^([1-9]\d+)$|^[1-9]$/.test(money)){
|
|
|
+ $(".money-tips").html('金额应大于0正整数').addClass("warning");
|
|
|
+ }else{
|
|
|
+ $(".money-tips").html('').removeClass("warning");
|
|
|
+ $('.exchange-box').removeClass("current");
|
|
|
+ $(".rcId").val('');
|
|
|
+ }
|
|
|
+ },1000)
|
|
|
+ }
|
|
|
</script>
|
lizhen_gitee