zhangqi
/
money
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

支付成功逻辑

pull/1/head
zq 5 months ago
parent
49688a9df3
commit
169a71bd4c
6 changed files with 105 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 42
      home.html
  2. 54
      style/css/index.css
  3. 1
      style/img/copy_icon.svg
  4. 1
      style/img/pay_succ.svg
  5. 1
      style/img/succ_tip_icon.svg
  6. 16
      style/js/index.js

42
home.html
View File

@ -763,15 +763,26 @@
</footer>
</div>
</div>
<div class="pageMask hide"></div>
<div class="pageMask "></div>
<div class="payTypeList hide" cur="2"></div>
<div class="payModal hide">
<div class="payModal">
<div class="pay_header">
<h2>支付订单</h2>
<h>订单详情</h>
<img src="./style/img/modal_close.svg" class="close_modal" alt="">
</div>
<div class="pay_content">
<div class="pay_content" mes="网站已通过备案请放心使用，如支付宝提示风险属于系统正常提示，按提示继续操作就可以，有任何疑问都可联系右侧在线客服">
<div id="qrcode"></div>
<script>
new QRCode(document.getElementById("qrcode"), {
text: "weixin://wxpay/bizpayurl?pr=Jr7TFNAz3",
width: 135,
height: 135,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
</script>
<div class="pay_type">
<div class="pay_left">
<div class="pay_every pay_active" pay_type="2">
@ -792,6 +803,29 @@
</div>
</div>
</div>
<div class="pay_detail hide" mes="此页面信息至关重要，您可截图保存避免丢失">
<div class="pay_succ_header">
<img src="./style/img/pay_succ.svg" alt="">
支付成功！订单号是下载范文唯一凭证
</div>
<div class="pay_succ_content">
<img id="qrcode1" src="" alt="">
<div class="pay_succ_right">
<p>
<img src="./style/img/succ_tip_icon.svg" alt="">
微信扫码，随时获知生成状态
</p>
<p>
订单号：<span id="pay_succ_tid">OIY898998787721878233</span>
<img src="./style/img/copy_icon.svg" id="copy_tid" alt="">
</p>
</div>
</div>
<script>
$('#qrcode1').attr('src', "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQFX8DwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAyZ0dySDRYMTVmZmsxTHM4ODFEY3YAAgTcO2FnAwQAjScA");
</script>
</div>
<div class="modal_mes">
<img src="./style/img/lingdang.svg" alt="">
<p style="font-size: 12px;font-weight: 400;color: #EE7000;line-height: 17px;text-align:center;">网站已通过备案请放心使用，如支付宝提示风险属于系统正常提示，按提示继续操作就可以，有任何疑问都可联系右侧在线客服</p>

54
style/css/index.css
View File

@ -51,16 +51,18 @@ body,p,div{
z-index: 999;
transform: translateX(-50%);
border-radius: 16px;
padding: 0 36px 44px;
padding: 28px 36px;
/* display: flex; */
}
.pay_header{
text-align: center;
text-align: left;
position: relative;
font-size: 16px;
font-weight: bold;
}
.pay_header img{
position: absolute;
right: 24px;
right: 0px;
height: 20px;
top: 0;
cursor: pointer;
@ -69,7 +71,9 @@ body,p,div{
display: flex;
}
.pay_content{
padding: 20px 0;
padding: 36px 0;
border-top: 1px solid #CBD3DE;
margin-top: 36px;
}
.pay_type{
display: flex;
@ -111,6 +115,47 @@ body,p,div{
font-variation-settings: "opsz" auto;
color: #8C919D;
}
.pay_detail{
display: flex;
align-items: center;
flex-direction: column;
padding-top: 36px;
border-top: 1px solid #CBD3DE;
margin-top: 36px;
}
.pay_succ_header{
font-family: Microsoft YaHei UI;
font-size: 16px;
font-weight: bold;
line-height: 18px;
letter-spacing: 0px;
font-variation-settings: "opsz" auto;
color: #3D3D3D;
}
.pay_succ_content {
display: flex;
width: 394px;
height: 100px;
padding: 28px 0;
}
.pay_succ_content #qrcode1{
width: 100px;
height: 100px;
}
.pay_succ_right{
display: flex;
flex-direction: column;
align-items: center;
}
.pay_succ_right p{
font-family: Microsoft YaHei UI;
font-size: 14px;
font-weight: normal;
line-height: 18px;
letter-spacing: 0px;
font-variation-settings: "opsz" auto;
color: #3D3D3D;
}
#qrcode{
width: 140px;
height: 140px;
@ -136,6 +181,7 @@ body,p,div{
.modal_mes{
display: flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border-radius: 6px;
background: rgba(236, 133, 51, 0.12);

1
style/img/copy_icon.svg
View File

@ -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="15.6826171875" height="15.6826171875" viewBox="0 0 15.6826171875 15.6826171875"><g><g><path d="M13.8044859375,11.052296875L12.0835659375,11.052296875Q12.0537759375,11.052296875,12.0240659375,11.054396875L11.2435559375,11.054396875L11.2435559375,11.834996875Q11.2414559375,11.864696875,11.2414559375,11.894396875Q11.2414559375,11.924196875,11.2435559375,11.953896875L11.2435559375,12.734396875L12.0240659375,12.734396875Q12.0537759375,12.736496875,12.0835659375,12.736496875L13.8044859375,12.736496875Q14.5825859375,12.736496875,15.1326859375,12.186396875Q15.6827859375,11.636296875,15.6827859375,10.858196875L15.6827859375,1.877976875Q15.6827859375,1.099968875,15.1326859375,0.549829875Q14.5825859375,-0.00030812499999999243,13.8044859375,-0.00030812499999999243L4.8242659375,-0.00030812499999999243Q4.0462579375,-0.00030812499999999243,3.4961189375,0.549829875Q2.9459809375,1.099967875,2.9459809375,1.877976875L2.9459809375,3.579756875Q2.9459809375,3.609546875,2.9480859375,3.639256875L2.9480819375,4.419756875L3.7286315375,4.419756875Q3.7583216375,4.421856875,3.7880859375,4.421856875Q3.8178502375,4.421856875,3.8475403375,4.419756875L4.6280899375,4.419756875L4.6280859375,3.639256875Q4.6301909375,3.609546875,4.6301909375,3.579756875L4.6301909375,1.877976875Q4.6301909375,1.683901875,4.8242659375,1.683901875L13.8044859375,1.683901875Q13.9985859375,1.683901875,13.9985859375,1.877976875L13.9985859375,10.858196875Q13.9985859375,10.938596875,13.9417859375,10.995496875Q13.8848859375,11.052296875,13.8044859375,11.052296875Z" fill-rule="evenodd" fill="#8C919D" fill-opacity="1"/></g><g><path d="M12.736496875,13.8044859375L12.736496875,4.8242659375Q12.736496875,4.0462579375,12.186396875,3.4961189375Q11.636296875,2.9459809375,10.858196875,2.9459809375L1.877976875,2.9459809375Q1.099968875,2.9459809375,0.549829875,3.4961189375Q-0.00030812499999999243,4.0462569375,-0.00030812499999999243,4.8242659375L-0.00030812499999999243,13.8044859375Q-0.00030812499999999243,14.5825859375,0.549829875,15.1326859375Q1.099968875,15.6827859375,1.877976875,15.6827859375L10.858196875,15.6827859375Q11.636296875,15.6827859375,12.186396875,15.1326859375Q12.736496875,14.5825859375,12.736496875,13.8044859375ZM10.858196875,4.6301909375Q11.052296875,4.6301909375,11.052296875,4.8242659375L11.052296875,13.8044859375Q11.052296875,13.8848859375,10.995496875,13.9417859375Q10.938596875,13.9985859375,10.858196875,13.9985859375L1.877976875,13.9985859375Q1.797591875,13.9985859375,1.7407468750000001,13.9417859375Q1.683901875,13.8848859375,1.683901875,13.8044859375L1.683901875,4.8242659375Q1.683901875,4.6301909375,1.877976875,4.6301909375L10.858196875,4.6301909375Z" fill-rule="evenodd" fill="#8C919D" fill-opacity="1"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

1
style/img/pay_succ.svg
View File

@ -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="19.880859375" height="19.880859375" viewBox="0 0 19.880859375 19.880859375"><g><g><g><ellipse cx="9.9404296875" cy="9.9404296875" rx="9" ry="9" fill="#67C23A" fill-opacity="1" style="mix-blend-mode:passthrough"/><ellipse cx="9.9404296875" cy="9.9404296875" rx="9" ry="9" fill-opacity="0" stroke-opacity="1" stroke="#67C23A" fill="none" stroke-width="1.8805972337722778" style="mix-blend-mode:passthrough"/></g><g><path d="M15.133524393463135,6.366866371002197C14.714424393463135,5.937579371002197,14.035024393463134,5.937579371002197,13.615924393463136,6.366866371002197L8.810034393463134,11.291071371002197L6.533564393463134,8.958651371002198C6.114464393463135,8.529181371002197,5.435030393463135,8.529181371002197,5.016033393463135,8.958651371002198C4.596821393463134,9.387941371002197,4.596821393463134,10.084241371002197,5.016033393463135,10.513661371002197L8.051234393463135,13.623611371002198C8.470344393463135,14.053111371002197,9.149724393463135,14.053111371002197,9.568824393463135,13.623611371002198L15.133524393463135,7.921901371002197C15.552624393463136,7.492511371002197,15.552624393463136,6.796314371002198,15.133524393463135,6.366866371002197Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
style/img/succ_tip_icon.svg
View File

@ -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="18" height="18" viewBox="0 0 18 18"><defs><clipPath id="master_svg0_23_5648"><rect x="0" y="18" width="18" height="18" rx="0"/></clipPath><filter id="master_svg1_23_5651" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="1" height="1"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="0" dx="0"/><feGaussianBlur stdDeviation="0.8999999761581421"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0.7490196228027344 0 0 0 0 0.4627451002597809 0 0 0 0 0.30980393290519714 0 0 0 1 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow"/></filter><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg2_23_49415"><stop offset="0%" stop-color="#F6D5B4" stop-opacity="1"/><stop offset="49.28571283817291%" stop-color="#FBDEBF" stop-opacity="1"/><stop offset="97.85714149475098%" stop-color="#F1CAA7" stop-opacity="1"/></linearGradient></defs><g transform="matrix(1,0,0,-1,0,36)" clip-path="url(#master_svg0_23_5648)"><g filter="url(#master_svg1_23_5651)"><path d="M12.600078125,19.799804859161C14.985778125,19.799804859161,16.920078125,21.7319246875,16.920078125,24.1154846875L16.920078125,26.2733246875C16.921178125,27.5127546875,16.387878125,28.6924846875,15.456678125,29.510444687499998L10.940478125,33.7941046875C10.359228125,34.3452046875,9.444868125,34.3334046875,8.878038125,33.7674046875C8.315698125,33.2059046875,8.315698125,32.2946046875,8.878038125,31.7331046875L10.383558125,30.2290046875L2.520078125,30.2290046875C1.724478125,30.2290046875,1.080078125,29.584964687499998,1.080078125,28.7904446875C1.080475349,27.9955546875,1.7251851249999999,27.3514846875,2.520078125,27.3518846875L5.940078125,27.3518846875C5.244198125,27.3518846875,4.680078125,26.7884846875,4.680078125,26.0933246875C4.6804781250000005,25.3978446875,5.244598125,24.8343646875,5.940078125,24.834764687499998L6.660078125,24.834764687499998C5.964198125,24.834764687499998,5.400078125,24.2710046875,5.400078125,23.575844687500002C5.400478125,22.8803646875,5.964598125,22.3168846875,6.660078125,22.3172846875L7.740078125,22.3172846875C7.044198125,22.3172846875,6.480078125,21.7535246875,6.480078125,21.0583646875C6.480478125,20.3628836875,7.044598125,19.7994072915,7.740078125,19.799804859161L12.600078125,19.799804859161Z" fill="url(#master_svg2_23_49415)" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

16
style/js/index.js
View File

@ -323,8 +323,20 @@ $(document).ready(function() {
return;
}else if(res.data.pay_status == 'SUCCESS'){
if(isPayDialog){
$('.pageMask').addClass('hide');
$('.payModal').addClass('hide');
// $('.pageMask').addClass('hide');
$('.pay_content').addClass('hide');
$('.pay_detail').removeClass('hide');
$('#pay_succ_tid').text(res.data.tid)
$('#copy_tid').unbind('click');
var clipboard2 = new Clipboard('#copy_tid', {
text: function () {
return $('#pay_succ_tid').text();
}
});
clipboard2.on('success', function(e) {
alert('复制成功')
})
}
}
clearTimeout(payResultTimer);

Write Preview
Loading…
Cancel
Save