Browse Source

支付弹框逻辑

pull/1/head
zq 7 months ago
parent
commit
49688a9df3
  1. 3412
      aa1.html
  2. 1288
      home.html
  3. 3760
      style/css/all.css
  4. 191
      style/css/index.css
  5. 1
      style/img/lingdang.svg
  6. 1
      style/img/modal_close.svg
  7. 1
      style/img/pay_icon.svg
  8. 1
      style/img/pay_wx.svg
  9. 1
      style/img/pay_zfb.svg
  10. 228
      style/js/index.js

3412
aa1.html

File diff suppressed because it is too large

1288
home.html

File diff suppressed because it is too large

3760
style/css/all.css

File diff suppressed because it is too large

191
style/css/index.css

@ -32,6 +32,192 @@ body,p,div{
transition: all .3s;
display: block !important;
}
.pageMask{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.33);
position: fixed;
z-index: 100;
left: 0;
top: 0;
}
.payModal{
position: fixed;
width: 740px;
height: 300px;
background-color: #fff;
left: 50%;
top: 20%;
z-index: 999;
transform: translateX(-50%);
border-radius: 16px;
padding: 0 36px 44px;
/* display: flex; */
}
.pay_header{
text-align: center;
position: relative;
}
.pay_header img{
position: absolute;
right: 24px;
height: 20px;
top: 0;
cursor: pointer;
}
.payModal .pay_content{
display: flex;
}
.pay_content{
padding: 20px 0;
}
.pay_type{
display: flex;
flex: 1;
align-items: center;
padding: 15px 0 20px 0;
}
.pay_left{
margin: 0 20px;
}
.pay_every{
width: 132px;
height: 34px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 7px 10px;
border-radius: 5px;
opacity: 1;
font-size: 12px;
background: rgba(255, 255, 255, 0.5);
box-sizing: border-box;
border: 1px solid #CBD3DE;
margin-bottom: 15px;
cursor: pointer;
}
.pay_every.pay_active{
border: 1px solid #67C23A;
}
.pay_right{
padding-bottom: 24px;
font-family: Microsoft YaHei UI;
font-size: 14px;
font-weight: normal;
line-height: 18px;
letter-spacing: 0px;
font-variation-settings: "opsz" auto;
color: #8C919D;
}
#qrcode{
width: 140px;
height: 140px;
}
.pay_right p{
font-size: 12px;
}
.pay_right .pay_moneyNum{
color: #3D3D3D;
font-size: 16px;
margin-bottom: 15px;
}
.pay_moneyNum #totalMoney{
font-family: Microsoft YaHei UI;
font-size: 30px;
font-weight: bold;
line-height: normal;
letter-spacing: 0px;
display: inline-block;
margin-left: 8px;
font-variation-settings: "opsz" auto;
}
.modal_mes{
display: flex;
align-items: center;
padding: 8px 16px;
border-radius: 6px;
background: rgba(236, 133, 51, 0.12);
}
/* ====== */
.ai2_pay_wrap .ai2_tbpay i{
background: url(/images/ai2/pay/tbpay_grey.png) no-repeat center center;
background-size: 17px;
}
.ai2_pay_wrap .ai2_jdpay i{
background: url(/images/ai2/pay/jdpay_grey.png) no-repeat center center !important;
background-size: 17px !important;
}
.ai2_pay_wrap .ai2_tbpay.active::after{
content: '';
width: 100%;
height: 2px;
background: #FF6413;
position: absolute;
left: 0px;
bottom: -5px;
border-radius: 2px;
}
.ai2_pay_wrap .ai2_jdpay.active::after{
content: '';
width: 100%;
height: 2px;
background: rgb(223, 29, 24) !important;
position: absolute;
left: 0px;
bottom: -5px;
border-radius: 2px;
}
.ai2_pay_wrap .ai2_tbpay.active{
color: #FF6413;
}
.ai2_pay_wrap .ai2_jdpay.active{
color: rgb(223, 29, 24) !important;
}
.ai2_pay_wrap .ai2_tbpay.active i{
display: block;
background: url(/images/ai2/pay/tbpay.png) no-repeat center center;
background-size: 17px;
}
.ai2_pay_wrap .ai2_jdpay.active i{
display: block;
background: url(/images/ai2/pay/jdpay.png) no-repeat center center !important;
background-size: 17px !important;
}
/* taobao pay end*/
/* check card pay start*/
.ai2_pay_wrap .ai2_cardpay i{
background: url(/images/ai2/pay/checkcard_pay_grey.png) no-repeat center center;
background-size: 17px;
}
.ai2_pay_wrap .ai2_cardpay.active::after{
content: '';
width: 100%;
height: 2px;
background: #1675FF;
position: absolute;
left: 0px;
bottom: -5px;
border-radius: 2px;
}
.ai2_pay_wrap .ai2_cardpay.active{
color: #1675FF;
}
.ai2_pay_wrap .ai2_cardpay.active i{
display: block;
background: url(/images/ai2/pay/checkcard_pay2.png) no-repeat center center;
background-size: 17px;
}
/* ====== */
.big_container{
/* width: 100%;
height: 100vh; */
@ -384,7 +570,7 @@ li span{
/* height: 20px; */
display: inline-block;
}
li .select_icon{
li .select_icon, .pay_every .pay_icon{
width: 14px;
height: 14px;
margin-left: 10px;
@ -394,7 +580,8 @@ li .select_icon{
right: 0;
top: 0; */
}
.active_select .select_icon{
.active_select .select_icon,.pay_active .pay_icon{
opacity: 1;
/* display: block; */
}

1
style/img/lingdang.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_18_04531"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_18_04531)"><g></g><g><path d="M4,12L4,6.97633C4,4.78026,5.79086,3,8,3C10.20914,3,12,4.78026,12,6.97633L11.99888,12" fill="#FF7800" fill-opacity="1"/></g><g style="opacity:0.5;"><ellipse cx="8.0078125" cy="3.0625" rx="1" ry="1" fill="#FF7800" fill-opacity="1"/></g><g style="opacity:0.5;"><ellipse cx="8" cy="12.5625" rx="2" ry="2" fill="#FF7800" fill-opacity="1"/></g><g><path d="M3,11.25L13,11.25Q13.0739,11.25,13.1463,11.264410999999999Q13.2188,11.278822,13.287,11.30709Q13.3553,11.335359,13.4167,11.376398Q13.4781,11.417437,13.5303,11.46967Q13.5826,11.521903,13.6236,11.583322Q13.6646,11.644742,13.6929,11.712987Q13.7212,11.781233,13.7356,11.853682Q13.75,11.9261315,13.75,12Q13.75,12.0738685,13.7356,12.146318Q13.7212,12.218767,13.6929,12.287013Q13.6646,12.355258,13.6236,12.416678Q13.5826,12.478097,13.5303,12.53033Q13.4781,12.582563,13.4167,12.623602Q13.3553,12.664641,13.287,12.69291Q13.2188,12.721178,13.1463,12.735589000000001Q13.0739,12.75,13,12.75L3,12.75Q2.9261315,12.75,2.853682,12.735589000000001Q2.781233,12.721178,2.712987,12.69291Q2.644742,12.664641,2.583322,12.623602Q2.521903,12.582563,2.46967,12.53033Q2.417437,12.478097,2.376398,12.416678Q2.335359,12.355258,2.30709,12.287013Q2.278822,12.218767,2.264411,12.146318Q2.25,12.0738685,2.25,12Q2.25,11.9261315,2.264411,11.853682Q2.278822,11.781233,2.30709,11.712987Q2.335359,11.644742,2.376398,11.583322Q2.417437,11.521903,2.46967,11.46967Q2.521903,11.417437,2.583322,11.376398Q2.644742,11.335359,2.712987,11.30709Q2.781233,11.278822,2.853682,11.264410999999999Q2.9261315,11.25,3,11.25Z" fill-rule="evenodd" fill="#FF7800" fill-opacity="1"/></g></g></svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

1
style/img/modal_close.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_18_04659/18_02910"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_18_04659/18_02910)"><g><path d="M14.921918961334228,4.199368106018066C14.921918961334228,4.199368106018066,10.00005896133423,9.121242106018066,10.00005896133423,9.121242106018066C10.00005896133423,9.121242106018066,5.0781789613342285,4.199368106018066,5.0781789613342285,4.199368106018066C4.947762961334228,4.082284606018066,4.801304961334228,4.023743106018067,4.638804961334229,4.023743106018067C4.476304961334229,4.023743106018067,4.332970961334229,4.0856181060180665,4.208804961334229,4.209368106018067C4.084638161334229,4.333118106018066,4.022762961334228,4.476451106018066,4.023179661334228,4.6393681060180665C4.023596361334229,4.8022841060180665,4.082138061334229,4.948743106018067,4.198804961334228,5.078742106018066C4.198804961334228,5.078742106018066,9.120678961334228,10.000622106018067,9.120678961334228,10.000622106018067C9.120678961334228,10.000622106018067,4.198804961334228,14.922482106018066,4.198804961334228,14.922482106018066C4.029638061334229,15.091682106018066,3.9742215613342284,15.293582106018066,4.032554861334228,15.528082106018067C4.090888161334228,15.762682106018067,4.234220961334229,15.909182106018067,4.462554961334228,15.967482106018066C4.690887961334228,16.025882106018067,4.895887961334228,15.970382106018066,5.077558961334228,15.801282106018066C5.077558961334228,15.801282106018066,9.999428961334228,10.879372106018067,9.999428961334228,10.879372106018067C9.999428961334228,10.879372106018067,14.921318961334228,15.801282106018066,14.921318961334228,15.801282106018066C15.05171896133423,15.918282106018067,15.198218961334229,15.976882106018067,15.360718961334229,15.976882106018067C15.523218961334228,15.976882106018067,15.666518961334228,15.914982106018066,15.790718961334228,15.791282106018066C15.914818961334229,15.667482106018067,15.976718961334228,15.524182106018067,15.97631896133423,15.361282106018066C15.975918961334228,15.198282106018066,15.917318961334228,15.051882106018066,15.800718961334228,14.921882106018066C15.800718961334228,14.921882106018066,10.87880896133423,9.999992106018066,10.87880896133423,9.999992106018066C10.87880896133423,9.999992106018066,15.800718961334228,5.078122106018066,15.800718961334228,5.078122106018066C15.969818961334228,4.908951106018066,16.02521896133423,4.707076106018066,15.966918961334228,4.472493106018066C15.908618961334229,4.2379091060180665,15.76211896133423,4.091451306018066,15.527518961334229,4.033118006018066C15.293018961334228,3.9747847060180663,15.091118961334228,4.0302012060180665,14.921918961334228,4.199368106018066C14.921918961334228,4.199368106018066,14.921918961334228,4.199368106018066,14.921918961334228,4.199368106018066C14.921918961334228,4.199368106018066,14.921918961334228,4.199368106018066,14.921918961334228,4.199368106018066Z" fill="#626573" fill-opacity="1"/></g></g></svg>

After

Width:  |  Height:  |  Size: 3.0 KiB

1
style/img/pay_icon.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14" height="14" viewBox="0 0 14 14"><g><g><rect x="0" y="0" width="14" height="14" rx="7" fill="#67C23A" fill-opacity="1"/><rect x="0.5" y="0.5" width="13" height="13" rx="6.5" fill-opacity="0" stroke-opacity="1" stroke="#67C23A" fill="none" stroke-width="1"/></g><g><path d="M11.09464,5.035172Q11.19379,4.924997,11.2469,4.786611Q11.3,4.648225,11.3,4.5Q11.3,4.4212069,11.28463,4.343928Q11.26926,4.266649,11.2391,4.193853Q11.20895,4.121058,11.16517,4.055544Q11.121400000000001,3.99003,11.06568,3.934315Q11.00997,3.878599,10.94445,3.8348240000000002Q10.87894,3.791049,10.806149999999999,3.760896Q10.73335,3.730744,10.65607,3.715372Q10.57879,3.7,10.5,3.7Q10.32991,3.7,10.17453,3.7692Q10.01915,3.8384,9.90536,3.964828L5.9694400000000005,8.33807L4.065685,6.43431Q3.953164,6.32179,3.806147,6.2608999999999995Q3.65913,6.2,3.5,6.2Q3.4212069,6.2,3.343928,6.21537Q3.266649,6.23074,3.193853,6.2608999999999995Q3.121058,6.29105,3.055544,6.33482Q2.99003,6.3786000000000005,2.934315,6.43431Q2.878599,6.49003,2.8348240000000002,6.555540000000001Q2.791049,6.62106,2.760896,6.693849999999999Q2.730744,6.76665,2.715372,6.84393Q2.7,6.92121,2.7,7Q2.7,7.15913,2.760896,7.306150000000001Q2.821793,7.4531600000000005,2.934314,7.56569L2.9345499999999998,7.56592L5.43431,10.06569Q5.44919,10.08056,5.46483,10.09464Q5.58311,10.20109,5.7331199999999995,10.25417Q5.88314,10.30726,6.04205,10.29889Q6.20096,10.29053,6.34457,10.22199Q6.48818,10.15345,6.59464,10.03517L11.09464,5.035172Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

1
style/img/pay_wx.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 4.9 KiB

1
style/img/pay_zfb.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_18_04561"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_18_04561)"><g><path d="M18.4354296875,13.11244140625L18.4354296875,4.8124214062499995C18.4354296875,3.01576140625,16.9846296875,1.56494140625,15.1879296875,1.56494140625L4.8129096874999995,1.56494140625C3.0162496875,1.56494140625,1.5654296875,3.01576140625,1.5654296875,4.8124214062499995L1.5654296875,15.19594140625C1.5654296875,16.98414140625,3.0162496875,18.43494140625,4.8129096874999995,18.43494140625L15.1964296875,18.43494140625C16.7906296875,18.43494140625,18.1233296875,17.279341406249998,18.3932296875,15.76104140625C17.5329296875,15.38994140625,13.8046296875,13.77884140625,11.8645296875,12.85094140625C10.3884396875,14.63924140625,8.8363996875,15.71884140625,6.5083396875,15.71884140625C4.180279687500001,15.71884140625,2.6198096875,14.28494140625,2.8053696875,12.52204140625C2.9318996875,11.36641140625,3.7247896875,9.47697140625,7.1578296875,9.80593140625C8.9713596875,9.97464140625,9.7979896875,10.31204140625,11.2825496875,10.80127140625C11.6621296875,10.10116140625,11.9826296875,9.325141406250001,12.2188296875,8.50695140625L5.6563996875,8.50695140625L5.6563996875,7.85745140625L8.895449687500001,7.85745140625L8.895449687500001,6.69342140625L4.9394296875000006,6.69342140625L4.9394296875000006,5.97645140625L8.895449687500001,5.97645140625L8.895449687500001,4.29788140625Q8.9291896875,4.03640140625,9.2244096875,4.03640140625L10.8439296875,4.03640140625L10.8439296875,5.98488140625L15.0614296875,5.98488140625L15.0614296875,6.70186140625L10.8439296875,6.70186140625L10.8439296875,7.86589140625L14.2854296875,7.86589140625C13.9733296875,9.15644140625,13.4925296875,10.33734140625,12.8936296875,11.36641140625Q13.8889296875,11.72064140625,18.4354296875,13.11244140625ZM6.2384196875,14.60544140625C3.7753996875,14.60544140625,3.3873896875,13.04494140625,3.5139196875,12.39544140625C3.6404396875,11.74594140625,4.3574196875,10.90249140625,5.7323196875,10.90249140625C7.3096696875,10.90249140625,8.7183096875,11.30737140625,10.4137496875,12.12554140625C9.215979687499999,13.68604140625,7.7567196875,14.60544140625,6.2384196875,14.60544140625Z" fill="#3A75DA" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

228
style/js/index.js

@ -3,6 +3,10 @@ $(document).ready(function() {
var yesRadio = '';
var notChecked = '';
var checked = '';
var payResultTimer = null;
var isPayDialog = false
var allPostData=new Object()
$.get('你的接口URL', function(response) {
// 请求成功时的回调函数
console.log(response);
@ -147,6 +151,230 @@ $(document).ready(function() {
}
}
}
$('.pay_every').click(function(e){
if ($('.pay_every').hasClass('pay_active')) {
$('.pay_every').removeClass('pay_active')
}
$(this).addClass('pay_active')
let pay_type = $('.pay_active').attr('pay_type');
allPostData = {...allPostData,pay_type}
// $('#totalMoney').text('')
payAction()
// getPayQrcode(postData,check_flag)
})
$('.close_modal').click(function(e){
$('.pageMask').addClass('hide');
$('.payModal').addClass('hide');
// clearInterval()
})
function getPayType() {
var paytype = $('.pay_active').attr('pay_type');
return paytype;
}
function payAction(){
let check_type = $('li.active_select').attr('type');
let check_flag = $('li.active_select').attr('check_flag');
let pay_type = getPayType();
let title = $('.inputChange').val();
// goods_id 0
// const postData = {
// title:'88',
// check_type,
// pay_type,
// get_pay_goods:'1',
// aiessay_wordnum:'3000',
// // recharge_goods_id:'0',
// // value_added_services:''//增值服务
// }
const postData = {
title: '123',
check_type: '94',
pay_type,
get_pay_goods: '1',
aiessay_wordnum: '3000'
}
allPostData = {...allPostData,check_flag,recharge_goods_id:'0',...postData}
if(check_type == '94'){
}
//检验信息
getPayQrcode(postData)
}
$('#formInputSumbtn').click(function(e){
payAction()
})
function getPayQrcode(postData){
$.ajax({
type: "post",
dataType:'json',
url: 'http://aitest.chachongz.com/'+ allPostData.check_flag+'/ajax_check_aisubmit',
data: {
...postData
},
success: function (res) {
if(res.data.user_not_enough_money) {
if(isPayDialog){
$('.pageMask').addClass('hide');
$('.payModal').addClass('hide');
}
$('.pageMask').removeClass('hide');
$('.payModal').removeClass('hide');
isPayDialog = true
if(postData.pay_type == 2 || postData.pay_type == 3){
getRechargePayUrl()
// getRechargeGoods(payInfo, configData);
}
}
}
});
}
function getRechargePayUrl(){
console.log(allPostData,'allPostData');
var core_content = $('.coreWordCount').val();
var postData1 = new Object();
postData1.type = allPostData.check_type;
postData1.pay_type = allPostData.pay_type;
// postData1.value_added_services = configData.addedServicesStr;//增值服务
// if(configData.ppt_tpl != '') postData1.ppt_tpl = configData.ppt_tpl;//ppt
// postData1.recharge_goods_id = '0';
postData1.title = allPostData.title;
postData1.core_content = core_content;
// type==94
// var edu= parseInt($('#paper-edu-wrapper').find('input[type="radio"]:checked').val());
// if(edu<=0 || !edu) {
// alert("请选择您的学历");
// return;
// }
// if(!$('.form_essayWords').hasClass('hide')){
// var wordnums= parseInt($('.textLength').find('input[type="radio"]:checked').val());
// if(wordnums<=0 || isNaN(wordnums)) {
// alert("请选择您的字数");
// return;
// }
// }
// var major = parseInt($('#paper-major-wrapper').find('option:selected').val());
// if(major<=0 || !major) {
// alert("请选择您的专业");
// return;
// }
$.ajax({
url:"http://aitest.chachongz.com/"+allPostData.check_flag+'/ajax_get_ai_pay_url',
type:'post',
dataType:'json',
// data:{...postData1},
data:{
type: '94',
pay_type: postData1.pay_type,
value_added_services: '',
recharge_goods_id: '0',
title: '123',
fuid: '',
aiessay_wordnum: '3000',
aiessay_edu: '2',
aiessay_major: '1'
},
success:function(res){
if(res.status){
$('#qrcode').html('');
$('#qrcode').attr('tid', res.data.tid);
$('#qrcode').attr('paytype', postData1.pay_type);
$('#totalMoney').text(res.data.total_fee)
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: res.data.qrcode_url,
width: 135,
height: 135,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
getRechargePayResult(res.data)
}else{
alert(res.info);
}
},
error:function(){
alert('网络错误1');
}
});
// console.log(allPostData,'allPostData====');
}
function getRechargePayResult(payinfo){
clearTimeout(payResultTimer);
if (payinfo.tid) {
ptid = payinfo.tid;
}
$.ajax({
url:"http://aitest.chachongz.com/"+ allPostData.check_flag +'/ajax_get_ai_pay_result',
type:'post',
dataType:'json',
data:{
tid:ptid,
pay_type:'2'},
success:function(res){
if(res.status){
if(res.data.pay_status == 'NOTPAY') {
payResultTimer = setTimeout(function(){
getRechargePayResult(payinfo);
}, 2000);
return;
}else if(res.data.pay_status == 'SUCCESS'){
if(isPayDialog){
$('.pageMask').addClass('hide');
$('.payModal').addClass('hide');
}
}
clearTimeout(payResultTimer);
return;
}
clearTimeout(payResultTimer);
alert(res.info);
},
error:function(err){
alert('网络错误2');
}
});
}
function payresultAction(res) {
var data = res.data;
$('#payresultTid').text(data.tid);
if(data.wechat_qrcode_url){
$('.payresultWrap').removeClass('payresultNoGz');
$('.payresultQrcode').attr('src', data.wechat_qrcode_url);
$('.payresultQrcodeClass').removeClass('hide');
}
$('.payresultMask').removeClass('hide');
$('.payresultWrap').removeClass('hide');
$('.payresultBtn1').unbind('click');
$('.payresultBtn2').unbind('click');
$('.payresultBtn1').click(function(){
location.href = "/report2?oid="+data.tid;
});
$('.payresultBtn2').click(function(){
if(isPayDialog) {
location.reload();
return;
}
location.href = "/modelessay";
});
$('#payresultCopyTidBtn').unbind('click');
var clipboard2 = new Clipboard('#payresultCopyTidBtn', {
text: function () {
return $('#payresultTid').text();
}
});
clipboard2.on('success', function(e) {
alert('复制成功')
})
}
$('li').click(function(e) {
if ($('li').hasClass('active_select')) {

Loading…
Cancel
Save