|
|
@@ -0,0 +1,386 @@
|
|
|
+<template>
|
|
|
+ <view class="pop-view" v-if='visible'>
|
|
|
+ <view class="pop-maskView" :style="{
|
|
|
+ 'background-color': maskBgColor,
|
|
|
+ zIndex: zIndex - 1
|
|
|
+ }" @tap.stop="handleMaskTap"
|
|
|
+ @touchmove.stop.prevent="moveHandle">
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view :class="['pop-contentView',containerVisible ? 'pop-contentView-show' : '']" :style="{zIndex: zIndex}"
|
|
|
+ @touchmove.stop.prevent="moveHandle">
|
|
|
+ <view class="content">
|
|
|
+ <view class="content_top">
|
|
|
+ <view class="content_left">
|
|
|
+ <view class="content_item" @click="type(1)" :style="{background:tab==1?'#f8f8f8':'transparent'}">
|
|
|
+ 城市
|
|
|
+ </view>
|
|
|
+ <view class="content_item" @click="type(2)" :style="{background:tab==2?'#f8f8f8':'transparent'}">
|
|
|
+ 类型
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content_right">
|
|
|
+ <view class="content_city" v-if="tab==1">
|
|
|
+ <view class="city_province">
|
|
|
+ <view class="province_item" v-for="(item1,index1) in region" :key='index1.id' @click="chooceProvince(item1)" :style="{'color':provinceId==item1.id?color1:'#999999','background':provinceId==item1.id?'#FFFFFF':'transparent'}">
|
|
|
+ {{item1.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="city_town">
|
|
|
+ <view class="city_item" v-for="(item2,index2) in cities" :key='item2.id' @click="chooseCity(item2)" :style="{'color':cityId==item2.id?color1:'#999999'}">
|
|
|
+ {{item2.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content_type" v-if="tab==2">
|
|
|
+ <view class="content_type_item" v-for="(item,index) in types" :key='item.value' @click="typeChooce(item)" :style='{color:currentType==item.value?color1:"#999999"}'>
|
|
|
+ {{item.title}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <view class="reset" @click="reset">
|
|
|
+ 重置
|
|
|
+ </view>
|
|
|
+ <view class="confirm" @click="confirm">
|
|
|
+ 确定
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ let region = require('@/static/region.json');
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ title: String,
|
|
|
+ maskColor: {
|
|
|
+ type: String,
|
|
|
+ default: 'rgba(0, 0, 0, 0.3)'
|
|
|
+ },
|
|
|
+ zIndex: {
|
|
|
+ type: Number,
|
|
|
+ default: 999
|
|
|
+ },
|
|
|
+ maskTapHide: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ isShowTitle: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ isShowClose: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ isShowConfirm: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ isScannerOption:{
|
|
|
+ type:Boolean,
|
|
|
+ default:false
|
|
|
+ },
|
|
|
+ marginSize:{
|
|
|
+ type: String,
|
|
|
+ default: '20rpx'
|
|
|
+ },
|
|
|
+ option:[String,Number]
|
|
|
+ },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ containerVisible: false,
|
|
|
+ maskBgColor: '',
|
|
|
+ selectValue: [0],
|
|
|
+ selIdx: 0,
|
|
|
+ color2:'',
|
|
|
+ color1:'',
|
|
|
+ tab:1,
|
|
|
+ types:[
|
|
|
+ {
|
|
|
+ title:"获电",
|
|
|
+ value:1
|
|
|
+ },{
|
|
|
+ title:"获客",
|
|
|
+ value:2
|
|
|
+ },{
|
|
|
+ title:"到访",
|
|
|
+ value:3
|
|
|
+ },{
|
|
|
+ title:"成交",
|
|
|
+ value:4
|
|
|
+ },{
|
|
|
+ title:"注册",
|
|
|
+ value:5
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ currentType:"",
|
|
|
+ region:[],
|
|
|
+ cities:[],
|
|
|
+ province:"",
|
|
|
+ provinceId:"",
|
|
|
+ city:"",
|
|
|
+ cityId:""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ let app = getApp();
|
|
|
+ this.globalData = app.globalData;
|
|
|
+ this.color2 = this.globalData.color2;
|
|
|
+ this.color1 = this.globalData.color1;
|
|
|
+ this.region = region;
|
|
|
+ this.cities = region[0].children[0].children;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ show() {
|
|
|
+ this.visible = true
|
|
|
+ setTimeout(() => {
|
|
|
+ this.maskBgColor = this.maskColor
|
|
|
+ this.containerVisible = true
|
|
|
+ }, 20)
|
|
|
+ console.log("regin",region)
|
|
|
+ this.tab = this.option;
|
|
|
+ },
|
|
|
+ hide() {
|
|
|
+ this.maskBgColor = ''
|
|
|
+ this.containerVisible = false
|
|
|
+ this.visible = false
|
|
|
+ this.$emit('close')
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ this.hide()
|
|
|
+ },
|
|
|
+ handleConfirm() {
|
|
|
+ this.hide()
|
|
|
+ this.$emit('confirm')
|
|
|
+ },
|
|
|
+ handleMaskTap() {
|
|
|
+ if (this.maskTapHide) {
|
|
|
+ this.hide()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ moveHandle() {},
|
|
|
+ type(tab){
|
|
|
+ this.tab = tab;
|
|
|
+ },
|
|
|
+ typeChooce(item){
|
|
|
+ this.currentType = item.value
|
|
|
+ },
|
|
|
+ chooceProvince(item){
|
|
|
+ this.cities = item.children;
|
|
|
+ this.province = item.name;
|
|
|
+ this.provinceId = item.id;
|
|
|
+ },
|
|
|
+ chooseCity(item){
|
|
|
+ this.city = item.name;
|
|
|
+ this.cityId = item.id;
|
|
|
+ },
|
|
|
+ reset(){
|
|
|
+ if(this.tab==1){
|
|
|
+ this.city = "";
|
|
|
+ this.cityId = "";
|
|
|
+ this.province = "";
|
|
|
+ this.provinceId = "";
|
|
|
+ }else {
|
|
|
+ this.currentType = "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ confirm(){
|
|
|
+ let param = {
|
|
|
+ type:this.currentType,
|
|
|
+ city:this.city,
|
|
|
+ }
|
|
|
+ this.$emit('chooiceType',param)
|
|
|
+ this.handleConfirm()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .pop-view {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .pop-maskView {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .pop-contentView {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ overflow-y: scroll;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+
|
|
|
+ .pop-title {
|
|
|
+ margin-top: 60rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: Verdana, Verdana-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pop-close {
|
|
|
+ position: absolute;
|
|
|
+ top: 64rpx;
|
|
|
+ right: 30rpx;
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pop-commit {
|
|
|
+ margin-bottom: 54rpx;
|
|
|
+ width: 260rpx;
|
|
|
+ height: 84rpx;
|
|
|
+ line-height: 84rpx;
|
|
|
+ border-radius: 42rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pop-contentView-show {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .content{
|
|
|
+ width: 100%;
|
|
|
+ .content_top{
|
|
|
+ width: 100%;
|
|
|
+ height: 470rpx;
|
|
|
+ display: flex;
|
|
|
+ .content_left{
|
|
|
+ width: 140rpx;
|
|
|
+ height: 470rpx;
|
|
|
+ background: #f0f1f2;
|
|
|
+ padding-top: 50rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .content_item{
|
|
|
+ width: 140rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content_right{
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 476rpx;
|
|
|
+ .content_city{
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .city_province{
|
|
|
+ width: 280rpx;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-top: 50rpx;
|
|
|
+ background: #f8f8f8;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: scroll;
|
|
|
+ .province_item{
|
|
|
+ width: 280rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .city_town{
|
|
|
+ overflow-y: scroll;
|
|
|
+ padding-top: 50rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .city_item{
|
|
|
+ width: 300rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .content_type{
|
|
|
+ padding-top: 40rpx;
|
|
|
+ padding-left: 60rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .content_type_item{
|
|
|
+ line-height: 75rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom{
|
|
|
+ width: 100%;
|
|
|
+ height: 140rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .reset{
|
|
|
+ width: 156rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ background: #f8f8f8;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: Verdana, Verdana-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ color: #f07423;
|
|
|
+ }
|
|
|
+ .confirm{
|
|
|
+ width: 444rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ background: #f07423;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: Verdana, Verdana-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
