|
|
@@ -9,27 +9,160 @@
|
|
|
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
|
<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
|
|
|
<link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
|
|
|
+ <style>
|
|
|
+ .standardContent{
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .tabbarItem{
|
|
|
+ font-size: 19px !important;
|
|
|
+ font-weight: bold !important;
|
|
|
+ padding: 5px 30px !important;
|
|
|
+ }
|
|
|
+ .layui-tab-item{
|
|
|
+ padding: 15px !important;
|
|
|
+ }
|
|
|
+ .yuan{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #F5622E;
|
|
|
+ }
|
|
|
+ .standardMoney{
|
|
|
+ font-size: 20px;
|
|
|
+ color: #F5622E;
|
|
|
+ }
|
|
|
+ .yearContent{
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ flex-direction: row;
|
|
|
+ }
|
|
|
+ .yearSort{
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ .yearItem{
|
|
|
+ width: 150px;
|
|
|
+ margin: 5px 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ flex-direction: row;
|
|
|
+ border-radius: 5px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .time{
|
|
|
+ width: 30%;
|
|
|
+ padding: 15px 0;
|
|
|
+ background: #eeeeee;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .money{
|
|
|
+ width: 70%;
|
|
|
+ text-align: center;
|
|
|
+ padding: 15px 0;
|
|
|
+ }
|
|
|
+ .titleYear{
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ .angle{
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-bottom: 20px solid #009688;
|
|
|
+ border-left: 20px solid transparent;
|
|
|
+ }
|
|
|
+ .trueStyle{
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 11px;
|
|
|
+ position: absolute;
|
|
|
+ right: 3px;
|
|
|
+ bottom: -5px;
|
|
|
+ }
|
|
|
+ .codeContent{
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ .codeTitle{
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
<div class="layui-fluid">
|
|
|
<div class="layui-card">
|
|
|
<div class="layui-card-body">
|
|
|
- <div align="center">
|
|
|
- <br>
|
|
|
- <H2 style="color:rgb(0,0,0);">续费年限：<span id="id_year" style="color:red"></span></H2>
|
|
|
- <br>
|
|
|
- <H2 style="color:rgb(0,0,0);">续费时间：<span id="id_renew_date" style="color:red"></span></H2>
|
|
|
- <br>
|
|
|
- <H2 style="color:rgb(0,0,0);">支付金额：<span id="id_amount" style="color:red"></span></H2>
|
|
|
- <br>
|
|
|
- <H2 style="color:rgb(0,0,0);">支付方式：<span id="id_pay_channel" style="color:red"></span></H2>
|
|
|
- <br>
|
|
|
- <div id='pay-code'></div>
|
|
|
- <br/>
|
|
|
- </div>
|
|
|
- <form class="layui-form" action="" lay-filter="component-form-element">
|
|
|
|
|
|
+ <form class="layui-form" action="" lay-filter="component-form-element">
|
|
|
+ <div class="layui-tab layui-tab-card" lay-filter="tabDom">
|
|
|
+ <ul class="layui-tab-title">
|
|
|
+ <li class="layui-this tabbarItem">标准版</li>
|
|
|
+ <li class="tabbarItem">专业版</li>
|
|
|
+ <li class="tabbarItem">无限版</li>
|
|
|
+ </ul>
|
|
|
+ <div class="layui-tab-content">
|
|
|
+ <!--标准版-->
|
|
|
+ <div class="layui-tab-item layui-show">
|
|
|
+ <!--显示标准费用-->
|
|
|
+ <div class="standardContent">
|
|
|
+ <span class="title">标准费用：</span>
|
|
|
+ <span class="yuan">￥</span>
|
|
|
+ <span id="money1"></span>
|
|
|
+ <span class="standardUnit">元/年</span>
|
|
|
+ </div>
|
|
|
+ <!--设置开通时长-->
|
|
|
+ <div class="yearContent">
|
|
|
+ <div class="titleYear">开通时长：</div>
|
|
|
+ <!--显示渲染效果-->
|
|
|
+ <div id="view1" class="yearSort"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--专业版-->
|
|
|
+ <div class="layui-tab-item">
|
|
|
+ <!--显示标准费用-->
|
|
|
+ <div class="standardContent">
|
|
|
+ <span class="title">标准费用：</span>
|
|
|
+ <span class="yuan">￥</span>
|
|
|
+ <span id="money2"></span>
|
|
|
+ <span class="standardUnit">元/年</span>
|
|
|
+ </div>
|
|
|
+ <!--设置开通时长-->
|
|
|
+ <div class="yearContent">
|
|
|
+ <div class="titleYear">开通时长：</div>
|
|
|
+ <!--显示渲染效果-->
|
|
|
+ <div id="view2" class="yearSort"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--无限版-->
|
|
|
+ <div class="layui-tab-item">
|
|
|
+ <!--显示标准费用-->
|
|
|
+ <div class="standardContent">
|
|
|
+ <span class="title">标准费用：</span>
|
|
|
+ <span class="yuan">￥</span>
|
|
|
+ <span id="money3"></span>
|
|
|
+ <span class="standardUnit">元/年</span>
|
|
|
+ </div>
|
|
|
+ <!--设置开通时长-->
|
|
|
+ <div class="yearContent">
|
|
|
+ <div class="titleYear">开通时长：</div>
|
|
|
+ <!--显示渲染效果-->
|
|
|
+ <div id="view3" class="yearSort"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="codeContent">
|
|
|
+ <div class="codeTitle">二维码支付：</div>
|
|
|
+ <div id="pay-code"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<button class="layui-btn" id="id_save" lay-submit lay-filter="component-form-element"
|
|
|
style="display: none">保存
|
|
|
</button>
|
|
|
@@ -37,6 +170,31 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+<!--标准版-->
|
|
|
+<script id="demo" type="text/html">
|
|
|
+ {{# layui.each(d.list, function(index, item){ }}
|
|
|
+ {{# if(item.selected){ }}
|
|
|
+ <div class="yearItem" style="border: 2px solid #009688;" data-index="{{index}}" data-money="{{item.money}}">
|
|
|
+ {{# }else{ }}
|
|
|
+ <div class="yearItem" style="border: 2px solid rgba(0,0,0,0.2);" data-index="{{index}}" data-money="{{item.money}}">
|
|
|
+ {{# } }}
|
|
|
+ <!--时长-->
|
|
|
+ <div class="time">{{item.year}}年</div>
|
|
|
+ <div class="money">
|
|
|
+ <span class="yuan">￥</span>
|
|
|
+ <span class="standardMoney">{{item.value}}</span>
|
|
|
+ <span class="standardUnit">元</span>
|
|
|
+ </div>
|
|
|
+ <!--选中的时候的状态-->
|
|
|
+ {{# if(item.selected){ }}
|
|
|
+ <div class="angle"></div>
|
|
|
+ <div class="trueStyle">√</div>
|
|
|
+ {{# } }}
|
|
|
+ </div>
|
|
|
+ {{# }); }}
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
|
|
|
<script src="../../layuiadmin/layui/layui.js"></script>
|
|
|
<script src="../../layuiadmin/layui/qrcode.js"></script>
|
|
|
@@ -46,43 +204,175 @@
|
|
|
base: '../../../layuiadmin/' //静态资源所在路径
|
|
|
}).extend({
|
|
|
index: 'lib/index',
|
|
|
- }).use(['index', 'form'], function () {
|
|
|
+ }).use(['index', 'form', 'element', 'laytpl'], function () {
|
|
|
var $ = layui.$
|
|
|
, admin = layui.admin
|
|
|
+ , element = layui.element
|
|
|
+ , laytpl = layui.laytpl
|
|
|
, form = layui.form;
|
|
|
-
|
|
|
+ // 企业id
|
|
|
var company_id = layui.view.getParameterByName('company_id');
|
|
|
+ //支付方式
|
|
|
var pay_channel = layui.view.getParameterByName('pay_channel');
|
|
|
- var pay_id = ''
|
|
|
+ //支付金额对应的property
|
|
|
+ var pay_edition = ""
|
|
|
+ var tabIndex = 0;
|
|
|
+
|
|
|
+ //生成二维码
|
|
|
+ function getQrcode(pay_edition){
|
|
|
+ admin.req({
|
|
|
+ url: '/tenant/company/' + company_id + '/get_code/',
|
|
|
+ data: {company_id: company_id, pay_channel, pay_edition},
|
|
|
+ done: function (res) {
|
|
|
+ $('#pay-code').empty()
|
|
|
+ $('#pay-code').qrcode({width: 150, height: 150, text: res.data.qrcode});
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ //监听tab切换
|
|
|
+ element.on('tab(tabDom)', function(e){
|
|
|
+ tabIndex = e.index;
|
|
|
+ let tempArr = [];
|
|
|
+ if(tabIndex == 0){
|
|
|
+ tempArr = data1.list
|
|
|
+ }else if(tabIndex == 1){
|
|
|
+ tempArr = data2.list
|
|
|
+ }else{
|
|
|
+ tempArr = data3.list
|
|
|
+ }
|
|
|
+ if(tempArr && tempArr.length > 0){
|
|
|
+ tempArr.forEach(item=>{
|
|
|
+ if(item.selected){
|
|
|
+ pay_edition = item.property;
|
|
|
+ //生成二维码
|
|
|
+ getQrcode(pay_edition);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ console.log(pay_edition, "success")
|
|
|
+ });
|
|
|
+
|
|
|
+ function renderYear(){
|
|
|
+ var getTpl = demo.innerHTML
|
|
|
+ ,view1 = document.getElementById('view1')
|
|
|
+ ,view2 = document.getElementById('view2')
|
|
|
+ ,view3 = document.getElementById('view3');
|
|
|
+ laytpl(getTpl).render(data1, function(html){
|
|
|
+ view1.innerHTML = html;
|
|
|
+ });
|
|
|
+ laytpl(getTpl).render(data2, function(html){
|
|
|
+ view2.innerHTML = html;
|
|
|
+ });
|
|
|
+ laytpl(getTpl).render(data3, function(html){
|
|
|
+ view3.innerHTML = html;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ var data1 = {
|
|
|
+ list: [
|
|
|
+ {year: 1, selected: true},
|
|
|
+ {year: 2, selected: false},
|
|
|
+ {year: 3, selected: false},
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ var data2 = {
|
|
|
+ list: [
|
|
|
+ {year: 1, selected: true},
|
|
|
+ {year: 2, selected: false},
|
|
|
+ {year: 3, selected: false},
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ var data3 = {
|
|
|
+ list: [
|
|
|
+ {year: 1, selected: true},
|
|
|
+ {year: 2, selected: false},
|
|
|
+ {year: 3, selected: false},
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ function setValue(list){
|
|
|
+ if(list && list.length > 0){
|
|
|
+ list.forEach((item, index)=>{
|
|
|
+ if(item.property == 'edition_1_1_year'){
|
|
|
+ data1.list[0] = {...data1.list[0], ...item}
|
|
|
+ pay_edition = item.property;
|
|
|
+ //生成二维码
|
|
|
+ getQrcode(pay_edition);
|
|
|
+ }else if(item.property == 'edition_1_2_year'){
|
|
|
+ data1.list[1] = {...data1.list[1], ...item}
|
|
|
+ }else if(item.property == 'edition_1_3_year'){
|
|
|
+ data1.list[2] = {...data1.list[2], ...item}
|
|
|
+ }else if(item.property == 'edition_2_1_year'){
|
|
|
+ data2.list[0] = {...data2.list[0], ...item}
|
|
|
+ }else if(item.property == 'edition_2_2_year'){
|
|
|
+ data2.list[1] = {...data2.list[1], ...item}
|
|
|
+ }else if(item.property == 'edition_2_3_year'){
|
|
|
+ data2.list[2] = {...data2.list[2], ...item}
|
|
|
+ }else if(item.property == 'edition_3_1_year'){
|
|
|
+ data3.list[0] = {...data3.list[0], ...item}
|
|
|
+ }else if(item.property == 'edition_3_2_year'){
|
|
|
+ data3.list[1] = {...data3.list[1], ...item}
|
|
|
+ }else if(item.property == 'edition_3_3_year'){
|
|
|
+ data3.list[2] = {...data3.list[2], ...item}
|
|
|
+ }else if(item.property == 'edition_1_yuan'){
|
|
|
+ $("#money1").append('<span class="standardMoney">' + item.value + ' </span>')
|
|
|
+ }else if(item.property == 'edition_2_yuan'){
|
|
|
+ $("#money2").append('<span class="standardMoney">' + item.value + ' </span>')
|
|
|
+ }else if(item.property == 'edition_3_yuan'){
|
|
|
+ $("#money3").append('<span class="standardMoney">' + item.value + ' </span>')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ };
|
|
|
+ console.log(pay_edition, 'succces')
|
|
|
+ renderYear();
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // url: '/tenant/company/' + company_id + '/get_code/',
|
|
|
+ //调用接口获取数据
|
|
|
admin.req({
|
|
|
- url: '/tenant/company/' + company_id + '/get_code/',
|
|
|
- data: {company_id: company_id, pay_channel: pay_channel},
|
|
|
+ url: '/admin/config/',
|
|
|
+ method: 'get',
|
|
|
done: function (res) {
|
|
|
- if (pay_channel == 1) {
|
|
|
- $('#id_pay_channel').html('微信')
|
|
|
- } else {
|
|
|
- $('#id_pay_channel').html('支付宝')
|
|
|
+ if(res.data){
|
|
|
+ setValue(res.data)
|
|
|
}
|
|
|
- $('#id_year').html(res.data.year + '年')
|
|
|
- $('#id_renew_date').html(res.data.renew_date)
|
|
|
- $('#id_amount').html(res.data.amount)
|
|
|
- pay_id = res.data.id
|
|
|
- $('#pay-code').qrcode({width: 200, height: 200, text: res.data.qrcode});
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+ //添加点击事件
|
|
|
+ $(document).on('click', '.yearItem', function(e){
|
|
|
+ let value = e.currentTarget.dataset;
|
|
|
+ //选择支付的年份
|
|
|
+ let cur_index = value.index;
|
|
|
+ let temp_list = [];
|
|
|
+ //标准版
|
|
|
+ if(tabIndex == 0){
|
|
|
+ temp_list = data1.list;
|
|
|
+ }else if(tabIndex == 1){
|
|
|
+ temp_list = data2.list;
|
|
|
+ }else{
|
|
|
+ temp_list = data3.list;
|
|
|
+ }
|
|
|
+ if(temp_list && temp_list.length > 0){
|
|
|
+ temp_list.forEach((item, index)=>{
|
|
|
+ if(index == cur_index){
|
|
|
+ item.selected = true;
|
|
|
+ pay_edition = item.property;
|
|
|
+ //生成二维码
|
|
|
+ getQrcode(pay_edition);
|
|
|
+ }else{
|
|
|
+ item.selected = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ renderYear();
|
|
|
+ console.log(pay_edition, "success")
|
|
|
+ });
|
|
|
+
|
|
|
form.on('submit(component-form-element)', function (data) {
|
|
|
- //layer.msg(JSON.stringify(data.field));
|
|
|
- // admin.req({
|
|
|
- //l url: '/tenant/company/'+company_id+'/confirm_pay/'
|
|
|
- //l , data: {pay_id:pay_id}
|
|
|
- //l , type: 'get'
|
|
|
- //l , done: function (res) {
|
|
|
- //l if(res.code == 0){
|
|
|
- //l parent.layui.onSubmitChild();
|
|
|
- //l }
|
|
|
- //l }
|
|
|
- //l });
|
|
|
parent.layui.onSubmitChild();
|
|
|
|
|
|
return false;
|
lijiangwei