Browse Source

add to Payment page

yee 7 years ago
parent
commit
d193ef241f

BIN
img/bank_abc.png


BIN
img/bank_bob.png


BIN
img/bank_boc.png


BIN
img/bank_ccb.png


BIN
img/bank_ceb.png


BIN
img/bank_cgb.png


BIN
img/bank_cib.png


BIN
img/bank_citic.png


BIN
img/bank_cmb.png


BIN
img/bank_cmbc.png


BIN
img/bank_comm.png


BIN
img/bank_hxb.png


BIN
img/bank_icbc.png


BIN
img/bank_psbc.png


BIN
img/bank_spdb.png


+ 74 - 0
src/css/toPayment.less

@@ -0,0 +1,74 @@
+.payment-content {
+    margin-top: 20px;
+    >div {
+        border: 4px solid rgba(228, 228, 228, 0.61);
+        margin-bottom: 10px;
+        padding-left: 10px;
+    }
+    .payment-title {
+        font-size: 20px;
+        margin: 10px 0;
+    }
+    .payment-money {
+        p {
+            font-size: 20px;
+            line-height: 60px;
+            text-align: left;
+            span {
+                margin-left: 20px;
+                .payment-money-number {
+                    font-size: 26px;
+                    font-style: normal;
+                    color: #CC3A3A;
+                }
+            }
+        }
+    }
+    .payment-type {
+        .payment-type-select {
+            margin-top: 20px;
+            margin-bottom: 20px;
+            li {
+                float: left;
+                font-size: 18px;
+                height: 50px;
+                line-height: 42px;
+                width: 140px;
+                text-align: center;
+                margin-right: 40px;
+                border: 4px solid rgba(228, 228, 228, 0.61);
+                cursor: pointer;
+                &.active {
+                    border: 4px solid #D65151;
+                    cursor: default;
+                }
+            }
+        }
+    }
+    .payment-bank {
+        .payment-bank-bankList {
+            li {
+                float: left;
+                margin-right: 20px;
+                margin-bottom: 10px;
+                border: 4px solid rgba(228, 228, 228, 0.61);
+                cursor: pointer;
+                height: 68px;
+                width: 218px;
+                padding: 5px 5px;
+                img {
+                    width: 200px;
+                    height: 50px;
+                }
+                &.active {
+                    border: 4px solid #D65151;
+                    cursor: default;
+                }
+            }
+        }
+    }
+    #pay {
+        width: 120px;
+        margin-top: 20px;
+    }
+}

+ 33 - 0
src/js/toPayment.js

@@ -0,0 +1,33 @@
+import '../css/bootstrap.less';
+import '../css/public.css';
+import '../css/toPayment.less';
+
+$(function () {
+    var paymentNumber = 9999.00;
+    var paymentBank = null;
+    $('#payNumber').html(paymentNumber);
+    $('.payment-type-select li').on('click', function () {
+        $(this).addClass('active').siblings().removeClass('active');
+        $("#toB2CList").hide();
+        $("#toB2BList").hide();
+        $("#toWXZF").hide();
+        var payType = this.dataset.paytype;
+        switch (payType) {
+            case 'b2b':
+                $("#toB2BList").show();
+                paymentBank = 'cmb'
+                break;
+            case 'b2c':
+                $("#toB2CList").show();
+                paymentBank = 'icbc'
+                break;
+            case 'wx':
+                $("#toWXZF").show();
+                break;
+        }
+    })
+    $('.payment-bank-bankList li').on('click', function () {
+        $(this).addClass('active').siblings().removeClass('active');
+        paymentBank = this.dataset.bankname;
+    })
+})

+ 138 - 0
template/toPayment.html

@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="../img/ico_logo.ico">
+	<meta name="Keywords" content="" />
+	<meta name="Description" content="" />
+	<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">
+	<meta http-equiv="x-ua-compatible" content="ie=edge">
+	<title>支付跳转页面</title>
+
+</head>
+
+<body>
+	<header>
+		<div class="container">
+			<div class="logo"><a href="../template/index.html"><img src="../img/Logo111.png" alt="" title="技淘"/></a></div>
+			<div class="nav">
+				<ul>
+					<li><a href="#">技术交易</a></li>
+					<li><a href="#">科技服务</a><img src="../img/hot.png" /></li>
+					<!-- class="active"-->
+					<li><a href="#">智库咨询</a></li>
+					<li><a href="#">科技金融</a></li>
+					<li><a href="#">科技活动</a></li>
+					<li><a href="#">平台共建</a></li>
+				</ul>
+			</div>
+			<div class="nav_right">
+				<a href="">关于我们</a>
+			</div>
+		</div>
+	</header>
+	<div class="container payment-content">
+		<div class="payment-money">
+			<p>需要支付费用为: <span>人民币 ¥ <i class="payment-money-number" id="payNumber">9999.00</i> 元</span></p>
+		</div>
+		<div class="payment-type">
+			<div class="payment-title">请选择一个支付类型</div>
+			<ul class="payment-type-select clearfix">
+				<li data-paytype="b2c" class="active">B2C支付</li>
+				<li data-paytype="b2b">B2B支付</li>
+				<li data-paytype="wx">微信支付</li>
+			</ul>
+		</div>
+		<div class="payment-bank">
+			<div class="payment-title">请选择一个支付方式</div>
+			<ul class="payment-bank-bankList clearfix" id="toB2CList">
+				<li data-bankname="cmb" class="active"><img src="../img/bank_cmb.png" alt=""></li>
+				<li data-bankname="icbc"><img src="../img/bank_icbc.png" alt=""></li>
+				<li data-bankname="ccb"><img src="../img/bank_ccb.png" alt=""></li>
+				<li data-bankname="abc"><img src="../img/bank_abc.png" alt=""></li>
+				<li data-bankname="cmbc"><img src="../img/bank_cmbc.png" alt=""></li>
+				<li data-bankname="sqbd"><img src="../img/bank_spdb.png" alt=""></li>
+				<li data-bankname="cgb"><img src="../img/bank_cgb.png" alt=""></li>
+				<li data-bankname="cib"><img src="../img/bank_cib.png" alt=""></li>
+				<li data-bankname="ceb"><img src="../img/bank_ceb.png" alt=""></li>
+				<li data-bankname="comm"><img src="../img/bank_comm.png" alt=""></li>
+				<li data-bankname="boc"><img src="../img/bank_boc.png" alt=""></li>
+				<li data-bankname="citic"><img src="../img/bank_citic.png" alt=""></li>
+				<li data-bankname="psbc"><img src="../img/bank_psbc.png" alt=""></li>
+			</ul>
+			<ul class="payment-bank-bankList clearfix" id="toB2BList" style="display:none">
+				<li data-bankname="icbc" class="active"><img src="../img/bank_icbc.png" alt=""></li>
+				<li data-bankname="abc"><img src="../img/bank_abc.png" alt=""></li>
+				<li data-bankname="boc"><img src="../img/bank_boc.png" alt=""></li>
+				<li data-bankname="ccb"><img src="../img/bank_ccb.png" alt=""></li>
+				<li data-bankname="comm"><img src="../img/bank_comm.png" alt=""></li>
+				<li data-bankname="ceb"><img src="../img/bank_ceb.png" alt=""></li>
+				<li data-bankname="hxb"><img src="../img/bank_hxb.png" alt=""></li>
+				<li data-bankname="cmbc"><img src="../img/bank_cmbc.png" alt=""></li>
+				<li data-bankname="cmb"><img src="../img/bank_cmb.png" alt=""></li>
+				<li data-bankname="sqdb"><img src="../img/bank_spdb.png" alt=""></li>
+				<li data-bankname="citic"><img src="../img/bank_citic.png" alt=""></li>
+				<li data-bankname="cib"><img src="../img/bank_cib.png" alt=""></li>
+				<li data-bankname="cgb"><img src="../img/bank_cgb.png" alt=""></li>
+				<li data-bankname="bob"><img src="../img/bank_bob.png" alt=""></li>
+			</ul>
+			<div id="toWXZF" style="display:none">
+
+			</div>
+		</div>
+		<button type="button" class="btn btn-primary" id="pay">支付</button>
+	</div>
+	<div id="bottom">
+		<div class="bottom">
+			<div class="bottom_text">
+				<div class="text_top">
+					<a href="#">关于公司/</a>
+					<a href="#">联系我们</a>
+					<p> Copyright &copy 2016-2017 科德 版权所有 湘ICP备15019731号 -2 技术支持:湖南阿凡提科技有限公司</p>
+				</div>
+				<div class="text_center">
+					<div class="cont_left">
+						<img src="../img/dizhi.jpg" alt="" />
+						<p>湖南省长沙市营盘东路19号金山大厦</p>
+					</div>
+					<div class="cont_center">
+						<img src="../img/dianhua.jpg" alt="" />
+						<p>合作电话:0731-89907207</p>
+						<p>400-8800-962八楼</p>
+					</div>
+					<div class="cont_right">
+						<img src="../img/erweima.jpg" alt="" />
+						<p>科德公众号</p>
+					</div>
+				</div>
+				<div class="text_bottom">
+					<p>友情链接</p>
+					<a href="http://www.hnst.gov.cn/">湖南省科技厅/</a>
+					<a href="http://www.cssti.cn/">长沙市科技局/</a>
+					<a href="http://www.cast.org.cn/">中国科学技术协会/</a>
+					<a href="http://www.chinatorch.gov.cn/">科技部火炬中心/</a>
+					<a href="http://www.nosta.gov.cn/web/index.aspx">国家科技成果奖励办/</a>
+					<a href="http://www.nast.org.cn/">国家科技成果网/</a>
+					<a href="http://www.hnast.org.cn/portal/comm/index.action">湖南省科学技术协会/</a>
+					<a href="http://www.hncgw.gov.cn/">湖南省科技成果转化公共服务平台/</a>
+					<a href="http://www.hnjxw.gov.cn/">湖南省经济信息化委员会/</a>
+					<a href="http://kyy.hnu.cn/">湖南大学科学技术研究院/</a>
+					<a href="http://www.gxst.gov.cn/gxkjt/">广西省科技厅/</a>
+					<a href="http://www.nmkjt.gov.cn/">内蒙古自治区科技厅/</a>
+					<a href="http://www.cshtz.gov.cn/">长沙市高新区管委会/</a>
+					<a href="http://www.jxas.ac.cn/">江西省科学院/</a>
+					<a href="http://www.cnic.cn/front/index.html#/cnicSite/home">中科院计算机网络信息中心/</a>
+					<a href="http://kxyjb.csu.edu.cn/">中南大学科学研究部/</a>
+					<a href="http://www.cast.org.cn/">中国科协创新创业服务中心/</a>
+					<a href="http://www.hbstd.gov.cn/">湖北省科技厅/</a>
+					<a href="http://www.gdstc.gov.cn/">广东省科技厅/</a>
+					<a href="http://www.hnkjt.gov.cn/">河南省科技厅/</a>
+					<a href="http://www.cbtm.gov.cn/">技术合同登记官网</a>
+				</div>
+			</div>
+		</div>
+	</div>
+</body>
+
+</html>

+ 15 - 9
webpack.config.js

@@ -16,7 +16,7 @@ let isWatch = argv.env.watch == 'watch';
 let isDev = isWatch || argv.env.deploy == 'dev';
 
 module.exports = (function () {
-    let plugins =[      
+    let plugins = [
         new webpack.optimize.CommonsChunkPlugin({
             name: 'vendors'
         }),
@@ -28,13 +28,19 @@ module.exports = (function () {
         new webpack.ProvidePlugin({
             $: "jquery",
             jQuery: "jquery"
-        }),       
+        }),
         new HtmlWebpackPlugin({
             title: '首页',
             filename: 'html/index.html',
             template: './template/index.html',
             chunks: ['index', 'vendors']
-        }), 
+        }),
+        new HtmlWebpackPlugin({
+            title: '支付跳转页面',
+            filename: 'html/toPayment.html',
+            template: './template/toPayment.html',
+            chunks: ['toPayment', 'vendors']
+        }),
         new HtmlWebpackPlugin({
             title: '科技服务',
             filename: 'html/service.html',
@@ -88,7 +94,7 @@ module.exports = (function () {
             filename: 'html/technologyTrading/demandDetail.html',
             template: './template/technologyTrading/demandDetail.html',
             chunks: ['technologyTrading/demandDetail', 'vendors']
-        }),       
+        }),
         new HtmlWebpackPlugin({
             title: '智库咨询-智政详情',
             filename: 'html/thinkTank/policyDetail.html',
@@ -107,13 +113,13 @@ module.exports = (function () {
             template: './template/thinkTank/thinkerDetail.html',
             chunks: ['thinkTank/thinkerDetail', 'vendors']
         }),
-         new HtmlWebpackPlugin({
+        new HtmlWebpackPlugin({
             title: '科技金融-投资机构',
             filename: 'html/financial/investmentInstitution.html',
             template: './template/financial/investmentInstitution.html',
             chunks: ['financial/investmentInstitution', 'vendors']
         }),
-         new HtmlWebpackPlugin({
+        new HtmlWebpackPlugin({
             title: '科技金融-投资机构',
             filename: 'html/financial/investmentDetail.html',
             template: './template/financial/investmentDetail.html',
@@ -125,7 +131,7 @@ module.exports = (function () {
             template: './template/service/highTechCognizance.html',
             chunks: ['service/highTechCognizance', 'vendors']
         }),
-         new HtmlWebpackPlugin({
+        new HtmlWebpackPlugin({
             title: '科技服务-知识产权',
             filename: 'html/service/propertyRight.html',
             template: './template/service/propertyRight.html',
@@ -148,8 +154,8 @@ module.exports = (function () {
     }
 
     //let staticHost = 'http://aftts.hnzhiming.com';
-    //let staticHost = 'http://afts.hnzhiming.com';
-    let staticHost = 'http://127.0.0.1';
+    let staticHost = 'http://afts.hnzhiming.com';
+    //let staticHost = 'http://127.0.0.1';
     switch (argv.env.deploy) {
         case 'test':
             staticHost = 'http://static.jishutao.com';

+ 5 - 0
webpack/entry.config.js

@@ -1,6 +1,7 @@
 module.exports = {
     prod: {
         'index': './src/js/index.js',
+        'toPayment': './src/js/toPayment.js',
         'service': './src/js/service.js',
         'register': './src/js/register.js',
         'technologyTrading': './src/js/technologyTrading.js',
@@ -23,6 +24,10 @@ module.exports = {
             'webpack/hot/only-dev-server',
             './src/js/index.js'
         ],
+        'toPayment': ['webpack-dev-server/client?http://127.0.0.1:80', // WebpackDevServer host and port
+        'webpack/hot/only-dev-server',
+        './src/js/toPayment.js'
+    ],
         'service': ['webpack-dev-server/client?http://127.0.0.1:80', // WebpackDevServer host and port
             'webpack/hot/only-dev-server',
             './src/js/service.js'