|
@@ -0,0 +1,251 @@
|
|
|
+<!doctype html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport"
|
|
|
+ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
+ <link rel="stylesheet" href="//at.alicdn.com/t/font_624651_bjdvktmum68.css">
|
|
|
+ <link rel="stylesheet" href="/dataExport/css/reset_pc.css">
|
|
|
+ <link rel="stylesheet" href="/dataExport/css/payment_order.css">
|
|
|
+ <title>支付订单</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<section id="pay" class="w">
|
|
|
+ <div class="progress">
|
|
|
+ <div class="l c3">
|
|
|
+ 1.条件筛选
|
|
|
+ </div>
|
|
|
+ <div class="c b2">
|
|
|
+ 2.订单支付
|
|
|
+ </div>
|
|
|
+ <div class="r a1">
|
|
|
+ 3.数据导出
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="inner">
|
|
|
+ <div class="infotitle">
|
|
|
+ <span>当前搜索到<i class="msgCount"></i>条信息</span>
|
|
|
+ <em style="display:none">最大限额20,000条</em>
|
|
|
+ <a class="dataPreview"><span class="iconfont icon-yulan"></span>预览数据</a>
|
|
|
+ </div>
|
|
|
+ <div class="email">
|
|
|
+ <div class="title">导出邮箱地址</div>
|
|
|
+ <div class="input clearfix">
|
|
|
+ <input class="fl em email_input" type="text" placeholder="请输入邮箱地址,用于接收导出的数据">
|
|
|
+ <input class="fl test verity_input" type="text" maxlength="6" placeholder="请输入邮箱验证码">
|
|
|
+ <button class="fl sub sendEmail">获取验证码</button>
|
|
|
+ <div class="fl status clearfix">
|
|
|
+ <i class="fl iconfont icon-zhengque succ email_check_ok" style="display:none"></i>
|
|
|
+ <p class="err fl email_err_msg" style="display:none"><i class="iconfont icon-cuowu"></i>您输入的验证码不正确</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="guige">
|
|
|
+ <div class="title">数据规格<i class="iconfont icon-bangzhu"></i></div>
|
|
|
+ <div class="inner clearfix switch-dataType">
|
|
|
+ <div class="bz no-select">
|
|
|
+ <p>标准字段包</p>
|
|
|
+ <p>
|
|
|
+ <del>{{.T.unitPrice_normal}}元/条</del> <span>{{.T.unitPrice_normal_final}}元/条</span></p>
|
|
|
+ </div>
|
|
|
+ <div class="gj active no-select">
|
|
|
+ <p><i class="iconfont icon-huangguan"></i>高级字段包</p>
|
|
|
+ <p>
|
|
|
+ <del>{{.T.unitPrice_senior}}元/条</del> <span>{{.T.unitPrice_senior_final}}元/条</span></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="wxpay">
|
|
|
+ <div class="title">支付方式</i></div>
|
|
|
+ <div class="inner clearfix">
|
|
|
+ <div class="wx active no-select">
|
|
|
+ <span>微信支付</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="money ">
|
|
|
+ <div class="clearfix">
|
|
|
+ <p class="fr">应付总额:现价 <span class="pay_discount">¥2046</span></p>
|
|
|
+ </div>
|
|
|
+ <div class="clearfix">
|
|
|
+ <p class="fr">原价
|
|
|
+ <del class="pay_before">¥2090</del>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info clearfix">
|
|
|
+ <div class="fl left">
|
|
|
+ <p>最低起售{{.T.orderMinPrice}}元</p>
|
|
|
+ <p>限额{{.T.msgMaxCount}}条,计价方式唯一</p>
|
|
|
+ <p class="unitPrice_normal_detail">标准字段包:原价1元/条,5折价0.5元/条计费</p>
|
|
|
+ <p class="unitPrice_senior_detail">高级字段包:原价2元/条,5折价1元/条计费</p>
|
|
|
+ </div>
|
|
|
+ <div class="fr right">
|
|
|
+ <p class="clearfix t fr">
|
|
|
+ <span id="checkBoxjy" class="iconfont"></span>
|
|
|
+ <i>已阅读并同意<a href="#">《剑鱼服务条款》</a></i>
|
|
|
+
|
|
|
+ </p>
|
|
|
+ <p class="btn">
|
|
|
+ <button class="dataPreview">预览数据</button>
|
|
|
+ <button class="toPay" disabled="disabled">确认支付</button>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+
|
|
|
+<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
|
|
|
+<script>
|
|
|
+ var msgCount={{.T.msgCount}}
|
|
|
+ var msgMaxCount={{.T.msgMaxCount}}
|
|
|
+ var discount={{.T.discount}}
|
|
|
+ var unitPrice_normal={{.T.unitPrice_normal}}
|
|
|
+ var unitPrice_senior={{.T.unitPrice_senior}}
|
|
|
+ var orderMinPrice={{.T.orderMinPrice}}
|
|
|
+
|
|
|
+ var finishEmailVerity=false;
|
|
|
+ var dataType=2;
|
|
|
+ $(function () {
|
|
|
+ //数据展示
|
|
|
+ var showCount=FormatNum(msgCount);
|
|
|
+ $(".msgCount").text(showCount);
|
|
|
+ $(".unitPrice_normal_detail").text("标准字段包:原价"+unitPrice_normal+"元/条,"+discount*10+"折价"+unitPrice_normal*discount+"元/条计费");
|
|
|
+ $(".unitPrice_senior_detail").text("高级字段包:原价"+unitPrice_senior+"元/条,"+discount*10+"折价"+unitPrice_senior*discount+"元/条计费");
|
|
|
+ ChangePayMoney();
|
|
|
+
|
|
|
+ //邮箱验证
|
|
|
+ $(".sendEmail").on("click",function(){
|
|
|
+ var email=$(".email_input").val();
|
|
|
+ if(!/\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/.test(email)){
|
|
|
+ showEmailErr("邮箱格式不正确");
|
|
|
+ return
|
|
|
+ }
|
|
|
+ showEmailErr("");
|
|
|
+ $.post("/front/dataExport/sendMailVerify",{"email":email},function(data){
|
|
|
+ console.log(data)
|
|
|
+ if(data.success){
|
|
|
+ //发送成功
|
|
|
+ sendemailTimer(60*5);
|
|
|
+ $(".sendEmail").attr("disabled","disabled");
|
|
|
+ $(".email_input").attr("disabled","disabled");
|
|
|
+ }else{
|
|
|
+ showEmailErr(data.errMsg)
|
|
|
+ if(data.errCode==2){
|
|
|
+ sendemailTimer(data.time);
|
|
|
+ $(".sendEmail").attr("disabled","disabled");
|
|
|
+ $(".email_input").attr("disabled","disabled");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },"json")
|
|
|
+ });
|
|
|
+ //校验验证码
|
|
|
+ $(".verity_input").bind("input propertychange",function(){
|
|
|
+ var verity=$(this).val()
|
|
|
+ if(verity.length==6){
|
|
|
+ $.post("/front/dataExport/checkMailVerify",{"emailVerity":verity},function(data){
|
|
|
+ if(data.success){
|
|
|
+ showEmailErr("");
|
|
|
+ finishEmailVerity=true;
|
|
|
+ $(".email_check_ok").css("display","");
|
|
|
+ $(".verity_input").attr("disabled","disabled");
|
|
|
+ }else{
|
|
|
+ showEmailErr("验证码错误");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ //是否显示最大条数
|
|
|
+ if(msgCount=msgMaxCount){
|
|
|
+ $(".infotitle em").text("最大限额"+showCount+"条");
|
|
|
+ $(".infotitle em").css("display","");
|
|
|
+ }
|
|
|
+
|
|
|
+ //点击阅读条款
|
|
|
+ $('#checkBoxjy').on('click', function () {
|
|
|
+ $(this).toggleClass('hideBf');
|
|
|
+ if($(this).attr("class").indexOf("hideBf")>-1){
|
|
|
+ $(".toPay").css("background-color","#2CB7CA")
|
|
|
+ $(".toPay").removeAttr("disabled");
|
|
|
+ }else{
|
|
|
+ $(".toPay").css("background-color","buttonface")
|
|
|
+ $(".toPay").attr("disabled","disabled");
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ //类型切换
|
|
|
+ $(".switch-dataType div").on("click",function(){
|
|
|
+ $($(this).addClass("active").siblings()).removeClass("active")
|
|
|
+ if($(this).attr("class").indexOf("bz")>-1){
|
|
|
+ dataType=1;
|
|
|
+ }else if($(this).attr("class").indexOf("gj")>-1){
|
|
|
+ dataType=2;
|
|
|
+ }
|
|
|
+ ChangePayMoney();
|
|
|
+ })
|
|
|
+ //确认支付
|
|
|
+ $(".toPay").on("click",function(){
|
|
|
+ alert(111)
|
|
|
+ })
|
|
|
+ //数据浏览
|
|
|
+ $(".dataPreview").on("click",function(){window.open("http://baidu.com");})
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ function FormatNum(n){
|
|
|
+ if(n>=1000){
|
|
|
+ return Math.floor(n/1000)+","+("0000"+n%1000).slice(-3)
|
|
|
+ }
|
|
|
+ return n
|
|
|
+ }
|
|
|
+
|
|
|
+ function ChangePayMoney(){
|
|
|
+ var shouldPay;beforePay=0;0;
|
|
|
+ if(dataType==1){
|
|
|
+ beforePay=unitPrice_normal*msgCount
|
|
|
+ shouldPay=beforePay*discount;
|
|
|
+ }else if(dataType==2){
|
|
|
+ beforePay=unitPrice_senior*msgCount
|
|
|
+ shouldPay=beforePay*discount;
|
|
|
+ }
|
|
|
+ shouldPay=shouldPay>orderMinPrice?shouldPay:orderMinPrice;
|
|
|
+ beforePay=beforePay>orderMinPrice?beforePay:orderMinPrice;
|
|
|
+ $(".pay_discount").text("¥"+shouldPay);
|
|
|
+ $(".pay_before").text("¥"+beforePay)
|
|
|
+ }
|
|
|
+ function showEmailErr(str){
|
|
|
+ if(!finishEmailVerity){
|
|
|
+ $(".email_check_ok").css("display","none");
|
|
|
+ }
|
|
|
+
|
|
|
+ if(str!=""){
|
|
|
+ $(".email_err_msg").css("display","").html("<i class=\"iconfont icon-cuowu\"></i>"+str);
|
|
|
+ }else{
|
|
|
+ $(".email_err_msg").css("display","none")
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function sendemailTimer(t){
|
|
|
+ $(".sendEmail").css("background","buttonface");
|
|
|
+ $(".sendEmail").text("再次尝试("+t+"s)")
|
|
|
+ r=setInterval(function(){
|
|
|
+ t--;
|
|
|
+ $(".sendEmail").text("再次尝试("+t+"s)")
|
|
|
+ console.log("sss")
|
|
|
+ if(t==0){
|
|
|
+ clearInterval(r)
|
|
|
+ $(".sendEmail").text("获取验证码").css("background","#2CB7CA");
|
|
|
+ if(!finishEmailVerity){
|
|
|
+ $(".sendEmail").removeAttr("disabled");
|
|
|
+ $(".email_input").removeAttr("disabled");
|
|
|
+ }
|
|
|
+ showEmailErr("");
|
|
|
+ }
|
|
|
+ },1000)
|
|
|
+ }
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|