|
|
@@ -1,881 +0,0 @@
|
|
|
-<!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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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">¥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>
|
