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.selected}}
						</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)!='选择'&&(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: '',
				selectList: [],
			}
		},
		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
			//获取缓存收发地

			if (uni.getStorageSync('fPlaceList')) {
				this.historyFcityList = uni.getStorageSync('fPlaceList');
			} else {
				this.historyFcityList = []
			}
			if (uni.getStorageSync('sPlaceList')) {
				this.historyScityList = uni.getStorageSync('sPlaceList');
			} else {
				this.historyScityList = []
			}


			//赋值地区
		},
		methods: {
			// 历史收发地去重
			makeHistoryList(val) {
				debugger
				if (this.type == 0) {

				} else {
					let _obj = {}
					// for (let i = 0; i < this.historyScityList.length; i++) {
					// 	// let _data = this.historyScityList[i]
					// }
					if (val.selected == '全国' || val.schoosecity == '全部') {

						this.historyScityList = this.historyScityList.reduce((cur, item) => {
							if (item.schoosecity == val.schoosecity) {
								_obj[item.selected] ? "" : _obj[item.selected] = true && cur.push(item);
								return cur;
							}
							_obj[item.selected] ? "" : _obj[item.selected] = true && cur.push(item);
							return cur;

						}, [])
					}
					return this.historyScityList
				}
			},
			confirmBtn() {
				debugger
				//设置地区
				if (this.type == 0) {
					if (this.fchooseprovince == '选择' || (this.fchoosecity == '请选择市' && this.fchooseprovince != '全国')) {
						this.$refs.uToast.show({
							type: 'error',
							message: "请选择区域！",
						})
					}
					console.log(this.fchooseprovince)
					console.log(this.fchoosecity)
					console.log(this.fchoosearea)
					// if(this.fchoosecity)
					// this.historyFcityList.push('')
					// this.fchooseprovince
					// this.fchoosecity
					// this.fchoosearea
				} else {
					if (this.schooseprovince == '选择' || (this.schoosecity == '请选择市' && this.schooseprovince != '全国')) {
						this.$refs.uToast.show({
							type: 'error',
							message: "请选择区域！",
						})
					}
					console.log(this.schooseprovince)
					console.log(this.schoosecity)
					console.log(this.schoosearea)
					let _obj = {
						schooseprovince: this.schooseprovince,
						schoosecity: this.schoosecity,
						schoosearea: this.schoosearea,
						selected: ''
					}
					if (this.schoosecity == '请选择市' && this.schooseprovince == '全国') {
						_obj.selected = this.schooseprovince
						this.historyScityList.unshift(_obj)
						let _newList = this.makeHistoryList(_obj)
						uni.setStorageSync('sPlaceList', _newList);
					}
					if (this.schoosearea == '请选择区' && this.schoosecity == '全部') {
						_obj.selected = this.schooseprovince
						this.historyScityList.unshift(_obj)
						let _newList = this.makeHistoryList(_obj)

						uni.setStorageSync('sPlaceList', _newList);
					}
					if (this.schoosearea == '全部') {
						_obj.selected = this.schoosecity
						this.historyScityList.unshift(_obj)
						let _newList = this.makeHistoryList(_obj)
						uni.setStorageSync('sPlaceList', _newList);
					}
					debugger
					if (this.schoosearea != '请选择区' && this.schoosearea != '全部') {
						let _list = this.schoosearea.split(',')
						let _newList
						for (let i = 0; i < _list.length; i++) {

							let _deepObj = uni.$u.deepClone(_obj)
							_deepObj.selected = _list[i]
							this.historyScityList.unshift(_deepObj)
							_newList = this.makeHistoryList(_deepObj)

						}
						console.log(_newList)
						uni.setStorageSync('sPlaceList', this.historyScityList);
					}

					console.log(this.historyScityList)
					// this.historyScityList
					// 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) {
				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
					this.fchooseprovince = item.label
					if (item.child) {
						this.fcitylist = item.child
					}
					if (this.fchoosecity != '全部') {
						this.fstatus = statusIndex + 1
					}
				} else {
					this.issprovince = i
					this.schooseprovince = item.label
					if (item.label == '全国') {
						item.checked = !item.checked
						if (!item.checked) {
							this.issprovince = null
						}
						return
					} else {
						this.schoosecity = '请选择市'
						this.schoosearea = '请选择区'
						if (item.child) {
							this.scitylist = item.child
						}
						if (this.schoosecity != '全部') {
							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
					}

				}
				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) {
				if (item.label == '全部') {
					if (this.type == 0) {
						for (let i = 0; i < this.farealist.length; i++) {
							if (i == 0) {
								this.farealist[i].checked = true
							} else {
								this.farealist[i].checked = false
							}

						}
						this.fchoosearea = '全部'
						this.$forceUpdate()
						return
					} else {
						for (let i = 0; i < this.sarealist.length; i++) {
							if (i == 0) {
								this.sarealist[i].checked = true
							} else {
								this.sarealist[i].checked = false
							}
						}
						this.schoosearea = '全部'
						this.$forceUpdate()
						return
					}
				}

				if (this.count < 3) {
					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()
				//设置面包屑 0发货地 1收货地
				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 + ',', '')
							}
						}
					}
				}
			},
			changeCity(type) {
				if (type == 0) {
					this.type = 0
				} else {
					this.type = 1
				}
			},
			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 {
		max-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 {
		// width: 100%;
		width: calc(100% - 40rpx);
		display: inline-flex;
		flex-flow: row wrap;
		align-content: flex-start;
	}

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

	.content-item {
		background: #F7F8FA;
		margin: 10rpx;
		font-size: 30rpx;
		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;
		flex: 0 0 calc(25% - 20rpx);
	}

	.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: 30rpx;
	}

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