From 93aded746ed2083083de8f0c3eaef5ba88ca0fc2 Mon Sep 17 00:00:00 2001
From: khalil <khalil@chuhaiwl2023.com>
Date: Thu, 25 Jul 2024 21:57:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=85=E5=80=BCh5-=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit 9a45da5db2ef34daba843c8e07670a238be237f1)
---
 src/views/charge/ChargeRegionView.vue | 1548 +++++++++++++------------
 1 file changed, 830 insertions(+), 718 deletions(-)

diff --git a/src/views/charge/ChargeRegionView.vue b/src/views/charge/ChargeRegionView.vue
index 606682e..06b99fd 100644
--- a/src/views/charge/ChargeRegionView.vue
+++ b/src/views/charge/ChargeRegionView.vue
@@ -1,744 +1,856 @@
 <template>
-    <section class="content">
-        <div class="box box-primary">
-            <div class="box-body">
-                <!-- Content Header (Page header) -->
-                <section class="content-header">
-                    <h1 id="regionTitle">充值H5配置</h1>
-                </section>
-                <!-- .content -->
-                <div id="regionTable"></div>
-                <div id="toolbar">
-                    <div class="col-sm-12">
-                        <label for="searchType" class="col-sm-4 control-label">地区:</label>
-                        <div class="col-sm-6">
-                            <select name="searchType" id="searchType" data-btn-class="btn-warning" class="form-control">
-                            </select>
-                        </div>
-                    </div>
-                    <button id="btnSearch" class="btn btn-default">
-                        <i class="glyphicon glyphicon-search"></i>查询
-                    </button>
-                </div>
-            </div>
-            <div class="box-body" style="height:150%;">
-                <!-- Content Header (Page header) -->
-                <section class="content-header">
-                    <h1 id="channelTitle">渠道和档位配置</h1>
-                </section>
-                <!-- .content -->
-                <div id="channelTable"></div>
-            </div>
-        </div>
-    </section>
-
-    <div class="modal fade" id="regionModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
-        <div class="modal-dialog" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
-                            aria-hidden="true">&times;</span>
-                    </button>
-                    <h4 class="modal-title" id="regionModalLabel">地区信息编辑</h4>
-                </div>
-                <div class="modal-body">
-                    <form class="form-horizontal">
-                        <input type="hidden" name="code" id="code" />
-                        <input type="hidden" name="currency" id="currency" />
-                        <input type="hidden" name="type" id="type" />
-                        <div class="form-group">
-                            <label for="name" class="col-sm-3 control-label">使用地区：</label>
-                            <div class="col-sm-9">
-                                <input type="text" readonly class="form-control" id="name">
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label for="rate" class="col-sm-3 control-label">USD汇率：</label>
-                            <div class="col-sm-9">
-                                <input type="text" class="form-control" id="rate">
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label for="isRegionEnabled" class="col-sm-3 control-label">地区是否生效：</label>
-                            <div class="col-sm-9">
-                                <select name="isRegionEnabled" id="isRegionEnabled" class="form-control validate[required]">
-                                    <option value="1" selected>是</option>
-                                    <option value="0">否</option>
-                                </select>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label for="isRegionRecommend" class="col-sm-3 control-label">代儲是否展示"推荐"：</label>
-                            <div class="col-sm-9">
-                                <select name="isRegionRecommend" id="isRegionRecommend"
-                                    class="form-control validate[required]">
-                                    <option value="1" selected>是</option>
-                                    <option value="0">否</option>
-                                </select>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label for="regionSeq" class="col-sm-3 control-label">排序：</label>
-                            <div class="col-sm-9">
-                                <input type="text" class="form-control" id="regionSeq">
-                            </div>
-                        </div>
-                    </form>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
-                    <button type="button" class="btn btn-primary" id="regionSave">确认编辑</button>
-                </div>
+  <section class="content">
+    <div class="box box-primary">
+      <div class="box-body">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+          <h1 id="regionTitle">充值H5配置</h1>
+        </section>
+        <!-- .content -->
+        <div id="regionTable"></div>
+        <div id="toolbar">
+          <div class="col-sm-12">
+            <label for="searchType"
+                   class="col-sm-4 control-label">地区:</label>
+            <div class="col-sm-6">
+              <select name="searchType"
+                      id="searchType"
+                      data-btn-class="btn-warning"
+                      class="form-control">
+              </select>
             </div>
+          </div>
+          <button id="btnSearch"
+                  class="btn btn-default">
+            <i class="glyphicon glyphicon-search"></i>查询
+          </button>
         </div>
+      </div>
+      <div class="box-body"
+           style="height:150%;">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+          <h1 id="channelTitle">渠道和档位配置</h1>
+        </section>
+        <!-- .content -->
+        <div id="channelTable"></div>
+      </div>
     </div>
+  </section>
 
-    <div class="modal fade" id="channelModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
-        <div class="modal-dialog" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
-                            aria-hidden="true">&times;</span>
-                    </button>
-                    <h4 class="modal-title" id="channelModalLabel">充值渠道编辑</h4>
-                </div>
-                <div class="modal-body">
-                    <form class="form-horizontal">
-                        <input type="hidden" name="channelCode" id="channelCode" />
-                        <input type="hidden" name="regionCode" id="regionCode" />
-                        <input type="hidden" name="channelCurrency" id="channelCurrency" />
-                        <input type="hidden" name="usdRate" id="usdRate" />
-                        <input type="hidden" name="payChannel" id="payChannel" />
-                        <input type="hidden" name="paymentType" id="paymentType" />
-                        <input type="hidden" name="chargeSize" id="chargeSize" />
-                        <input type="hidden" name="isSpecial" id="isSpecial" />
-                        <input type="hidden" name="specialValues" id="specialValues" />
-                        <div class="form-group">
-                            <label for="regionName" class="col-sm-3 control-label">使用地区：</label>
-                            <div class="col-sm-9">
-                                <input type="text" readonly class="form-control" id="regionName">
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label for="desc" class="col-sm-3 control-label">渠道名称：</label>
-                            <div class="col-sm-9">
-                                <input type="text" readonly class="form-control" id="desc">
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label for="isChannelEnabled" class="col-sm-3 control-label">是否展示在充值H5：</label>
-                            <div class="col-sm-9">
-                                <select name="isChannelEnabled" id="isChannelEnabled"
-                                    class="form-control validate[required]">
-                                    <option value="1" selected>是</option>
-                                    <option value="0">否</option>
-                                </select>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label for="isChannelRecommend" class="col-sm-3 control-label">是否展示"推荐"：</label>
-                            <div class="col-sm-9">
-                                <select name="isChannelRecommend" id="isChannelRecommend"
-                                    class="form-control validate[required]">
-                                    <option value="1" selected>是</option>
-                                    <option value="0">否</option>
-                                </select>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label for="channelSeq" class="col-sm-3 control-label">排序：</label>
-                            <div class="col-sm-9">
-                                <input type="text" class="form-control" id="channelSeq">
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label class="col-sm-3 control-label">充值档位配置</label>
-                        </div>
-                    </form>
-                </div>
-                <button type="button" class="btn btn-primary" id="chargeProdAdd">+档位</button>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
-                    <button type="button" class="btn btn-primary" id="channelSave">确认编辑</button>
-                </div>
-            </div>
+  <div class="modal fade"
+       id="regionModal"
+       tabindex="-1"
+       role="dialog"
+       aria-labelledby="modalLabel">
+    <div class="modal-dialog"
+         role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button"
+                  class="close"
+                  data-dismiss="modal"
+                  aria-label="Close"><span aria-hidden="true">&times;</span>
+          </button>
+          <h4 class="modal-title"
+              id="regionModalLabel">地区信息编辑</h4>
         </div>
+        <div class="modal-body">
+          <form class="form-horizontal">
+            <input type="hidden"
+                   name="code"
+                   id="code" />
+            <input type="hidden"
+                   name="currency"
+                   id="currency" />
+            <input type="hidden"
+                   name="type"
+                   id="type" />
+            <div class="form-group">
+              <label for="name"
+                     class="col-sm-3 control-label">使用地区：</label>
+              <div class="col-sm-9">
+                <input type="text"
+                       readonly
+                       class="form-control"
+                       id="name">
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="rate"
+                     class="col-sm-3 control-label">USD汇率：</label>
+              <div class="col-sm-9">
+                <input type="text"
+                       class="form-control"
+                       id="rate">
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="isRegionEnabled"
+                     class="col-sm-3 control-label">地区是否生效：</label>
+              <div class="col-sm-9">
+                <select name="isRegionEnabled"
+                        id="isRegionEnabled"
+                        class="form-control validate[required]">
+                  <option value="1"
+                          selected>是</option>
+                  <option value="0">否</option>
+                </select>
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="isRegionRecommend"
+                     class="col-sm-3 control-label">代儲是否展示"推荐"：</label>
+              <div class="col-sm-9">
+                <select name="isRegionRecommend"
+                        id="isRegionRecommend"
+                        class="form-control validate[required]">
+                  <option value="1"
+                          selected>是</option>
+                  <option value="0">否</option>
+                </select>
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="regionSeq"
+                     class="col-sm-3 control-label">排序：</label>
+              <div class="col-sm-9">
+                <input type="text"
+                       class="form-control"
+                       id="regionSeq">
+              </div>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button type="button"
+                  class="btn btn-default"
+                  data-dismiss="modal">取消</button>
+          <button type="button"
+                  class="btn btn-primary"
+                  id="regionSave">确认编辑</button>
+        </div>
+      </div>
     </div>
+  </div>
 
-    <div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
-        <div class="modal-dialog" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h4 class="modal-title">提示信息</h4>
-                </div>
-                <div class="modal-body" id="tipMsg"></div>
-            </div>
+  <div class="modal fade"
+       id="channelModal"
+       tabindex="-1"
+       role="dialog"
+       aria-labelledby="modalLabel">
+    <div class="modal-dialog"
+         role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button"
+                  class="close"
+                  data-dismiss="modal"
+                  aria-label="Close"><span aria-hidden="true">&times;</span>
+          </button>
+          <h4 class="modal-title"
+              id="channelModalLabel">充值渠道编辑</h4>
         </div>
+        <div class="modal-body">
+          <form class="form-horizontal">
+            <input type="hidden"
+                   name="channelCode"
+                   id="channelCode" />
+            <input type="hidden"
+                   name="regionCode"
+                   id="regionCode" />
+            <input type="hidden"
+                   name="channelCurrency"
+                   id="channelCurrency" />
+            <input type="hidden"
+                   name="usdRate"
+                   id="usdRate" />
+            <input type="hidden"
+                   name="payChannel"
+                   id="payChannel" />
+            <input type="hidden"
+                   name="paymentType"
+                   id="paymentType" />
+            <input type="hidden"
+                   name="chargeSize"
+                   id="chargeSize" />
+            <input type="hidden"
+                   name="isSpecial"
+                   id="isSpecial" />
+            <input type="hidden"
+                   name="specialValues"
+                   id="specialValues" />
+            <div class="form-group">
+              <label for="regionName"
+                     class="col-sm-3 control-label">使用地区：</label>
+              <div class="col-sm-9">
+                <input type="text"
+                       readonly
+                       class="form-control"
+                       id="regionName">
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="desc"
+                     class="col-sm-3 control-label">渠道名称：</label>
+              <div class="col-sm-9">
+                <input type="text"
+                       readonly
+                       class="form-control"
+                       id="desc">
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="isChannelEnabled"
+                     class="col-sm-3 control-label">是否展示在充值H5：</label>
+              <div class="col-sm-9">
+                <select name="isChannelEnabled"
+                        id="isChannelEnabled"
+                        class="form-control validate[required]">
+                  <option value="1"
+                          selected>是</option>
+                  <option value="0">否</option>
+                </select>
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="isChannelRecommend"
+                     class="col-sm-3 control-label">是否展示"推荐"：</label>
+              <div class="col-sm-9">
+                <select name="isChannelRecommend"
+                        id="isChannelRecommend"
+                        class="form-control validate[required]">
+                  <option value="1"
+                          selected>是</option>
+                  <option value="0">否</option>
+                </select>
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="channelSeq"
+                     class="col-sm-3 control-label">排序：</label>
+              <div class="col-sm-9">
+                <input type="text"
+                       class="form-control"
+                       id="channelSeq">
+              </div>
+            </div>
+            <div class="form-group">
+              <label class="col-sm-3 control-label">充值档位配置</label>
+            </div>
+          </form>
+        </div>
+        <button type="button"
+                class="btn btn-primary"
+                id="chargeProdAdd">+档位</button>
+        <div class="modal-footer">
+          <button type="button"
+                  class="btn btn-default"
+                  data-dismiss="modal">取消</button>
+          <button type="button"
+                  class="btn btn-primary"
+                  id="channelSave">确认编辑</button>
+        </div>
+      </div>
     </div>
+  </div>
+
+  <div class="modal fade"
+       id="tipModal"
+       tabindex="-1"
+       role="dialog"
+       aria-labelledby="modalLabel">
+    <div class="modal-dialog"
+         role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title">提示信息</h4>
+        </div>
+        <div class="modal-body"
+             id="tipMsg"></div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 import TableHelper from '@/utils/bootstrap-table-helper';
 
 export default {
-    name: "ChargeRegionView",
-    setup() {
-        //计算
-        function calc(obj) {
-            var $obj = $(obj);
-            var index = $obj.data('index');
-            var amount = $('#amount' + index).val();
-            var handlingRate = $('#handlingRate' + index).val();
-            var usdRate = $('#usdRate').val();
-            var chargeGoldNum = 0;
-            if (usdRate && amount && handlingRate) {
-                //chargeGoldNum = Math.ceil(Math.ceil(parseFloat(amount).toFixed(4) / parseFloat(usdRate).toFixed(4) * 1000 * parseFloat((100 - parseFloat(handlingRate)) / 100).toFixed(4)) / 10) * 10;
-                var money = parseInt(amount * 100);
-                $.ajax({
-                    type: "get",
-                    url: "/admin/charge/channel/calc?money=" + money + "&handlingRate=" + handlingRate + "&usdRate=" + usdRate,
-                    dataType: "json",
-                    async: false,
-                    success: function (json) {
-                        if (json.success == 'true' || json.code == 200) {
-                            chargeGoldNum = json.data;
-                        }
-                    }
-                });
+  name: "ChargeRegionView",
+  setup () {
+    //计算
+    function calc (obj) {
+      var $obj = $(obj);
+      var index = $obj.data('index');
+      var amount = $('#amount' + index).val();
+      var handlingRate = $('#handlingRate' + index).val();
+      var usdRate = $('#usdRate').val();
+      var chargeGoldNum = 0;
+      if (usdRate && amount && handlingRate) {
+        //chargeGoldNum = Math.ceil(Math.ceil(parseFloat(amount).toFixed(4) / parseFloat(usdRate).toFixed(4) * 1000 * parseFloat((100 - parseFloat(handlingRate)) / 100).toFixed(4)) / 10) * 10;
+        var money = parseInt(amount * 100);
+        $.ajax({
+          type: "get",
+          url: "/admin/charge/channel/calc?money=" + money + "&handlingRate=" + handlingRate + "&usdRate=" + usdRate,
+          dataType: "json",
+          async: false,
+          success: function (json) {
+            if (json.success == 'true' || json.code == 200) {
+              chargeGoldNum = json.data;
             }
-            console.log('index : ' + index + ', usdRate : ' + usdRate + ', amount : ' + amount + ', handlingRate : ' + handlingRate);
-            $("#chargeGoldNum" + index).html(parseFloat(chargeGoldNum).toFixed(2));
-        }
-        window.calc = calc;
-        return {
-            calc
-        };
-    },
-    created() {
-        this.$nextTick(function () {
-            this.initData();
+          }
         });
-    },
-    methods: {
-        initData() {
-            $(function () {
-                //地区
-                var regionArray = chargeRegion();
-                $('#regionTable').bootstrapTable('destroy');
-                $('#regionTable').bootstrapTable({
-                    columns: [
-                        { field: 'name', title: '地区', align: 'center', width: '5%' },
-                        {
-                            field: 'rate',
-                            title: 'USD汇率',
-                            align: 'center',
-                            width: '5%',
-                            formatter: function (val, row, index) {
-                                var value = '';
-                                value += val + '<br/>';
-                                value += '（上一次更新时间：' + row.updateTime + '）';
-                                return value;
-                            }
-                        },
-                        {
-                            field: 'isEnabled',
-                            title: '地区是否生效',
-                            align: 'center',
-                            width: '5%',
-                            formatter: function (val, row, index) {
-                                var value = '否';
-                                if (val) {
-                                    value = '是';
-                                }
-                                return value;
-                            }
-                        },
-                        {
-                            field: 'isRecommend',
-                            title: '代儲是否展示"推荐"',
-                            align: 'center',
-                            width: '5%',
-                            formatter: function (val, row, index) {
-                                var value = '否';
-                                if (val) {
-                                    value = '是';
-                                }
-                                return value;
-                            }
-                        },
-                        {
-                            field: 'id',
-                            title: '操作',
-                            align: 'center',
-                            width: '5%',
-                            valign: 'middle',
-                            formatter: function (val, row, index) {
-                                return '<button class="btn btn-sm btn-default opt-edit" data-index="' + index + '">编辑</button>';
-                            }
-                        }
-                    ],
-                    cache: false,
-                    striped: true,
-                    showRefresh: false,
-                    pageSize: 20,
-                    pagination: false,
-                    pageList: [20, 50, 100],
-                    search: false,
-                    sidePagination: "server", //表示服务端请求
-                    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
-                    //设置为limit可以获取limit, offset, search, sort, order
-                    queryParamsType: "undefined",
-                    queryParams: function queryParams(params) {   //设置查询参数
-                        var param = {
-                            regionType: $('#searchType').val()
-                        };
-                        return param;
-                    },
-                    toolbar: '#toolbar',
-                    url: '/admin/charge/region/page',
-                    onLoadSuccess: function () {  //加载成功时执行
-                        console.log("load success");
-                    },
-                    onLoadError: function () {  //加载失败时执行
-                        console.log("load fail");
-                    }
-                });
-
-                $('#channelTable').bootstrapTable('destroy');
-                $('#channelTable').bootstrapTable({
-                    columns: [
-                        { field: 'payChannel', title: '合作方', align: 'center', width: '5%' },
-                        { 
-                            field: 'desc', 
-                            title: '渠道名称', 
-                            align: 'center',
-                            width: '5%',
-                            formatter: function (val, row, index) {
-                                let color = 'black';
-                                if (val == 'MyCard點數卡' || val == 'MyCard會員點數' || val == 'MyCard Paypal' || val == '信用卡' || val == '悠遊付' || val == 'ezPay 簡單付' || val == '台灣Pay' || val == 'icash Pay' || val == 'Pi 拍錢包' || val == '全支付' || val == 'LINE Pay') {
-                                    color = 'green';
-                                } else if (val == '電子支付' || val == '銀行轉賬') {
-                                    color = 'blue';
-                                } else if (val == '市內電話帳單' || val == '行動電話帳單' || val == '電信數據ADSL帳單') {
-                                    color = 'orange';
-                                }
-                                return '<span style="color:' + color + ';">' + val + '</span>';
-                            }
-                        },
-                        {
-                            field: 'logo',
-                            title: '图标',
-                            align: 'center',
-                            width: '5%',
-                            formatter: function (val, row, index) {
-                                return '<img src="' + val + '" style="width:90px;height:90px;" alt="">'
-                            }
-                        },
-                        { field: 'regionName', title: '地区', align: 'center', width: '5%' },
-                        {
-                            field: 'isEnabled',
-                            title: '是否展示在充值H5',
-                            align: 'center',
-                            width: '5%',
-                            formatter: function (val, row, index) {
-                                var value = '否';
-                                if (val) {
-                                    value = '是';
-                                }
-                                return value;
-                            }
-                        },
-                        {
-                            field: 'isRecommend',
-                            title: '是否展示"推荐"',
-                            align: 'center',
-                            width: '5%',
-                            formatter: function (val, row, index) {
-                                var value = '否';
-                                if (val) {
-                                    value = '是';
-                                }
-                                return value;
-                            }
-                        },
-                        {
-                            field: 'chargeProd',
-                            title: '充值档位和手续费',
-                            align: 'center',
-                            width: '5%',
-                            formatter: function (val, row, index) {
-                                var value = '';
-                                var currency = row.currency;
-                                if (row.chargeProds) {
-                                    for (let i = 0, len = row.chargeProds.length; i < len; i++) {
-                                        var chargeProd = row.chargeProds[i];
-                                        value += currency + ':' + (chargeProd.money / 100) + '手续费 ' + chargeProd.handlingRate + '% 到账金币:' + chargeProd.chargeGoldNum + '<br/>';
-                                    }
-                                }
-                                return value;
-                            }
-                        },
-                        { field: 'seq', title: '排序', align: 'center', width: '5%' },
-                        {
-                            field: 'handle',
-                            title: '操作',
-                            align: 'center',
-                            width: '5%',
-                            valign: 'middle',
-                            formatter: function (val, row, index) {
-                                return '<button class="btn btn-sm btn-default opt-edit" data-index="' + index + '">编辑</button>';
-                            }
-                        }
-                    ],
-                    cache: false,
-                    striped: true,
-                    showRefresh: false,
-                    pageSize: 20,
-                    pagination: false,
-                    pageList: [20, 50, 100],
-                    search: false,
-                    sidePagination: "server", //表示服务端请求
-                    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
-                    //设置为limit可以获取limit, offset, search, sort, order
-                    queryParamsType: "undefined",
-                    queryParams: function queryParams(params) {   //设置查询参数
-                        var param = {
-                            regionType: $('#searchType').val()
-                        };
-                        return param;
-                    },
-                    url: '/admin/charge/channel/page',
-                    onLoadSuccess: function () {  //加载成功时执行
-                        console.log("load success");
-                    },
-                    onLoadError: function () {  //加载失败时执行
-                        console.log("load fail");
-                    }
-                });
-
-                //编辑
-                $('#regionTable').on('click', '.opt-edit', function () {
-                    const currentData = $('#regionTable').bootstrapTable('getData')[$(this).data('index')];
-                    var code = currentData.code;
-                    var name = currentData.name;
-                    var currency = currentData.currency;
-                    var type = currentData.type;
-                    var rate = currentData.rate;
-                    var isRegionEnabled = currentData.isEnabled;
-                    var isRegionRecommend = currentData.isRecommend;
-                    var regionSeq = currentData.seq;
-                    $('#code').val(code);
-                    $('#name').val(name);
-                    $('#currency').val(currency);
-                    $('#type').val(type);
-                    $('#rate').val(rate);
-                    $('#isRegionEnabled').val(isRegionEnabled);
-                    $('#isRegionRecommend').val(isRegionRecommend);
-                    $('#regionSeq').val(regionSeq);
-                    $("#regionModal").modal('show');
-                });
-
-                $("#regionSave").click(function () {
-                    const msg = '确定要保存吗？';
-                    if (confirm(msg)) {
-                        const data = {
-                            code: $('#code').val(),
-                            name: $('#name').val(),
-                            currency: $('#currency').val(),
-                            type: $('#type').val(),
-                            rate: $('#rate').val(),
-                            isEnabled: $('#isRegionEnabled').val(),
-                            isRecommend: $('#isRegionRecommend').val(),
-                            seq: $('#regionSeq').val()
-                        }
-                        $.ajax({
-                            type: "post",
-                            url: "/admin/charge/region/save",
-                            data: data,
-                            dataType: "json",
-                            success: function (json) {
-                                if (json.success == 'true' || json.code == 200) {
-                                    $("#tipMsg").text("保存成功");
-                                    $("#tipModal").modal('show');
-                                    TableHelper.doRefresh("#regionTable");
-                                    TableHelper.doRefresh("#channelTable");
-                                    $("#regionModal").modal('hide');
-                                } else {
-                                    $("#tipMsg").text("保存失败." + json.message);
-                                    $("#tipModal").modal('show');
-                                    $("#regionModal").modal('hide');
-                                }
-                            }
-                        });
-                    }
-                });
-
-                //编辑
-                $('#channelTable').on('click', '.opt-edit', function () {
-                    const currentData = $('#channelTable').bootstrapTable('getData')[$(this).data('index')];
-                    for (let i = 0, len = $('#chargeSize').val(); i < len; i++) {
-                        $('#chargeProd' + i).remove();
-                    }
-                    var channelCode = currentData.channelCode;
-                    var regionCode = currentData.regionCode;
-                    var usdRate = currentData.usdRate;
-                    var payChannel = currentData.payChannel;
-                    var paymentType = currentData.paymentType;
-                    var regionName = currentData.regionName;
-                    var currency = currentData.currency;
-                    var desc = currentData.desc;
-                    var isChannelEnabled = currentData.isEnabled;
-                    var isChannelRecommend = currentData.isRecommend;
-                    var channelSeq = currentData.seq;
-                    var chargeProds = currentData.chargeProds;
-                    var specialValues = currentData.specialValues;
-                    var isSpecial = (specialValues && specialValues.length > 0);
-                    console.log(isSpecial);
-                    console.log(specialValues);
-                    var chargeSize = 0;
-                    if (chargeProds) {
-                        chargeSize = chargeProds.length;
-                    }
-                    $('#channelCode').val(channelCode);
-                    $('#regionCode').val(regionCode);
-                    $('#usdRate').val(usdRate);
-                    $('#payChannel').val(payChannel);
-                    $('#paymentType').val(paymentType);
-                    $('#regionName').val(regionName);
-                    $('#channelCurrency').val(currency);
-                    $('#desc').val(desc);
-                    $('#isChannelEnabled').val(isChannelEnabled);
-                    $('#isChannelRecommend').val(isChannelRecommend);
-                    $('#channelSeq').val(channelSeq);
-                    $('#chargeSize').val(chargeSize);
-                    $('#isSpecial').val(isSpecial);
-                    $('#specialValues').val(specialValues);
-                    var $form = $('#channelModal .modal-body .form-horizontal');
-                    for (let i = 0; i < chargeProds.length; i++) {
-                        var chargeProd = chargeProds[i];
-                        var chargeProdId = chargeProd.chargeProdId;
-                        var amount = chargeProd.money / 100;
-                        var handlingRate = chargeProd.handlingRate;
-                        var chargeGoldNum = chargeProd.chargeGoldNum;
-                        var $formGroup = $('<div/>');
-                        $formGroup.attr('class', 'form-group');
-                        $formGroup.attr('id', 'chargeProd' + i);
-                        var $input = $('<input/>');
-                        $input.attr('type', 'hidden');
-                        $input.attr('name', 'chargeProdId' + i);
-                        $input.attr('id', 'chargeProdId' + i);
-                        $input.attr('value', chargeProdId);
-                        $formGroup.append($input);
-                        var $div = $('<div/>');
-                        $div.attr('class', 'col-sm-12');
-                        if (isSpecial) {
-                            $div.append(currency + ' ');
-                            var $select = $('<select/>');
-                            $select.attr('class', 'validate[required]');
-                            $select.attr('data-index', i);
-                            $select.attr('id', 'amount' + i);
-                            $select.attr('oninput', 'calc(this)');
-                            for (let j = 0; j < specialValues.length; j++) {
-                                var specialValue = specialValues[j];
-                                var $option = $('<option/>');
-                                $option.attr('value', specialValue);
-                                $option.html(specialValue);
-                                if (parseFloat(amount).toFixed(2) == parseFloat(specialValue).toFixed(2)) {
-                                    $option.attr('selected', true);
-                                }
-                                $select.append($option);
-                            }
-                            $div.append($select);
-                            $div.append(' 手续费 <input type="text" data-index="' + i + '" id="handlingRate' + i + '" oninput="calc(this)" value="' + handlingRate + '" style="width:41px;"/>% 到账金币：<span id="chargeGoldNum' + i + '">' + chargeGoldNum + '</span> <button class="btn btn-sm btn-default opt-del" data-index="' + i + '">删除</button>');
-                        } else {
-                            $div.html(currency + ' <input type="text" data-index="' + i + '" id="amount' + i + '" oninput="calc(this)" value="' + amount + '" style="width:41px;"/> 手续费 <input type="text" data-index="' + i + '" id="handlingRate' + i + '" oninput="calc(this)" value="' + handlingRate + '" style="width:41px;"/>% 到账金币：<span id="chargeGoldNum' + i + '">' + chargeGoldNum + '</span> <button class="btn btn-sm btn-default opt-del" data-index="' + i + '">删除</button>');
-                        }
-                        $formGroup.append($div);
-                        $form.append($formGroup);
-                    }
-                    $("#channelModal").modal('show');
-                });
-
-                //新增档位
-                $("#chargeProdAdd").click(function () {
-                    var currency = $('#channelCurrency').val();
-                    var i = parseInt($('#chargeSize').val());
-                    var isSpecial = JSON.parse($('#isSpecial').val());
-                    var specialValues = $('#specialValues').val().split(',');
-                    var $form = $('#channelModal .modal-body .form-horizontal');
-                    var $formGroup = $('<div/>');
-                    $formGroup.attr('class', 'form-group');
-                    $formGroup.attr('id', 'chargeProd' + i);
-                    var $div = $('<div/>');
-                    $div.attr('class', 'col-sm-12');
-                    if (isSpecial) {
-                        $div.append(currency + ' ');
-                        var $select = $('<select/>');
-                        $select.attr('class', 'validate[required]');
-                        $select.attr('data-index', i);
-                        $select.attr('id', 'amount' + i);
-                        $select.attr('oninput', 'calc(this)');
-                        for (let j = 0; j < specialValues.length; j++) {
-                            var specialValue = specialValues[j];
-                            var $option = $('<option/>');
-                            $option.attr('value', specialValue);
-                            $option.html(specialValue);
-                            $select.append($option);
-                        }
-                        $div.append($select);
-                        $div.append(' 手续费 <input type="text" data-index="' + i + '" id="handlingRate' + i + '" oninput="calc(this)" style="width:41px;"/>% 到账金币：<span id="chargeGoldNum' + i + '"></span> <button class="btn btn-sm btn-default opt-del" data-index="' + i + '">删除</button>');
-                    } else {
-                        $div.html(currency + ' <input type="text" data-index="' + i + '" id="amount' + i + '" oninput="calc(this)" style="width:41px;"/> 手续费 <input type="text" data-index="' + i + '" id="handlingRate' + i + '" oninput="calc(this)" style="width:41px;"/>% 到账金币：<span id="chargeGoldNum' + i + '"></span> <button class="btn btn-sm btn-default opt-del" data-index="' + i + '">删除</button>');
-                    }
-                    $formGroup.append($div);
-                    $form.append($formGroup);
-                    $('#chargeSize').val(++i);
-                });
-
-                $("#channelSave").click(function () {
-                    const msg = '确定要保存吗？';
-                    if (confirm(msg)) {
-                        var channelCode = $('#channelCode').val();
-                        var regionCode = $('#regionCode').val();
-                        var currency = $('#channelCurrency').val();
-                        var desc = $('#desc').val();
-                        var payChannel = $('#payChannel').val();
-                        var paymentType = $('#paymentType').val();
-                        var chargeSize = $('#chargeSize').val();
-                        var isEnabled = $('#isChannelEnabled').val();
-                        var isRecommend = $('#isChannelRecommend').val();
-                        var seq = $('#channelSeq').val();
-                        var isSpecial = $('#isSpecial').val();
-                        var chargeProdArray = [];
-                        for (let i = 0; i < chargeSize; i++) {
-                            var chargeProdId = $('#chargeProdId' + i).val();
-                            var money = parseFloat($('#amount' + i).val()) * 100;
-                            var handlingRate = $('#handlingRate' + i).val();
-                            if (!money || !handlingRate) {
-                                continue;
-                            }
-                            var chargeProd = {
-                                country: regionCode,
-                                localCurrencyCode: currency,
-                                payChannel: payChannel,
-                                paymentType: paymentType,
-                                money: parseInt(money),
-                                seqNo: i,
-                                handlingRate: handlingRate
-                            };
-                            if (chargeProdId) {
-                                chargeProd.chargeProdId = chargeProdId;
-                            }
-                            chargeProdArray.push(chargeProd);
-                        }
-                        var data = {
-                            channelCode: channelCode,
-                            regionCode: regionCode,
-                            desc: desc,
-                            payChannel: payChannel,
-                            paymentType: paymentType,
-                            isEnabled: isEnabled,
-                            isRecommend: isRecommend,
-                            seq: seq,
-                            chargeProds: JSON.stringify(chargeProdArray)
-                        };
-                        $.ajax({
-                            type: "post",
-                            url: "/admin/charge/channel/save",
-                            data: data,
-                            dataType: "json",
-                            success: function (json) {
-                                if (json.success == 'true' || json.code == 200) {
-                                    $("#tipMsg").text("保存成功");
-                                    $("#tipModal").modal('show');
-                                    TableHelper.doRefresh("#regionTable");
-                                    TableHelper.doRefresh("#channelTable");
-                                    $("#channelModal").modal('hide');
-                                } else {
-                                    $("#tipMsg").text("保存失败." + json.message);
-                                    $("#tipModal").modal('show');
-                                    $("#channelModal").modal('hide');
-                                }
-                            }
-                        });
-                    }
-                });
-
-                //删除
-                $('#channelModal .modal-body .form-horizontal').on('click', '.opt-del', function () {
-                    var index = $(this).data('index');
-                    var chargeProdId = $('#chargeProdId' + index).val();
-                    if (chargeProdId) {
-                        const msg = '确定要删除吗？';
-                        if (confirm(msg)) {
-                            $.ajax({
-                                type: "get",
-                                url: "/admin/charge/prod/del?chargeProdId=" + chargeProdId,
-                                dataType: "json",
-                                success: function (json) {
-                                    if (json.success == 'true' || json.code == 200) {
-                                        $("#tipMsg").text("删除成功");
-                                        $("#tipModal").modal('show');
-                                        TableHelper.doRefresh("#regionTable");
-                                        TableHelper.doRefresh("#channelTable");
-                                        $("#channelModal").modal('hide');
-                                    } else {
-                                        $("#tipMsg").text("删除失败." + json.message);
-                                        $("#tipModal").modal('show');
-                                        $("#channelModal").modal('hide');
-                                    }
-                                }
-                            });
-                            $('#chargeProd' + index).remove();
-                        }
-                    }
-                });
-
-                //地区
-                function chargeRegion() {
-                    var array;
-                    $.ajax({
-                        type: "get",
-                        url: "/admin/charge/region/list",
-                        dataType: "json",
-                        async: false,
-                        success: function (json) {
-                            if (json.success == 'true' || json.code == 200) {
-                                array = json.data;
-                            }
-                        }
-                    });
-                    var $select = $('#searchType');
-                    for (let i = 0; i < array.length; i++) {
-                        var $option = $('<option value="' + array[i].type + '" />');
-                        $option.html(array[i].name);
-                        if (i == 0) {
-                            $option.attr('selected', true);
-                        }
-                        $select.append($option);
-                    }
-                    return array;
-                }
-
-                // 查询刷新
-                $('#btnSearch').on('click', function () {
-                    TableHelper.doRefresh('#regionTable');
-                    TableHelper.doRefresh('#channelTable');
-                });
-            });
-        }
-    },
-    unmounted() {
-        $('#regionTable').bootstrapTable('destroy');
-        $('#channelTable').bootstrapTable('destroy');
+      }
+      console.log('index : ' + index + ', usdRate : ' + usdRate + ', amount : ' + amount + ', handlingRate : ' + handlingRate);
+      $("#chargeGoldNum" + index).html(parseFloat(chargeGoldNum).toFixed(2));
     }
+    window.calc = calc;
+    return {
+      calc
+    };
+  },
+  created () {
+    this.$nextTick(function () {
+      this.initData();
+    });
+  },
+  methods: {
+    initData () {
+      $(function () {
+        //地区
+        var regionArray = chargeRegion();
+        $('#regionTable').bootstrapTable('destroy');
+        $('#regionTable').bootstrapTable({
+          columns: [
+            { field: 'name', title: '地区', align: 'center', width: '5%' },
+            {
+              field: 'rate',
+              title: 'USD汇率',
+              align: 'center',
+              width: '5%',
+              formatter: function (val, row, index) {
+                var value = '';
+                value += val + '<br/>';
+                value += '（上一次更新时间：' + row.updateTime + '）';
+                return value;
+              }
+            },
+            {
+              field: 'isEnabled',
+              title: '地区是否生效',
+              align: 'center',
+              width: '5%',
+              formatter: function (val, row, index) {
+                var value = '否';
+                if (val) {
+                  value = '是';
+                }
+                return value;
+              }
+            },
+            {
+              field: 'isRecommend',
+              title: '代儲是否展示"推荐"',
+              align: 'center',
+              width: '5%',
+              formatter: function (val, row, index) {
+                var value = '否';
+                if (val) {
+                  value = '是';
+                }
+                return value;
+              }
+            },
+            {
+              field: 'id',
+              title: '操作',
+              align: 'center',
+              width: '5%',
+              valign: 'middle',
+              formatter: function (val, row, index) {
+                return '<button class="btn btn-sm btn-default opt-edit" data-index="' + index + '">编辑</button>';
+              }
+            }
+          ],
+          cache: false,
+          striped: true,
+          showRefresh: false,
+          pageSize: 20,
+          pagination: false,
+          pageList: [20, 50, 100],
+          search: false,
+          sidePagination: "server", //表示服务端请求
+          //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
+          //设置为limit可以获取limit, offset, search, sort, order
+          queryParamsType: "undefined",
+          queryParams: function queryParams (params) {   //设置查询参数
+            var param = {
+              regionType: $('#searchType').val()
+            };
+            return param;
+          },
+          toolbar: '#toolbar',
+          url: '/admin/charge/region/page',
+          onLoadSuccess: function () {  //加载成功时执行
+            console.log("load success");
+          },
+          onLoadError: function () {  //加载失败时执行
+            console.log("load fail");
+          }
+        });
+
+        $('#channelTable').bootstrapTable('destroy');
+        $('#channelTable').bootstrapTable({
+          columns: [
+            { field: 'payChannel', title: '合作方', align: 'center', width: '5%' },
+            {
+              field: 'desc',
+              title: '渠道名称',
+              align: 'center',
+              width: '5%',
+              formatter: function (val, row, index) {
+                let color = 'black';
+                if (val == 'MyCard點數卡' || val == 'MyCard會員點數' || val == 'MyCard Paypal' || val == '信用卡' || val == '悠遊付' || val == 'ezPay 簡單付' || val == '台灣Pay' || val == 'icash Pay' || val == 'Pi 拍錢包' || val == '全支付' || val == 'LINE Pay') {
+                  color = 'green';
+                } else if (val == '電子支付' || val == '銀行轉賬') {
+                  color = 'blue';
+                } else if (val == '市內電話帳單' || val == '行動電話帳單' || val == '電信數據ADSL帳單') {
+                  color = 'orange';
+                }
+                return '<span style="color:' + color + ';">' + val + '</span>';
+              }
+            },
+            {
+              field: 'logo',
+              title: '图标',
+              align: 'center',
+              width: '5%',
+              formatter: function (val, row, index) {
+                return '<img src="' + val + '" style="width:90px;height:90px;" alt="">'
+              }
+            },
+            { field: 'regionName', title: '地区', align: 'center', width: '5%' },
+            {
+              field: 'isEnabled',
+              title: '是否展示在充值H5',
+              align: 'center',
+              width: '5%',
+              formatter: function (val, row, index) {
+                var value = '否';
+                if (val) {
+                  value = '是';
+                }
+                return value;
+              }
+            },
+            {
+              field: 'isRecommend',
+              title: '是否展示"推荐"',
+              align: 'center',
+              width: '5%',
+              formatter: function (val, row, index) {
+                var value = '否';
+                if (val) {
+                  value = '是';
+                }
+                return value;
+              }
+            },
+            {
+              field: 'chargeProd',
+              title: '充值档位和手续费',
+              align: 'center',
+              width: '5%',
+              formatter: function (val, row, index) {
+                var value = '';
+                var currency = row.currency;
+                if (row.chargeProds) {
+                  for (let i = 0, len = row.chargeProds.length; i < len; i++) {
+                    var chargeProd = row.chargeProds[i];
+                    value += currency + ':' + (chargeProd.money / 100) + '手续费 ' + chargeProd.handlingRate + '% 到账金币:' + chargeProd.chargeGoldNum + '<br/>';
+                  }
+                }
+                return value;
+              }
+            },
+            { field: 'seq', title: '排序', align: 'center', width: '5%' },
+            {
+              field: 'handle',
+              title: '操作',
+              align: 'center',
+              width: '5%',
+              valign: 'middle',
+              formatter: function (val, row, index) {
+                return '<button class="btn btn-sm btn-default opt-edit" data-index="' + index + '">编辑</button>';
+              }
+            }
+          ],
+          cache: false,
+          striped: true,
+          showRefresh: false,
+          pageSize: 20,
+          pagination: false,
+          pageList: [20, 50, 100],
+          search: false,
+          sidePagination: "server", //表示服务端请求
+          //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
+          //设置为limit可以获取limit, offset, search, sort, order
+          queryParamsType: "undefined",
+          queryParams: function queryParams (params) {   //设置查询参数
+            var param = {
+              regionType: $('#searchType').val()
+            };
+            return param;
+          },
+          url: '/admin/charge/channel/page',
+          onLoadSuccess: function () {  //加载成功时执行
+            console.log("load success");
+          },
+          onLoadError: function () {  //加载失败时执行
+            console.log("load fail");
+          }
+        });
+
+        //编辑
+        $('#regionTable').on('click', '.opt-edit', function () {
+          const currentData = $('#regionTable').bootstrapTable('getData')[$(this).data('index')];
+          var code = currentData.code;
+          var name = currentData.name;
+          var currency = currentData.currency;
+          var type = currentData.type;
+          var rate = currentData.rate;
+          var isRegionEnabled = currentData.isEnabled;
+          var isRegionRecommend = currentData.isRecommend;
+          var regionSeq = currentData.seq;
+          $('#code').val(code);
+          $('#name').val(name);
+          $('#currency').val(currency);
+          $('#type').val(type);
+          $('#rate').val(rate);
+          $('#isRegionEnabled').val(isRegionEnabled);
+          $('#isRegionRecommend').val(isRegionRecommend);
+          $('#regionSeq').val(regionSeq);
+          $("#regionModal").modal('show');
+        });
+
+        $("#regionSave").click(function () {
+          const msg = '确定要保存吗？';
+          if (confirm(msg)) {
+            const data = {
+              code: $('#code').val(),
+              name: $('#name').val(),
+              currency: $('#currency').val(),
+              type: $('#type').val(),
+              rate: $('#rate').val(),
+              isEnabled: $('#isRegionEnabled').val(),
+              isRecommend: $('#isRegionRecommend').val(),
+              seq: $('#regionSeq').val()
+            }
+            $.ajax({
+              type: "post",
+              url: "/admin/charge/region/save",
+              data: data,
+              dataType: "json",
+              success: function (json) {
+                if (json.success == 'true' || json.code == 200) {
+                  $("#tipMsg").text("保存成功");
+                  $("#tipModal").modal('show');
+                  TableHelper.doRefresh("#regionTable");
+                  TableHelper.doRefresh("#channelTable");
+                  $("#regionModal").modal('hide');
+                } else {
+                  $("#tipMsg").text("保存失败." + json.message);
+                  $("#tipModal").modal('show');
+                  $("#regionModal").modal('hide');
+                }
+              }
+            });
+          }
+        });
+
+        //编辑
+        $('#channelTable').on('click', '.opt-edit', function () {
+          const currentData = $('#channelTable').bootstrapTable('getData')[$(this).data('index')];
+          for (let i = 0, len = $('#chargeSize').val(); i < len; i++) {
+            $('#chargeProd' + i).remove();
+          }
+          var channelCode = currentData.channelCode;
+          var regionCode = currentData.regionCode;
+          var usdRate = currentData.usdRate;
+          var payChannel = currentData.payChannel;
+          var paymentType = currentData.paymentType;
+          var regionName = currentData.regionName;
+          var currency = currentData.currency;
+          var desc = currentData.desc;
+          var isChannelEnabled = currentData.isEnabled;
+          var isChannelRecommend = currentData.isRecommend;
+          var channelSeq = currentData.seq;
+          var chargeProds = currentData.chargeProds;
+          var specialValues = currentData.specialValues;
+          var isSpecial = (specialValues && specialValues.length > 0);
+          console.log(isSpecial);
+          console.log(specialValues);
+          var chargeSize = 0;
+          if (chargeProds) {
+            chargeSize = chargeProds.length;
+          }
+          $('#channelCode').val(channelCode);
+          $('#regionCode').val(regionCode);
+          $('#usdRate').val(usdRate);
+          $('#payChannel').val(payChannel);
+          $('#paymentType').val(paymentType);
+          $('#regionName').val(regionName);
+          $('#channelCurrency').val(currency);
+          $('#desc').val(desc);
+          $('#isChannelEnabled').val(isChannelEnabled);
+          $('#isChannelRecommend').val(isChannelRecommend);
+          $('#channelSeq').val(channelSeq);
+          $('#chargeSize').val(chargeSize);
+          $('#isSpecial').val(isSpecial);
+          $('#specialValues').val(specialValues);
+          var $form = $('#channelModal .modal-body .form-horizontal');
+          for (let i = 0; i < chargeProds.length; i++) {
+            var chargeProd = chargeProds[i];
+            var chargeProdId = chargeProd.chargeProdId;
+            var amount = chargeProd.money / 100;
+            var handlingRate = chargeProd.handlingRate;
+            var chargeGoldNum = chargeProd.chargeGoldNum;
+            var $formGroup = $('<div/>');
+            $formGroup.attr('class', 'form-group');
+            $formGroup.attr('id', 'chargeProd' + i);
+            var $input = $('<input/>');
+            $input.attr('type', 'hidden');
+            $input.attr('name', 'chargeProdId' + i);
+            $input.attr('id', 'chargeProdId' + i);
+            $input.attr('value', chargeProdId);
+            $formGroup.append($input);
+            var $div = $('<div/>');
+            $div.attr('class', 'col-sm-12');
+            if (isSpecial) {
+              $div.append(currency + ' ');
+              var $select = $('<select/>');
+              $select.attr('class', 'validate[required]');
+              $select.attr('data-index', i);
+              $select.attr('id', 'amount' + i);
+              $select.attr('oninput', 'calc(this)');
+              for (let j = 0; j < specialValues.length; j++) {
+                var specialValue = specialValues[j];
+                var $option = $('<option/>');
+                $option.attr('value', specialValue);
+                $option.html(specialValue);
+                if (parseFloat(amount).toFixed(2) == parseFloat(specialValue).toFixed(2)) {
+                  $option.attr('selected', true);
+                }
+                $select.append($option);
+              }
+              $div.append($select);
+              $div.append(' 手续费 <input type="text" data-index="' + i + '" id="handlingRate' + i + '" oninput="calc(this)" value="' + handlingRate + '" style="width:41px;"/>% 到账金币：<span id="chargeGoldNum' + i + '">' + chargeGoldNum + '</span> <button class="btn btn-sm btn-default opt-del" data-index="' + i + '">删除</button>');
+            } else {
+              $div.html(currency + ' <input type="text" data-index="' + i + '" id="amount' + i + '" oninput="calc(this)" value="' + amount + '" style="width:41px;"/> 手续费 <input type="text" data-index="' + i + '" id="handlingRate' + i + '" oninput="calc(this)" value="' + handlingRate + '" style="width:41px;"/>% 到账金币：<span id="chargeGoldNum' + i + '">' + chargeGoldNum + '</span> <button class="btn btn-sm btn-default opt-del" data-index="' + i + '">删除</button>');
+            }
+            $formGroup.append($div);
+            $form.append($formGroup);
+          }
+          $("#channelModal").modal('show');
+        });
+
+        //新增档位
+        $("#chargeProdAdd").click(function () {
+          var currency = $('#channelCurrency').val();
+          var i = parseInt($('#chargeSize').val());
+          var isSpecial = JSON.parse($('#isSpecial').val());
+          var specialValues = $('#specialValues').val().split(',');
+          var $form = $('#channelModal .modal-body .form-horizontal');
+          var $formGroup = $('<div/>');
+          $formGroup.attr('class', 'form-group');
+          $formGroup.attr('id', 'chargeProd' + i);
+          var $div = $('<div/>');
+          $div.attr('class', 'col-sm-12');
+          if (isSpecial) {
+            $div.append(currency + ' ');
+            var $select = $('<select/>');
+            $select.attr('class', 'validate[required]');
+            $select.attr('data-index', i);
+            $select.attr('id', 'amount' + i);
+            $select.attr('oninput', 'calc(this)');
+            for (let j = 0; j < specialValues.length; j++) {
+              var specialValue = specialValues[j];
+              var $option = $('<option/>');
+              $option.attr('value', specialValue);
+              $option.html(specialValue);
+              $select.append($option);
+            }
+            $div.append($select);
+            $div.append(' 手续费 <input type="text" data-index="' + i + '" id="handlingRate' + i + '" oninput="calc(this)" style="width:41px;"/>% 到账金币：<span id="chargeGoldNum' + i + '"></span> <button class="btn btn-sm btn-default opt-del" data-index="' + i + '">删除</button>');
+          } else {
+            $div.html(currency + ' <input type="text" data-index="' + i + '" id="amount' + i + '" oninput="calc(this)" style="width:41px;"/> 手续费 <input type="text" data-index="' + i + '" id="handlingRate' + i + '" oninput="calc(this)" style="width:41px;"/>% 到账金币：<span id="chargeGoldNum' + i + '"></span> <button class="btn btn-sm btn-default opt-del" data-index="' + i + '">删除</button>');
+          }
+          $formGroup.append($div);
+          $form.append($formGroup);
+          $('#chargeSize').val(++i);
+        });
+
+        $("#channelSave").click(function () {
+          const msg = '确定要保存吗？';
+          if (confirm(msg)) {
+            var channelCode = $('#channelCode').val();
+            var regionCode = $('#regionCode').val();
+            var currency = $('#channelCurrency').val();
+            var desc = $('#desc').val();
+            var payChannel = $('#payChannel').val();
+            var paymentType = $('#paymentType').val();
+            var chargeSize = $('#chargeSize').val();
+            var isEnabled = $('#isChannelEnabled').val();
+            var isRecommend = $('#isChannelRecommend').val();
+            var seq = $('#channelSeq').val();
+            var isSpecial = $('#isSpecial').val();
+            var chargeProdArray = [];
+            for (let i = 0; i < chargeSize; i++) {
+              const isHidden = $('#chargeProd' + i).is(':hidden');
+              if (isHidden) {
+                continue;
+              }
+
+              var chargeProdId = $('#chargeProdId' + i).val();
+              var money = parseFloat($('#amount' + i).val()) * 100;
+              var handlingRate = $('#handlingRate' + i).val();
+              if (!money || !handlingRate) {
+                continue;
+              }
+
+              const arrayIndex = chargeProdArray.findIndex(prod => prod.money === money);
+              if (arrayIndex !== -1) {
+                $("#tipMsg").text("保存失败." + money + "档位重复配置");
+                $("#tipModal").modal('show');
+                return;
+              }
+
+              var chargeProd = {
+                country: regionCode,
+                localCurrencyCode: currency,
+                payChannel: payChannel,
+                paymentType: paymentType,
+                money: parseInt(money),
+                seqNo: i,
+                handlingRate: handlingRate
+              };
+              if (chargeProdId) {
+                chargeProd.chargeProdId = chargeProdId;
+              }
+              chargeProdArray.push(chargeProd);
+            }
+            var data = {
+              channelCode: channelCode,
+              regionCode: regionCode,
+              desc: desc,
+              payChannel: payChannel,
+              paymentType: paymentType,
+              isEnabled: isEnabled,
+              isRecommend: isRecommend,
+              seq: seq,
+              chargeProds: JSON.stringify(chargeProdArray)
+            };
+            $.ajax({
+              type: "post",
+              url: "/admin/charge/channel/save",
+              data: data,
+              dataType: "json",
+              success: function (json) {
+                if (json.success == 'true' || json.code == 200) {
+                  $("#tipMsg").text("保存成功");
+                  $("#tipModal").modal('show');
+                  TableHelper.doRefresh("#regionTable");
+                  TableHelper.doRefresh("#channelTable");
+                  $("#channelModal").modal('hide');
+                } else {
+                  $("#tipMsg").text("保存失败." + json.message);
+                  $("#tipModal").modal('show');
+                  $("#channelModal").modal('hide');
+                }
+              }
+            });
+          }
+        });
+
+        //删除
+        $('#channelModal .modal-body .form-horizontal').on('click', '.opt-del', function () {
+          var index = $(this).data('index');
+          var chargeProd = $('#chargeProd' + index);
+          chargeProd.hide();
+          return false;
+          // var chargeProdId = $('#chargeProdId' + index).val();
+          // if (chargeProdId) {
+          //   const msg = '确定要删除吗？';
+          //   if (confirm(msg)) {
+          //     $.ajax({
+          //       type: "get",
+          //       url: "/admin/charge/prod/del?chargeProdId=" + chargeProdId,
+          //       dataType: "json",
+          //       success: function (json) {
+          //         if (json.success == 'true' || json.code == 200) {
+          //           $("#tipMsg").text("删除成功");
+          //           $("#tipModal").modal('show');
+          //           TableHelper.doRefresh("#regionTable");
+          //           TableHelper.doRefresh("#channelTable");
+          //           $("#channelModal").modal('hide');
+          //         } else {
+          //           $("#tipMsg").text("删除失败." + json.message);
+          //           $("#tipModal").modal('show');
+          //           $("#channelModal").modal('hide');
+          //         }
+          //       }
+          //     });
+          //     $('#chargeProd' + index).remove();
+          //   }
+          // }
+        });
+
+        //地区
+        function chargeRegion () {
+          var array;
+          $.ajax({
+            type: "get",
+            url: "/admin/charge/region/list",
+            dataType: "json",
+            async: false,
+            success: function (json) {
+              if (json.success == 'true' || json.code == 200) {
+                array = json.data;
+              }
+            }
+          });
+          var $select = $('#searchType');
+          for (let i = 0; i < array.length; i++) {
+            var $option = $('<option value="' + array[i].type + '" />');
+            $option.html(array[i].name);
+            if (i == 0) {
+              $option.attr('selected', true);
+            }
+            $select.append($option);
+          }
+          return array;
+        }
+
+        // 查询刷新
+        $('#btnSearch').on('click', function () {
+          TableHelper.doRefresh('#regionTable');
+          TableHelper.doRefresh('#channelTable');
+        });
+      });
+    }
+  },
+  unmounted () {
+    $('#regionTable').bootstrapTable('destroy');
+    $('#channelTable').bootstrapTable('destroy');
+  }
 };
 </script>
 
 <style scoped>
 .fixed-table-body {
-    overflow-x: auto;
-    overflow-y: auto;
-    height: 25%;
+  overflow-x: auto;
+  overflow-y: auto;
+  height: 25%;
 }
 </style>
\ No newline at end of file