|
|
@@ -1,240 +1,249 @@
|
|
|
<template>
|
|
|
- <view class="main" @touchmove.stop.prevent>
|
|
|
- <view class="zhezao" v-if="isShow" @tap.stop="isClose_city"></view>
|
|
|
- <view class="picker" v-if="isShow">
|
|
|
- <view class="title">
|
|
|
- <view class="cancel" @tap.stop="isClose_city">取消</view>
|
|
|
- <view class="text">选择省市区街道</view>
|
|
|
- <view class="comfim" @tap="confim_city">确定</view>
|
|
|
- </view>
|
|
|
- <view class="tab">
|
|
|
- <text v-if="province && level >= 1" :class="selectTabIndex == 1? 'active':''" @tap="selectTap(1)">{{province}}</text>
|
|
|
- <text v-if="province_id && level >= 2" :class="selectTabIndex == 2? 'active':''" @tap="selectTap(2)">{{city}}</text>
|
|
|
- <text v-if="city_id && level >= 3" :class="selectTabIndex == 3? 'active':''" @tap="selectTap(3)">{{area}}</text>
|
|
|
- <text v-if="area_id && level >= 4" style="width: 200rpx;" :class="selectTabIndex == 4? 'active':''" @tap="selectTap(4)">{{street}}</text>
|
|
|
- </view>
|
|
|
- <view class="title1">选择省市区街道</view>
|
|
|
- <scroll-view scroll-y="true" class="scroll-Y" style="max-height: 800rpx;">
|
|
|
- <view class="list" v-for="(item,index) in dataList" :key="index">
|
|
|
- <view class="item" @tap="selectItem(item)">
|
|
|
- <text>{{item.name}}</text>
|
|
|
- <!-- <image v-show="selectIndex == index" src="../static/image/order/choosed.png" mode="aspectFill"></image> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="main" @touchmove.stop.prevent>
|
|
|
+ <view class="zhezao" v-if="isShow" @tap.stop="isClose_city"></view>
|
|
|
+ <view class="picker" v-if="isShow">
|
|
|
+ <view class="title">
|
|
|
+ <view class="cancel" @tap.stop="isClose_city">取消</view>
|
|
|
+ <view class="text">选择省市区街道</view>
|
|
|
+ <view class="comfim" @tap="confim_city">确定</view>
|
|
|
+ </view>
|
|
|
+ <view class="tab">
|
|
|
+ <text v-if="province && level >= 1" :class="selectTabIndex == 1 ? 'active' : ''" @tap="selectTap(1)">{{
|
|
|
+ province
|
|
|
+ }}</text>
|
|
|
+ <text v-if="province_id && level >= 2" :class="selectTabIndex == 2 ? 'active' : ''" @tap="selectTap(2)">{{
|
|
|
+ city
|
|
|
+ }}</text>
|
|
|
+ <text v-if="city_id && level >= 3" :class="selectTabIndex == 3 ? 'active' : ''" @tap="selectTap(3)">{{
|
|
|
+ area
|
|
|
+ }}</text>
|
|
|
+ <text
|
|
|
+ v-if="area_id && level >= 4"
|
|
|
+ style="width: 200rpx"
|
|
|
+ :class="selectTabIndex == 4 ? 'active' : ''"
|
|
|
+ @tap="selectTap(4)"
|
|
|
+ >{{ street }}</text
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="title1">选择省市区街道</view>
|
|
|
+ <scroll-view scroll-y="true" class="scroll-Y" style="max-height: 800rpx">
|
|
|
+ <view class="list" v-for="(item, index) in dataList" :key="index">
|
|
|
+ <view class="item" @tap="selectItem(item)">
|
|
|
+ <text>{{ item.name }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- props:{
|
|
|
- dataList: {
|
|
|
- type: Array,
|
|
|
- default: () => []
|
|
|
- },
|
|
|
- level: {
|
|
|
- type: Number,
|
|
|
- default: 4
|
|
|
- },
|
|
|
- isShow: false
|
|
|
- },
|
|
|
- data(){
|
|
|
- return {
|
|
|
- selectTabIndex: 1, // 1==省 2=市 3=区 4=街道
|
|
|
- province: '选择省', //省
|
|
|
- province_id: '', // 省id
|
|
|
- city: '选择市', // 城市
|
|
|
- city_id: '', //城市id
|
|
|
- area: '选择区', // 区
|
|
|
- area_id: '', // 区id
|
|
|
- street: '选择街道', // 街道
|
|
|
- street_id: '', // 街道id
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- },
|
|
|
- methods:{
|
|
|
- selectTap(index){
|
|
|
- this.selectTabIndex = index
|
|
|
- if(index == 1){
|
|
|
- this.$emit("getCityData",'')
|
|
|
- }else if(index == 2){
|
|
|
- this.$emit("getCityData",this.province_id)
|
|
|
- }else if(index == 3){
|
|
|
- this.$emit("getCityData",this.city_id)
|
|
|
- }else if(index == 4){
|
|
|
- this.$emit("getCityData",this.area_id)
|
|
|
- }
|
|
|
- },
|
|
|
- selectItem(item){
|
|
|
- console.log(item)
|
|
|
- if(this.selectTabIndex == 1){
|
|
|
- if(this.province != item.name){
|
|
|
- this.city_id = ''
|
|
|
- this.city = '选择市'
|
|
|
- this.area_id = ''
|
|
|
- this.area = '选择区'
|
|
|
- this.street_id = ''
|
|
|
- this.street = '选择街道'
|
|
|
- }
|
|
|
- this.province_id = item.id
|
|
|
- this.province = item.name
|
|
|
- if(this.selectTabIndex >= this.level) return false;
|
|
|
- this.selectTabIndex = 2
|
|
|
- this.$emit("getCityData",item.id)
|
|
|
- }else if(this.selectTabIndex == 2){
|
|
|
- if(this.city != item.name){
|
|
|
- this.area_id = ''
|
|
|
- this.area = '选择区'
|
|
|
- this.street_id = ''
|
|
|
- this.street = '选择街道'
|
|
|
- }
|
|
|
- this.city_id = item.id
|
|
|
- this.city = item.name
|
|
|
- if(this.selectTabIndex >= this.level) return false;
|
|
|
- this.selectTabIndex = 3
|
|
|
- this.$emit("getCityData",item.id)
|
|
|
- }else if(this.selectTabIndex == 3){
|
|
|
- if(this.area != item.name){
|
|
|
- this.street_id = ''
|
|
|
- this.street = '选择街道'
|
|
|
- }
|
|
|
- this.area_id = item.id
|
|
|
- this.area = item.name
|
|
|
- if(this.selectTabIndex >= this.level) return false;
|
|
|
- this.selectTabIndex = 4
|
|
|
- this.$emit("getCityData",item.id)
|
|
|
- }else if(this.selectTabIndex == 4){
|
|
|
- this.street_id = item.id
|
|
|
- this.street = item.name
|
|
|
- }
|
|
|
- },
|
|
|
- // searchList(){
|
|
|
- // this.$emit("getProductType",this.keyword)
|
|
|
- // },
|
|
|
- isClose_city(){
|
|
|
- this.$emit("isClose_city", false)
|
|
|
- },
|
|
|
- confim_city(){
|
|
|
- if(!this.province_id && this.level >= 1){
|
|
|
- uni.showToast({
|
|
|
- title: '请选择省',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return
|
|
|
- }else if(!this.city_id && this.level >= 2){
|
|
|
- uni.showToast({
|
|
|
- title: '请选择市',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return
|
|
|
- }else if(!this.area_id && this.level >= 3){
|
|
|
- uni.showToast({
|
|
|
- title: '请选择区',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return
|
|
|
- }else if(!this.street_id && this.level >= 4){
|
|
|
- uni.showToast({
|
|
|
- title: '请选择街道',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return
|
|
|
- }else{
|
|
|
- const obj = {
|
|
|
- province: this.province, //省
|
|
|
- province_id: this.province_id, // 省id
|
|
|
- city: this.city, // 城市
|
|
|
- city_id: this.city_id, //城市id
|
|
|
- area: this.area, // 区
|
|
|
- area_id: this.area_id, // 区id
|
|
|
- street: this.street, // 街道
|
|
|
- street_id: this.street_id // 街道id
|
|
|
- }
|
|
|
- this.$emit("confim_city",obj)
|
|
|
- this.isClose_city()
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ dataList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ level: {
|
|
|
+ type: Number,
|
|
|
+ default: 4
|
|
|
+ },
|
|
|
+ isShow: false
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ selectTabIndex: 1, // 1==省 2=市 3=区 4=街道
|
|
|
+ province: '选择省', //省
|
|
|
+ province_id: '', // 省id
|
|
|
+ city: '选择市', // 城市
|
|
|
+ city_id: '', //城市id
|
|
|
+ area: '选择区', // 区
|
|
|
+ area_id: '', // 区id
|
|
|
+ street: '选择街道', // 街道
|
|
|
+ street_id: '' // 街道id
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {},
|
|
|
+ methods: {
|
|
|
+ selectTap(index) {
|
|
|
+ this.selectTabIndex = index
|
|
|
+ if (index == 1) {
|
|
|
+ this.$emit('getCityData', '')
|
|
|
+ } else if (index == 2) {
|
|
|
+ this.$emit('getCityData', this.province_id)
|
|
|
+ } else if (index == 3) {
|
|
|
+ this.$emit('getCityData', this.city_id)
|
|
|
+ } else if (index == 4) {
|
|
|
+ this.$emit('getCityData', this.area_id)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectItem(item) {
|
|
|
+ console.log(item)
|
|
|
+ if (this.selectTabIndex == 1) {
|
|
|
+ if (this.province != item.name) {
|
|
|
+ this.city_id = ''
|
|
|
+ this.city = '选择市'
|
|
|
+ this.area_id = ''
|
|
|
+ this.area = '选择区'
|
|
|
+ this.street_id = ''
|
|
|
+ this.street = '选择街道'
|
|
|
+ }
|
|
|
+ this.province_id = item.id
|
|
|
+ this.province = item.name
|
|
|
+ if (this.selectTabIndex >= this.level) return false
|
|
|
+ this.selectTabIndex = 2
|
|
|
+ this.$emit('getCityData', item.id)
|
|
|
+ } else if (this.selectTabIndex == 2) {
|
|
|
+ if (this.city != item.name) {
|
|
|
+ this.area_id = ''
|
|
|
+ this.area = '选择区'
|
|
|
+ this.street_id = ''
|
|
|
+ this.street = '选择街道'
|
|
|
+ }
|
|
|
+ this.city_id = item.id
|
|
|
+ this.city = item.name
|
|
|
+ if (this.selectTabIndex >= this.level) return false
|
|
|
+ this.selectTabIndex = 3
|
|
|
+ this.$emit('getCityData', item.id)
|
|
|
+ } else if (this.selectTabIndex == 3) {
|
|
|
+ if (this.area != item.name) {
|
|
|
+ this.street_id = ''
|
|
|
+ this.street = '选择街道'
|
|
|
+ }
|
|
|
+ this.area_id = item.id
|
|
|
+ this.area = item.name
|
|
|
+ if (this.selectTabIndex >= this.level) return false
|
|
|
+ this.selectTabIndex = 4
|
|
|
+ this.$emit('getCityData', item.id)
|
|
|
+ } else if (this.selectTabIndex == 4) {
|
|
|
+ this.street_id = item.id
|
|
|
+ this.street = item.name
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // searchList(){
|
|
|
+ // this.$emit("getProductType",this.keyword)
|
|
|
+ // },
|
|
|
+ isClose_city() {
|
|
|
+ this.$emit('isClose_city', false)
|
|
|
+ },
|
|
|
+ confim_city() {
|
|
|
+ if (!this.province_id && this.level >= 1) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请选择省',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ } else if (!this.city_id && this.level >= 2) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请选择市',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ } else if (!this.area_id && this.level >= 3) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请选择区',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ } else if (!this.street_id && this.level >= 4) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请选择街道',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ const obj = {
|
|
|
+ province: this.province, //省
|
|
|
+ province_id: this.province_id, // 省id
|
|
|
+ city: this.city, // 城市
|
|
|
+ city_id: this.city_id, //城市id
|
|
|
+ area: this.area, // 区
|
|
|
+ area_id: this.area_id, // 区id
|
|
|
+ street: this.street, // 街道
|
|
|
+ street_id: this.street_id // 街道id
|
|
|
+ }
|
|
|
+ this.$emit('confim_city', obj)
|
|
|
+ this.isClose_city()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- .main{
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- z-index: 1000;
|
|
|
- .zhezao{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba($color: #000000, $alpha: .5);
|
|
|
- }
|
|
|
- .title{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- font-weight: 700;
|
|
|
- margin-bottom: 36rpx;
|
|
|
- }
|
|
|
- .title1{
|
|
|
- margin-top: 16rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #999999;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- }
|
|
|
- .tab{
|
|
|
- width: 100%;
|
|
|
- height: 100rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- border-top: 1rpx solid #eeeeee;
|
|
|
- border-bottom: 1rpx solid #eeeeee;
|
|
|
- text{
|
|
|
- width: 150rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .active{
|
|
|
- color: #007FFF;
|
|
|
- }
|
|
|
- }
|
|
|
- .picker{
|
|
|
- width: 100%;
|
|
|
- // min-height: 800rpx;
|
|
|
- height: 1100rpx;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- background: #ffffff;
|
|
|
- z-index: 11;
|
|
|
- border-radius: 40rpx 40rpx 0 0;
|
|
|
- padding: 40rpx 28rpx 10rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #333333;
|
|
|
- padding-bottom: 100rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- .list{
|
|
|
- font-size: 28rpx;
|
|
|
- padding-left: 22rpx;
|
|
|
- .item{
|
|
|
- width: 100%;
|
|
|
- height: 68rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- image{
|
|
|
- width: 24rpx;
|
|
|
- height: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .active{
|
|
|
- color: #007FFF;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
+.main {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1000;
|
|
|
+ .zhezao {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba($color: #000000, $alpha: 0.5);
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 36rpx;
|
|
|
+ }
|
|
|
+ .title1 {
|
|
|
+ margin-top: 16rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999999;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .tab {
|
|
|
+ width: 100%;
|
|
|
+ height: 100rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-top: 1rpx solid #eeeeee;
|
|
|
+ border-bottom: 1rpx solid #eeeeee;
|
|
|
+ text {
|
|
|
+ width: 150rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ color: #007fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .picker {
|
|
|
+ width: 100%;
|
|
|
+ // min-height: 800rpx;
|
|
|
+ height: 1100rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: #ffffff;
|
|
|
+ z-index: 11;
|
|
|
+ border-radius: 40rpx 40rpx 0 0;
|
|
|
+ padding: 40rpx 28rpx 10rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ padding-bottom: 100rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .list {
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding-left: 22rpx;
|
|
|
+ .item {
|
|
|
+ width: 100%;
|
|
|
+ height: 68rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ image {
|
|
|
+ width: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ color: #007fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
aXin-0810