wangluohuoyun-app/pages/goodSource/selectCity.vue

<template>
	<view>
		<u-navbar :title="title" @leftClick='back' :placeholder='true'>
		</u-navbar>
		<view class="row1">
			<view class="start-place" :class="type==0?'active1':''" @click="changeCity(0)">选择发货地</view>
			<view class="end-place" :class="type==1?'active1':''" @click="changeCity(1)">选择收货地</view>
		</view>
		<view class="container">
			<view class="row2">
				<view class="content1" v-if="type==0">
					<view class="history-city-title">历史发货地</view>
					<view class="city-list">
						<view class="city" v-for="(item,index) in historyFcityList" :key='index'>
							{{item}}
						</view>
					</view>
				</view>
				<view class="content2" v-if="type==1">
					<view class="history-city-title">历史收货地</view>
					<view class="city-list">
						<view class="city" v-for="(item,index) in historyScityList" :key='index'>
							{{item}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="page">
			<view class="title flex flex-space-between">
				<view class="flex nav-bag-left">
					<view class="flex" :class="(type==0?fstatus:sstatus)==0?'select-active':''" @click="titleClick(0)">
						<view class="tt point">{{type==0?fchooseprovince:schooseprovince}}</view>
						<view v-if="type==0?fchooseprovince:schooseprovince" style="margin: 0 10rpx;">></view>
					</view>
					<view class="flex" v-if="(type==0?fchooseprovince:schooseprovince)!='选择'"
						:class="(type==0?fstatus:sstatus)==1?'select-active':''" @click="titleClick(1)">
						<view class="tt point nav-point">{{type==0?fchoosecity:schoosecity}}</view>
						<view v-if="type==0?fchoosecity:schoosecity" style="margin: 0 10rpx;">></view>
					</view>
					<view class="tt area"
						v-if="(type==0?fchooseprovince:schooseprovince)!='选择'&&(type==0?fchoosecity:schoosecity)!='请选择市'&&(type==0?fchoosecity:schoosecity)!='全部'"
						:class="(type==0?fstatus:sstatus)==2?'select-active':''" @click="titleClick(2)">
						{{type==0?fchoosearea:schoosearea}}
					</view>
				</view>
				<view class="back-level" v-if="(type==0?fstatus:sstatus)!=0" @click="backLevel">返回上一级</view>
			</view>

			<view class="link">
				<!-- 省 -->
				<view class="container" v-if="(type==0?fstatus:sstatus)==0">
					<view class="content-item" :class="index ==(type==0?isfprovince:issprovince) ?'active':''"
						@click="selectProvince(item, index,(type==0?fstatus:sstatus))"
						v-for="(item,index) in (type==0?fprovincelist:sprovincelist)" :key="index">
						{{item.label}}
					</view>
				</view>
				<!-- 市 -->
				<view class="container" v-if="(type==0?fstatus:sstatus)==1">
					<view class="content-item" :class="index == (type==0?isfcity:isscity)?'active':''"
						@click="selectCity(item, index,type==0?fstatus:sstatus)"
						v-for="(item,index) in (type==0?fcitylist:scitylist)" :key="index">
						{{item.label}}
					</view>
				</view>
				<!-- index ==(type==0?isfarea:issarea) -->
				<!-- 区 -->
				<view class="container" v-if="(type==0?fstatus:sstatus)==2">
					<view class="content-item" :class="item.checked?'active':''"
						@click="selectaArea(item, index,(type==0?fstatus:sstatus))"
						v-for="(item,index) in (type==0?farealist:sarealist)" :key="index">
						{{item.label}}

					</view>
				</view>
			</view>
		</view>
		<u-button class="btn" @click="confirmBtn">确定</u-button>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		address
	} from '@/components/data/data.js'
	export default {
		data() {
			return {
				fstatus: 0,
				sstatus: 0,
				isfprovince: null,
				isfcity: null,
				isfarea: null,
				issprovince: null,
				isscity: null,
				issarea: null,
				fprovincelist: [],
				sprovincelist: [],
				fcitylist: [],
				scitylist: [],
				farealist: [],
				sarealist: [],
				fchooseprovince: '选择',
				fchoosecity: '请选择市',
				fchoosearea: '请选择区',
				schooseprovince: '选择',
				schoosecity: '请选择市',
				schoosearea: '请选择区',
				heightCot: 0,
				historyFcityList: [],
				historyScityList: [],
				title: '',
				type: 0,
				count: 0,
				ftitle: '',
				stitle: '',
			}
		},
		created() {
			this.fprovincelist = address
			this.sprovincelist = address
			console.log('---------------------------------')
			console.log(this.type)
		},
		onLoad(options) {
			console.log(options)
			this.type = options.type
			this.title = options.startPlace + '→' + options.endPlace
		},
		methods: {
			confirmBtn() {
				debugger
				//判断是否点击了选项
				if (this.fchooseprovince == '选择') {
					this.$refs.uToast.show({
						type: 'error',
						message: "请选择省或直辖市",
					})
				}
				//设置地区
				if (this.type == 0) {
					// this.fchooseprovince
					// this.fchoosecity
					// this.fchoosearea


				} else {
					// schooseprovince
					// schoosecity
					// schoosearea
				}
			},
			//返回上一级
			backLevel() {
				// this.count=0;
				if (this.type == 0) {
					this.fstatus--
				} else {
					this.sstatus--
				}
				if ((this.type == 0 ? this.fstatus : this.sstatus) == 1) {
					if (this.type == 0) {
						this.fchoosecity = '请选择市'
						this.fchoosearea = ''
						this.ftitle = ''
						this.isfcity = null
					} else {
						this.schoosecity = '请选择市'
						this.schoosearea = ''
						this.stitle = ''
						this.isscity = null
					}
				} else if ((this.type == 0 ? this.fstatus : this.sstatus) == 0) {
					if (this.type == 0) {
						this.fchooseprovince = '选择'
						this.isfprovince = null
					} else {
						this.schooseprovince = '选择'
						this.issprovince = null
					}
				}
			},
			// 点击面包屑导航
			titleClick(status) {
				debugger
				this.ftitle = ''
				this.stitle = ''
				this.count = 0
				if (this.type == 0) {
					this.fstatus = status
					this.isfprovince = null
					this.isfcity = null
					this.isfarea = null
					if (this.fchoosecity == '全部') return;
				} else {
					this.sstatus = status
					this.issprovince = null
					this.isscity = null
					this.issarea = null
					if (this.fchoosecity == '全部') return;
				}


				if (status == 0) {
					if (this.type == 0) {
						this.fchooseprovince = '选择'
						this.fchoosecity = '请选择市'
						this.fchoosearea = '请选择区'
					} else {
						this.schooseprovince = '选择'
						this.schoosecity = '请选择市'
						this.schoosearea = '请选择区'
					}

				} else if (status == 1) {
					if (this.type == 0) {
						this.fchoosecity = '请选择市'
						this.fchoosearea = '请选择区'
					} else {
						this.schoosecity = '请选择市'
						this.schoosearea = '请选择区'
					}
				}
			},
			// 选择省
			selectProvince(item, i, statusIndex) {
				debugger
				this.count = 0;
				if (this.type == 0) {
					if (i == 0) {
						this.$refs.uToast.show({
							type: 'error',
							message: "发货地不可选择全国！",
						})
						return
					}
					this.fchoosecity = '请选择市'
					this.fchoosearea = '请选择区'
					this.isfprovince = i
				} else {
					this.schoosecity = '请选择市'
					this.schoosearea = '请选择区'
					this.issprovince = i
				}
				if (item.child) {
					if (this.type == 0) {
						this.fcitylist = item.child
					} else {
						this.scitylist = item.child
					}

				}
				// this.setchose(1)
				if (this.type == 0) {
					this.fchooseprovince = item.label
				} else {
					this.schooseprovince = item.label
				}
				if ((this.type == 0 ? this.fchoosecity : this.schoosecity) != '全部') {
					if (this.type == 0) {
						this.fstatus = statusIndex + 1
					} else {
						this.sstatus = statusIndex + 1
					}

				}
			},
			// 选择市
			selectCity(item, i, statusIndex) {
				this.count = 0;
				if (this.type == 0) {
					this.isfcity = i
				} else {
					this.isscity = i
				}
				if (item.child) {
					for (let i = 0; i < item.child.length; i++) {
						item.child[i].checked = false
					}
					if (this.type == 0) {
						this.farealist = item.child
					} else {
						this.sarealist = item.child
					}

				}
				// this.setchose(2)
				// if (item.label != '市辖区' && item.label != '特别行政区') {

				if (this.type == 0) {
					this.fchoosecity = item.label
				} else {
					this.schoosecity = item.label
				}
				if ((this.type == 0 ? this.fchoosecity : this.schoosecity) != '全部') {
					if (this.type == 0) {
						this.fstatus = statusIndex + 1
					} else {
						this.sstatus = statusIndex + 1
					}
				}
			},
			//选择区
			selectaArea(item, i) {
				debugger

				if (item.label == '全部') {
					for (let i = 0; i < this.sarealist.length; i++) {
						if (i != 0) {
							this.sarealist[i].checked = false
						}

					}
					return
				}

				if (this.count < 3) {
					this.$u.toast(item.label)
					// if (item.checked) {
					// 	item.checked = !item.checked
					// 	return
					// }else{
					// 	// this.count--;
					// }
					item.checked = !item.checked
					if (item.checked && this.count < 3) {
						this.count++;
					} else if (!item.checked && this.count < 3) {
						this.count--;
					}

				} else {
					if (item.checked) {
						item.checked = !item.checked
						this.count--;
					} else {
						this.$refs.uToast.show({
							type: 'error',
							message: "最多选择3个地区",
						})
					}

				}



				this.$forceUpdate()
				if (this.type == 0) {
					if (item.checked && !this.fchoosearea.includes(item.label)) {
						if (this.ftitle) {
							this.ftitle += ',' + item.label
						} else {
							this.ftitle += item.label
						}

						this.fchoosearea = this.ftitle
						console.log(this.fchoosearea)
					} else {

						if (this.ftitle.includes(',' + item.label)) {
							this.ftitle = this.ftitle.replace(',' + item.label, '')
							this.fchoosearea = this.fchoosearea.replace(',' + item.label, '')
						} else {
							let _val = this.ftitle.split(',')
							let _len = _val.length;
							if (_len == 1) {
								this.ftitle = this.ftitle.replace(item.label, '')
								this.fchoosearea = '请选择区'
							} else if (_len > 1) {
								this.ftitle = this.ftitle.replace(item.label + ',', '')
								this.fchoosearea = this.fchoosearea.replace(item.label + ',', '')
							}

						}

					}

				} else {
					if (item.checked && !this.schoosearea.includes(item.label)) {
						if (this.stitle) {
							this.stitle += ',' + item.label
						} else {
							this.stitle += item.label
						}

						this.schoosearea = this.stitle
					} else {
						if (this.stitle.includes(',' + item.label)) {
							this.stitle = this.stitle.replace(',' + item.label, '')
							this.schoosearea = this.schoosearea.replace(',' + item.label, '')
						} else {

							let _val = this.stitle.split(',')
							let _len = _val.length;
							if (_len == 1) {
								this.stitle = this.stitle.replace(item.label, '')
								this.schoosearea = '请选择区'
							} else if (_len > 1) {
								this.stitle = this.stitle.replace(item.label + ',', '')
								this.schoosearea = this.schoosearea.replace(item.label + ',', '')
							}

						}
					}


				}
				// this.getchoose()
			},
			// getchoose() {
			// 	const {
			// 		chooseprovince,
			// 		choosecity,
			// 		choosearea
			// 	} = this
			// 	this.$emit('conceal', {
			// 		chooseprovince,
			// 		choosecity,
			// 		choosearea
			// 	})
			// },
			// setchose(id) {
			// 	if (id == 1) {
			// 		this.choosecity = ''
			// 		this.choosearea = ''

			// 		if (this.type == 0) {
			// 			this.isfcity = null
			// 		} else {
			// 			this.isscity = null
			// 		}
			// 		if (this.type == 0) {
			// 			this.isfarea = null
			// 		} else {
			// 			this.issarea = null
			// 		}

			// 	} else if (id == 2) {
			// 		this.choosearea = ''
			// 		if (this.type == 0) {
			// 			this.isfarea = null
			// 		} else {
			// 			this.issarea = null
			// 		}
			// 	}
			// },
			changeCity(type) {
				if (type == 0) {
					this.type = 0
				} else {
					this.type = 1
				}
			},
			// conceal1(param) {
			// 	const {
			// 		chooseprovince,
			// 		choosecity,
			// 		choosearea
			// 	} = param
			// 	// 获取到传过来的 省 市 区 县数据
			// 	this.title1 = chooseprovince + choosecity + choosearea
			// 	if (choosecity == '全部') {
			// 		this.succeed()
			// 	} else if (choosearea != '') {
			// 		this.succeed()
			// 	}
			// },
			//筛选框关闭
			// succeed() {
			// 	this.$refs.uDropdown.close();
			// },
			back() {
				uni.navigateBack({

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.row1 {
		display: flex;
		justify-content: space-evenly;
		margin-top: 10rpx;
		border-bottom: 1px solid #E6E6E6;
	}

	.start-place,
	.end-place {
		font-size: 28rpx;
		color: #B1B5C0;
		padding-bottom: 20rpx;
	}

	.active1 {
		position: relative;
		color: black;
		font-size: 32rpx;
		font-weight: 700;
		display: flex;
		justify-content: center;
	}

	.active1:after {
		content: '';
		position: absolute;
		bottom: 0rpx;
		width: 50%;
		left: 25%;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 6rpx;
		background: #2772FB;
		border-radius: 3px;
	}

	.history-city-title {

		font-size: 28rpx;
		font-weight: 700;
		color: #363636;
		margin-bottom: 20rpx;
	}

	.container {
		padding: 0 20rpx;
	}

	.content1 {
		margin: 20rpx 0;
	}

	.city-list {
		// height: 118rpx;
		// overflow: hidden;
	}

	.city {
		display: inline-block;
		font-size: 26rpx;
		text-align: center;
		padding: 8rpx 16rpx;
		margin: 0 20rpx 20rpx 0;
		height: 33rpx;
		line-height: 33rpx;
		border-radius: 4rpx;
		background: #F7F8FA;
	}

	.content2 {
		margin: 20rpx 0;
	}

	.container {
		padding-left: 20rpx;
	}

	.select-active,
	.back-level {
		color: #2772FB;
		font-size: 28rpx;
	}

	.content-item {
		background: #F7F8FA;
		display: inline-block;
		width: calc(25% - 20rpx);
		margin: 10rpx 20rpx 10rpx 0;
		font-size: 26rpx;
		color: #333333;
		text-align: center;
		padding: 10rpx 0;
		border-radius: 10rx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding: 6rpx 8rpx;
		box-sizing: border-box;
	}

	.title {
		margin: 0 20rpx;
	}

	.active {
		background: #E5F0FE;
		border-radius: 10rpx;
		// border: 1px solid #2772FB;
		color: #2772FB;
		box-sizing: border-box;
	}

	.area {
		width: 55%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.nav-bag-left {
		width: 70%;
		font-size: 28rpx;
	}

	.btn {
		background: #2772FB;
		color: white;
		width: 80%;
		position: absolute;
		bottom: 30rpx;
		margin-left: 10%;
		border-radius: 50rpx;
	}
</style>