瀏覽代碼

Merge branch 'feature/v4.8.40_wky' of qmx/jy into feature/v4.8.40

wangkaiyue 2 年之前
父節點
當前提交
8927ed0be1

+ 277 - 230
src/web/staticres/tags/js/area-selector.js

@@ -1,240 +1,287 @@
 var areaSelector = {
-    el: '#area-selector-content', // 容器选择器
-    $el: '',
-    $view: '',
-    $origin: '',
-    provinceListMap: {
-        '#': ['全国'],
-        A: ['安徽', '澳门'],
-        B: ['北京'],
-        C: ['重庆'],
-        F: ['福建'],
-        G: ['广东', '广西', '贵州', '甘肃'],
-        H: ['河北', '湖北', '黑龙江', '海南', '河南', '湖南'],
-        J: ['吉林', '江苏', '江西'],
-        L: ['辽宁'],
-        N: ['内蒙古', '宁夏'],
-        Q: ['青海'],
-        S: ['山西', '陕西', '上海', '山东', '四川'],
-        T: ['天津', '台湾'],
-        X: ['西藏', '新疆', '香港'],
-        Y: ['云南'],
-        Z: ['浙江']
-    },
-    provinceNameList: [],
-    singleList: ['北京', '上海', '重庆', '天津', '香港', '澳门', '台湾'],
-    caches: {
-        originDOM: null, // 原始DOM字符串。可能用于恢复最原始状态
-    },
-    init: function () {
-        this.initVars()
-        this.cacheOriginDOM()
-        this.addLetterToList()
-        this.initEvents()
-    },
-    initVars: function () {
-        this.$el = $(this.el)
-        this.$view = this.$el.find('.selected-list.view')
-        this.$origin = this.$el.find('.selected-list.origin')
-        this.initProvinceNameList()
-    },
-    initEvents: function () {
-        var _this = this
-        var  container = this.$view
-        // 省份按钮
-        container.on('click', '.j-button-item.can-expand', function (e) {
-            var $this = $(this)
-            container.find('.j-button-item.can-expand').removeClass('expand')
-            $this.addClass('expand')
+  el: '#area-selector-content', // 容器选择器
+  $el: '',
+  $view: '',
+  $origin: '',
+  provinceListMap: {
+    '#': ['全国'],
+    A: ['安徽', '澳门'],
+    B: ['北京'],
+    C: ['重庆'],
+    F: ['福建'],
+    G: ['广东', '广西', '贵州', '甘肃'],
+    H: ['河北', '湖北', '黑龙江', '海南', '河南', '湖南'],
+    J: ['吉林', '江苏', '江西'],
+    L: ['辽宁'],
+    N: ['内蒙古', '宁夏'],
+    Q: ['青海'],
+    S: ['山西', '陕西', '上海', '山东', '四川'],
+    T: ['天津', '台湾'],
+    X: ['西藏', '新疆', '香港'],
+    Y: ['云南'],
+    Z: ['浙江']
+  },
+  provinceNameList: [],
+  singleList: ['北京', '上海', '重庆', '天津', '香港', '澳门', '台湾'],
+  caches: {
+    originDOM: null, // 原始DOM字符串。可能用于恢复最原始状态
+  },
+  init: function () {
+    this.initVars()
+    this.cacheOriginDOM()
+    this.addLetterToList()
+    // this.initEvents()
+  },
+  initVars: function () {
+    this.$el = $(this.el)
+    this.$view = this.$el.find('.selected-list.view')
+    this.$origin = this.$el.find('.selected-list.origin')
+    this.initProvinceNameList()
+  },
+  initEvents: function () {
+    var _this = this
+    var  container = this.$view
+    // 省份按钮展示逻辑
+    container.on('click', '.j-button-item.can-expand', function (e) {
+      var $this = $(this)
+      container.find('.j-button-item.can-expand').removeClass('expand')
+      $this.addClass('expand')
 
-            // 删除其他cityList
-            container.find('.city-list').remove()
+      // 删除其他cityList
+      container.find('.city-list').remove()
 
-            // 插入当前cityList
-            var pName = $this.attr('data-p-name')
-            // 找到cityList
-            var cityListDOM = _this.findCityListDOMFromOrigin(pName).clone().attr('data-p-children-name', pName).show()
-            cityListDOM.find('.city-list-footer').show()
-            // 计算cityList插入哪一行后
-            var target = _this.calcTargetDOM(container, $this)
-            if (target) {
-                $(target).after(cityListDOM)
-            } else {
-                container.append(cityListDOM)
-            }
-        })
-        container.on('click', '.action-button', function () {
-            container.find('.j-button-item.can-expand').removeClass('expand')
-            container.find('.city-list').remove()
-        })
-    },
-    cacheOriginDOM: function () {
-        this.caches.originDOM = this.$el.html()
-    },
-    // 整理出按字母排序的省份选择的html结构
-    addLetterToList: function () {
-        var indexBarList = this.$view.find('.index-bar')
-        if (indexBarList.length > 0) {
-            return
-        }
-        // 对目标元素位置进行调整
-        var map = this.provinceListMap
-        var domArr = []
-        for (var key in map) {
-            if ($.isArray(map[key])) {
-                var sortedDOM = this.sortLetterDOM(key, map[key])
-                domArr.push(sortedDOM)
-            }
+      // 插入当前cityList
+      var pName = $this.attr('data-p-name')
+      // 找到cityList
+      var cityListDOM = _this.findCityListDOMFromOrigin(pName).clone().attr('data-p-children-name', pName).show()
+      // cityListDOM.find('.city-list-footer').show()
+      // 计算cityList插入哪一行后
+      var target = _this.calcTargetDOM(container, $this)
+      if (target) {
+        $(target).after(cityListDOM)
+      } else {
+        container.append(cityListDOM)
+      }
+    })
+    container.on('click', '.action-button', function () {
+      container.find('.j-button-item.can-expand').removeClass('expand')
+      container.find('.city-list').remove()
+    })
+  },
+  setHighlight: function (area) {
+    if (area && area !== '全国') {
+      // 1. 用area找,先找一级
+      var p = this.getProvinceDOMWithName(area)
+      if (p.length) {
+        // 打开
+        this.openCityContainer(area)
+      } else {
+        // 找二级
+        var p2 = this.findCityInWhichProvince(area)
+        if (p2.length) {
+          // 二级是哪个一级的子集
+          var pName = p2.attr('data-p-name')
+          this.openCityContainer(pName)
+          var city = this.$view.find('.city-list').find('[data-c-name=' + area + ']')
+          city.addClass('active')
+        } else {
+          this.setHighlight()
         }
-        this.$origin.hide()
-        this.$view.html(domArr).show()
-    },
-    // 整理字母容器
-    sortLetterDOM: function (key, provinces) {
-        var letterContainer = $('<div class="index-item"></div>')
-        letterContainer.attr('data-index', key).append('<span class="index-bar">' + key.toUpperCase() + '</span>')
-        for (var i = 0; i < provinces.length; i++) {
-            var pName = provinces[i]
-            var originProvinceDOM = this.$el.find('.selected-list.origin').find('[data-p-name=' + pName + ']')
-            var originProvinceCities = originProvinceDOM.parent().find('[data-c-name=all]')
-            var provinceDOM = originProvinceDOM.clone()
+      }
+    } else {
+      var d = this.getProvinceDOMWithName('全国')
+      d.addClass('active')
+    }
+  },
+  openCityContainer: function (pName) {
+    var container = this.$view
+    var $p = this.getProvinceDOMWithName(pName)
 
-            // 是否是直辖市/自治区/...
-            var singleProvince = this.isSingleProvince(pName)
-            if (singleProvince) {
-                originProvinceCities.removeClass().addClass('j-button-item single').attr('data-p-name', pName)
-                if (originProvinceCities) {
-                    letterContainer.append(originProvinceCities)
-                }
-            } else {
-                if (pName === '全国') {
+    // 是不是直辖市, 是直辖市直接高亮
+    var isSingle = this.isSingleProvince(pName)
+    if (isSingle) {
+        $p.addClass('active')
+        return
+    }
 
-                } else {
-                    originProvinceCities.text('全省')
-                    provinceDOM.addClass('can-expand')
-                }
-                if (provinceDOM) {
-                    letterContainer.append(provinceDOM)
-                }
-            }
-            
-        }
-        if (key === '#') {
-            letterContainer.find('.index-bar').hide()
-        }
-        return letterContainer
-    },
-    // 从$origin中找city-list
-    findCityListDOMFromOrigin: function (pName) {
-        var container = this.$origin
-        return container.find('[data-p-name=' + pName + ']').parent().find('.city-list')
-    },
-    // 从$view中找city-list
-    findCityListDOMFromView: function (pName) {
-        var container = this.$view
-        return container.find('.city-list[data-p-children-name=' + pName + ']')
-    },
-    // 找到当前行最后一个dom
-    calcTargetDOM: function (container, $this) {
-        var indexBarContainer = $this.parent()
-        var indexList = container.find('.index-item')
-        var thisIndexBarTop = indexBarContainer.position().top
-        var target = null
-        for (var i = indexList.length - 1; i >= 0; i--) {
-            var dom = indexList[i]
-            var top = $(dom).position().top
-            var diff = Math.abs(thisIndexBarTop - top)
-            if (diff <= 5) {
-                target = $(dom)
-                break
-            }
-        }
-        return target
-    },
-    initProvinceNameList: function () {
-        var provinceNameList = []
-        var map = this.provinceListMap
-        for (var key in map) {
-            provinceNameList = provinceNameList.concat(map[key])
+    container.find('.j-button-item.can-expand').removeClass('expand')
+    $p.addClass('expand')
+
+    // 删除其他cityList
+    container.find('.city-list').remove()
+
+    // 插入当前cityList
+    var pName = $p.attr('data-p-name')
+    // 找到cityList
+    var cityListDOM = this.findCityListDOMFromOrigin(pName).clone().attr('data-p-children-name', pName).show()
+    // cityListDOM.find('.city-list-footer').show()
+    // 计算cityList插入哪一行后
+    var target = this.calcTargetDOM(container, $p)
+    if (target) {
+      $(target).after(cityListDOM)
+    } else {
+      container.append(cityListDOM)
+    }
+  },
+  cacheOriginDOM: function () {
+    this.caches.originDOM = this.$el.html()
+  },
+  // 整理出按字母排序的省份选择的html结构
+  addLetterToList: function () {
+    var indexBarList = this.$view.find('.index-bar')
+    if (indexBarList.length > 0) {
+      return
+    }
+    // 对目标元素位置进行调整
+    var map = this.provinceListMap
+    var domArr = []
+    for (var key in map) {
+      if ($.isArray(map[key])) {
+        var sortedDOM = this.sortLetterDOM(key, map[key])
+        domArr.push(sortedDOM)
+      }
+    }
+    this.$origin.hide()
+    this.$view.html(domArr).show()
+    // 全国button加上标识
+    this.getProvinceDOMWithName('全国').addClass('country')
+  },
+  // 整理字母容器
+  sortLetterDOM: function (key, provinces) {
+    var letterContainer = $('<div class="index-item"></div>')
+    letterContainer.attr('data-index', key).append('<span class="index-bar">' + key.toUpperCase() + '</span>')
+    for (var i = 0; i < provinces.length; i++) {
+      var pName = provinces[i]
+      var originProvinceDOM = this.$el.find('.selected-list.origin').find('[data-p-name=' + pName + ']')
+      var originProvinceCities = originProvinceDOM.parent().find('[data-c-name=all]')
+      var provinceDOM = originProvinceDOM.clone()
+
+      if (pName === '全国') {
+        // do something...
+      } else {
+        originProvinceCities.text('全省')
+        provinceDOM.addClass('can-expand')
+      }
+      if (provinceDOM) {
+        letterContainer.append(provinceDOM)
+      }
+    }
+    if (key === '#') {
+      letterContainer.find('.index-bar').hide()
+    }
+    return letterContainer
+  },
+  // 从$origin中找city-list
+  findCityListDOMFromOrigin: function (pName) {
+    var container = this.$origin
+    return container.find('[data-p-name=' + pName + ']').parent().find('.city-list')
+  },
+  // 从$view中找city-list
+  findCityListDOMFromView: function (pName) {
+    var container = this.$view
+    return container.find('.city-list[data-p-children-name=' + pName + ']')
+  },
+  // 找到当前行最后一个dom
+  calcTargetDOM: function (container, $this) {
+    var indexBarContainer = $this.parent()
+    var indexList = container.find('.index-item')
+    var thisIndexBarTop = indexBarContainer.position().top
+    var target = null
+    for (var i = indexList.length - 1; i >= 0; i--) {
+      var dom = indexList[i]
+      var top = $(dom).position().top
+      var diff = Math.abs(thisIndexBarTop - top)
+      if (diff <= 5) {
+        target = $(dom)
+        break
+      }
+    }
+    return target
+  },
+  initProvinceNameList: function () {
+    var provinceNameList = []
+    var map = this.provinceListMap
+    for (var key in map) {
+      provinceNameList = provinceNameList.concat(map[key])
+    }
+    this.provinceNameList = provinceNameList
+  },
+  // 找到市所在省份
+  findCityInWhichProvince: function (city) {
+    var city = this.$origin.find('[data-c-name=' + city + ']')
+    var pName = city.parents('.province-container').find('[data-p-name]').text()
+    return this.$view.find('[data-p-name=' + pName + ']')
+  },
+  // 是不是直辖市
+  isSingleProvince: function (area) {
+    return this.singleList.indexOf(area) !== -1
+  },
+  // 是不是省份
+  isProvince: function (area) {
+    return this.provinceNameList.indexOf(area) !== -1
+  },
+  // 获取省份名称对应的button
+  getProvinceDOMWithName: function (name) {
+    var container = this.$view
+    return container.find('[data-p-name=' + name + ']')
+  },
+  getSingleState: function () {
+    var area = {}
+    var container = this.$view
+    var activeList = container.find('.active:not(.country)')
+    activeList.each(function (index, item) {
+      var $item = $(item)
+      var single = $item.hasClass('single')
+      if (single) {
+        var city = $item.attr('data-p-name')
+        area[city] = []
+      } else {
+        var city = $item.attr('data-c-name')
+        var province = $item.parents('.city-list').attr('data-p-children-name')
+        if (city === 'all') {
+          area[province] = []
+        } else {
+          if (area[province]) {
+            area[province].push(city)
+          } else {
+            area[province] = [city]
+          }
         }
-        this.provinceNameList = provinceNameList
-    },
-    // 找到市所在省份
-    findCityInWhichProvince: function (city) {
-        var city = this.$origin.find('[data-c-name=' + city + ']')
-        var pName = city.parents('.province-container').find('[data-p-name]').text()
-        return this.$view.find('[data-p-name=' + pName + ']')
-    },
-    // 是不是直辖市
-    isSingleProvince: function (area) {
-        return this.singleList.indexOf(area) !== -1
-    },
-    // 是不是省份
-    isProvince: function (area) {
-        return this.provinceNameList.indexOf(area) !== -1
-    },
-    // 获取省份名称对应的button
-    getProvinceDOMWithName: function (name) {
-        var container = this.$view
-        return container.find('[data-p-name=' + name + ']')
-    },
-    getSingleState: function () {
-        var area = {}
-        var container = this.$view
-        var activeList = container.find('.active:not(.country)')
-        activeList.each(function (index, item) {
-            var $item = $(item)
-            var single = $item.hasClass('single')
-            if (single) {
-                var city = $item.attr('data-p-name')
-                area[city] = []
-            } else {
-                var city = $item.attr('data-c-name')
-                var province = $item.parents('.city-list').attr('data-p-children-name')
-                if (city === 'all') {
-                    area[province] = []
-                } else {
-                    if (area[province]) {
-                        area[province].push(city)
-                    } else {
-                        area[province] = [city]
-                    }
-                }
-            }
-        })
-        return area
-    },
-    restoreAreaSelectorState: function (conf) {
-        var container = this.$view
-        var area = conf.area || '全国'
-        if (area === '全国') {
-            container.find('.j-button-item.country').addClass('active')
+      }
+    })
+    return area
+  },
+  restoreAreaSelectorState: function (conf) {
+    var container = this.$view
+    var area = conf.area || '全国'
+    if (area === '全国') {
+      container.find('.j-button-item.country').addClass('active')
+    } else {
+      // 是不是省份
+      if (this.isProvince(area)) {
+        var pName = area
+        var button = this.getProvinceDOMWithName(pName)
+        if (this.isSingleProvince(pName)) {
+          button.addClass('active')
         } else {
-            // 是不是省份
-            if (this.isProvince(area)) {
-                var pName = area
-                var button = this.getProvinceDOMWithName(pName)
-                if (this.isSingleProvince(pName)) {
-                    button.addClass('active')
-                } else {
-                    button.addClass('active')
-                    button.trigger('click')
-                    // 选中全省
-                    var cityListDOM = this.findCityListDOMFromView(pName)
-                    cityListDOM.find('.city-item.province').addClass('active')
-                }
-            } else {
-                // 找到市所在省份
-                var city = area
-                var provinceDOM = this.findCityInWhichProvince(city)
-                provinceDOM.addClass('half')
-                var pName = provinceDOM.text()
-                var button = this.getProvinceDOMWithName(pName)
-                button.trigger('click')
-                // 选中当前市
-                var cityListDOM = this.findCityListDOMFromView(pName)
-                cityListDOM.find('.city-item[data-c-name=' + city + ']').addClass('active')
-            }
+          button.addClass('active')
+          button.trigger('click')
+          // 选中全省
+          var cityListDOM = this.findCityListDOMFromView(pName)
+          cityListDOM.find('.city-item.province').addClass('active')
         }
-    },
+      } else {
+        // 找到市所在省份
+        var city = area
+        var provinceDOM = this.findCityInWhichProvince(city)
+        provinceDOM.addClass('half')
+        var pName = provinceDOM.text()
+        var button = this.getProvinceDOMWithName(pName)
+        button.trigger('click')
+        // 选中当前市
+        var cityListDOM = this.findCityListDOMFromView(pName)
+        cityListDOM.find('.city-item[data-c-name=' + city + ']').addClass('active')
+      }
+    }
+  },
 }

+ 17 - 2
src/web/staticres/tags/js/tags-lib.js

@@ -41,6 +41,7 @@ var tagsLibs = {
         this.restoreAreaSelectorState(filters)
         this.restoreInfoTypeSelectorState(filters)
         this.restoreLetterSelectorState(filters)
+        this.highlightArea(filters.area)
         this.listHighlight()
     },
     initEvents: function () {
@@ -100,6 +101,20 @@ var tagsLibs = {
             target.addClass('active').siblings().removeClass('active')
         }
     },
+    highlightArea: function (area) {
+      // 高亮城市选择器
+      if (area) {
+        // 省份城市,高亮,并展开
+        try {
+          areaSelector.setHighlight(area)
+        } catch (error) {
+          console.log(error)
+        }
+      } else {
+        // 省份城市,高亮全部
+        areaSelector.getProvinceDOMWithName('全国').addClass('active')
+      }
+    },
     // 标题正文高亮
     listHighlight: function () {
         var searchKeywords = this.data.filters.searchKeywords || ''
@@ -120,7 +135,7 @@ var tagsLibs = {
             var hasTitleHighlight = titleDOM.find('.highlight-keywords').length
             var hasDetailHighlight = detailDOM.find('.highlight-keywords').length
             if (!hasTitleHighlight && hasDetailHighlight) {
-                var suffixText =  searchKeywords 
+                var suffixText =  searchKeywords
                 var suffixHTML = '【<strong class="highlight-text">' + suffixText + '</strong>】<span class="suffix-text">在正文中</span>'
                 $item.find('.search-list-item-title-suffix').html(suffixHTML).show()
             }
@@ -176,4 +191,4 @@ function onSEOPaginationChange (p) {
 
 $(function () {
     tagsLibs.init()
-})
+})

+ 2 - 8
src/web/templates/pc/tags/template/area-selector.html

@@ -5,19 +5,13 @@
         </div>
         {{range $k, $v := .T.areaList}}
             <div class="province-container">
-                <button class="j-button-item" data-p-name="{{$v.name}}">{{$v.name}}</button>
+                <a class="j-button-item" href="{{$v.url}}" data-p-name="{{$v.name}}">{{$v.name}}</a>
                 <div class="city-list" style="display: none">
                     <div class="city-list-content">
-                        <!-- 为了seo此处不直接显示全省,后期js修改 -->
-                        <a class="city-item province" href="{{$v.url}}" data-c-name="all">{{$v.name}}</a>
                         {{range $kk, $vv := $v.area}}
-                            <a class="city-item city" href="{{$vv.url}}" data-c-name="{{$vv.name}}">{{$vv.name}}</a>
+                            <a class="city-item city" href="{{$vv.url}}" data-p-c-name="{{$v.name}}" data-c-name="{{$vv.name}}">{{$vv.name}}</a>
                         {{end}}
                     </div>
-<!--                    <div class="city-list-footer" style="display: none">-->
-<!--                        <button class="action-button confirm">确定</button>-->
-<!--                        <button class="action-button cancel">取消</button>-->
-<!--                    </div>-->
                 </div>
             </div>
         {{end}}