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' @click="historyClick(0,item)">
							{{item.selected}}
						</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' @click="historyClick(1,item)">
							{{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: '',
				ftitleList:[],
				stitleList:[],
				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 = JSON.parse(options.startPlace).selected + '→' + JSON.parse(options.endPlace).selected
			//获取缓存收发地

			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: {
			historyClick(type,val){
				console.log(type)
				if(type==0){
					this.historyFcityList.unshift(val)
					let _newList = this.makeHistoryList(val)
					uni.setStorageSync('fPlaceList', _newList);
					uni.setStorageSync('fPlaceObj', val);
				}else{
					this.historyScityList.unshift(val)
					let _newList = this.makeHistoryList(val)
					uni.setStorageSync('sPlaceList', _newList);
					uni.setStorageSync('sPlaceObj',val )
			
				}
				uni.switchTab({
					url: '/pages/goodSource/index'
				});
			},
			// 历史收发地去重
			makeHistoryList(val) {
				if (this.type == 0) {
					let _obj = {}
					// for (let i = 0; i < this.historyScityList.length; i++) {
					// 	// let _data = this.historyScityList[i]
					// }
					if (val.selected == '全国' || val.fchoosecity == '全部') {

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


						}, [])
					}
					return this.historyFcityList
				} 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) => {
							_obj[item.selected] ? "" : _obj[item.selected] = true && cur.push(item);
							return cur;
						}, [])
					} else {
						this.historyScityList = this.historyScityList.reduce((cur, item) => {
							if (item.schoosecity == val.schoosecity) {
								_obj[item.selected] ? "" : _obj[item.selected] = true && cur.push(item);
								return cur;
							} else {
								_obj[item.selected] ? "" : _obj[item.selected] = true && cur.push(item);
								return cur;
							}


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

					}
					//选择省
					if (this.fchoosearea == '请选择区' && this.fchoosecity == '全部') {
						_obj.selected = this.fchooseprovince
						this.historyFcityList.unshift(_obj)
						let _newList = this.makeHistoryList(_obj)

						uni.setStorageSync('fPlaceList', _newList);
					}
					//选择市
					if (this.fchoosearea == '全部') {
						if(this.fchoosecity=='市辖区'){
							_obj.selected = this.fchooseprovince
						}else{
							_obj.selected = this.fchoosecity
						}
						this.historyFcityList.unshift(_obj)
						let _newList = this.makeHistoryList(_obj)
						uni.setStorageSync('fPlaceList', _newList);
					}
					uni.setStorageSync('fPlaceObj', _obj);
					//选择区
					if (this.fchoosearea != '请选择区' && this.fchoosearea != '全部') {
						console.log(this.fchooseprovince,this.fchoosecity,this.fchoosearea)
						// let _list = this.fchoosearea.split(',')
						// let _newList
						// //设置历史收发地并去重，区重名判断是否是同一个市在去重
						// for (let i = 0; i < _list.length; i++) {
						// 	let _deepObj = uni.$u.deepClone(_obj)
						// 	_deepObj.selected = _list[i]
						// 	this.historyFcityList.unshift(_deepObj)
						// 	_newList = this.makeHistoryList(_deepObj)

						// }
						// console.log(_newList)
						uni.setStorageSync('fPlaceList', this.historyFcityList);
						uni.setStorageSync('fPlaceObj', {
							fchooseprovince: this.fchooseprovince,
							fchoosecity: this.fchoosecity,
							fchoosearea: this.fchoosearea,
							selected: this.fchoosearea
						});
					}
					console.log(this.historyFcityList)
					uni.switchTab({
						url: '/pages/goodSource/index'
					});
				} else {
					//收货地
					if (this.schooseprovince == '选择' ||(this.schoosearea == '请选择区'&&this.schoosecity!='全部')|| (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 == '全部') {
						if(this.schoosecity=='市辖区'){
							_obj.selected = this.schooseprovince
						}else{
							_obj.selected = this.schoosecity
						}
						
						this.historyScityList.unshift(_obj)
						let _newList = this.makeHistoryList(_obj)
						uni.setStorageSync('sPlaceList', _newList);
					}
					uni.setStorageSync('sPlaceObj', _obj);
					//选择区
					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);
						uni.setStorageSync('sPlaceObj', {
							schooseprovince: this.schooseprovince,
							schoosecity: this.schoosecity,
							schoosearea: this.schoosearea,
							selected: this.schoosearea
						});
					}
					console.log(this.historyScityList)
					uni.switchTab({
						url: '/pages/goodSource/index'
					});
				}
			},
			//返回上一级
			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
						this.ftitleList=[]
					} else {
						this.schoosecity = '请选择市'
						this.schoosearea = ''
						this.stitle = ''
						this.isscity = null
						this.stitleList=[]
					}
				} 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 = '请选择区'
						this.ftitleList=[]
					} else {
						this.schooseprovince = '选择'
						this.schoosecity = '请选择市'
						this.schoosearea = '请选择区'
						this.stitleList=[]
					}

				} else if (status == 1) {
					if (this.type == 0) {
						this.fchoosecity = '请选择市'
						this.fchoosearea = '请选择区'
						this.ftitleList=[]
					} else {
						this.schoosecity = '请选择市'
						this.schoosearea = '请选择区'
						this.stitleList=[]
					}
				}
			},
			// 选择省
			selectProvince(item, i, statusIndex) {
				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) {
			if(item.label=='全部'){
				this.$refs.uToast.show({
					type: 'error',
					message: "不能选择全部，请重新选择！"
				})
				return
			}
				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.ftitleList=[]
						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.stitleList=[]
						this.schoosearea = '全部'
						this.$forceUpdate()
						return
					}
				}
				if (this.type == 0) {
					this.farealist[0].checked = false
					if (this.ftitleList.length < 3) {
						item.checked = !item.checked
						if (item.checked ) {
							if(this.ftitleList.indexOf(item.label)==-1){
								this.ftitleList.push(item.label)
							}
						} else if (!item.checked) {
							for (var i = 0; i < this.ftitleList.length; i++) {
								console.log(this.ftitleList[i])
								if(this.ftitleList[i]==item.label){
									this.ftitleList.splice(i,1)
								}
							}
						}
					} else {
						if (item.checked) {
							item.checked = !item.checked
							for (var i = 0; i < this.ftitleList.length; i++) {
								if(this.ftitleList[i]==item.label){
									this.ftitleList.splice(i,1)
								}
							}
						} else {
							this.$refs.uToast.show({
								type: 'error',
								message: "最多选择3个地区",
							})
						}
					}
					this.ftitle=this.ftitleList.toString()
					this.fchoosearea=this.ftitleList.toString()
				}else{
					this.sarealist[0].checked = false
					if (this.stitleList.length < 3) {
						item.checked = !item.checked
						if (item.checked ) {
							if(this.stitleList.indexOf(item.label)==-1){
								this.stitleList.push(item.label)
							}
						} else if (!item.checked) {
							for (var i = 0; i < this.stitleList.length; i++) {
								console.log(this.stitleList[i])
								if(this.stitleList[i]==item.label){
									this.stitleList.splice(i,1)
								}
							}
						}
					} else {
						if (item.checked) {
							item.checked = !item.checked
							for (var i = 0; i < this.stitleList.length; i++) {
								if(this.stitleList[i]==item.label){
									this.stitleList.splice(i,1)
								}
							}
						} else {
							this.$refs.uToast.show({
								type: 'error',
								message: "最多选择3个地区",
							})
						}
					}
					this.stitle=this.stitleList.toString()
					this.schoosearea=this.stitleList.toString()
				}
				console.log(this.ftitleList)
				this.$forceUpdate()
				//设置面包屑 0发货地 1收货地
				// if (this.type == 0) {
				// 	this.farealist[0].checked = false
				// 	// if(this.ftitleList.indexOf(item.label)==-1){
				// 	// 	this.ftitleList.push(item.label)
				// 	// }
				// 	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>