vip订阅修改

src/web/staticres/vipsubscribe/css/choose_area_new.css

@@ -425,7 +425,6 @@
 }
 
 #choose_area .optional_count, #choose_area .all_area {
-  background: #fff;
   height: .88rem;
   line-height: .88rem;
   padding: 0 .3rem;

src/web/staticres/vipsubscribe/js/editArea.js

@@ -2,21 +2,21 @@
 var areaData = {
     "data": {
         "area": {
-            "北京": [],
-            "河南": [
-                "商丘市",
-                "安阳市",
-                "新乡市",
-                "郑州市"
-            ],
-            "澳门": [],
-            "甘肃": []
+            // "北京": [],
+            // "河南": [
+            //     "洛阳市",
+            //     "驻马店市",
+            //     "周口市",
+            //     // "郑州市"
+            // ],
+            // "澳门": [],
+            // "甘肃": []
         },
         "buyset": {
-            "areacount": 4,
+            "areacount": -1,
             "buyerclasscount": 11,
             "citys": {
-                "河南": 4
+                //   "河南": 4
             }
         },
         "industry": [
@@ -37,7 +37,6 @@ var areaData = {
     "success": true
 }
 
-
 //加载数据
 function getData() {
     $DoPost("/subscribepay/editSub/getSubBuyMsg", {}, function (r) {
@@ -76,16 +75,14 @@ var obj
 
 // 改变选择结果方法
 function getResult() {
-    var data = '';
     obj = {};
-    $('.result_name').empty();
+    //$('.result_name').empty();
     $('.province').each(function () {
         let provinceText = $(this).text().trim();//省份名称
         let isChecked = $(this).children('.checkbox').is(':checked');
         let isHalf = $(this).children('.checkbox').hasClass('half');
         let arr = [];
         if (isChecked) {
-            data += provinceText + '、';
             obj[provinceText] = [];
         } else if (isHalf && !isChecked) {
             let $that = $(this);
@@ -97,12 +94,11 @@ function getResult() {
                 }
             })
             obj[$that.text().trim()] = arr
-            data += `${$that.text().trim()}(${arr.join('、')})、`
         }
     })
     $('count').html($('.checkbox:not(.other):checked').length);
-    $('.result_name').append(data.substring(0, data.length - 1));
-    //校验是否修改
+    //$('.result_name').append(getAreaClassArr_index(obj).join("、"));
+//校验是否修改
     if (theSameAs(obj) || $.isEmptyObject(obj)) {
         $('#enter').attr("disabled", "disabled");
     } else {
@@ -114,7 +110,6 @@ function getResult() {
 function init() {
     let p = areaData.data.area;
     let count = areaData.data.buyset.citys;
-    var ht = '';
     // 1.渲染城市列表
     $(".select-area-box ul li:not('.index')").each(function () {
         var text = $(this).find(".province").text().trim()
@@ -128,88 +123,130 @@ function init() {
         box.html(html)
     })
     // 2.当areacount == -1时，全国为选中状态，为正数时为选中的省份数目，全国选项不显示
-    if (areaData.data.buyset.areacount == -1) {
-        // 选中全国
+    let pLength = Object.keys(areaData.data.area).length;
+    let cLength = Object.keys(areaData.data.buyset.citys).length
+    console.log(pLength, cLength)
+    if (areaData.data.buyset.areacount == -1 && pLength == 0 && cLength == 0) {
+        // 当购买的全国切选中的是全国时
         // $('.optional_count').html("可选择全部区域")
-        $('.all_area').show()
+        //$('.all_area').show()
         $('.optional_count').hide()
         $('.total').html('34')
         $('.count').html('34')
         $('.tab.whole').parent('li').show();
         $('.checkbox.other').prop('checked', true);
-        $('.checkbox:not(.other)').attr('disabled', true)
-        ht += `<span>全国</span>`
+        // $('.checkbox:not(.other)').attr('disabled',true)
+        //$('.result_name').append(`<span>全国</span>`);
+    } else if (areaData.data.buyset.areacount == -1 && pLength != 0) {
+        // 当购买的全国而没有选择全国，选择部分省市时
+        //$('.all_area').show();
+        $('.province').removeAttr('data-count');
+        $('.optional_count').hide();
+        $('.total').html('34');
+        initResult()
     } else {
-        $('.all_area').hide()
+        //$('.all_area').hide()
         $('.optional_count').show()
         $('.total').html(areaData.data.buyset.areacount)
         $('.tab.whole').parent('li').hide();
-        $('.checkbox.other').attr('disabled', true);
-        // 渲染已选择结果
-        for (const k in p) {
-            console.log(p[k], k)
-            if (p[k].length == 0) {
-                ht += k + '、';
-                $('.province').each(function () {
-                    let t = $(this).text().trim();
-                    if (k == t && p[k].length == 0) {
-                        // 如果购买的是全省，则不可点击下拉事件（不可修改城市）
-                        // $(this).parent('.tab').unbind("click").parent('li').siblings().find('.tab').unbind("click");
+        // $('.checkbox.other').attr('disabled',true);
+        initResult()
+    }
+
+}
+
+function initResult() {
+    let isAll = areaData.data.buyset.areacount;
+    let p = areaData.data.area;
+    let count = areaData.data.buyset.citys;
+    // 渲染已选择结果
+    for (const k in p) {
+        console.log(p[k], k)
+        if (p[k].length == 0) {
+            $('.province').each(function () {
+                let t = $(this).text().trim();
+                if (k == t && p[k].length == 0) {
+                    // 如果购买的是全省，则不可点击下拉事件（不可修改城市）
+                    if (isAll != -1) {
                         $(this).parent().siblings().children('.city').addClass('active').attr('disabled', true);
-                        $(this).children('.checkbox').prop('checked', true)
+                        $(this).parent('.tab').parent('li').siblings().find('.checkbox:not(.half)').parents('.tab').unbind('click')
+                    } else {
+                        $(this).parent().siblings().children('.city').addClass('active').removeAttr('disabled')
+                    }
+                    $(this).children('.checkbox').prop('checked', true)
+                }
+            })
+        } else {
+            console.log(k, p[k].length)
+            $('.city').each(function () {
+                let t = $(this).text().trim();
+                p[k].forEach(v => {
+                    // console.log(v,t)
+                    if (v == t) {
+                        let that = $(this).parents('li').find('.tab:not(.municipality)');
+                        console.log("v==t")
+                        // 如果是可修改城市的省份，则可以进行下拉展示
+                        that.bind('click', function () {
+                            slideFun($(this));
+                        })
+                        $(this).addClass('active').parent().siblings('.tab').find('input').addClass('half');
+                        return;
                     }
                 })
-            } else {
-                console.log(k, p[k])
-                ht += `${k}( ${p[k].join('、')} )、`;
-                $('.city').each(function () {
-                    let t = $(this).text().trim();
-                    p[k].forEach(v => {
-                        // console.log(v,t)
-                        if (v == t) {
-                            let that = $(this).parents('li').find('.tab:not(.municipality)');
-                            console.log("v==t")
-                            // 如果是可修改城市的省份，则可以进行下拉展示
-                            that.bind('click', function () {
-                                slideFun($(this));
-                            });
-                            $(this).addClass('active').parent().siblings('.tab').find('input').addClass('half');
-                            return;
-                        }
-                    })
-                })
-                for (const c in count) {
-                    if (p[k].length >= count[c]) {
+            })
+            for (const c in count) {
+                if (p[k].length >= count[c]) {
+                    if (isAll != -1) {
                         $('.city:not(.active)').attr('disabled', true)
+                    } else {
+                        $('.city:not(.active)').removeAttr('disabled')
                     }
                 }
             }
         }
-        // 添加可选择城市文字 和自定义属性值
+    }
+    // 添加可选择城市文字 和自定义属性值
+    if (areaData.data.buyset.areacount != -1) {
         for (const c in count) {
             $('.province').each(function () {
                 let t = $(this).text().trim();
                 if (c == t) {
                     $(this).attr("data-count", count[c]);
                     $(this).after(`<em class="optional">可选择 ${count[c]} 个市</em>`)
-                    $(this).parent().bind('click', function () {
+                    let that = $(this).parent('.tab:not(.municipality)');
+                    that.bind('click', function () {
                         slideFun($(this));
                     })
                 }
             })
         }
-        $('.result_name').append(ht.substring(0, ht.length - 1));
-        $('.count').html($('.checkbox:not(.other):checked').length)
-        //$('.city:not(.active)').attr('disabled', true)
-        // 如果选中的省份数量等于购买的省份数量，则将其他未选中的省份禁用
-        if ($('.checkbox:not(.other):checked').length == $('.total').html()) {
-            $('.checkbox:not(:checked)').attr('disabled', true)
-        }
+    }
+    //$('.result_name').append(getAreaClassArr_index(areaData.data.area).join("、"));
+    $('.count').html($('.checkbox:not(.other):checked').length)
+    // 如果选中的省份数量等于购买的省份数量，则将其他未选中的省份禁用
+    if ($('.checkbox:not(.other):checked').length == $('.total').html()) {
+        $('.checkbox:not(:checked)').attr('disabled', true);
     }
     $('#enter').attr("disabled", "disabled");
 }
 
 $(function () {
+    // 省下拉事件
+    $('.tab:not(.municipality)').on('click', function () {
+        if ($(this).next('.tab_content:not(:animated)').css("display") == "block") {
+            $(this).children().children('i').css({
+                "display": "inline-block",
+                "transform": "rotate(0)"
+            })
+        } else {
+            $(this).children().children('i').css({
+                "display": "inline-block",
+                "transform": "rotate(-180deg)"
+            })
+        }
+        $(this).toggleClass('selected').next('.tab_content:not(:animated)').slideToggle(500)
+        $(this).parent().siblings().children('.tab').removeClass('selected');
+    });
     getData();
     // 初始化
     init();
@@ -219,25 +256,21 @@ $(function () {
         let isChecked = $(this).is(':checked');
         if (isChecked) {
             $('.count').html('34')
-            $('.checkbox:not(.other)').prop('checked', false).attr('disabled', true).removeClass('half')
-            $('.city').removeClass('active').attr('disabled', true)
-            $('.tab').unbind("click").siblings().slideUp()
+            $('.checkbox:not(.other)').prop('checked', false).removeClass('half')
+            $('.city').removeClass('active');
+            $('.tab_content').slideUp()
             getResult()
         } else {
-            // $('.count').html($('.checkbox:not(.other):checked').length)
             $('.checkbox:not(.other)').removeAttr('disabled')
             $('.city').removeAttr('disabled')
-            $('.tab:not(.municipality)').on('click', function () {
-                slideFun($(this));
-            });
             getResult()
         }
     })
     // 2.点击非全国按钮onchange事件；
     $('.checkbox:not(.other)').on('change', function () {
+        $('.checkbox.other').prop('checked', false);
         let checkedLength = $('.checkbox:checked').length;
         let totalLength = $('.total').text();
-        // console.log(checkedLength,totalLength)
         $('.count').html(checkedLength)
         if (checkedLength < totalLength) {
             $('.checkbox:not(.other)').removeAttr('disabled')
@@ -247,10 +280,14 @@ $(function () {
             getResult()
         }
         if ($(this).is(':checked')) {
-            $(this).prop('checked', true).removeClass('half').parent().parent().siblings().find('.city').addClass('active').attr('disabled', true)
+            if (areaData.data.buyset.areacount != -1) {
+                $(this).prop('checked', true).removeClass('half').parents('li').find('.city').addClass('active').attr('disabled', true);
+            } else {
+                $(this).prop('checked', true).removeClass('half').parents('li').find('.city').addClass('active');
+            }
             getResult()
         } else {
-            $(this).prop('checked', false).removeClass('half').parent().parent().siblings().find('.city').removeClass('active').removeAttr('disabled')
+            $(this).prop('checked', false).removeClass('half').parent().parent().siblings().find('.city').removeClass('active').removeAttr('disabled');
             getResult()
         }
 
@@ -259,10 +296,11 @@ $(function () {
     $('.checkbox.half').on('change', function () {
         console.log($(this).is(':checked'))
         if ($(this).is(':checked')) {
-            $(this).prop('checked', true).removeClass('half');
-            $(this).removeClass('half').parent().parent().siblings().find('.city').addClass('active').attr('disabled', true);
-            $(this).parent().parent().siblings().children('.city').addClass('active');
-            //$(this).parent().siblings('.optional').hide();
+            if (areaData.data.buyset.areacount != -1) {
+                $(this).prop('checked', true).removeClass('half').parents('li').find('.city').addClass('active').attr('disabled', true);
+            } else {
+                $(this).prop('checked', true).removeClass('half').parents('li').find('.city').addClass('active');
+            }
             getResult()
         } else {
             $(this).prop('checked', false);
@@ -274,10 +312,10 @@ $(function () {
     // 4.点击城市按钮触发的事件
     $('.tab_content').on('click', '.city', function () {
         let count = $(this).parent().siblings().find('.province').attr('data-count');
-        $(this).toggleClass('active')
+        $(this).toggleClass('active');
+        $('.checkbox.other').prop('checked', false);
         var isActive = $(this).parent().find('.city.active').length
         let cityLength = $(this).parent().find('.city').length
-
         if (isActive === cityLength) {//当选中的城市数量等于该省下所有城市总数时，即为全选
             var oInput = $(this).parents('li').find('input.checkbox')
             oInput.removeClass('half').prop('checked', true)
@@ -316,7 +354,7 @@ $(function () {
     // 取消按钮事件 返回上一页
     $('#cancel').click(function () {
         // window.history.go(-1)
-        $('.result_name').empty()
+        //$('.result_name').empty()
         $('.checkbox').prop('checked', false).removeAttr('disabled');
         $('.city').removeClass('active');
         $('.tab_content').slideUp();

src/web/templates/weixin/vipsubscribe/edit_city_new.html

@@ -27,13 +27,11 @@
 
 <body>
 <div id="choose_area">
-    <p class="all_area" style="display: none;"> 可选择全部区域</p>
+    <!--<p class="all_area" style="display: none;"> 可选择全部区域</p>-->
     <p class="optional_count"> 可选择省数量：<em class="count"></em> / <span class="total"></span></p>
-    <div class="result">
-        <!-- 首次购买 显示"已选择" -----  升级订阅显示"已新增" -->
-
+    <!--<div class="result">
         <p>已选择：<span class="result_name"></span></p>
-    </div>
+    </div>-->
     <div class="form">
         <div class="select-area-box" style="padding-bottom: 0;">
             <ul class="area-list">

src/web/templates/weixin/vipsubscribe/edit_subscribe_industry.html

@@ -1,405 +1,408 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="utf-8">
-        <title>行业选择</title>
-        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
-        <meta name="apple-mobile-web-app-capable" content="yes">
-        <meta name="apple-mobile-web-app-status-bar-style" content="black">
-        <script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
-        <link rel="stylesheet" href="/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}">
-        <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}" />
-        <link rel="stylesheet" type="text/css" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}" />
-        <link rel="stylesheet" href="/vipsubscribe/css/choose_industry.css?v={{Msg "seo" "version"}}">
-    </head>
-    <body>
-        <main class="choose_industry main">
-            <p class="optional_count"> 可选择行业数量： <em class="count"></em> / <span class="total"></span></p>
-            <div class="result"  style="display: block;">
-                <span class="label">已选择：</span>
-                <span class="result_name">全部行业</span>
-            </div>
-            <div class="form">
-                <div class="select-area-box">
-                    <ul class="list">
-                        <li class="list_item" id="all" style="display:none">
-                            <div class="item_label"></div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">全部行业</button>
-                            </div>
-                        </li>
-                        <li class="list_item" id="A">
-                            <div class="item_label">A</div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">安监</button>
-                            </div>
-                        </li>
-                        <li class="list_item" id="B">
-                            <div class="item_label">B</div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">保监</button>
-                            </div>
-                        </li>
-                        <li class="list_item" id="C">
-                            <div class="item_label">C</div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">财政</button>
-                                <button class="industry_item">传媒</button>
-                                <button class="industry_item">城管</button>
-                                <button class="industry_item">采矿业</button>
-                                <button class="industry_item">出版广电</button>
-                            </div>
-                        </li>
-                        <li class="list_item" id="D">
-                            <div class="item_label">D</div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">档案</button>
-                                <button class="industry_item">地震</button>
-                                <button class="industry_item">党委办</button>
-                                <button class="industry_item">电信行业</button>
-                            </div>
-                        </li>
-                        <li class="list_item" id="F">
-                            <div class="item_label">F</div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">法院</button>
-                                <button class="industry_item">发改</button>
-                            </div>
-                        </li>
-                        <li class="list_item" id="G">
-                            <div class="item_label">G</div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">工商</button>
-                                <button class="industry_item">工信</button>
-                                <button class="industry_item">国土</button>
-                                <button class="industry_item">公安</button>
-                                <button class="industry_item">国资委</button>
-                                <button class="industry_item">公共资源交易</button>
-                            </div>
-                        </li>
-                        <li class="list_item" id="H">
-                            <div class="item_label">H</div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">环保</button>
-                                <button class="industry_item">海关</button>
-                            </div>
-                        </li>
-                        <li class="list_item" id="J">
-                            <div class="item_label">J</div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">教育</button>
-                                <button class="industry_item">军队</button>
-                                <button class="industry_item">交通</button>
-                                <button class="industry_item">纪委</button>
-                                <button class="industry_item">金融业</button>
-                                <button class="industry_item">建筑业</button>
-                                <button class="industry_item">检察院</button>
-                                <button class="industry_item">机关事务</button>
-                            </div>
-                        </li>
-                        <li class="list_item"  id="K">
-                            <div class="item_label">K</div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">科技</button>
-                            </div>
-                        </li>
-                        <li class="list_item" id="L">
-                            <div class="item_label">L</div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">林业</button>
-                                <button class="industry_item">旅游</button>
-                            </div>
-                        </li>
-                        <li class="list_item" id="M">
-                            <div class="item_label">M</div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">民政</button>
-                                <button class="industry_item">民宗</button>
-                            </div>
-                        </li>
-                        <li class="list_item" id="N">
-                            <div class="item_label">N</div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">农业</button>
-                                <button class="industry_item">能源化工</button>
-                                <button class="industry_item">农林牧渔</button>
-                            </div>
-                        </li>
-                        <li class="list_item" id="P">
-                            <div class="item_label">P</div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">批发零售</button>
-                            </div>
-                        </li>
-                        <li class="list_item" id="Q">
-                            <div class="item_label">Q</div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">气象</button>
-                            </div>
-                        </li>
-                        <li class="list_item" id="R">
-                            <div class="item_label">R</div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">人行</button>
-                                <button class="industry_item">人社</button>
-                                <button class="industry_item">人大</button>
-                            </div>
-                        </li>
-                        <li class="list_item" id="S">
-                            <div class="item_label">S</div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">食药</button>
-                                <button class="industry_item">税务</button>
-                                <button class="industry_item">水利</button>
-                                <button class="industry_item">市政</button>
-                                <button class="industry_item">审计</button>
-                                <button class="industry_item">商务</button>
-                                <button class="industry_item">司法</button>
-                                <button class="industry_item">社会团体</button>
-                            </div>
-                        </li>
-                        <li class="list_item" id="T">
-                            <div class="item_label">T</div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">统计</button>
-                                <button class="industry_item">统战</button>
-                                <button class="industry_item">体育</button>
-                            </div>
-                        </li>                    
-                        <li class="list_item" id="W">
-                            <div class="item_label">W</div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">文化</button>
-                                <button class="industry_item">卫生</button>
-                            </div>
-                        </li>
-                        <li class="list_item" id="X">
-                            <div class="item_label">X</div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">学校</button>
-                                <button class="industry_item">宣传</button>
-                                <button class="industry_item">信息技术</button>
-                            </div>
-                        </li>
-                        <li class="list_item" id="Y">
-                            <div class="item_label">Y</div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">医疗</button>
-                                <button class="industry_item">银监</button>
-                                <button class="industry_item">运输物流</button>
-                            </div>
-                        </li>
-                        <li class="list_item" id="Z">
-                            <div class="item_label">Z</div>
-                            <div class="item_industry_list">
-                                <button class="industry_item">质监</button>
-                                <button class="industry_item">组织</button>
-                                <button class="industry_item">政协</button>
-                                <button class="industry_item">住建</button>
-                                <button class="industry_item">证监</button>
-                                <button class="industry_item">政府办</button>
-                                <button class="industry_item">制造业</button>
-                                <button class="industry_item">政务中心</button>
-                                <button class="industry_item">住宿餐饮</button>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-            <div class="slide">
-                <a href="javascript:;">#</a>
-                <a href="javascript:;">A</a>
-                <a href="javascript:;">B</a>
-                <a href="javascript:;">C</a>
-                <a href="javascript:;">D</a>
-                <a href="javascript:;">F</a>
-                <a href="javascript:;">G</a>
-                <a href="javascript:;">H</a>
-                <a href="javascript:;">J</a>
-                <a href="javascript:;">K</a>
-                <a href="javascript:;">L</a>
-                <a href="javascript:;">M</a>
-                <a href="javascript:;">N</a>
-                <a href="javascript:;">P</a>
-                <a href="javascript:;">Q</a>
-                <a href="javascript:;">R</a>
-                <a href="javascript:;">S</a>
-                <a href="javascript:;">T</a>
-                <a href="javascript:;">W</a>
-                <a href="javascript:;">X</a>
-                <a href="javascript:;">Y</a>
-                <a href="javascript:;">Z</a>
-            </div>
-            <!-- <div class="bottom_button">
-                <button class="reset-btn left_btn" disabled>重置</button>
-                <button class="save-btn right_btn" disabled>确认</button>
-            </div> -->
-            <div class="tips_btn">
-                <div class="btns">
-                    <button class="reset-btn" id="cancel">取消</button>
-                    <button disabled class="save-btn" id="enter">确认修改</button>
-                </div>
-            </div>
-        </main>
-        <script src="/vipsubscribe/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
-        <script src="/vipsubscribe/js/weui.min.js?v={{Msg "seo" "version"}}"></script>
-        <script src="/vipsubscribe/js/common.js?v={{Msg "seo" "version"}}"></script>
-        <script>
+<head>
+    <meta charset="utf-8">
+    <title>行业选择</title>
+    <meta name="viewport"
+          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
+    <link rel="stylesheet" href="/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}">
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}"/>
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}"/>
+    <link rel="stylesheet" href="/vipsubscribe/css/choose_industry.css?v={{Msg "seo" "version"}}">
+</head>
+<body>
+<main class="choose_industry main">
+    <p class="optional_count" style="background: rgba(245,244,249,1);"> 可选择行业数量： <em class="count"></em> / <span class="total"></span></p>
+    <!--<div class="result" style="display: block;">
+        <span class="label">已选择：</span>
+        <span class="result_name">全部行业</span>
+    </div>-->
+    <div class="form">
+        <div class="select-area-box">
+            <ul class="list">
+                <li class="list_item" id="all" style="display:none">
+                    <div class="item_label"></div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">全部行业</button>
+                    </div>
+                </li>
+                <li class="list_item" id="A">
+                    <div class="item_label">A</div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">安监</button>
+                    </div>
+                </li>
+                <li class="list_item" id="B">
+                    <div class="item_label">B</div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">保监</button>
+                    </div>
+                </li>
+                <li class="list_item" id="C">
+                    <div class="item_label">C</div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">财政</button>
+                        <button class="industry_item">传媒</button>
+                        <button class="industry_item">城管</button>
+                        <button class="industry_item">采矿业</button>
+                        <button class="industry_item">出版广电</button>
+                    </div>
+                </li>
+                <li class="list_item" id="D">
+                    <div class="item_label">D</div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">档案</button>
+                        <button class="industry_item">地震</button>
+                        <button class="industry_item">党委办</button>
+                        <button class="industry_item">电信行业</button>
+                    </div>
+                </li>
+                <li class="list_item" id="F">
+                    <div class="item_label">F</div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">法院</button>
+                        <button class="industry_item">发改</button>
+                    </div>
+                </li>
+                <li class="list_item" id="G">
+                    <div class="item_label">G</div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">工商</button>
+                        <button class="industry_item">工信</button>
+                        <button class="industry_item">国土</button>
+                        <button class="industry_item">公安</button>
+                        <button class="industry_item">国资委</button>
+                        <button class="industry_item">公共资源交易</button>
+                    </div>
+                </li>
+                <li class="list_item" id="H">
+                    <div class="item_label">H</div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">环保</button>
+                        <button class="industry_item">海关</button>
+                    </div>
+                </li>
+                <li class="list_item" id="J">
+                    <div class="item_label">J</div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">教育</button>
+                        <button class="industry_item">军队</button>
+                        <button class="industry_item">交通</button>
+                        <button class="industry_item">纪委</button>
+                        <button class="industry_item">金融业</button>
+                        <button class="industry_item">建筑业</button>
+                        <button class="industry_item">检察院</button>
+                        <button class="industry_item">机关事务</button>
+                    </div>
+                </li>
+                <li class="list_item" id="K">
+                    <div class="item_label">K</div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">科技</button>
+                    </div>
+                </li>
+                <li class="list_item" id="L">
+                    <div class="item_label">L</div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">林业</button>
+                        <button class="industry_item">旅游</button>
+                    </div>
+                </li>
+                <li class="list_item" id="M">
+                    <div class="item_label">M</div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">民政</button>
+                        <button class="industry_item">民宗</button>
+                    </div>
+                </li>
+                <li class="list_item" id="N">
+                    <div class="item_label">N</div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">农业</button>
+                        <button class="industry_item">能源化工</button>
+                        <button class="industry_item">农林牧渔</button>
+                    </div>
+                </li>
+                <li class="list_item" id="P">
+                    <div class="item_label">P</div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">批发零售</button>
+                    </div>
+                </li>
+                <li class="list_item" id="Q">
+                    <div class="item_label">Q</div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">气象</button>
+                    </div>
+                </li>
+                <li class="list_item" id="R">
+                    <div class="item_label">R</div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">人行</button>
+                        <button class="industry_item">人社</button>
+                        <button class="industry_item">人大</button>
+                    </div>
+                </li>
+                <li class="list_item" id="S">
+                    <div class="item_label">S</div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">食药</button>
+                        <button class="industry_item">税务</button>
+                        <button class="industry_item">水利</button>
+                        <button class="industry_item">市政</button>
+                        <button class="industry_item">审计</button>
+                        <button class="industry_item">商务</button>
+                        <button class="industry_item">司法</button>
+                        <button class="industry_item">社会团体</button>
+                    </div>
+                </li>
+                <li class="list_item" id="T">
+                    <div class="item_label">T</div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">统计</button>
+                        <button class="industry_item">统战</button>
+                        <button class="industry_item">体育</button>
+                    </div>
+                </li>
+                <li class="list_item" id="W">
+                    <div class="item_label">W</div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">文化</button>
+                        <button class="industry_item">卫生</button>
+                    </div>
+                </li>
+                <li class="list_item" id="X">
+                    <div class="item_label">X</div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">学校</button>
+                        <button class="industry_item">宣传</button>
+                        <button class="industry_item">信息技术</button>
+                    </div>
+                </li>
+                <li class="list_item" id="Y">
+                    <div class="item_label">Y</div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">医疗</button>
+                        <button class="industry_item">银监</button>
+                        <button class="industry_item">运输物流</button>
+                    </div>
+                </li>
+                <li class="list_item" id="Z">
+                    <div class="item_label">Z</div>
+                    <div class="item_industry_list">
+                        <button class="industry_item">质监</button>
+                        <button class="industry_item">组织</button>
+                        <button class="industry_item">政协</button>
+                        <button class="industry_item">住建</button>
+                        <button class="industry_item">证监</button>
+                        <button class="industry_item">政府办</button>
+                        <button class="industry_item">制造业</button>
+                        <button class="industry_item">政务中心</button>
+                        <button class="industry_item">住宿餐饮</button>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div class="slide">
+        <a href="javascript:;">#</a>
+        <a href="javascript:;">A</a>
+        <a href="javascript:;">B</a>
+        <a href="javascript:;">C</a>
+        <a href="javascript:;">D</a>
+        <a href="javascript:;">F</a>
+        <a href="javascript:;">G</a>
+        <a href="javascript:;">H</a>
+        <a href="javascript:;">J</a>
+        <a href="javascript:;">K</a>
+        <a href="javascript:;">L</a>
+        <a href="javascript:;">M</a>
+        <a href="javascript:;">N</a>
+        <a href="javascript:;">P</a>
+        <a href="javascript:;">Q</a>
+        <a href="javascript:;">R</a>
+        <a href="javascript:;">S</a>
+        <a href="javascript:;">T</a>
+        <a href="javascript:;">W</a>
+        <a href="javascript:;">X</a>
+        <a href="javascript:;">Y</a>
+        <a href="javascript:;">Z</a>
+    </div>
+    <!-- <div class="bottom_button">
+        <button class="reset-btn left_btn" disabled>重置</button>
+        <button class="save-btn right_btn" disabled>确认</button>
+    </div> -->
+    <div class="tips_btn">
+        <div class="btns">
+            <button class="reset-btn" id="cancel">取消</button>
+            <button disabled class="save-btn" id="enter">确认修改</button>
+        </div>
+    </div>
+</main>
+<script src="/vipsubscribe/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
+<script src="/vipsubscribe/js/weui.min.js?v={{Msg "seo" "version"}}"></script>
+<script src="/vipsubscribe/js/common.js?v={{Msg "seo" "version"}}"></script>
+<script>
+    //加载数据
+    var EditIndustry = {
+        reqData: {},
+        selectlast: [],
+        init: function () {
+            this.getData();
+            this.showData();//初始化页面展示
+            this.initClick();//初始化点击事件
+        },
+        getData: function () {
             //加载数据
-            var EditIndustry={
-              reqData:{},
-              selectlast:[],
-              init:function(){
-                this.getData();
-                this.showData();//初始化页面展示
-                this.initClick();//初始化点击事件
-              },
-              getData:function(){
-                //加载数据
-                  $DoPost("/subscribepay/editSub/getSubBuyMsg",{},function(r){
-                    if(r.success){
-                      EditIndustry.reqData=r.data;
-                    }
-                  },false)
-                  if(this.reqData.industry.length==0&&this.reqData.buyset.buyerclasscount==-1){
-                    this.reqData.industry=["全部行业"]
-                  }
-              },
-              showData:function(){
-                this.selectlast=this.reqData.industry;
-                
-                $('.result .result_name').html(this.reqData.industry.join('、'));
-                
-                $('.industry_item').each(function () {  
-                  let text = $(this).text();
-                  EditIndustry.reqData.industry.forEach(v =>{
-                      if(v.trim() == text.trim()){
-                        $(this).addClass('active')
-                      }
-                    })
-                });
-                
-                if(this.reqData.buyset.buyerclasscount!=-1){ //非全部行业 展示数量
-                  $('.total').html(this.reqData.buyset.buyerclasscount);
-                  $('.count').html(this.reqData.industry.length);
-                  $('.optional_count').css({"width":"100%","position":"fixed","top":0,"z-index":9999});
-                  $('.result').css({"top":$('.optional_count').height()});
-                  $('.select-area-box').css({"padding-top":$('.optional_count').height()});
-                  if(this.reqData.industry.length>=this.reqData.buyset[2]){
-                    $('.industry_item:not(.active)').attr('disabled',true);
-                  }
-                }else{
-                  $("#all").css("display","");
-                  $(".optional_count").css("display","none");
+            $DoPost("/subscribepay/editSub/getSubBuyMsg", {}, function (r) {
+                if (r.success) {
+                    EditIndustry.reqData = r.data;
                 }
-                EditIndustry.findSelectedIndustry(true);
-              },
-              initClick:function(){
-                // 点击导航跳转
-                $("body").on('click','.slide a',function(){
-                    var s = $(this).html()
-                    if(s == '#'){
-                        return;
+            }, false)
+            if (this.reqData.industry.length == 0 && this.reqData.buyset.buyerclasscount == -1) {
+                this.reqData.industry = ["全部行业"]
+            }
+        },
+        showData: function () {
+            this.selectlast = this.reqData.industry;
+
+            //$('.result .result_name').html(this.reqData.industry.join('、'));
+
+            $('.industry_item').each(function () {
+                let text = $(this).text();
+                EditIndustry.reqData.industry.forEach(v => {
+                    if (v.trim() == text.trim()) {
+                        $(this).addClass('active')
                     }
-                    document.querySelector('#' + s).scrollIntoView({block:'center'});
                 })
-                // 每个button的点击事件
-                $('.select-area-box .list').on('click', 'button', function (e) {
-                    if($(this).text()=="全部行业"){
-                      if($(this).hasClass('active')){
+            });
+
+            if (this.reqData.buyset.buyerclasscount != -1) { //非全部行业 展示数量
+                $('.total').html(this.reqData.buyset.buyerclasscount);
+                $('.count').html(this.reqData.industry.length);
+                $('.optional_count').css({"width": "100%", "position": "fixed", "top": 0, "z-index": 9999});
+                $('.result').css({"top": $('.optional_count').height()});
+                $('.select-area-box').css({"padding-top": $('.optional_count').height()});
+                if (this.reqData.industry.length >= this.reqData.buyset[2]) {
+                    $('.industry_item:not(.active)').attr('disabled', true);
+                }
+            } else {
+                $("#all").css("display", "");
+                $(".optional_count").css("display", "none");
+            }
+            EditIndustry.findSelectedIndustry(true);
+        },
+        initClick: function () {
+            // 点击导航跳转
+            $("body").on('click', '.slide a', function () {
+                var s = $(this).html()
+                if (s == '#') {
+                    return;
+                }
+                document.querySelector('#' + s).scrollIntoView({block: 'center'});
+            })
+            // 每个button的点击事件
+            $('.select-area-box .list').on('click', 'button', function (e) {
+                if ($(this).text() == "全部行业") {
+                    if ($(this).hasClass('active')) {
                         return
-                      }
-                      if(EditIndustry.reqData.buyset.buyerclasscount!=-1){ //购买不是全部行业 不能点击
+                    }
+                    if (EditIndustry.reqData.buyset.buyerclasscount != -1) { //购买不是全部行业 不能点击
                         EditIndustry.showTip(`<span style="white-space: nowrap;">您只购买了${EditIndustry.reqData.buyset.buyerclasscount}个行业，如需更多请升级<span></p>`);
                         return
-                      }
-                      $('.select-area-box .list button').removeClass('active');
-                      $('#all button').addClass('active');
-                      $('#enter').removeAttr('disabled');
-                    }else{
-                      $(this).toggleClass('active')
-                      if($(".industry_item.active").length==0){//如果没有行业被选中 则选中全部行业
-                        if(EditIndustry.reqData.buyset.buyerclasscount==-1){
-                          $('#all button').addClass('active');
-                        }else{
-                          $('#enter').attr('disabled','disabled');//选择空不能提交
+                    }
+                    $('.select-area-box .list button').removeClass('active');
+                    $('#all button').addClass('active');
+                    $('#enter').removeAttr('disabled');
+                } else {
+                    $(this).toggleClass('active')
+                    if ($(".industry_item.active").length == 0) {//如果没有行业被选中 则选中全部行业
+                        if (EditIndustry.reqData.buyset.buyerclasscount == -1) {
+                            $('#all button').addClass('active');
+                        } else {
+                            $('#enter').attr('disabled', 'disabled');//选择空不能提交
                         }
-                      }else{
+                    } else {
                         $('#all button').removeClass('active');
                         $('#enter').removeAttr('disabled');
-                      }
-                    }
-                    
-                    EditIndustry.findSelectedIndustry(false);
-                })
-                // 取消按钮事件 返回上一页
-                $('#cancel').click(function(){
-                    window.history.go(-1);
-                })
-                // 确定修改事件
-                $('#enter').click(function(){
-                  $("#enter").attr("disabled","disabled");  
-                  //更新对象
-                  if(EditIndustry.reqData.buyset.buyerclasscount==-1&&EditIndustry.reqData.industry[0]=="全部行业"){
-                    EditIndustry.reqData.industry=[];
-                  }
-                  console.log("final select ",EditIndustry.reqData)
-                  $DoPost("/subscribepay/editSub/submit",{"type":"industry","value":JSON.stringify(EditIndustry.reqData.industry)},function(r){
-                    if(r.success){
-                      window.location.replace('/front/vipsubscribe/submitEditSubFinish');
                     }
-                  },false)
-                  $("#enter").removeAttr("disabled");  
-                })
-              },
-              showTip:function(msg){
-                weui.toast(msg,{
-                  duration: 2000,
-                  className: 'custom-toast',
-                });
-              },
-              findSelectedIndustry:function(isInit) {
-                  var buttons = $('.select-area-box .list button')
-                  // 找到已选择的数组(有active类的数组)
-                  var selectedArr = []
-                  buttons.each(function(){
-                      if ($(this).hasClass('active')) {
-                        selectedArr.push($(this).text())
-                      }
-                  })
-                  if(selectedArr.length==$('.select-area-box .list button').length-1){//选中了全部行业
-                    $('#all button').trigger('click');
-                    return
-                  }
-                  var selectCount= selectedArr.length
-                  $('.count').html(selectCount);
-                  // 显示隐藏优惠tips
-                  if (selectedArr.length >= EditIndustry.reqData.buyset.buyerclasscount&& EditIndustry.reqData.buyset.buyerclasscount!=-1) {
-                    if(!isInit){
-                      EditIndustry.showTip(`<span style="white-space: nowrap;">您只购买了${EditIndustry.reqData.buyset.buyerclasscount}个行业，如需更多请升级<span></p>`);
+                }
+
+                EditIndustry.findSelectedIndustry(false);
+            })
+            // 取消按钮事件 返回上一页
+            $('#cancel').click(function () {
+                window.history.go(-1);
+            })
+            // 确定修改事件
+            $('#enter').click(function () {
+                $("#enter").attr("disabled", "disabled");
+                //更新对象
+                if (EditIndustry.reqData.buyset.buyerclasscount == -1 && EditIndustry.reqData.industry[0] == "全部行业") {
+                    EditIndustry.reqData.industry = [];
+                }
+                console.log("final select ", EditIndustry.reqData)
+                $DoPost("/subscribepay/editSub/submit", {
+                    "type": "industry",
+                    "value": JSON.stringify(EditIndustry.reqData.industry)
+                }, function (r) {
+                    if (r.success) {
+                        window.location.replace('/front/vipsubscribe/submitEditSubFinish');
                     }
-                    $('.industry_item:not(.active)').attr('disabled','disabled');
-                  } else {
-                      $('.industry_item:not(.active)').removeAttr('disabled')
-                  }
-                  this.reqData.industry = selectedArr;
-                  var selectedStr = selectedArr.join('、')
-                  $('.result .result_name').text(selectedStr)
-                  if(this.noChange(this.reqData.industry,EditIndustry.selectlast)||this.reqData.industry.length==0){
-                    $('#enter').attr('disabled', 'disabled');
-                  }else{
-                    $('#enter').removeAttr('disabled');
-                  }
-                  $(".select-area-box .list").css("margin-top",$(".result").height()+20);
-              },
-              noChange:function(arr1,arr2){
-                return JSON.stringify(arr1.sort()) === JSON.stringify(arr2.sort());
-              }
-            }
-            $(function(){
-              EditIndustry.init();
+                }, false)
+                $("#enter").removeAttr("disabled");
             })
-            
-        </script>
-    </body>
+        },
+        showTip: function (msg) {
+            weui.toast(msg, {
+                duration: 2000,
+                className: 'custom-toast',
+            });
+        },
+        findSelectedIndustry: function (isInit) {
+            var buttons = $('.select-area-box .list button')
+            // 找到已选择的数组(有active类的数组)
+            var selectedArr = []
+            buttons.each(function () {
+                if ($(this).hasClass('active')) {
+                    selectedArr.push($(this).text())
+                }
+            })
+            if (selectedArr.length == $('.select-area-box .list button').length - 1) {//选中了全部行业
+                $('#all button').trigger('click');
+                return
+            }
+            var selectCount = selectedArr.length
+            $('.count').html(selectCount);
+            // 显示隐藏优惠tips
+            if (selectedArr.length >= EditIndustry.reqData.buyset.buyerclasscount && EditIndustry.reqData.buyset.buyerclasscount != -1) {
+                if (!isInit) {
+                    EditIndustry.showTip(`<span style="white-space: nowrap;">您只购买了${EditIndustry.reqData.buyset.buyerclasscount}个行业，如需更多请升级<span></p>`);
+                }
+                $('.industry_item:not(.active)').attr('disabled', 'disabled');
+            } else {
+                $('.industry_item:not(.active)').removeAttr('disabled')
+            }
+            this.reqData.industry = selectedArr;
+            var selectedStr = selectedArr.join('、')
+            //$('.result .result_name').text(selectedStr)
+            if (this.noChange(this.reqData.industry, EditIndustry.selectlast) || this.reqData.industry.length == 0) {
+                $('#enter').attr('disabled', 'disabled');
+            } else {
+                $('#enter').removeAttr('disabled');
+            }
+        },
+        noChange: function (arr1, arr2) {
+            return JSON.stringify(arr1.sort()) === JSON.stringify(arr2.sort());
+        }
+    }
+    $(function () {
+        EditIndustry.init();
+    })
+
+</script>
+</body>
 </html>