|
|
@@ -15,11 +15,55 @@
|
|
|
{{include "/common/weixin.html"}}
|
|
|
<script src="{{Msg "seo" "cdn"}}/wxswordfish/share.js?v={{Msg "seo" "version"}}"></script>
|
|
|
</head>
|
|
|
+ <style>
|
|
|
+ #choose_area .result {
|
|
|
+ position: relative;
|
|
|
+ padding: .2rem .3rem;
|
|
|
+ font-size: .26rem;
|
|
|
+ text-align: justify;
|
|
|
+ }
|
|
|
+ #choose_area .result .result_text {
|
|
|
+ position: relative;
|
|
|
+ min-height: 0.38rem;
|
|
|
+ }
|
|
|
+ #choose_area .result .line_two {
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ #choose_area .result .detail, #choose_area .result .packup {
|
|
|
+ display: inline-block;
|
|
|
+ width: 1.5rem;
|
|
|
+ padding-right: 0.1rem;
|
|
|
+ text-align: right;
|
|
|
+ color: #2cb7ca;
|
|
|
+ font-size: .26rem;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+ #choose_area .result .detail {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: linear-gradient(90deg, rgba(245, 244, 249, 0) 0%, rgba(245, 244, 249, 0.96) 36%, #f5f4f9 100%);
|
|
|
+ }
|
|
|
+ #choose_area .result .packup {
|
|
|
+ position: absolute;
|
|
|
+ right: 0.3rem;
|
|
|
+ bottom: 0;
|
|
|
+ margin-top: .1rem;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
<body>
|
|
|
<div id="choose_area">
|
|
|
<div class="result">
|
|
|
- 已选择：
|
|
|
- <span class="result_name"></span>
|
|
|
+ <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">
|
|
|
@@ -371,9 +415,9 @@
|
|
|
<button class="reset-btn">重置</button>
|
|
|
<button class="save-btn">确认</button>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
- <script src="{{Msg "seo" "cdn"}}/wx_dataExport/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
|
|
|
+
|
|
|
+ <script src="{{Msg "seo" "cdn"}}/wx_dataExport/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
|
|
|
<script src="{{Msg "seo" "cdn"}}/wx_dataExport/js/mapJSON.js?v={{Msg "seo" "version"}}3"></script>
|
|
|
<script src="{{Msg "seo" "cdn"}}/wx_dataExport/js/fastclick.js?v={{Msg "seo" "version"}}"></script>
|
|
|
<script>
|
|
|
@@ -416,14 +460,54 @@
|
|
|
});
|
|
|
function createMoreCity(arr){
|
|
|
var tempHtml = arr.map(function(v) {
|
|
|
- return '<button class="city">' + v.name.replace(/地区$/g, '市') + '</button>'
|
|
|
+ return '<button class="city">' + v.name + '</button>'
|
|
|
}).join('');
|
|
|
return tempHtml
|
|
|
}
|
|
|
//
|
|
|
+ // 判断选中结果是展开还是收起
|
|
|
+ function isOpen(){
|
|
|
+ let pHeight = $('.result_text').height();
|
|
|
+ let minHeight = $('.result_text').css('min-height');
|
|
|
+ let rows = Math.round(Math.round(pHeight)/ parseFloat(minHeight));
|
|
|
+ // console.log("高度："+ pHeight,"最小高度"+ minHeight,"行数：" + rows);
|
|
|
+ if(rows === 1){
|
|
|
+ $('.packup').hide();
|
|
|
+ $('.detail').hide()
|
|
|
+ }else if(rows === 2){
|
|
|
+ // $('.result_text').addClass('line_two')
|
|
|
+ // 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()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 展开收起事件
|
|
|
+ $('.detail').click(function () {
|
|
|
+ $('.result_text').removeClass('line_two');
|
|
|
+ $(".result").css("padding-bottom","0.3rem");
|
|
|
+ $(this).hide();
|
|
|
+ $('.packup').show()
|
|
|
+ });
|
|
|
+ $('.packup').click(function () {
|
|
|
+ $(".result").css("padding-bottom","0.2rem");
|
|
|
+ $('.result_text').addClass('line_two');
|
|
|
+ $(this).hide();
|
|
|
+ $('.detail').show()
|
|
|
+ });
|
|
|
+ //
|
|
|
/* 选中结果 */
|
|
|
function getResult() {
|
|
|
- $('.result_name').empty()
|
|
|
+ $('.result_name').empty();
|
|
|
var data = []; //定义一个总数组
|
|
|
var cityArr =[]; //定义一个选中城市数组
|
|
|
var val = $('.other').parents('.province').text().trim();
|
|
|
@@ -451,8 +535,8 @@
|
|
|
// console.log($(this).parent('.tab_content').find('.city.active').text().trim())
|
|
|
|
|
|
let province = $(this).parent('.tab_content').siblings('.tab:not(.whole)').children('.province').text().trim();
|
|
|
- let city = $(this).html()
|
|
|
- arr.push({name:city,parent:province})
|
|
|
+ let city = $(this).html();
|
|
|
+ arr.push({name:city,parent:province});
|
|
|
// console.log(arr)
|
|
|
for(let i =0;i<arr.length;i++){
|
|
|
// console.log(arr[i])
|
|
|
@@ -488,29 +572,34 @@
|
|
|
for (var i = 0; i < result.length; i++) {
|
|
|
let children = result[i].children;
|
|
|
if( children.length >0){
|
|
|
- html += `<span> ${result[i].name} (</span>`;
|
|
|
+ // 判断每个省份下选中的城市长度，当大于等于4的时候 弹出"选择全省更划算的弹窗"
|
|
|
+ if (children.length >= 4) {
|
|
|
+ $('.tips_btn .tips_d_text').show()
|
|
|
+ }
|
|
|
+ html += `${result[i].name}(`;
|
|
|
for(var j = 0;j < children.length;j++){
|
|
|
if (j != children.length - 1) {
|
|
|
- html += `<span> ${children[j].name}、</span>`
|
|
|
+ html += `${children[j].name}、`
|
|
|
} else {
|
|
|
- html += `<span> ${children[j].name} </span>`
|
|
|
+ html += `${children[j].name}`
|
|
|
}
|
|
|
}
|
|
|
if(i !=result.length -1){
|
|
|
- html += `<span>)</span>、`
|
|
|
+ html += `)、`
|
|
|
}else{
|
|
|
- html += `<span>)</span>`
|
|
|
+ html += `)`
|
|
|
}
|
|
|
|
|
|
}else{
|
|
|
if(i !=result.length -1){
|
|
|
- html += `<span>${result[i].name}、</span>`
|
|
|
+ html += `${result[i].name}、`
|
|
|
}else{
|
|
|
- html += `<span>${result[i].name}</span>`
|
|
|
+ html += `${result[i].name}`
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- $('.result_name').append(html)
|
|
|
+ $('.result_name').append(html);
|
|
|
+ isOpen()
|
|
|
}
|
|
|
//
|
|
|
$(function(){
|
