升级区域

src/jfw/modules/subscribepay/src/service/vipRenewUpgrade.go

@@ -86,12 +86,21 @@ func (this *RenewUpgrade) RenewUpgradeCreateOrder() {
 	areaArr := this.GetString("area")
 	var area *map[string]interface{}
 	if areaArr != "no" {
-		area = qutil.ObjToMap(this.GetString("area")) //新增区域
+		area = qutil.ObjToMap(this.GetString("area")) //新增订阅区域
 	} else {
 		area = &map[string]interface{}{
 			"no": "no",
 		}
 	}
+	areas_arr := this.GetString("areas_arr")
+	var addBuyArea *map[string]interface{}
+	if areas_arr != "no" {
+		addBuyArea = qutil.ObjToMap(this.GetString("areas_arr")) //新增购买区域
+	} else {
+		addBuyArea = &map[string]interface{}{
+			"no": "no",
+		}
+	}
 	industryArr := this.GetString("industry")
 	var industry []string
 	if industryArr != "no" {
@@ -226,18 +235,12 @@ func (this *RenewUpgrade) RenewUpgradeCreateOrder() {
 			addIndustry := qutil.ObjArrToStringArr(vipjy["a_buyerclass"].([]interface{}))
 			buyerclasscount := vipjy["o_buyset"].(map[string]interface{})["buyerclasscount"]
 			if len(addIndustry) != 0 {
-				log.Println("buyerclasscount", buyerclasscount)
-				log.Println("addIndustry", addIndustry)
 				reduce := qutil.IntAll(buyerclasscount) - len(addIndustry)
-				log.Println("reduce", reduce)
 				if reduce > 0 {
-					log.Println("industry", industry)
 					Leng := len(industry) - reduce
 					if len(industry) > 0 {
 						if industry[0] != "no" {
-							log.Println("industry", industry)
 							industry = industry[0:Leng]
-							log.Println("industry", industry)
 						}
 					}
 				}
@@ -249,18 +252,18 @@ func (this *RenewUpgrade) RenewUpgradeCreateOrder() {
 			oldAreaM := 0
 			addIndustryY := 0
 			addIndustryM := 0
-			if (*area)["no"] != "no" && len(industry) > 0 {
+			if (*addBuyArea)["no"] != "no" && len(industry) > 0 {
 				if industry[0] != "no" {
-					addAreaY = entity.JyVipSubStruct.GetSubVipPrice(area, industry, upgradeYear, 1)
-					addAreaM = entity.JyVipSubStruct.GetSubVipPrice(area, industry, upgradeMonth, 2)
+					addAreaY = entity.JyVipSubStruct.GetSubVipPrice(addBuyArea, industry, upgradeYear, 1)
+					addAreaM = entity.JyVipSubStruct.GetSubVipPrice(addBuyArea, industry, upgradeMonth, 2)
 				}
-			} else if (*area)["no"] != "no" && len(industry) == 0 {
-				addAreaY = entity.JyVipSubStruct.GetSubVipPrice(area, industry, upgradeYear, 1)
-				addAreaM = entity.JyVipSubStruct.GetSubVipPrice(area, industry, upgradeMonth, 2)
+			} else if (*addBuyArea)["no"] != "no" && len(industry) == 0 {
+				addAreaY = entity.JyVipSubStruct.GetSubVipPrice(addBuyArea, industry, upgradeYear, 1)
+				addAreaM = entity.JyVipSubStruct.GetSubVipPrice(addBuyArea, industry, upgradeMonth, 2)
 			}
-			if (*area)["no"] != "no" {
-				oldAreaY = entity.JyVipSubStruct.GetSubVipPrice(area, industrys, upgradeYear, 1)
-				oldAreaM = entity.JyVipSubStruct.GetSubVipPrice(area, industrys, upgradeMonth, 2)
+			if (*addBuyArea)["no"] != "no" {
+				oldAreaY = entity.JyVipSubStruct.GetSubVipPrice(addBuyArea, industrys, upgradeYear, 1)
+				oldAreaM = entity.JyVipSubStruct.GetSubVipPrice(addBuyArea, industrys, upgradeMonth, 2)
 			}
 			if len(industry) > 0 {
 				if industry[0] != "no" {
@@ -362,6 +365,11 @@ func (this *RenewUpgrade) RenewUpgradeCreateOrder() {
 		if orderid == -1 {
 			return &entity.FuncResult{false, errors.New("数据库操作异常"), nil}
 		}
+		if isRenew {
+			util.MsgRemind.Add(qutil.IntAll(orderid), totalfee, 1, 0, ordercode, userId, now.Unix())
+		} else {
+			util.MsgRemind.Add(qutil.IntAll(orderid), totalfee, 2, 0, ordercode, userId, now.Unix())
+		}
 		return &entity.FuncResult{true, nil, map[string]interface{}{"code": ordercode, "res": payStr}}
 	}()
 	if r.Err != nil {

src/web/staticres/vipsubscribe/css/choose_area.css

@@ -63,13 +63,11 @@
 }
 
 .tips_btn {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
-    position: fixed;
-    width: 100%;
-    bottom: 0;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .tips_btn .tips_discount {
@@ -111,7 +109,6 @@
   line-height: .94rem;
   color: #fff;
   font-size: .34rem;
-  background-color: #fff;
 }
 
 .tips_btn .btns .save-btn,
@@ -382,6 +379,38 @@
   margin: 0;
 }
 
+.jymobile-tab-triangle {
+  position: relative;
+}
+
+.jymobile-tab-triangle:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: 0;
+  height: 0;
+  font-size: 0;
+  line-height: 0;
+  border-style: solid;
+  border-width: .1rem;
+  border-color: #aaa transparent transparent transparent;
+  transform: translate(140%, -30%);
+}
+
+.jymobile-tab-triangle.active:after {
+  border-color: transparent transparent #2cb7ca transparent;
+  transform: translate(140%, -70%);
+}
+
+.jymobile-tab-triangle.current {
+  color: #2cb7ca;
+}
+
+.jymobile-tab-triangle.current:after {
+  border-color: #2cb7ca transparent transparent transparent;
+}
+
 #choose_area {
   display: flex;
   justify-content: space-between;
@@ -395,36 +424,29 @@
   overflow-y: scroll;
 }
 
-#choose_area .optional_count {
+#choose_area .optional_count, #choose_area .all_area {
   background: #fff;
   height: .88rem;
   line-height: .88rem;
   padding: 0 .3rem;
   font-size: .3rem;
   color: #1d1d1d;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index:999;
 }
 
-#choose_area .optional_count em {
+#choose_area .optional_count em, #choose_area .all_area em {
   color: #2cb7ca;
 }
 
 #choose_area .result {
-  position: fixed;
+  position: relative;
   padding: .2rem .3rem;
   font-size: .26rem;
   text-align: justify;
-  width:100%;
-  background:rgba(245,244,249,1);
-  z-index:999;
 }
 
 #choose_area .result .result_text {
   position: relative;
-  min-height: 0.38rem;
+  min-height: 19px;
 }
 
 #choose_area .result .line_two {
@@ -462,7 +484,7 @@
 }
 
 #choose_area .select-area-box {
-  padding-bottom: 1.44rem;
+  padding-bottom: .94rem;
 }
 
 #choose_area .select-area-box .tab {
@@ -498,18 +520,30 @@
   background-size: 100% 100%;
 }
 
-#choose_area .select-area-box .tab .province .checkbox[disabled] {
+#choose_area .select-area-box .tab .province .checkbox:checked[disabled] {
   border: 0;
   background: url(/vipsubscribe/image/active_disabled.png) no-repeat center center;
   background-size: 100% 100%;
 }
 
-#choose_area .select-area-box .tab .province .checkbox.half:checked {
+#choose_area .select-area-box .tab .province .checkbox.half {
   border: 0 !important;
   background: url(/vipsubscribe/image/banxuan.png) no-repeat center center !important;
   background-size: cover !important;
 }
 
+#choose_area .select-area-box .tab .province .checkbox.half[disabled] {
+  border: 0 !important;
+  background: url(/vipsubscribe/image/banxuan.png) no-repeat center center;
+  background-size: cover !important;
+}
+
+#choose_area .select-area-box .tab .optional {
+  color: #2CB7CA;
+  font-size: 0.28rem;
+  margin-left: -2.8rem;
+}
+
 #choose_area .select-area-box label::after {
   font-size: 14px;
   float: right;
@@ -537,10 +571,10 @@
   color: #fff;
 }
 
-/*#choose_area .select-area-box .tab_content .active[disabled] {
+#choose_area .select-area-box .tab_content .active[disabled] {
   background: #BFBFC3;
   color: #fff;
-}*/
+}
 
 #choose_area .select-area-box .tab_content .city[disabled] {
   background: #BFBFC3;
@@ -571,5 +605,6 @@
 }
 
 #choose_area .slide a {
+  width: 100%;
   margin-bottom: .1rem;
 }

src/web/staticres/vipsubscribe/js/updateArea.js

@@ -0,0 +1,718 @@
+$(function () {
+    // 后端数据结构
+//  var areaData = {
+//      'data': {
+//          // 选择的数量
+//          'area': {
+//              '北京': [],
+//              '河南': [
+//                  '洛阳市',
+//                  '驻马店市',
+//                  '周口市',
+//                  '郑州市'
+//              ],
+//              '湖南':['长沙市'],
+//              '澳门': [],
+//              '甘肃': []
+//          },
+//          'buyset': {
+//              // 购买的全省的数量(不带市)
+//              'areacount': 7,
+//              'buyerclasscount': 11,
+//              // 购买的城市
+//              'citys': {
+//                  '河南': 4,
+//                  '湖南': 3,
+//                  '吉林': 2
+//              }
+//          }
+//      },
+//      'errMsg': '',
+//      'success': true
+//  };
+    var areaData = {
+        'data': {
+            // 选择的数量
+            'area': {},
+            'buyset': {
+                // 购买的全省的数量(不带市)
+                'areacount': 7,
+                'buyerclasscount': 11,
+                // 购买的城市
+                'citys': {}
+            }
+        },
+        'errMsg': '',
+        'success': true
+    };
+    
+
+    // 已经购买过的城市数量
+    let alreadyBuy = {
+        province: {
+            totalCount: 0,
+            selectedCount: 0
+        },
+        city: {
+            totalCount: 0,
+            selectedCount: 0
+        }
+    }
+    // 新增城市数量（排除修改的数量）
+    let newlyAdded = {
+        province: 0,
+        city: 0
+    }
+	
+    // ----------------- 以下定义功能函数 ----------------------------
+    function createMoreCity(arr) {
+        var tempHtml = arr.map(function (v) {
+            return '<button class="city">' + v.name + '</button>'
+        }).join('')
+        return tempHtml
+    }
+
+    // 新增求值 ---- 统计数量，不做视图操作
+    function getResult(callback) {
+        if (areaData.data.buyset.areacount === -1) {
+            $('.result_text.add_new .added-info').hide()
+            return
+        }
+        // 升级新增清空
+        $('.result_text.add_new .added-info').text('')
+
+        let isWholeSelected = $('.tab.whole input').is(':checked')
+        let isWholeDisabled = $('.tab.whole input').prop('disabled')
+        
+        // 已购买省份改变的数量
+        let dBuySetProvinceCount = 0
+        // 已购买省份改变的数量
+        let dAddedProvinceCount = 0
+        
+        // 已购买城市改变的数量
+        let dBuySetCityCount = 0
+        // 新增城市的数量
+        let dAddedCityCount = 0
+        $('.area-list li:not(.index)').each(function(i, dom){
+            if ($(dom).children('.tab').hasClass('whole')) return true
+            // 统计非全国的数量
+            // 没有'data-buy-city-count'属性的 $(dom).attr('data-buy-city-count') 为undefined
+            if ($(dom).attr('data-buy-city-count')) {
+                /********  此处判断的是已购买的城市下的  ********************/
+                // 获取购买城市的数量
+                let buyCount = $(dom).attr('data-buy-city-count') - 0   // 隐式转换成Number
+                // 获取城市不可点击的数量
+                let alreadySelectedCount = $(dom).find('button[disabled]').length
+                // 选择城市的数量(包括不可点击的)
+                let hasActiveCount = $(dom).find('button.active').length
+
+                if (hasActiveCount > buyCount) {
+                    dBuySetCityCount += buyCount
+                    dAddedCityCount += (hasActiveCount - buyCount)
+                } else {
+                    // 操作已购买的数量
+                    dBuySetCityCount += hasActiveCount
+                }
+            } else {
+                // 是不是直辖市或自治区，在有data-buy-count没必要判断
+                let hasCities = $(dom).find('.tab').hasClass('municipality')
+                // 是否购买过该省份(还需要判断该省份下面的城市是否全部disabled --- 同时满足才算购买过全省)
+                let provinceInput = $(dom).find('input')
+                // 循环着的当前的省份是否可选 和 是否被选中
+                let isBoughtProvince = provinceInput.prop('disabled')
+                let isChecked = provinceInput.is(':checked')
+
+                // 可得到已经购买的省份的数量(循环完成后可得到，循环过程中的值可能不全)
+
+                // 判断是否为购买过的城市
+                if (isBoughtProvince) {
+                    // 将已购买(选中但不能单击的)城市选中
+                    if (isChecked) {
+                        dBuySetProvinceCount ++
+                    }
+                } else {
+                    // 判断是否是直辖市或自治区(省份下面没有城市的和有城市的分开计算)
+                    if (hasCities) {
+                        // 直辖市、自治区 -----直接进行省份的操作
+                        // 并且没有购买过该省的，并且选中的
+                        if (isChecked) {
+                            dAddedProvinceCount ++
+                        }
+                    } else {
+                        // 带有市的省份城市(该省份下以前没有购买过任何城市)
+                        // 两种情况：1. 全选    2. 不全选
+                        let allCityLength = $(dom).find('button').length
+                        let otherTotalAddCount = $(dom).find('button.active').length
+
+                        if (allCityLength === otherTotalAddCount && isChecked) {
+                            // 选中了省份下的所有城市
+                            dAddedProvinceCount ++
+                        } else {
+                            // 对城市做新增操作
+                            dAddedCityCount += otherTotalAddCount
+                        }
+                    }
+                }
+            }
+        })
+
+        // 循环完成判断已经选择的省份数量 是否 大于购买过的数量
+        if (dBuySetProvinceCount + dAddedProvinceCount > alreadyBuy.province.totalCount) {
+            // 如果已选择的数量和新增的数量大于已购买过的数量，说明我有购买新的城市
+            dAddedProvinceCount -= (alreadyBuy.province.totalCount - dBuySetProvinceCount)
+            dBuySetProvinceCount = alreadyBuy.province.totalCount
+        } else {
+            dBuySetProvinceCount += dAddedProvinceCount
+            dAddedProvinceCount = 0
+        }
+
+        // 已购买城市下选项改变，状态更新
+        alreadyBuy.city.selectedCount = dBuySetCityCount
+        newlyAdded.city = dAddedCityCount
+
+        alreadyBuy.province.selectedCount = dBuySetProvinceCount
+        newlyAdded.province = dAddedProvinceCount
+
+        callback && callback()
+
+        setDataInResult()
+
+        // 全国被选中了
+        if (isWholeSelected && !isWholeDisabled) {
+            $('.result_text.add_new .added-info').text('全国')
+            $('.result_text.add_new').show()
+            isLockedTipButtons(false)
+        }
+    }
+
+    function setDataInResult() {
+        let buySetInfo = {
+            p: `省级区域${alreadyBuy.province.selectedCount}/${alreadyBuy.province.totalCount}、`,
+            c: `地市${alreadyBuy.city.selectedCount}/${alreadyBuy.city.totalCount}`
+        }
+        let addedInfo = {
+            p: `省级区域 ${newlyAdded.province}、`,
+            c: `地市 ${newlyAdded.city}`
+        }
+
+        // 修改数量并进行重新赋值
+        $('.result_text.already .buy-set-info').text(buySetInfo.p + buySetInfo.c)
+        // 升级新增赋值
+        $('.result_text.add_new .added-info').text(addedInfo.p + addedInfo.c)
+
+        if (newlyAdded.province !== 0 || newlyAdded.city !== 0) {
+            $('.result_text.add_new').show()
+            isLockedTipButtons(false)
+        } else {
+            $('.result_text.add_new').hide()
+            isLockedTipButtons(true)
+        }
+    }
+
+    // 求需要M的数量
+    function getResultWithMCount() {
+        let added = {
+            country: 0,
+            province: 0,
+            city: {
+                // '河南': 1,
+                // '吉林': 1
+            }
+        }
+        // 购买过的省份数量
+        let buySetProvinceCount = $('.area-list').attr('data-buy-province-count') - 0  // 隐式转换成Number
+        
+        $('.area-list li:not(.index)').each(function(i, dom) {
+            if ($(dom).children('.tab').hasClass('whole')) {
+                // 判断是否被选中
+                if ($(dom).find('input.other').is(':checked')) {
+                    added.country = -1
+                    added.province = 0
+                    added.city = {}
+                    return false
+                }
+            } else {
+                added.country = 0
+                let pName = $(dom).find('.province').text().replace(/\s+ | [\r\n]/g, '')
+                // 获取当前dom下有几个按钮有active样式
+                let activeButtonLength = $(dom).find('button.active').length
+
+                // 判断该省是否有购买过的城市
+                if ($(dom).attr('data-buy-city-count')) {
+                    let buyCityCount = $(dom).attr('data-buy-city-count') - 0
+                    let aCityCount = activeButtonLength - buyCityCount
+                    if (aCityCount > 0) {
+                        added.city[pName] = aCityCount
+                    } else {
+                        // 选不到购买的个数
+                    }
+                } else {
+                    // 判断是否是直辖市
+                    let isMunicipality = $(dom).find('.tab').hasClass('municipality')
+                    let allCitylength = $(dom).find('button').length
+
+                    if (isMunicipality) {
+                        if ($(dom).find('input').is(':checked')) {
+                            added.province ++
+                        }
+                    } else {
+                        if (activeButtonLength === allCitylength) {
+                            added.province ++
+                        } else {
+                            if (activeButtonLength !== 0) added.city[pName] = activeButtonLength
+                        }
+                    }
+                }
+            }
+        })
+
+        // 循环完成判断计算省份
+        let aProvinceCount = added.province - buySetProvinceCount
+        if (aProvinceCount > 0) {
+            added.province = aProvinceCount
+        } else {
+            added.province = 0
+        }
+        return added
+    }
+
+    // 点亮的城市数量详情(需要省和城市名称)
+    function getActiveCityDetail(state = '') {
+        let isWholeCountry = $('.tab.whole input').is(':checked')
+        if (isWholeCountry) {
+            // 选择全国
+            let str = $('.area-list li .tab.whole .province').text().replace(/\s+ | [\r\n]/g, '')
+            let obj = {}
+            obj[str] = []
+            return obj
+        } else {
+            let arr = []
+            $('.area-list li:not(.index)').each(function(i, dom) {
+                if ($(dom).children('.tab').hasClass('whole')) return
+                let isMunicipality = $(dom).find('.tab').hasClass('municipality')
+                let pName = $(dom).find('.province').text().replace(/\s+ | [\r\n]/g, '')
+                let selectedObj = {
+                    name: pName,
+                    children: []
+                }
+                
+                // 是否是直辖市或自治区
+                if (isMunicipality) {
+                    if ($(dom).find('input:not([disabled])').is(':checked')) {
+                        arr.push(selectedObj)
+                    }
+                } else {
+                    let allCitylength = $(dom).find('button').length
+
+                    if (state === 'disabled') {
+                        // 判断是否全省被选中
+                        if ($(dom).find('button.active').length === allCitylength) {
+                            // 判断省下有没有不可点击的按钮
+                            if ($(dom).attr('data-buy-city-count')) {
+                                $(dom).find('button.active').each(function(c, dom) {
+                                    let cName = $(dom).text().replace(/\s+ | [\r\n]/g, '')
+                                    selectedObj.children.push(cName)
+                                })
+                                if (selectedObj.children.length) {
+                                    arr.push(selectedObj)
+                                }
+                            } else {
+                                arr.push(selectedObj)
+                            }
+                        } else {
+                            $(dom).find('button.active').each(function(c, dom) {
+                                let cName = $(dom).text().replace(/\s+ | [\r\n]/g, '')
+                                selectedObj.children.push(cName)
+                            })
+                            if (selectedObj.children.length) {
+                                arr.push(selectedObj)
+                            }
+                        }
+                    } else {
+                        // 判断是否全省被选中
+                        if ($(dom).find('button.active:not([disabled])').length === allCitylength) {
+                            arr.push(selectedObj)
+                        } else {
+                            $(dom).find('button.active:not([disabled])').each(function(c, dom) {
+                                let cName = $(dom).text().replace(/\s+ | [\r\n]/g, '')
+                                selectedObj.children.push(cName)
+                            })
+                            if (selectedObj.children.length) {
+                                arr.push(selectedObj)
+                            }
+                        }
+                    }
+                }
+            })
+
+            // 处理arr
+            // [
+            //     {
+            //         name: '安徽',
+            //         children: ["合肥市", "蚌埠市", "阜阳市"]
+            //     },
+            //     {
+            //         name: '海南',
+            //         children: ["三亚市", "文昌市"]
+            //     },
+            //     {
+            //         name: '河南',
+            //         children: ["郑州市", "信阳市"]
+            //     }
+            // ]
+            let selectedCityDetail = {}
+            arr.forEach(function(item, i) {
+                selectedCityDetail[item.name] = item.children
+            })
+            return selectedCityDetail
+        }
+    }
+
+    // 初始选择的城市恢复，根据传入的p恢复为Disabled灰色按钮
+    function renderSelectedCityDisabled(p = {}) {
+        for (const k in p) {
+            if (p[k].length == 0) {
+                // 购买的省份
+                $('.province').each(function () {
+                    let t = $(this).text().trim();
+                    if (k == t) {
+                        $(this).children('.checkbox').prop('checked',true).attr('disabled',true);
+                        $(this).parents('li').children('.tab_content').find('.city').addClass('active').attr('disabled',true);
+                    }
+                })
+            } else {
+                $('.city').each(function () {
+                    let t = $(this).text().trim();
+                    p[k].forEach(v =>{
+                        if(v !== t) return
+                        // let that = $(this).parents('li').find('.tab:not(.municipality)');
+                        // 改变状态按钮
+                        $(this).addClass('active').attr('disabled',true).parent().siblings('.tab').find('input').addClass('half').attr('disabled',true);
+                    })
+                })
+            }
+        }
+    }
+
+    // 初始选择的城市恢复，根据传入的p恢复为Active蓝色按钮
+    // 需要放到init之后
+    function renderSelectedCityActive(p = {}) {
+        for (const k in p) {
+            if (k === '全国') {
+                $('.area-list li:not(.index):eq(0)').find('input').trigger('click')
+                return
+            }
+            
+            if (p[k].length == 0) {
+                // 购买的省份
+                $('.province').each(function () {
+                    let t = $(this).text().trim();
+                    if (k == t && p[k].length == 0) {
+                        $(this).parent().siblings().find('.city').trigger('click')
+                    }
+                })
+            } else {
+                $('.city').each(function () {
+                    let t = $(this).text().trim();
+                    p[k].forEach(v =>{
+                        if(v !== t) return
+                        // let that = $(this).parents('li').find('.tab:not(.municipality)');
+                        // 改变状态按钮
+                        $(this).trigger('click')
+                    })
+                })
+            }
+        }
+        getResult()
+    }
+
+    function isLockedTipButtons(f) {
+        $('.tips_btn button').prop('disabled', f)
+    }
+
+    // 根据数据进行求总数 --- 上方提示数据信息的初始化
+    function initAlreadyBuy(p, buyset, citys) {
+        // 此处在数据返回后根据数据进行求值
+        if (buyset.areacount === -1) {
+            $('.result_text.already .buy-set-info').text('全国')
+            $('.result_text.add_new .added-info').hide().text('')
+        }
+
+        // 选择的省和市的数量
+        for (let a in p) {
+            if (p[a].length) {
+                // 已经选择的市的数量
+                alreadyBuy.city.selectedCount += p[a].length
+            } else {
+                // 已经选择的省的数量
+                alreadyBuy.province.selectedCount ++
+            }
+        }
+
+        // 购买的全省的数量（不包含市）
+        alreadyBuy.province.totalCount = buyset.areacount;
+        // 购买的城市数量
+        for (const c in citys) {
+            alreadyBuy.city.totalCount += citys[c]
+        }
+        // console.log(alreadyBuy)
+        let buySetInfo = {
+            p: `省级区域${alreadyBuy.province.selectedCount}/${alreadyBuy.province.totalCount}、`,
+            c: `地市${alreadyBuy.city.selectedCount}/${alreadyBuy.city.totalCount}`
+        }
+        $('.result_text.already .buy-set-info').text(buySetInfo.p + buySetInfo.c)
+        $('.result_text.add_new .added-info').text('')
+    }
+
+    // 初始化方法
+    function init() {
+        let data = areaData.data
+        let buyset = data.buyset;
+        let citys = buyset.citys;
+        initAlreadyBuy(data.area, buyset, citys)
+        // 1.根据返回数据进行渲染
+        if (buyset.areacount === -1) {
+            // 购买全国
+            if (Object.keys(data.area).length === 0) {
+                // 选中全国
+                // 不能操作
+                $('.checkbox.other').prop('disabled', true).prop('checked', true)
+                $('.checkbox:not(.other)').prop('disabled', true)
+                $('.city').attr('disabled', true)
+            } else {
+                renderSelectedCityDisabled(data.area)
+            }
+            isLockedTipButtons(true)
+            $('.result_text.already .buy-set-info').text('全国')
+        } else {
+            // 购买的非全国
+            renderSelectedCityDisabled(data.area)
+        }
+        // 2.根据数据绑定data-buy-count，并赋值
+        // area-list上绑定购买的省份数量
+        $('.area-list').attr('data-buy-province-count', buyset.areacount)
+        $('.area-list li:not(.index)').each(function(i, dom){
+            if ($(dom).children('.tab').hasClass('whole')) return
+            // 获取省的名字，并去空格.回车.换行
+            let provinceName = $(dom).find('.province').text().replace(/\s+ | [\r\n]/g, '')
+            for (let c in citys) {
+                if (c === provinceName) {
+                    $(dom).attr('data-buy-city-count', citys[c])
+                }
+            }
+        })
+        $('.add_new').hide()
+        getResult()
+    }
+
+    // ----------------- 以下绑定事件 ----------------------------
+    // 0.渲染城市列表
+    $(".select-area-box ul li:not('.index')").each(function () {
+        var text = $(this).find(".province").text().trim()
+        var data = null
+        chinaMapJSON.some(function (v) {
+            data = v
+            return v.name.indexOf(text) !== -1
+        })
+        var box = $(this).find('div.tab_content')
+        var html = createMoreCity(data.city)
+        box.html(html)
+    })
+    // fastClick初始化: https://github.com/ftlabs/fastclick
+	//  FastClick.attach(document.body)
+    // 1.省下拉市
+    let isAnimating = false
+    $(".select-area-box .tab:not(.municipality)").on('click', function (event) {
+        if (isAnimating) return
+        isAnimating = true
+        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');
+        setTimeout(() => {
+            isAnimating = false
+        }, 500)
+    })
+    // 2.点击全国按钮onchange事件；
+    $('.checkbox.other').on('change', function () {
+        let isChecked = $(this).is(':checked')
+        if(isChecked){
+            $(this).prop('checked',true);
+            $('.checkbox:not(.other):not([disabled])').prop('checked',false).removeClass('half');
+            $('.city:not([disabled])').removeClass('active');
+            $('.tab_content').slideUp();
+        }
+        getResult()
+    })
+    // 3.点击非全国按钮onchange事件
+    $('.checkbox:not(.other)').on('change', function () {
+        $('.checkbox.other').prop('checked',false);
+        let isChecked = $(this).is(':checked');
+        if(isChecked){
+            $(this).prop('checked',true).removeClass('half');
+            $(this).parents('li').find('.city').addClass('active');
+            // 控制点击checkbox时候是否展开下方的城市列表
+            // $(this).parent().parent('.tab:not(.municipality)').siblings('.tab_content').slideDown();
+        }else{
+            $(this).prop('checked',false);
+            $(this).parents('li').find('.city').removeClass('active');
+        }
+        showOther();
+        getResult();
+    })
+    // 4.点击半选按钮触发的事件
+//  $('.checkbox.half').on('change', function () {
+//      $('.checkbox.other').prop('checked', false)
+//      let isChecked = $(this).is(':checked')
+//      $(this).prop('checked', isChecked).removeClass('half')
+//      console.log("!1")
+//      getResult();
+//  })
+    // 5.点击城市按钮触发的事件
+    $('.tab_content').on('click', '.city', function () {
+        // 全国取消选中
+        $('.checkbox.other').prop('checked',false);
+        $(this).toggleClass('active')
+        // 省下所有选中的地市数量
+        let activeCityLength = $(this).parent().find('.city.active').length;
+        // 省下一共有几个城市
+        let cityLength = $(this).parent().find('.city').length;
+        let oInput = $(this).parents('li').find('input.checkbox')
+        
+        if (activeCityLength === cityLength) {//当选中的城市数量等于该省下所有城市总数时，即为全选
+            if ($(this).siblings('.city[disabled]').length === 0) {
+                oInput.removeClass('half').prop('checked', true)
+            }
+        } else if (activeCityLength === 0){
+            oInput.prop('checked', false).removeClass('half')
+        } else {//半选
+            oInput.prop("checked",false).addClass('half')
+        }
+        showCityTips(this)
+        getResult();
+    })
+    // 6. 重置按钮点击事件
+    $('.reset-btn').on('click', function() {
+        // alreadyBuy = {
+        //     province: {
+        //         totalCount: 0,
+        //         selectedCount: 0
+        //     },
+        //     city: {
+        //         totalCount: 0,
+        //         selectedCount: 0
+        //     }
+        // }
+        // newlyAdded = {
+        //     province: 0,
+        //     city: 0
+        // }
+
+        // 数组置0，在重新从数据中计算初始状态结果并返回
+        for (let i in alreadyBuy) {
+            for(let ii in alreadyBuy[i]) {
+                alreadyBuy[i][ii] = 0
+            }
+        }
+        for (let j in newlyAdded) {
+            newlyAdded[j] = 0
+        }
+
+        $('.checkbox').prop('checked', false).removeAttr('disabled');
+        $('.city').removeClass('active');
+        $('input').removeClass('half')
+        $('.tab_content').slideUp();
+        $('.optional').remove()
+        init();
+    })
+
+    // 7.锚点跳转
+    $("body").on('click', '.slide a', function () {
+        var s = $(this).html()
+        if (s == '#') {
+            return;
+        }
+        document.querySelector('#' + s).scrollIntoView({
+            block: 'center'
+        });
+    })
+    // 阻止input checkbox选中取消 触发父元素下拉事件
+    $('.checkbox').click(function (e) {  
+        e.stopPropagation();
+    })
+
+	function showCityTips(dom){
+		let activeCityLength = $(dom).parent().find('.city.active').length;
+		let selectedCityLength = $(dom).parent().find('.city.active:not([disabled])').length;
+		let cityLength = $(dom).parent().find('.city').length;
+		if(selectedCityLength > 2){
+			$(".tips_d_text").text("已选择"+selectedCityLength+"个市，建议购买“全省”");
+			$(".tips_d_text").show();
+		}else{
+			$(".tips_d_text").hide();
+		}
+		if(selectedCityLength === cityLength){
+			showOther();
+		}
+	}
+	
+	function showOther(){
+		let provinceLength = $(".area-list .checkbox:not(.other):not([disabled]):checked").length;
+		if(provinceLength > 9){
+			$(".tips_d_text").text("已选择"+provinceLength+"个省，建议购买“全国”")
+			$(".tips_d_text").show();
+		}else{
+			$(".tips_d_text").hide();
+		}
+	}
+
+    // ----------------------- 以下数据交互 ------------------
+    $DoPost("/subscribepay/renewUpgrade/getBuyMsg", {}, function (data) {
+    	if(data){
+        	areaData["data"] = {
+        		"area" : data.area,
+        		"buyset" : data.buyset, 
+        	}
+        	init();
+    	}
+    }, false);
+    // 确认按钮事件
+    $('.save-btn').on('click', function(){
+        // 获取added城市详情
+        var activeCityDetail = getActiveCityDetail()
+        let areaCount = getResultWithMCount()
+//      console.log("111",areaCount)
+//      console.log(JSON.stringify(activeCityDetail))
+//      console.log(activeCityDetail)
+//      console.log(areaData)
+//      console.log(alreadyBuy)
+//      console.log(newlyAdded)
+        sessionStorage.vipSubSelectCity = newlyAdded.city
+        sessionStorage.vipSubSelectAreaUpgrade = JSON.stringify(activeCityDetail);
+        sessionStorage.vipSubSelectAreaAdd = JSON.stringify(areaCount);
+        history.go(-1);
+    })
+	//
+	if(sessionStorage.vipSubSelectAreaUpgrade!==undefined&&sessionStorage.vipSubSelectAreaUpgrade!==""){
+		let areaObj = JSON.parse(sessionStorage.vipSubSelectAreaUpgrade);
+		renderSelectedCityActive(areaObj);
+	}
+    // 求需要M的城市数量
+    // getResultWithMCount()
+    // 获取点亮的城市的列表详情（带省名和城市名）
+    // getActiveCityDetail()
+
+    // 回显为蓝色激活样式
+    // renderSelectedCityActive()
+    // 回显为灰色不可点击样式
+    // renderSelectedCityDisabled()
+})

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

@@ -7,32 +7,31 @@
     <meta name="viewport" content="initial-scale=1, maximum-scale=1">
     <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/public.css?v={{Msg "seo" "version"}}">
-    <link rel="stylesheet" href="/vipsubscribe/css/choose_area.css?v={{Msg "seo" "version"}}4">
-	{{include "/common/weixin.html"}}
-	<!--<script src="{{Msg "seo" "cdn"}}/wxswordfish/share.js?v={{Msg "seo" "version"}}"></script>-->
+    <script src="/vipsubscribe/js/rem.js"></script>
+    <link rel="stylesheet" href="/vipsubscribe/css/weui.min.css">
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css" />
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/iconfont/iconfont.css" />
+    <link rel="stylesheet" href="/vipsubscribe/css/public.css">
+    <link rel="stylesheet" href="/vipsubscribe/css/choose_area.css">
+    {{include "/common/weixin.html"}}
 	<script src="/vipsubscribe/js/share.js?v={{Msg "seo" "version"}}"></script>
 </head>
 <style type="text/css">
 	body,html {
 		height: 100%;
 	}
+	#choose_area .select-area-box .tab .province .checkbox.half[disabled]{
+        border: 0!important;
+        background: url(/vipsubscribe/image/banxuan_disabled.png) no-repeat center center!important;
+        background-size:cover!important;
+    }
 </style>
 <body>
-	<script type="text/javascript">
-		initShare({{.T.signature}},{{.T.openid}},2,"jy_extend",{{.T.nickname}},{{.T.avatar}});
-	</script>
     <div id="choose_area" >
         <div class="result">
             <!-- 首次购买 显示"已选择" -----  升级订阅显示"已新增" -->
-            <p class="result_text line_two"> 已新增：<span class="result_name"></span>
-                <a href="javascript:;" class="detail">详情</a>
-            </p>
-            <a href="javascript:;" class="packup" style="display: none;">收起</a>
+            <p class="result_text already"><span>已购买：</span><span class="buy-set-info"></span></p>
+            <p class="result_text add_new"><span>升级新增：</span><span class="added-info"></span></p>
         </div>
         <div class="form">
             <div class="select-area-box">
@@ -364,13 +363,12 @@
         </div>
         <div class="tips_btn">
             <div class="tips_discount">
-                <!--<div class="tips_d_money" style="display: block">&yen;38</div>-->
-                <div class="tips_d_text citys">已选择4个市，建议购买“全省”。</div>
-                <div class="tips_d_text all">已选择10个省，建议购买“全国”。</div>
+                <!--<div class="tips_d_money" style="display: block">&yen;1</div>-->
+                <div class="tips_d_text">已选择3个市，建议购买“全省”</div>
             </div>
             <div class="btns">
-                <button class="reset-btn">重置</button>
-                <button class="save-btn">确认</button>
+                <button class="reset-btn" disabled>重置</button>
+                <button class="save-btn" disabled>确认</button>
             </div>
         </div>
         <div class="slide">
@@ -393,489 +391,9 @@
         </div>
     </div>
     <script src="/vipsubscribe/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
-    <!--<script src="/vipsubscribe/js/fastclick.js?v={{Msg "seo" "version"}}"></script>-->
     <script src="/vipsubscribe/js/mapJSON.js?v={{Msg "seo" "version"}}"></script>
     <script src="/vipsubscribe/js/common.js?v={{Msg "seo" "version"}}"></script>
-    <script>
-    	//已购买
-    	var buystr = "";
-    	var areaData = {};
-        $DoPost("/subscribepay/renewUpgrade/getBuyMsg", {}, function (data) {
-        	if(data){
-            	buystr = data.area;
-            	areaData["data"] = {
-            		"area" : data.area,
-            		"buyset" : data.buyset, 
-            	}
-            	console.log(areaData)
-        	}
-        }, false);
-//      console.log(buystr)
-      var AreaChoose={
-        selectObj:{},//已选择，未购买城市;
-        buyObj:{},//已购买
-        selectedIndustryArr:["一个行业"],//计算价格临时变量
-        timeSelect:[1,2],//计算价格临时变量 timeSelect[0]时长  timeSelect[1] 1:年 2:月
-        vipSubisTrial:false,
-        inintData:function(){
-          //已选择
-          try{
-            let select =sessionStorage.getItem("vipSubSelectAreaUpgrade");
-            if(select){
-              this.selectObj=JSON.parse(select);
-            }
-            if(sessionStorage.getItem("vipSubSelectIndustryUpgrade")){
-              this.selectedIndustryArr=JSON.parse(sessionStorage.getItem("vipSubSelectIndustryUpgrade"));
-            }
-            if(sessionStorage.getItem("vipSubSelectTime")){
-              this.timeSelect=JSON.parse(sessionStorage.getItem("vipSubSelectTime"));
-            }
-            //
-            this.buyObj = buystr;
-            if(checkObj(buystr)){
-            	this.buyObj = {"全国":[]}
-            }
-//          console.log(this.buyObj)
-            //是否试用界面
-            if(sessionStorage.getItem("vipSubisTrial")) this.vipSubisTrial=true;
-          }catch(e){
-            console.log(e);
-            this.selectObj={};
-          }
-        },
-        inintPage:function(){//初始化省份城市选项   
-          $(".select-area-box ul li:not('.index')").each(function () {
-              var text = $(this).find(".province").text().trim()
-              var data = null
-              chinaMapJSON.some(function (v) {
-                  data = v
-                  return v.name.indexOf(text) !== -1
-              })
-              var box = $(this).find('div.tab_content')
-              var html = AreaChoose.createMoreCity(data.city)
-              box.html(html)
-          })
-        },
-        createMoreCity:function(arr){
-          var tempHtml = arr.map(function (v) {
-                return '<button class="city">' + v.name + '</button>'
-            }).join('')
-            return tempHtml
-        },
-        showSelected:function(canClick){ //回显已选择
-        	var ran = "";
-            if(canClick){
-            	ran = this.selectObj;
-            }else{
-            	ran = this.buyObj;
-            }    
-            for(var province in ran) {
-      			let citys=ran[province]
-	            if(citys.length>0){//地市
-	                this.selectCity(citys,canClick)
-	            }else{//省份
-	                this.selectProvince(province,canClick)
-	            }
-	        }
-        },
-        selectProvince:function(province,canClick){ //设置选中省份 province 省份
-          $($('.tab .province')).each(function (index, dom) {
-            if (province == $.trim($(dom).text())) {
-              $(".checkbox.other").attr("checked", false); //取消全国选中
-              $(dom).children('.checkbox').attr({"checked": true,"disabled":!canClick});//选中此省份
-              if(canClick){
-              	$(dom).parents().siblings('.tab_content').find(".city").addClass("active").attr({"disabled":!canClick});
-              }else{
-              	$(dom).parents().siblings('.tab_content').find(".city").attr({"disabled":!canClick});
-              }
-            }
-            if(!canClick){
-            	if(province === "全国"){
-	            	$('.tab .province').each(function(){
-	            		$(this).children('.checkbox').attr({"checked": true,"disabled":!canClick});//选中此省份
-	            	});
-	            	$('.tab_content .city').each(function(){
-	            		$(this).attr("disabled",!canClick);
-	            	});
-	            }
-            }
-          })
-        },
-        selectCity:function(citys,canClick){ //设置选中城市
-          citys.forEach(v => {
-            $($('.tab_content .city')).each(function (index, dom) {
-                if (v == $(dom).text()) {
-                    $(".checkbox.other").attr("checked", false); //取消全国选中
-                    if(canClick){
-                    	$(dom).addClass('active').attr('disabled', !canClick).parents().siblings('.tab')
-                        .addClass('selected').children('.province').children('.checkbox').attr({
-                            "checked": true
-                        })
-                    }else{
-                    	$(dom).attr('disabled', !canClick).parents().siblings('.tab')
-                        .addClass('selected').children('.province').children('.checkbox').attr({
-                            "checked": true,
-                            "disabled": "disabled"
-                        })
-                        $(dom).parents().slideDown(500);
-                    }
-                }
-            })
-          })
-        },
-        getResult:function(){   /* 选中结果 */
-          //如果选中所有，则转为全国
-          if($(".city").length==$(".city.active").length){
-            $(".checkbox.other").trigger("click");
-            return
-          }
-          this.selectObj = {};
-          $('.result_name').empty()
-          var data = []; //定义一个总数组
-          var cityArr =[]; //定义一个选中城市数组
-          var provincesArr = [];
-          var val = $('.other').parents('.province').text().trim();
-          if ($('.other').is(':checked')) {
-            // data.push(val)
-            data =[{name:val,children:[]}] //全国
-          }
-          $(".tab_content").find(".city.active:not('[disabled]')").each(function () {
-              var length = $(this).parent('.tab_content').find('.city').length; //省份下城市的length
-              var activeLeng = $(this).parent('.tab_content').find('.city.active').length; //省份下选中城市的length
-              let arr =[];
-              // 判断省份下的城市是否等于选中的城市长度,相等就是全部选中
-              if (length == activeLeng) {
-                  $('.tips_btn .tips_d_text.citys').hide();
-                  // data.push($(this).parent('.tab_content').siblings('.tab:not(.whole)').children('.province').text().trim())
-                  let province = $(this).parent('.tab_content').siblings('.tab:not(.whole)').children('.province').text().trim();
-                  data.push({
-                      name:province,
-                      children:[]
-                  });
-                  provincesArr.push(province);
-              } else { 
-                  let province = $(this).parent('.tab_content').siblings('.tab:not(.whole)').children('.province').text().trim();
-                  let city = $(this).html()
-                  arr.push({name:city,parent:province})
-                  for(let i =0;i<arr.length;i++){
-                      let obj ={};
-                      obj.name = arr[i].name;
-                      obj.parent = arr[i].parent;
-                      cityArr.push(obj)
-                  }
-                  data.push({
-                      name:province,
-                      children:cityArr
-                  })
-              }
-              if(activeLeng > 0){
-              	$(".tips_btn .btns .reset-btn").removeAttr("disabled");
-              	$(".tips_btn .btns .save-btn").removeAttr("disabled");
-              }
-          })
-          //数组对象去重
-          let obj = {};
-          data = data.reduce((cur,next) =>{
-              obj[next.name] ? "" : obj[next.name] = true && cur.push(next);
-              return cur
-          },[]);
-          
-          // 数组筛选
-          let result = data.map(v =>{
-              let filterArr = v.children.filter(s =>{
-                 return s.parent === v.name
-              })
-              return {
-                  name:v.name,
-                  children:filterArr
-              }
-          })
-          var html = '';
-          for (var i = 0; i < result.length; i++) {
-              let children = result[i].children;
-              if( children.length >0){
-                  // 判断每个省份下选中的城市长度，当大于等于4的时候 弹出"选择全省更划算的弹窗"
-                  let childrenArr=[];
-                  if (children.length >= 3 && !this.vipSubisTrial) {
-                      $('.tips_btn .tips_d_text.citys').text("已选择"+children.length+"个市，建议购买“全省”");
-                      $('.tips_btn .tips_d_text.citys').show();
-                  }else{
-                  		$('.tips_btn .tips_d_text.citys').hide();
-                  }
-                  html += `${result[i].name}(`
-                  for(var j = 0;j < children.length;j++){
-                      childrenArr.push(children[j].name)
-                      if (j != children.length - 1) {
-                          html += `${children[j].name}、`
-                      } else {
-                          html += `${children[j].name}`
-                      }
-                  }
-                  if(i !=result.length -1){
-                      html += `)、`
-                  }else{
-                      html += `)`
-                  }
-                  this.selectObj[result[i].name]=childrenArr;//
-              }else{
-                  if(i !=result.length -1){
-                      html += `${result[i].name}、`
-                  }else{
-                      html += `${result[i].name}`
-                  }
-                  this.selectObj[result[i].name]=[];//
-              }
-          }
-          	for (var x = 0; x < provincesArr.length; x++) {
-	            for (var j =x+1; j <provincesArr.length; ) {
-	                if (provincesArr[x] === provincesArr[j]){
-	                    provincesArr.splice(j, 1);
-	                }
-	                else j++;
-	            }
-	        }
-          	if(provincesArr.length > 9){
-          		$('.tips_d_text.all').text("已选择"+provincesArr.length+"个省，建议购买“全国”");
-          		$('.tips_d_text.all').show();
-          		$('.tips_d_text.citys').hide();
-          	}else{
-          		$('.tips_d_text.all').hide();
-          	}
-//        console.log("this.selectObj:",this.selectObj)
-          $('.result_name').append(html)
-          AreaChoose.isOpen()
-        },
-        submitArea:function(){
-          let addCity = $('.result_name').text(); //新增的城市
-          sessionStorage.setItem("vipSubSelectAreaUpgrade",JSON.stringify(AreaChoose.selectObj));
-          history.go(-1);
-        },
-        isAllSelected:function(){
-          var _f = true
-          $($('.tab_content .city')).each(function (index, dom) {
-              if ($(dom).hasClass('active')) {
-                  _f = false
-                  $('.other').prop('checked', false);
-              }
-          })
-          // 如果循环结束仍为true说明 没有全部都被选中
-          if (_f) {
-//            $('.other').prop('checked', true);
-				$(".tips_btn .btns .reset-btn").attr("disabled","disabled");
-        		$(".tips_btn .btns .save-btn").attr("disabled","disabled");
-          }
-        },
-        isOpen:function(){
-          let pHeight = $('.result_text').height()
-          let minHeight = $('.result_text').css('min-height')
-          let rows = Math.round(Math.round(pHeight)/ parseFloat(minHeight));
-          $(".select-area-box .area-list").css("margin-top",$('.result_text').height()+20);
-//        console.log("高度："+ pHeight,"最小高度"+ minHeight,"行数：" + rows)
-          if(rows == 1){
-              if(length >= 50){
-                  $('.detail').show()
-                  $('.packup').hide()
-              }else{
-                  $('.detail').hide()
-                  $('.packup').hide()
-              }
-          }else if(rows == 2){
-//            console.log($('.result_name').html().trim().length)
-              let length = $('.result_name').html().trim().length;
-              if(length >= 50){
-                  $('.detail').show()
-                  $('.packup').hide()
-              }else{
-                  $('.detail').hide()
-                  $('.packup').hide()
-              }
-              
-          } else{
-              $('.packup').show()
-              $('.detail').hide()
-          }
-        },
-        inintClick:function(){
-//      	$('.tab_content').each(function(){
-//        		AreaChoose.showSelected(false);
-//      	})
-          $('.detail').click(function () {  
-                $('.result_text').removeClass('line_two')
-                $(".result").css("padding-bottom","0.3rem")
-                $(this).hide();
-                $('.packup').show()
-                $(".select-area-box .area-list").css("margin-top",$('.result_text').height()+20);
-            })
-            $('.packup').click(function () { 
-                $(".result").css("padding-bottom","0.2rem")
-                $('.result_text').addClass('line_two')
-                $(this).hide();
-                $('.detail').show()
-                $(".select-area-box .area-list").css("margin-top",$('.result_text').height()+20);
-            })
-            $("body").on('click','.slide a',function(){
-                var s = $(this).html()
-                if(s == '#'){
-                    return;
-                }
-                document.querySelector('#' + s).scrollIntoView({block:'center'});
-            })
-          $(".select-area-box .tab:not(.municipality)").on('click', function (event) {
-                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)').stop(true, true).slideToggle()
-                $(this).parent().siblings().children('.tab').removeClass('selected');
-                
-            })
-            $('.checkbox').click(function (e) {  
-                e.stopPropagation();
-            })
-            $('.province .checkbox:not(.other)').on('change', function () {
-                var isCheckded = $(this).is(':checked')
-                if (isCheckded) {
-                    $(this).parents('.tab').siblings('.tab_content').find('.city').addClass('active')
-                    $(this).parents('.tab').siblings('.tab_content').find('.city[disabled]').removeClass('active')
-                    AreaChoose.isAllSelected()
-                    AreaChoose.getResult() 
-                    AreaChoose.showSelected(false);
-                } else {
-                    $(this).parents('.tab').siblings('.tab_content').find('.city').removeClass(
-                        'active')
-                    $(this).parents('.tab').siblings('.tab_content').find('.city').attr('disabled',false);    
-                    AreaChoose.isAllSelected()
-                    AreaChoose.getResult() 
-                    AreaChoose.showSelected(false);
-                }
-            })
-
-            //执行已购买城市函操作dom函数
-            $('.tab_content').on('click', '.city', function () {
-            	AreaChoose.showSelected(false);
-                $(this).toggleClass('active')
-                var isActive = $(this).parent().find('.city.active').length
-                if (isActive) {
-                    var input = $(this).parents('li').find('input.checkbox')
-                    window.input = input
-                    input.prop('checked', true)
-                    AreaChoose.isAllSelected()
-                    AreaChoose.getResult() 
-                } else {
-                    $(this).parent('div').siblings('.tab').children().children('.checkbox').prop(
-                        'checked', false)
-                    AreaChoose.isAllSelected()
-                    AreaChoose.getResult() 
-                }
-            })
-
-            $('.other').on('change', function () { //选择全国
-              	AreaChoose.reset();
-            })
-
-            $('.save-btn').click(function () {  // 提交
-                AreaChoose.submitArea();              
-            })
-            $('.reset-btn').click(function () {  //重置
-//            if(!$(".other").is(':checked')){
-//              $(".other").trigger("click");
-//            }
-				$('.tab:not(.whole):not(.tab[disabled])').removeClass('selected').children('.province').find(
-                    'input').prop({
-                    'checked': false,
-                    "disabled": false
-                });
-                $('.tab_content').find('.city:not(.city[disabled])').removeClass('active').attr({
-                    "disabled": false,
-                    "checked": false
-                })
-				AreaChoose.showSelected(false);
-				AreaChoose.getResult();
-				sessionStorage.removeItem("vipSubSelectAreaUpgrade");
-            })
-            //
-            if(sessionStorage.vipSubSelectAreaUpgrade!==undefined&&sessionStorage.vipSubSelectAreaUpgrade!==""){
-            	let areas = JSON.parse(sessionStorage.vipSubSelectAreaUpgrade);
-            	for(var province in areas){
-            		if(province === "全国"){
-              			$(".other").prop("checked",true);
-              			AreaChoose.reset();
-            		}
-            	}
-            }
-        },
-        reset:function(){
-           var checked = $(".other").is(':checked');
-            if (checked) {
-                $('.tab_content').slideUp(500)
-                $('.tab span i').css({
-                    "display":"inline-block",
-                    "transform":"rotate(0)"
-                })
-                $('.tab:not(.whole):not(.tab[disabled])').removeClass('selected').children('.province').find(
-                    'input').prop({
-                    'checked': false,
-                    "disabled": false
-                });
-                $('.tab_content').find('.city:not(.city[disabled])').removeClass('active').attr({
-                    "disabled": false,
-                    "checked": false
-                })
-                AreaChoose.getResult();
-                $(".tips_btn .btns .reset-btn").removeAttr("disabled");
-            	$(".tips_btn .btns .save-btn").removeAttr("disabled");
-            }else{
-            	AreaChoose.showSelected(false);
-                AreaChoose.getResult();
-                $(".tips_btn .btns .reset-btn").attr("disabled","disabled");
-            	$(".tips_btn .btns .save-btn").attr("disabled","disabled");
-            }
-        }
-      }
-      
-      $(function () {
-            AreaChoose.isOpen()
-            AreaChoose.inintData(); //初始化 已选择和已购买数据
-            AreaChoose.inintPage(); //初始化城市数据
-            AreaChoose.showSelected(false);
-            AreaChoose.showSelected(true);//回显已选择
-            /* 判断已购买的城市 在不在 全部城市里面，在，将按钮置灰，不可点击 */
-
-            AreaChoose.getResult();
-            AreaChoose.inintClick();
-        })
-      //
-        //
-	    function checkObj(obj) {
-		    //检验数组
-		    if (Array.prototype.isPrototypeOf(obj) && obj.length === 0) {
-		        return true;
-		    }
-		    //检验对象
-		    if (Object.prototype.isPrototypeOf(obj) && Object.keys(obj).length === 0) {
-		        return true;
-		    }
-		    return false;
-		}
-	    //
-	    if($(".result_name").text()===""){
-	    	$(".tips_btn .btns .reset-btn").attr("disabled","disabled");
-        	$(".tips_btn .btns .save-btn").attr("disabled","disabled");
-	    }
-	    
-	    if(sessionStorage.vipSubSelectAreaUpgrade!==undefined && sessionStorage.vipSubSelectAreaUpgrade!==""){
-	    	$(".tips_btn .btns .reset-btn").removeAttr("disabled");
-            $(".tips_btn .btns .save-btn").removeAttr("disabled");
-	    }
-
-    </script>
+    <script src="/vipsubscribe/js/updateArea.js?v={{Msg "seo" "version"}}14"></script>
 </body>
 
 </html>

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

@@ -0,0 +1,881 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>区域选择</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
+    <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/public.css?v={{Msg "seo" "version"}}">
+    <link rel="stylesheet" href="/vipsubscribe/css/choose_area.css?v={{Msg "seo" "version"}}4">
+	{{include "/common/weixin.html"}}
+	<!--<script src="{{Msg "seo" "cdn"}}/wxswordfish/share.js?v={{Msg "seo" "version"}}"></script>-->
+	<script src="/vipsubscribe/js/share.js?v={{Msg "seo" "version"}}"></script>
+</head>
+<style type="text/css">
+	body,html {
+		height: 100%;
+	}
+</style>
+<body>
+	<script type="text/javascript">
+		initShare({{.T.signature}},{{.T.openid}},2,"jy_extend",{{.T.nickname}},{{.T.avatar}});
+	</script>
+    <div id="choose_area" >
+        <div class="result">
+            <!-- 首次购买 显示"已选择" -----  升级订阅显示"已新增" -->
+            <p class="result_text line_two"> 已新增：<span class="result_name"></span>
+                <a href="javascript:;" class="detail">详情</a>
+            </p>
+            <a href="javascript:;" class="packup" style="display: none;">收起</a>
+        </div>
+        <div class="form">
+            <div class="select-area-box">
+                <ul class="area-list">
+                    <li>
+                        <div class="tab whole">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox other">全国
+                            </div>
+                        </div>
+                    </li>
+                    <li class="index" id="A">A</li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">安徽
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li>
+                        <div class="tab municipality">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">澳门
+                            </div>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li class="index" id="B">B</li>
+                    <li>
+                        <div class="tab municipality">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">北京
+                            </div>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li class="index" id="C">C</li>
+                    <li>
+                        <div class="tab municipality">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">重庆
+                            </div>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li class="index" id="F">F</li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">福建
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li class="index" id="G">G</li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">广东
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">广西
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">贵州
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">甘肃
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li class="index" id="H">H</li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">河北
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">湖北
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">黑龙江
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">海南
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">河南
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">湖南
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <p class="index" id="J">J</p>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">吉林
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">江苏
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">江西
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li class="index" id="L">L</li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">辽宁
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li class="index" id="N">N</li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">内蒙古
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">宁夏
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li class="index" id="Q">Q</li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">青海
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li class="index" id="S">S</li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">山西
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">陕西
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li>
+                        <div class="tab municipality">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">上海
+                            </div>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">山东
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">四川
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li class="index" id="T">T</li>
+                    <li>
+                        <div class="tab municipality">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">天津
+                            </div>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li>
+                        <div class="tab municipality">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">台湾
+                            </div>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li class="index" id="X">X</li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">西藏
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">新疆
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li>
+                        <div class="tab municipality">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">香港
+                            </div>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li class="index" id="Y">Y</li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">云南
+                            </div>
+                            <span><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                    <li class="index" id="Z">Z</li>
+                    <li>
+                        <div class="tab">
+                            <div class="province">
+                                <input type="checkbox" class="checkbox">浙江
+                            </div>
+                            <span class="down-icon"><i class="icon iconfont">&#xe600;</i></span>
+                        </div>
+                        <div class="tab_content clearfix"></div>
+                    </li>
+                </ul>
+                
+            </div>
+        </div>
+        <div class="tips_btn">
+            <div class="tips_discount">
+                <!--<div class="tips_d_money" style="display: block">&yen;38</div>-->
+                <div class="tips_d_text citys">已选择4个市，建议购买“全省”。</div>
+                <div class="tips_d_text all">已选择10个省，建议购买“全国”。</div>
+            </div>
+            <div class="btns">
+                <button class="reset-btn">重置</button>
+                <button class="save-btn">确认</button>
+            </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:;">F</a>
+            <a href="javascript:;">G</a>
+            <a href="javascript:;">H</a>
+            <a href="javascript:;">J</a>
+            <a href="javascript:;">L</a>
+            <a href="javascript:;">N</a>
+            <a href="javascript:;">Q</a>
+            <a href="javascript:;">S</a>
+            <a href="javascript:;">T</a>
+            <a href="javascript:;">X</a>
+            <a href="javascript:;">Y</a>
+            <a href="javascript:;">Z</a>
+        </div>
+    </div>
+    <script src="/vipsubscribe/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
+    <!--<script src="/vipsubscribe/js/fastclick.js?v={{Msg "seo" "version"}}"></script>-->
+    <script src="/vipsubscribe/js/mapJSON.js?v={{Msg "seo" "version"}}"></script>
+    <script src="/vipsubscribe/js/common.js?v={{Msg "seo" "version"}}"></script>
+    <script>
+    	//已购买
+    	var buystr = "";
+    	var areaData = {};
+        $DoPost("/subscribepay/renewUpgrade/getBuyMsg", {}, function (data) {
+        	if(data){
+            	buystr = data.area;
+            	areaData["data"] = {
+            		"area" : data.area,
+            		"buyset" : data.buyset, 
+            	}
+            	console.log(areaData)
+        	}
+        }, false);
+//      console.log(buystr)
+      var AreaChoose={
+        selectObj:{},//已选择，未购买城市;
+        buyObj:{},//已购买
+        selectedIndustryArr:["一个行业"],//计算价格临时变量
+        timeSelect:[1,2],//计算价格临时变量 timeSelect[0]时长  timeSelect[1] 1:年 2:月
+        vipSubisTrial:false,
+        inintData:function(){
+          //已选择
+          try{
+            let select =sessionStorage.getItem("vipSubSelectAreaUpgrade");
+            if(select){
+              this.selectObj=JSON.parse(select);
+            }
+            if(sessionStorage.getItem("vipSubSelectIndustryUpgrade")){
+              this.selectedIndustryArr=JSON.parse(sessionStorage.getItem("vipSubSelectIndustryUpgrade"));
+            }
+            if(sessionStorage.getItem("vipSubSelectTime")){
+              this.timeSelect=JSON.parse(sessionStorage.getItem("vipSubSelectTime"));
+            }
+            //
+            this.buyObj = buystr;
+            if(checkObj(buystr)){
+            	this.buyObj = {"全国":[]}
+            }
+//          console.log(this.buyObj)
+            //是否试用界面
+            if(sessionStorage.getItem("vipSubisTrial")) this.vipSubisTrial=true;
+          }catch(e){
+            console.log(e);
+            this.selectObj={};
+          }
+        },
+        inintPage:function(){//初始化省份城市选项   
+          $(".select-area-box ul li:not('.index')").each(function () {
+              var text = $(this).find(".province").text().trim()
+              var data = null
+              chinaMapJSON.some(function (v) {
+                  data = v
+                  return v.name.indexOf(text) !== -1
+              })
+              var box = $(this).find('div.tab_content')
+              var html = AreaChoose.createMoreCity(data.city)
+              box.html(html)
+          })
+        },
+        createMoreCity:function(arr){
+          var tempHtml = arr.map(function (v) {
+                return '<button class="city">' + v.name + '</button>'
+            }).join('')
+            return tempHtml
+        },
+        showSelected:function(canClick){ //回显已选择
+        	var ran = "";
+            if(canClick){
+            	ran = this.selectObj;
+            }else{
+            	ran = this.buyObj;
+            }    
+            for(var province in ran) {
+      			let citys=ran[province]
+	            if(citys.length>0){//地市
+	                this.selectCity(citys,canClick)
+	            }else{//省份
+	                this.selectProvince(province,canClick)
+	            }
+	        }
+        },
+        selectProvince:function(province,canClick){ //设置选中省份 province 省份
+          $($('.tab .province')).each(function (index, dom) {
+            if (province == $.trim($(dom).text())) {
+              $(".checkbox.other").attr("checked", false); //取消全国选中
+              $(dom).children('.checkbox').attr({"checked": true,"disabled":!canClick});//选中此省份
+              if(canClick){
+              	$(dom).parents().siblings('.tab_content').find(".city").addClass("active").attr({"disabled":!canClick});
+              }else{
+              	$(dom).parents().siblings('.tab_content').find(".city").attr({"disabled":!canClick});
+              }
+            }
+            if(!canClick){
+            	if(province === "全国"){
+	            	$('.tab .province').each(function(){
+	            		$(this).children('.checkbox').attr({"checked": true,"disabled":!canClick});//选中此省份
+	            	});
+	            	$('.tab_content .city').each(function(){
+	            		$(this).attr("disabled",!canClick);
+	            	});
+	            }
+            }
+          })
+        },
+        selectCity:function(citys,canClick){ //设置选中城市
+          citys.forEach(v => {
+            $($('.tab_content .city')).each(function (index, dom) {
+                if (v == $(dom).text()) {
+                    $(".checkbox.other").attr("checked", false); //取消全国选中
+                    if(canClick){
+                    	$(dom).addClass('active').attr('disabled', !canClick).parents().siblings('.tab')
+                        .addClass('selected').children('.province').children('.checkbox').attr({
+                            "checked": true
+                        })
+                    }else{
+                    	$(dom).attr('disabled', !canClick).parents().siblings('.tab')
+                        .addClass('selected').children('.province').children('.checkbox').attr({
+                            "checked": true,
+                            "disabled": "disabled"
+                        })
+                        $(dom).parents().slideDown(500);
+                    }
+                }
+            })
+          })
+        },
+        getResult:function(){   /* 选中结果 */
+          //如果选中所有，则转为全国
+          if($(".city").length==$(".city.active").length){
+            $(".checkbox.other").trigger("click");
+            return
+          }
+          this.selectObj = {};
+          $('.result_name').empty()
+          var data = []; //定义一个总数组
+          var cityArr =[]; //定义一个选中城市数组
+          var provincesArr = [];
+          var val = $('.other').parents('.province').text().trim();
+          if ($('.other').is(':checked')) {
+            // data.push(val)
+            data =[{name:val,children:[]}] //全国
+          }
+          $(".tab_content").find(".city.active:not('[disabled]')").each(function () {
+              var length = $(this).parent('.tab_content').find('.city').length; //省份下城市的length
+              var activeLeng = $(this).parent('.tab_content').find('.city.active').length; //省份下选中城市的length
+              let arr =[];
+              // 判断省份下的城市是否等于选中的城市长度,相等就是全部选中
+              if (length == activeLeng) {
+                  $('.tips_btn .tips_d_text.citys').hide();
+                  // data.push($(this).parent('.tab_content').siblings('.tab:not(.whole)').children('.province').text().trim())
+                  let province = $(this).parent('.tab_content').siblings('.tab:not(.whole)').children('.province').text().trim();
+                  data.push({
+                      name:province,
+                      children:[]
+                  });
+                  provincesArr.push(province);
+              } else { 
+                  let province = $(this).parent('.tab_content').siblings('.tab:not(.whole)').children('.province').text().trim();
+                  let city = $(this).html()
+                  arr.push({name:city,parent:province})
+                  for(let i =0;i<arr.length;i++){
+                      let obj ={};
+                      obj.name = arr[i].name;
+                      obj.parent = arr[i].parent;
+                      cityArr.push(obj)
+                  }
+                  data.push({
+                      name:province,
+                      children:cityArr
+                  })
+              }
+              if(activeLeng > 0){
+              	$(".tips_btn .btns .reset-btn").removeAttr("disabled");
+              	$(".tips_btn .btns .save-btn").removeAttr("disabled");
+              }
+          })
+          //数组对象去重
+          let obj = {};
+          data = data.reduce((cur,next) =>{
+              obj[next.name] ? "" : obj[next.name] = true && cur.push(next);
+              return cur
+          },[]);
+          
+          // 数组筛选
+          let result = data.map(v =>{
+              let filterArr = v.children.filter(s =>{
+                 return s.parent === v.name
+              })
+              return {
+                  name:v.name,
+                  children:filterArr
+              }
+          })
+          var html = '';
+          for (var i = 0; i < result.length; i++) {
+              let children = result[i].children;
+              if( children.length >0){
+                  // 判断每个省份下选中的城市长度，当大于等于4的时候 弹出"选择全省更划算的弹窗"
+                  let childrenArr=[];
+                  if (children.length >= 3 && !this.vipSubisTrial) {
+                      $('.tips_btn .tips_d_text.citys').text("已选择"+children.length+"个市，建议购买“全省”");
+                      $('.tips_btn .tips_d_text.citys').show();
+                  }else{
+                  		$('.tips_btn .tips_d_text.citys').hide();
+                  }
+                  html += `${result[i].name}(`
+                  for(var j = 0;j < children.length;j++){
+                      childrenArr.push(children[j].name)
+                      if (j != children.length - 1) {
+                          html += `${children[j].name}、`
+                      } else {
+                          html += `${children[j].name}`
+                      }
+                  }
+                  if(i !=result.length -1){
+                      html += `)、`
+                  }else{
+                      html += `)`
+                  }
+                  this.selectObj[result[i].name]=childrenArr;//
+              }else{
+                  if(i !=result.length -1){
+                      html += `${result[i].name}、`
+                  }else{
+                      html += `${result[i].name}`
+                  }
+                  this.selectObj[result[i].name]=[];//
+              }
+          }
+          	for (var x = 0; x < provincesArr.length; x++) {
+	            for (var j =x+1; j <provincesArr.length; ) {
+	                if (provincesArr[x] === provincesArr[j]){
+	                    provincesArr.splice(j, 1);
+	                }
+	                else j++;
+	            }
+	        }
+          	if(provincesArr.length > 9){
+          		$('.tips_d_text.all').text("已选择"+provincesArr.length+"个省，建议购买“全国”");
+          		$('.tips_d_text.all').show();
+          		$('.tips_d_text.citys').hide();
+          	}else{
+          		$('.tips_d_text.all').hide();
+          	}
+//        console.log("this.selectObj:",this.selectObj)
+          $('.result_name').append(html)
+          AreaChoose.isOpen()
+        },
+        submitArea:function(){
+          let addCity = $('.result_name').text(); //新增的城市
+          sessionStorage.setItem("vipSubSelectAreaUpgrade",JSON.stringify(AreaChoose.selectObj));
+          history.go(-1);
+        },
+        isAllSelected:function(){
+          var _f = true
+          $($('.tab_content .city')).each(function (index, dom) {
+              if ($(dom).hasClass('active')) {
+                  _f = false
+                  $('.other').prop('checked', false);
+              }
+          })
+          // 如果循环结束仍为true说明 没有全部都被选中
+          if (_f) {
+//            $('.other').prop('checked', true);
+				$(".tips_btn .btns .reset-btn").attr("disabled","disabled");
+        		$(".tips_btn .btns .save-btn").attr("disabled","disabled");
+          }
+        },
+        isOpen:function(){
+          let pHeight = $('.result_text').height()
+          let minHeight = $('.result_text').css('min-height')
+          let rows = Math.round(Math.round(pHeight)/ parseFloat(minHeight));
+          $(".select-area-box .area-list").css("margin-top",$('.result_text').height()+20);
+//        console.log("高度："+ pHeight,"最小高度"+ minHeight,"行数：" + rows)
+          if(rows == 1){
+              if(length >= 50){
+                  $('.detail').show()
+                  $('.packup').hide()
+              }else{
+                  $('.detail').hide()
+                  $('.packup').hide()
+              }
+          }else if(rows == 2){
+//            console.log($('.result_name').html().trim().length)
+              let length = $('.result_name').html().trim().length;
+              if(length >= 50){
+                  $('.detail').show()
+                  $('.packup').hide()
+              }else{
+                  $('.detail').hide()
+                  $('.packup').hide()
+              }
+              
+          } else{
+              $('.packup').show()
+              $('.detail').hide()
+          }
+        },
+        inintClick:function(){
+//      	$('.tab_content').each(function(){
+//        		AreaChoose.showSelected(false);
+//      	})
+          $('.detail').click(function () {  
+                $('.result_text').removeClass('line_two')
+                $(".result").css("padding-bottom","0.3rem")
+                $(this).hide();
+                $('.packup').show()
+                $(".select-area-box .area-list").css("margin-top",$('.result_text').height()+20);
+            })
+            $('.packup').click(function () { 
+                $(".result").css("padding-bottom","0.2rem")
+                $('.result_text').addClass('line_two')
+                $(this).hide();
+                $('.detail').show()
+                $(".select-area-box .area-list").css("margin-top",$('.result_text').height()+20);
+            })
+            $("body").on('click','.slide a',function(){
+                var s = $(this).html()
+                if(s == '#'){
+                    return;
+                }
+                document.querySelector('#' + s).scrollIntoView({block:'center'});
+            })
+          $(".select-area-box .tab:not(.municipality)").on('click', function (event) {
+                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)').stop(true, true).slideToggle()
+                $(this).parent().siblings().children('.tab').removeClass('selected');
+                
+            })
+            $('.checkbox').click(function (e) {  
+                e.stopPropagation();
+            })
+            $('.province .checkbox:not(.other)').on('change', function () {
+                var isCheckded = $(this).is(':checked')
+                if (isCheckded) {
+                    $(this).parents('.tab').siblings('.tab_content').find('.city').addClass('active')
+                    $(this).parents('.tab').siblings('.tab_content').find('.city[disabled]').removeClass('active')
+                    AreaChoose.isAllSelected()
+                    AreaChoose.getResult() 
+                    AreaChoose.showSelected(false);
+                } else {
+                    $(this).parents('.tab').siblings('.tab_content').find('.city').removeClass(
+                        'active')
+                    $(this).parents('.tab').siblings('.tab_content').find('.city').attr('disabled',false);    
+                    AreaChoose.isAllSelected()
+                    AreaChoose.getResult() 
+                    AreaChoose.showSelected(false);
+                }
+            })
+
+            //执行已购买城市函操作dom函数
+            $('.tab_content').on('click', '.city', function () {
+            	AreaChoose.showSelected(false);
+                $(this).toggleClass('active')
+                var isActive = $(this).parent().find('.city.active').length
+                if (isActive) {
+                    var input = $(this).parents('li').find('input.checkbox')
+                    window.input = input
+                    input.prop('checked', true)
+                    AreaChoose.isAllSelected()
+                    AreaChoose.getResult() 
+                } else {
+                    $(this).parent('div').siblings('.tab').children().children('.checkbox').prop(
+                        'checked', false)
+                    AreaChoose.isAllSelected()
+                    AreaChoose.getResult() 
+                }
+            })
+
+            $('.other').on('change', function () { //选择全国
+              	AreaChoose.reset();
+            })
+
+            $('.save-btn').click(function () {  // 提交
+                AreaChoose.submitArea();              
+            })
+            $('.reset-btn').click(function () {  //重置
+//            if(!$(".other").is(':checked')){
+//              $(".other").trigger("click");
+//            }
+				$('.tab:not(.whole):not(.tab[disabled])').removeClass('selected').children('.province').find(
+                    'input').prop({
+                    'checked': false,
+                    "disabled": false
+                });
+                $('.tab_content').find('.city:not(.city[disabled])').removeClass('active').attr({
+                    "disabled": false,
+                    "checked": false
+                })
+				AreaChoose.showSelected(false);
+				AreaChoose.getResult();
+				sessionStorage.removeItem("vipSubSelectAreaUpgrade");
+            })
+            //
+            if(sessionStorage.vipSubSelectAreaUpgrade!==undefined&&sessionStorage.vipSubSelectAreaUpgrade!==""){
+            	let areas = JSON.parse(sessionStorage.vipSubSelectAreaUpgrade);
+            	for(var province in areas){
+            		if(province === "全国"){
+              			$(".other").prop("checked",true);
+              			AreaChoose.reset();
+            		}
+            	}
+            }
+        },
+        reset:function(){
+           var checked = $(".other").is(':checked');
+            if (checked) {
+                $('.tab_content').slideUp(500)
+                $('.tab span i').css({
+                    "display":"inline-block",
+                    "transform":"rotate(0)"
+                })
+                $('.tab:not(.whole):not(.tab[disabled])').removeClass('selected').children('.province').find(
+                    'input').prop({
+                    'checked': false,
+                    "disabled": false
+                });
+                $('.tab_content').find('.city:not(.city[disabled])').removeClass('active').attr({
+                    "disabled": false,
+                    "checked": false
+                })
+                AreaChoose.getResult();
+                $(".tips_btn .btns .reset-btn").removeAttr("disabled");
+            	$(".tips_btn .btns .save-btn").removeAttr("disabled");
+            }else{
+            	AreaChoose.showSelected(false);
+                AreaChoose.getResult();
+                $(".tips_btn .btns .reset-btn").attr("disabled","disabled");
+            	$(".tips_btn .btns .save-btn").attr("disabled","disabled");
+            }
+        }
+      }
+      
+      $(function () {
+            AreaChoose.isOpen()
+            AreaChoose.inintData(); //初始化 已选择和已购买数据
+            AreaChoose.inintPage(); //初始化城市数据
+            AreaChoose.showSelected(false);
+            AreaChoose.showSelected(true);//回显已选择
+            /* 判断已购买的城市 在不在 全部城市里面，在，将按钮置灰，不可点击 */
+
+            AreaChoose.getResult();
+            AreaChoose.inintClick();
+        })
+      //
+        //
+	    function checkObj(obj) {
+		    //检验数组
+		    if (Array.prototype.isPrototypeOf(obj) && obj.length === 0) {
+		        return true;
+		    }
+		    //检验对象
+		    if (Object.prototype.isPrototypeOf(obj) && Object.keys(obj).length === 0) {
+		        return true;
+		    }
+		    return false;
+		}
+	    //
+	    if($(".result_name").text()===""){
+	    	$(".tips_btn .btns .reset-btn").attr("disabled","disabled");
+        	$(".tips_btn .btns .save-btn").attr("disabled","disabled");
+	    }
+	    
+	    if(sessionStorage.vipSubSelectAreaUpgrade!==undefined && sessionStorage.vipSubSelectAreaUpgrade!==""){
+	    	$(".tips_btn .btns .reset-btn").removeAttr("disabled");
+            $(".tips_btn .btns .save-btn").removeAttr("disabled");
+	    }
+
+    </script>
+</body>
+
+</html>

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

@@ -154,8 +154,8 @@
 			}else{
 				$DoPost("/subscribepay/renewUpgrade/getBuyMsg", {}, function (data) {
 					if(data){
-						var area = data.area;
-					    var buyerclass = data.buyerclass;
+						var area = data.allarea;
+					    var buyerclass = data.allindustry;
 					    var startTime = data.start;
 					    var endTime = data.end;
 					    var exprie = {{.T.exprie}};
@@ -234,10 +234,10 @@
 				if(flags){
 					return
 				};
-				window.location.href = "/weixin/pay/renewPayPage";
+				window.location.replace("/weixin/pay/renewPayPage");
 			});
 			$(".aginBuy").on("click",function(){
-				window.location.href = "/weixin/pay/vipsubscribe_new?orderCode="+orderCode;
+				window.location.replace("/weixin/pay/vipsubscribe_new?orderCode="+orderCode);
 			});
 	        //
 		    function checkObj(obj) {

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

@@ -48,11 +48,11 @@
             <ul class="chooseList">
                 <li class="detail_item">
                         <div class="item_info item_area">
-                            <span class="label">已订阅区域：</span>
+                            <span class="label">已购买区域：</span>
                             <span class="label_for">河南省、郑州市、洛阳市、淮南市</span>
                         </div>
                         <div class="item_info item_industry">
-                            <span class="label">已订阅行业：</span>
+                            <span class="label">已购买行业：</span>
                             <span class="label_for">保监、城管保监</span>
                         </div>
                         <div class="item_info item_cycle">
@@ -607,9 +607,9 @@
 			    var buyerclassHtml = "";
 			    var dateName = "";
 			    var dateHtml = "";
-			    if (area !== "" && area !== undefined){
-			    	for(var province in area){
-			    		var citys = area[province]
+			    if (areas !== "" && areas !== undefined){
+			    	for(var province in areas){
+			    		var citys = areas[province]
 		//	    		console.log(citys);
 			    		if(citys.length===0){
 			    			provinceArr.push(province);
@@ -624,18 +624,18 @@
 			 		var cityLen = cityArr.length;
 			    	areaHtml = provinceLen+"个省级区域、"+cityLen+"个市";
 			    	
-					if(checkObj(area)){
+					if(checkObj(areas)){
 						areaHtml = "全国";
 					}
 			    	$(".item_area .label_for").text(areaHtml);
 			    }
-			    if(buyerclass !== "" && buyerclass !== undefined){
-			    	for(var i in buyerclass){
-			    		var industry = buyerclass[i];
+			    if(industrys !== "" && industrys !== undefined){
+			    	for(var i in industrys){
+			    		var industry = industrys[i];
 			    		buyerclassArr.push(industry);
 			    		buyerclassHtml = buyerclassArr.length+"个行业";
 			    	}
-			    	if(checkObj(buyerclass)){
+			    	if(checkObj(industrys)){
 			    		buyerclassHtml = "全行业";
 			    	}
 			    	$(".item_industry .label_for").text(buyerclassHtml);

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

@@ -788,44 +788,52 @@
         	$("#buy").prop("checked", bCheck);
         }
         //新增区域
-	    if(sessionStorage.vipSubSelectAreaUpgrade!==""&&sessionStorage.vipSubSelectAreaUpgrade!==undefined){
-			var vipSubSelectArea = JSON.parse(sessionStorage.vipSubSelectAreaUpgrade);
-			var provinceArr = [];
-			var cityArr = [];
-			var isAll = "";
-			$(".area-list").show();
-			for (var province in vipSubSelectArea){
-				if(vipSubSelectArea[province].length > 0){
-					var citys = vipSubSelectArea[province];
-					for (var i in citys){
-						var city = citys[i];
-						cityArr.push(city);
-					}
-				}else{
-					provinceArr.push(province);
-				}
-				if(province === "全国"){
-					isAll = "all";
-				}
-			}
-			var provinceLen = provinceArr.length;
-			var cityLen = cityArr.length;
-			var areaHtml = "";
-			if(isAll === ""){
-				areaHtml = "已新增 "+ provinceLen +" 个省级区域、"+ cityLen +" 个地市";
-				$("#area").attr("placeholder", areaHtml);
-			}else{
+	    if(sessionStorage.vipSubSelectAreaAdd!==""&&sessionStorage.vipSubSelectAreaAdd!==undefined&&sessionStorage.vipSubSelectCity!==undefined&&sessionStorage.vipSubSelectCity!==""){
+			var vipSubSelectArea = JSON.parse(sessionStorage.vipSubSelectAreaAdd);
+			let cityLen = sessionStorage.vipSubSelectCity;
+			if(vipSubSelectArea.country === -1){
 				areaHtml = "已新增全国";
 				$("#area").attr("placeholder", areaHtml);
-			}
-			if(provinceLen === 0 && cityLen === 0){
-				areaHtml = "选择升级区域";
+			}else{
+				areaHtml = "已新增 "+ vipSubSelectArea.province +" 个省级区域、"+ cityLen +" 个地市";
 				$("#area").attr("placeholder", areaHtml);
 			}
+//			var provinceArr = [];
+//			var cityArr = [];
+//			var isAll = "";
+//			$(".area-list").show();
+//			for (var province in vipSubSelectArea){
+//				if(vipSubSelectArea[province].length > 0){
+//					var citys = vipSubSelectArea[province];
+//					for (var i in citys){
+//						var city = citys[i];
+//						cityArr.push(city);
+//					}
+//				}else{
+//					provinceArr.push(province);
+//				}
+//				if(province === "全国"){
+//					isAll = "all";
+//				}
+//			}
+//			var provinceLen = provinceArr.length;
+//			var cityLen = cityArr.length;
+//			var areaHtml = "";
+//			if(isAll === ""){
+//				areaHtml = "已新增 "+ provinceLen +" 个省级区域、"+ cityLen +" 个地市";
+//				$("#area").attr("placeholder", areaHtml);
+//			}else{
+//				areaHtml = "已新增全国";
+//				$("#area").attr("placeholder", areaHtml);
+//			}
+//			if(provinceLen === 0 && cityLen === 0){
+//				areaHtml = "选择升级区域";
+//				$("#area").attr("placeholder", areaHtml);
+//			}
 	    }
 	    //新增行业
-	    if(sessionStorage.vipSubSelectIndustryUpgrade!==""&&sessionStorage.vipSubSelectIndustryUpgrade!==undefined){
-	    	var vipSubSelectIndustry = JSON.parse(sessionStorage.vipSubSelectIndustryUpgrade);
+	    if(sessionStorage.vipSubSelectIndustryAdd!==""&&sessionStorage.vipSubSelectIndustryAdd!==undefined){
+	    	var vipSubSelectIndustry = JSON.parse(sessionStorage.vipSubSelectIndustryAdd);
 	    	var industryArr = [];
 	    	var isAll = "";
 	    	var industryHtml = "";
@@ -1003,6 +1011,7 @@
         var oldYearPrice = 0;
         var oldMonthPrice = 0;
         var areasArr = {};
+        var areas_arr = {};
 	    var industrysArr = [];
 	    var allArea = {};
 	    var allIndustry = [];
@@ -1036,19 +1045,16 @@
 				for(let province in vipArea){
 		    		let citys = vipArea[province];
 		    		if(citys.length===0){
-						areasArr[province] = [];
+						areas_arr[province] = [];
 		    		}else{
-		    			areasArr[province] = citys;
+		    			areas_arr[province] = citys;
 		    		}
 		    	}
 				for(let province in vipArea){
 		    		if(province === "全国"){
-						areasArr = {"全国":[]};
+						areas_arr = {"全国":[]};
 					}
 		    	}
-				if(buyCheck){
-					$(".save_upgrade").removeAttr("disabled");
-				}
 				if(area !== ""&&area !== undefined){
 					for(let province in area){
 			    		let citys = area[province];
@@ -1087,8 +1093,17 @@
 						}
 					}
 				}
+				if(sessionStorage.vipSubSelectAreaAdd!==""&&sessionStorage.vipSubSelectAreaAdd!==undefined){
+					areasArr = addAreaObj();
+				}else{
+					areasArr = null;
+				}
+				if(buyCheck){
+					$(".save_upgrade").removeAttr("disabled");
+				}
 			}else{
-				areasArr = null;
+				areas_arr = null
+				areasArr = null
 				if(buyArea !== ""&&buyArea !== undefined){
 					for(let province in buyArea){
 			    		let citys = buyArea[province];
@@ -1100,6 +1115,19 @@
 			    	}
 				}
 			}
+			//
+			if(sessionStorage.vipSubSelectIndustryAdd!==""&&sessionStorage.vipSubSelectIndustryAdd!==undefined){
+				var vipIndustry = JSON.parse(sessionStorage.vipSubSelectIndustryAdd);
+				for(let i in vipIndustry){
+		    		let industry = vipIndustry[i];
+		    		industrysArr.push(industry);
+		        }
+				for(let i in vipIndustry){
+					if(industry === "全部行业"){
+						industrysArr = ["全部行业"];
+					}
+				}
+			}
 //			if(sessionStorage.vipSubSelectAreaUpgrade!==""&&sessionStorage.vipSubSelectAreaUpgrade!==undefined){
 //				var vipArea = JSON.parse(sessionStorage.vipSubSelectAreaUpgrade);
 //				if(area !== ""&&area !== undefined){
@@ -1169,6 +1197,8 @@
 						industrysArr = ["全部行业"];
 					}
 				}
+			}else{
+				industrysArr = null;
 			}
 			
 			if(sessionStorage.vipSubSelectIndustryUpgrade!==""&&sessionStorage.vipSubSelectIndustryUpgrade!==undefined){
@@ -1190,7 +1220,6 @@
 					$(".save_upgrade").removeAttr("disabled");
 				}
 			}else{
-				industrysArr = null;
 				if(buyIndustry!==""&&buyIndustry!==undefined){
 					for(let i in buyIndustry){
 			    		let industry = buyIndustry[i];
@@ -1402,6 +1431,9 @@
 					sessionStorage.upgrade_price = "￥"+price;
 					sessionStorage.proPrice = price;
 				}else if(sessionStorage.upgrade_cycleunit === "2"){
+					if(Number(sessionStorage.upgrade_cyclecount)>10){
+						sessionStorage.upgrade_cyclecount = 10;
+					}
 					let price = (Number(sessionStorage.upgrade_cyclecount)*completeMonth).toFixed(1);
 					sessionStorage.upgrade_price = "￥"+price;
 					sessionStorage.proPrice = price;
@@ -1420,7 +1452,7 @@
 //			if(effect === "notnow"){
 //				cPrice = cPrice -(completeMonth - oldMonthPrice);
 //			}
-			if(cPrice < 0){
+			if(cPrice <= 0){
 				cPrice = 0;
 			}
 			$(".finally_price").html("￥"+cPrice);
@@ -1480,6 +1512,18 @@
         	}else{
         		industryArr = "no";
         	}
+        	//
+        	if(areas_arr["全国"]){
+                areas_arr={};
+            }
+        	if(areas_arr !== null){
+        		if(areas_arr["全国"]){
+	                areas_arr={};
+	            }
+        		areas_arr = JSON.stringify(areas_arr);
+        	}else{
+        		areas_arr = "no";
+        	}
             //
             let areaarr = buyArea;
         	let industryarr = buyIndustry;
@@ -1499,9 +1543,10 @@
             }
             //
 	    	var param = {
-	    		"area": areaArr,
+	    		"area": areas_arr,
 	    		"industry": industryArr,
 	    		"areas": JSON.stringify(areaarr),
+	    		"areas_arr": areaArr,
 	    		"industryarr": industryarr.join(","),
 	    		"allArea": JSON.stringify(allAreaArr),
 	    		"allIndustry": allIndustryArr.join(","),
@@ -1547,6 +1592,47 @@
 		    }
 		    return false;
 		}
+	    //
+	    function addAreaObj(){
+	    	let areaObj = JSON.parse(sessionStorage.vipSubSelectAreaUpgrade)
+	    	let buyset = JSON.parse(sessionStorage.vipSubSelectAreaAdd)
+	    	//
+	    	let provinceArr = [];
+	    	let areasObj = {};
+	    	if(buyset.country === -1){
+	    		areasObj["全国"] = [];
+	    	}else{
+	    		for(let province in areaObj){
+	//	    		console.log("666666",buyset.citys[province]);
+					let cityLen = areaObj[province].length
+		    		if(cityLen === 0){
+		    			provinceArr.push(province);
+		    		}else{
+		    			let citys = areaObj[province];
+		    			for(let i in buyset.city){
+		    				let cityCount = buyset.city[i];
+		    				if(province === i){
+		    					if(cityLen > cityCount){
+					    			let reduce = cityLen - cityCount;
+					    			areasObj[province] = citys.slice(0, -reduce);
+					    		}
+		    				}
+		    			}
+		    		}
+		    	}
+	    		if(provinceArr.length > buyset.province){
+	    			let reduce = provinceArr.length - buyset.province;
+	    			provinceArr = provinceArr.slice(0, -reduce);
+	    		}
+	    		console.log(provinceArr)
+	    		for(let a in provinceArr){
+	    			let province = provinceArr[a];
+	    			areasObj[province] = [];
+	    		}
+	    		console.log(areasObj)
+	    	}
+	    	return areasObj
+	    }
 	    
     </script>
 </body>