<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">
<scroll-view scroll-y="true" 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>
</scroll-view>
<scroll-view scroll-y="true" 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>
</scroll-view>
</view>
<view class="content_type" v-if="tab==2">
<view class="content_type_item" v-for="(item,index) in types" :key='item.id' @click="typeChooce(item)" :style='{color:currentType==item.id?color1:"#999999"}'>
{{item.name}}
</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'
},
},
data() {
return {
visible: false,
containerVisible: false,
maskBgColor: '',
selectValue: [0],
selIdx: 0,
color2:'',
color1:'',
tab:1,
types:[],
currentType:"",
region:[],
cities:[],
province:"",
provinceId:"",
city:"",
cityId:"",
typeName:"",
}
},
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;
},
methods: {
async queryCategoryBox(){
let res = await this.$myRequest({
url: "/task/queryCategoryBox",
data: {
whetherBox: false
}
})
if(res.data.success){
this.types = res.data.list||[];
}
},
setOptionType(option){
this.tab = option;
},
show() {
this.visible = true
setTimeout(() => {
this.maskBgColor = this.maskColor
this.containerVisible = true
}, 20)
console.log("regin",region)
this.queryCategoryBox();
},
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.id;
this.typeName = item.name;
},
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(){
this.city = "";
this.cityId = "";
this.province = "";
this.provinceId = "";
this.currentType = "";
this.typeName = "";
},
confirm(){
let param = {
type:this.currentType,
typeName:this.typeName,
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: 100%;
.content_city{
display: flex;
height: 100%;
box-sizing: border-box;
.city_province{
width: 280rpx;
min-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>