<template>
? <div class="percentloop">
? ? ?<!-- 地區(qū)選擇 -->
? ? ? <section class="section">
? ? ? ? <p class="tittle">
? ? ? ? ? <span class="important_font">*</span>
? ? ? ? ? <span>地區(qū)篩選</span>
? ? ? ? </p>
?
? ? ? ? <div class="box">
? ? ? ? ? <div class="area">
? ? ? ? ? ? <!-- 省 -->
? ? ? ? ? ? <li class="area-menu province-list">
? ? ? ? ? ? ? <div class="area-msg" @click.stop="show(0)">
? ? ? ? ? ? ? ? {{areaList[province].provinceName}}
? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? <ul v-show="showindex[0]">
? ? ? ? ? ? ? ? <li v-for="(item,index) in areaList" :key="index"
? ? ? ? ? ? ? ? ? @click.stop="selprovinceName(index,item.provinceName)">
? ? ? ? ? ? ? ? ? {{item.provinceName}}
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </li>
? ? ? ? ? ? <span class="text">省</span>
?
? ? ? ? ? ? <!-- 市 -->
? ? ? ? ? ? <li class="area-menu city-list">
? ? ? ? ? ? ? <div class="area-msg" @click.stop="show(1)">
? ? ? ? ? ? ? ? {{areaList[province].areaVOList[cityIndex].cityName}}
? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? <ul v-show="showindex[1]">
? ? ? ? ? ? ? ? <li v-for="(item,index) in areaList[province].areaVOList" :key="index"
? ? ? ? ? ? ? ? ? @click.stop="selcityName(index,item.cityName)">
? ? ? ? ? ? ? ? ? {{item.cityName}}
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </li>
? ? ? ? ? ? <span class="text">市</span>
?
? ? ? ? ? ? <!-- 區(qū) -->
? ? ? ? ? ? <li class="area-menu region-list">
? ? ? ? ? ? ? <div class="area-msg" @click.stop="show(2)">
? ? ? ? ? ? ? ? {{areaList[province].areaVOList[cityIndex].areaVOList[countyIndex].countyName}}
? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? <ul v-show="showindex[2]" style="right:-40px;">
? ? ? ? ? ? ? ? <li v-for="(item,index) in areaList[province].areaVOList[cityIndex].areaVOList" :key="index"
? ? ? ? ? ? ? ? ? @click.stop="selcountyName(index,item.countyName)">
? ? ? ? ? ? ? ? ? {{item.countyName}}</li>
? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </li>
?
? ? ? ? ? ? <span class="text">區(qū)/縣</span>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </section>
?
?
? </div>
</template>
?
<script>
? let data = {
? ? areaList: [], //省市區(qū)三級聯(lián)動的數(shù)據(jù)
? ? ? ? InitializeList: [], //我寫得聯(lián)動數(shù)據(jù)
?
? ? ? ? showindex: [false, false, false], //控制省市區(qū)彈框顯示
?
? ? ? ? province: 0, //默認省下標
? ? ? ? cityIndex: 0, //默認市下標
? ? ? ? countyIndex: 0, //默認區(qū)下標
?
? ? ? ? istoubi: false,
? ? ? ? selectType: 0, //默認廣告類型索引 ? 全部
? ? ? ? attr1Index: -1, //默認廣告位置類型索引 ??
? ? ? ? attr2Index: -1, //默認設(shè)備類型索引 ? ?
?
? ? ? ? //發(fā)送給后臺的值
? ? ? ? address_str: ['全部', '全部', '全部'], //地址
?
? ? ? ? select_parmas: {
? ? ? ? ? county: '全部,全部,全部', //省市區(qū)
? ? ? ? ? selectTypeID: -1, //選擇的廣告類型id
? ? ? ? ? selectAttr1ID: -1, //選擇的廣告位置id
? ? ? ? ? selectAttr2ID: -1, //選擇的設(shè)備類型id
? ? ? ? }
? }
?
? $('html').click(function (e) {
? ? data.showindex = [false, false, false]
? })
?
? import Area from '../../static/json/area.json'
?
? export default {
? ? data() {
? ? ? return data
? ? },
? ? created() {
? ? ? console.log(this.area)
? ? ? this.areaList = this.area[0];
?
? ? ? // console.log(Area)
? ? ? // this.areaList = Area[0];
? ? },
?
? ? methods: {
?
? ? ?//顯示下拉框
? ? ? show(index) {
? ? ? ? let arr = [...this.showindex];
? ? ? ? //彈框顯示時 直接全部隱藏
? ? ? ? if (arr[index] == true) {
? ? ? ? ? arr = [false, false, false]
? ? ? ? } else {
? ? ? ? ? arr = [false, false, false] //初始化全部隱藏
? ? ? ? ? arr[index] = true
? ? ? ? }
?
? ? ? ? this.showindex = arr;
? ? ? },
?
? ? ? //省的點擊事件
? ? ? selprovinceName(index, value) {
? ? ? ? this.showindex = [false, false, false]
?
? ? ? ? this.province = index;
? ? ? ? this.cityIndex = 0; //默認市下標
? ? ? ? this.countyIndex = 0; //默認區(qū)下標
?
? ? ? ? let address = [...this.address_str]
? ? ? ? address[0] = value;
? ? ? ? this.address_str = address;
?
? ? ? },
?
? ? ? //市的點擊事件
? ? ? selcityName(index, value) {
? ? ? ? this.showindex = [false, false, false]
? ? ? ? this.cityIndex = index;
? ? ? ? this.countyIndex = 0; //默認區(qū)下標
?
? ? ? ? let address = [...this.address_str]
? ? ? ? address[1] = value;
? ? ? ? this.address_str = address;
? ? ? },
?
? ? ? //區(qū)的點擊事件
? ? ? selcountyName(index, value) {
? ? ? ? this.showindex = [false, false, false]
? ? ? ? this.countyIndex = index;
?
? ? ? ? let address = [...this.address_str]
? ? ? ? address[2] = value;
? ? ? ? this.address_str = address;
? ? ? },
?
? ? },
?
? }
?
</script>
?
<style scoped lang="scss">
? @import "../common/common";
? .section {
? ? ? box-sizing: border-box;
? ? ? margin-bottom: 0.38rem;
?
? ? ? .tittle {
? ? ? ? margin-bottom: 0.2rem;
? ? ? }
?
? ? ? .box {
? ? ? ? .labelspan {
? ? ? ? ? margin-right: 0.18rem;
? ? ? ? ? margin-bottom: 0.19rem;
? ? ? ? ? box-sizing: border-box;
? ? ? ? }
?
? ? ? ? //視頻時長
? ? ? ? .longvalue {
? ? ? ? ? display: flex;
? ? ? ? ? flex-wrap: nowrap;
? ? ? ? ? align-items: center;
? ? ? ? ? margin-bottom: 0.1rem;
?
? ? ? ? ? .time_box {
? ? ? ? ? ? width: 1.6rem;
? ? ? ? ? ? height: 0.56rem;
? ? ? ? ? ? line-height: 0.56rem;
? ? ? ? ? ? border: 1px solid rgba(230, 230, 230, 1);
? ? ? ? ? ? border-radius: 0.1rem;
? ? ? ? ? ? padding-left: 0.38rem;
? ? ? ? ? ? margin: 0 0.17rem;
?
? ? ? ? ? }
? ? ? ? }
?
?
? ? ? ? //選擇投放時間
? ? ? ? .slect {
? ? ? ? ? width: 100%;
? ? ? ? ? line-height: 0.56rem;
? ? ? ? ? border: 1px solid rgba(230, 230, 230, 1);
? ? ? ? ? border-radius: 0.1rem;
? ? ? ? ? padding-left: 0.2rem;
? ? ? ? ? color: #4984EB;
? ? ? ? }
?
? ? ? ? //選擇時間段
? ? ? ? .slect_time {
? ? ? ? ? display: flex;
? ? ? ? ? flex-wrap: nowrap;
? ? ? ? ? align-items: center;
?
? ? ? ? ? .middle {
? ? ? ? ? ? margin: 0 0.24rem;
? ? ? ? ? ? line-height: 0.56rem;
? ? ? ? ? }
?
? ? ? ? ? .time_box {
? ? ? ? ? ? width: 1.6rem;
? ? ? ? ? ? height: 0.56rem;
? ? ? ? ? ? line-height: 0.56rem;
? ? ? ? ? ? border: 1px solid rgba(230, 230, 230, 1);
? ? ? ? ? ? border-radius: 0.1rem;
? ? ? ? ? ? padding-left: 0.38rem;
? ? ? ? ? }
? ? ? ? }
?
?
? ? ? }
?
? ? ? .tip {
? ? ? ? // ? margin-top:?
? ? ? }
? ? }
?
?
? ? ? .area {
? ? display: flex;
? ? flex-wrap: nowrap;
? ? align-items: center;
?
? ? .text {
? ? ? margin: 0 0.15rem;
? ? }
?
? ? .area-menu {
? ? ? position: relative;
? ? ? display: inline-block;
?
? ? ? .area-msg {
? ? ? ? width: 1.5rem;
? ? ? ? height: 0.56rem;
? ? ? ? line-height: 0.56rem;
? ? ? ? background-color: #fff;
? ? ? ? border: 1px solid #dcdcdc;
? ? ? ? border-radius: 0.1rem;
? ? ? ? text-align: center;
? ? ? ? overflow: hidden;
? ? ? }
?
? ? ? ul {
? ? ? ? position: absolute;
? ? ? ? top: 0.57rem;
? ? ? ? width: 160px;
? ? ? ? height: auto;
? ? ? ? max-height: 180px;
? ? ? ? font-size: 14px;
? ? ? ? overflow-y: scroll;
? ? ? ? background-color: #fff;
? ? ? ? border: 1px solid #ddd;
? ? ? ? border-radius: 4px;
?
? ? ? ? li {
? ? ? ? ? text-align: center;
? ? ? ? ? height: 30px;
? ? ? ? ? line-height: 30px;
? ? ? ? }
? ? ? }
? ? }
? }
?
</style>