70b1dbf6 by Zelig

计算

1 parent 97b56019
...@@ -19,29 +19,23 @@ ...@@ -19,29 +19,23 @@
19 <div class="form-group col-sm-3 col-md-2"> 19 <div class="form-group col-sm-3 col-md-2">
20 <label>产品名称</label> 20 <label>产品名称</label>
21 <span class="form-control select-box"> 21 <span class="form-control select-box">
22 <select id="product" class="select" size="1" name="productId"> 22 <select id="product" class="select" size="1" v-model="product">
23 <?php foreach ($this->session->products as $k => $v): ?> 23 <option v-for="(v, index) in products" :value="v">{{v.productName}}</option>
24 <option data-repaymentMode="<?= $v->repaymentMode ?>" 24 </select>
25 data-loanDeadline="<?= $v->loanDeadline ?>" 25 </span>
26 value="<?= $v->id ?>"><?= $v->productName ?></option>
27 <?php endforeach; ?>
28 </select>
29 </span>
30 </div> 26 </div>
31 <div class="form-group col-sm-3 col-md-2"> 27 <div class="form-group col-sm-3 col-md-2">
32 <label>借款金额</label> 28 <label>借款金额</label>
33 <input name="borrowAmount" type="text" class="form-control input-text" value=""> 29 <input name="borrowAmount" type="text" class="form-control input-text" v-model="borrowAmount">
34 <span class="glyphicon form-control-feedback"></span> 30 <span class="glyphicon form-control-feedback"></span>
35 </div> 31 </div>
36 <div class="form-group col-sm-3 col-md-2"> 32 <div class="form-group col-sm-3 col-md-2">
37 <label>借款期数</label> 33 <label>借款期数</label>
38 <span class="form-control select-box"> 34 <span class="form-control select-box">
39 <select class="select" size="1" id="loanDeadline"> 35 <select class="select" size="1" v-model="loanDeadline">
40 <?php for ($i = 1; $i <= $this->session->products[0]->loanDeadline; $i++): ?> 36 <option v-for="v in loanDeadlines" :value="v * 6">{{v * 6}} 期</option>
41 <option value="<?= $i ?>"><?= $i ?></option> 37 </select>
42 <?php endfor; ?> 38 </span>
43 </select>
44 </span>
45 </div> 39 </div>
46 <div class="form-group col-sm-3 col-md-2"> 40 <div class="form-group col-sm-3 col-md-2">
47 <label>还款方式</label> 41 <label>还款方式</label>
...@@ -56,24 +50,19 @@ ...@@ -56,24 +50,19 @@
56 <div class="panel panel-default mb-20"> 50 <div class="panel panel-default mb-20">
57 <div class="panel-header">计算结果</div> 51 <div class="panel-header">计算结果</div>
58 <div class="panel-body months"> 52 <div class="panel-body months">
59 <div class="row cl"> 53 <div class="row cl">
60 <div class="form-group col-sm-3 col-md-2"> 54 <div class="form-group col-sm-3 col-md-2">
61 <label>每月应还</label> 55 <label>每月应还</label>
62 <input type="text" id="totalAmount" class="form-control input-text" value="" disabled> 56 <input type="text" id="totalAmount" class="form-control input-text" :value="totalAmount" disabled>
63 <span class="glyphicon form-control-feedback"></span> 57 <span class="glyphicon form-control-feedback"></span>
64 </div>
65 <!-- <div class="form-group col-sm-3 col-md-2">-->
66 <!-- <label>总共应还</label>-->
67 <!-- <input type="text" id="totalRepay" class="form-control input-text" value="" disabled>-->
68 <!-- <span class="glyphicon form-control-feedback">元</span>-->
69 <!-- </div>-->
70 </div> 58 </div>
59 </div>
71 </div> 60 </div>
72 <div class="panel-body"> 61 <div class="panel-body">
73 <div class="row cl"> 62 <div class="row cl">
74 <div class="form-group col-sm-3 col-md-2"> 63 <div class="form-group col-sm-3 col-md-2">
75 <label>总共应还</label> 64 <label>总共应还</label>
76 <input type="text" id="totalRepay" class="form-control input-text" value="" disabled> 65 <input type="text" id="totalRepay" class="form-control input-text" :value="totalRepay" disabled>
77 <span class="glyphicon form-control-feedback"></span> 66 <span class="glyphicon form-control-feedback"></span>
78 </div> 67 </div>
79 </div> 68 </div>
...@@ -83,7 +72,7 @@ ...@@ -83,7 +72,7 @@
83 72
84 <div class="row cl pb-20 col-sm-12"> 73 <div class="row cl pb-20 col-sm-12">
85 <div class="col-sm-offset-4 col-sm-2"> 74 <div class="col-sm-offset-4 col-sm-2">
86 <button class="btn btn-primary btn-block">计算</button> 75 <button class="btn btn-primary btn-block" type="button" @click="cal()">计算</button>
87 </div> 76 </div>
88 <div class="col-sm-2"> 77 <div class="col-sm-2">
89 <input class="btn btn-warning btn-block" value="重置" type="reset"> 78 <input class="btn btn-warning btn-block" value="重置" type="reset">
...@@ -94,82 +83,130 @@ ...@@ -94,82 +83,130 @@
94 <?php $this->load->view('common/footer'); ?> 83 <?php $this->load->view('common/footer'); ?>
95 84
96 <script> 85 <script>
97 $('#product').change(function () { 86 var vm = new Vue({
98 var data = $(this).find(':selected').data(); 87 el: '#form',
99 $('#repaymentMode').val(data.repaymentmode); 88 data: {
100 $('#loanDeadline').empty(); 89 products: [],
101 var str = ''; 90 product: {},
102 for (var i = 1; i <= parseInt(data.loandeadline); i++) {
103 str += '<option value="' + i + '">' + i + '</option>';
104 }
105 $('#loanDeadline').append(str);
106 })
107
108 $('#form').submit(function (e) {
109 e.stopPropagation();
110 e.preventDefault();
111 var borrowAmount = $('[name=borrowAmount]').val();
112 var productId = $('[name=productId]').val();
113 var loanDeadline = $('#loanDeadline').val();
114 str = 'borrowAmount=' + borrowAmount + '&productId=' + productId + '&loanDeadline=' + loanDeadline;
115 $.ajax({
116 type: 'get',
117 url: apiBaseUrl + 'application/tool/interest?' + str,
118 cache: false,
119 dataType: 'json',
120 contentType: "application/json; charset=UTF-8",
121 success: function (data) {
122 if (data.code != 0) {
123 var msg = data.msg ? data.msg : '操作失败';
124 layer.alert(msg);
125 } else {
126 $('#totalRepay').val(data.data.totalRepay);
127 if(data.data.repayPlans.length > 1){
128 var len = data.data.repayPlans.length-1;
129 if(data.data.repayPlans[0].totalAmount != data.data.repayPlans[len].totalAmount){
130 $('.months').html('');
131 var str = '';
132 for(var i=0;i<data.data.repayPlans.length;i++){
133 str += '<div class="row cl">'+
134 '<div class="form-group col-sm-3 col-md-2">'+
135 '<label>'+(i+1)+'月应还</label>'+
136 '<input type="text" id="totalAmount" class="form-control input-text" value="'+data.data.repayPlans[i].totalAmount+'" disabled>'+
137 '<span class="glyphicon form-control-feedback">元</span>'+
138 '</div>'+
139 '</div>';
140 }
141 $('.months').html(str);
142 }else{
143 str1 = '<div class="row cl">'+
144 '<div class="form-group col-sm-3 col-md-2">'+
145 '<label>每月应还</label>'+
146 '<input type="text" id="totalAmount" class="form-control input-text" value="'+data.data.repayPlans[0].totalAmount+'" disabled>'+
147 '<span class="glyphicon form-control-feedback">元</span>'+
148 '</div>'+
149 '</div>';
150 $('.months').html(str1);
151 }
152
153
154 }else{
155 str1 = '<div class="row cl">'+
156 '<div class="form-group col-sm-3 col-md-2">'+
157 '<label>每月应还</label>'+
158 '<input type="text" id="totalAmount" class="form-control input-text" value="'+data.data.repayPlans[0].totalAmount+'" disabled>'+
159 '<span class="glyphicon form-control-feedback">元</span>'+
160 '</div>'+
161 '</div>';
162 $('.months').html(str1);
163 // $('#totalAmount').val(data.data.repayPlans[0].totalAmount);
164 }
165 91
92 borrowAmount: '',
93 loanDeadline: 6,
94 totalRepay: 0,
95 totalAmount: 0,
96 },
97 mounted () {
98 let _this = this;
99 instance.get('/config/products').then( ( {data} ) => {
100 this.products = data.data
101 });
102 },
103 methods: {
104 cal () {
105 let str = 'borrowAmount=' + this.borrowAmount + '&productId=' + this.product.id + '&loanDeadline=' + this.loanDeadline;
106 instance.get('application/tool/interest?' + str).then( ( {data} ) => {
107 console.log(data);
108 this.totalRepay = data.data.totalRepay;
109 this.totalAmount = data.data.repayPlans[0].totalAmount;
110 });
111 }
112 },
113 computed: {
114 loanDeadlines () {
115 return this.product.loanDeadline / 6 ? this.product.loanDeadline / 6 : 0;
116 }
117 },
118 watch: {
119 borrowAmount () {
120 if(this.borrowAmount > this.product.loanLimit) {
121 layer.alert('不能超过最大值' + this.product.loanLimit);
122 this.borrowAmount = this.product.loanLimit;
166 } 123 }
167 }, 124 },
168 error: function () { 125 product () {
169 layer.alert("操作失败") 126 if(this.borrowAmount > this.product.loanLimit) {
127 layer.alert('不能超过最大值' + this.product.loanLimit);
128 this.borrowAmount = this.product.loanLimit;
129 }
170 } 130 }
171 }) 131 }
172 }) 132 });
133
134 // $('#product').change(function () {
135 // var data = $(this).find(':selected').data();
136 // $('#repaymentMode').val(data.repaymentmode);
137 // $('#loanDeadline').empty();
138 // var str = '';
139 // for (var i = 1; i <= parseInt(data.loandeadline); i++) {
140 // str += '<option value="' + i + '">' + i + '</option>';
141 // }
142 // $('#loanDeadline').append(str);
143 // })
144 //
145 // $('#form').submit(function (e) {
146 // e.stopPropagation();
147 // e.preventDefault();
148 // var borrowAmount = $('[name=borrowAmount]').val();
149 // var productId = $('[name=productId]').val();
150 // var loanDeadline = $('#loanDeadline').val();
151 // str = 'borrowAmount=' + borrowAmount + '&productId=' + productId + '&loanDeadline=' + loanDeadline;
152 // $.ajax({
153 // type: 'get',
154 // url: apiBaseUrl + 'application/tool/interest?' + str,
155 // cache: false,
156 // dataType: 'json',
157 // contentType: "application/json; charset=UTF-8",
158 // success: function (data) {
159 // if (data.code != 0) {
160 // var msg = data.msg ? data.msg : '操作失败';
161 // layer.alert(msg);
162 // } else {
163 // $('#totalRepay').val(data.data.totalRepay);
164 // if(data.data.repayPlans.length > 1){
165 // var len = data.data.repayPlans.length-1;
166 // if(data.data.repayPlans[0].totalAmount != data.data.repayPlans[len].totalAmount){
167 // $('.months').html('');
168 // var str = '';
169 // for(var i=0;i<data.data.repayPlans.length;i++){
170 // str += '<div class="row cl">'+
171 // '<div class="form-group col-sm-3 col-md-2">'+
172 // '<label>'+(i+1)+'月应还</label>'+
173 // '<input type="text" id="totalAmount" class="form-control input-text" value="'+data.data.repayPlans[i].totalAmount+'" disabled>'+
174 // '<span class="glyphicon form-control-feedback">元</span>'+
175 // '</div>'+
176 // '</div>';
177 // }
178 // $('.months').html(str);
179 // }else{
180 // str1 = '<div class="row cl">'+
181 // '<div class="form-group col-sm-3 col-md-2">'+
182 // '<label>每月应还</label>'+
183 // '<input type="text" id="totalAmount" class="form-control input-text" value="'+data.data.repayPlans[0].totalAmount+'" disabled>'+
184 // '<span class="glyphicon form-control-feedback">元</span>'+
185 // '</div>'+
186 // '</div>';
187 // $('.months').html(str1);
188 // }
189 //
190 //
191 // }else{
192 // str1 = '<div class="row cl">'+
193 // '<div class="form-group col-sm-3 col-md-2">'+
194 // '<label>每月应还</label>'+
195 // '<input type="text" id="totalAmount" class="form-control input-text" value="'+data.data.repayPlans[0].totalAmount+'" disabled>'+
196 // '<span class="glyphicon form-control-feedback">元</span>'+
197 // '</div>'+
198 // '</div>';
199 // $('.months').html(str1);
200 // // $('#totalAmount').val(data.data.repayPlans[0].totalAmount);
201 // }
202 //
203 // }
204 // },
205 // error: function () {
206 // layer.alert("操作失败")
207 // }
208 // })
209 // })
173 </script> 210 </script>
174 </body> 211 </body>
175 <html> 212 <html>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!