sugarpark-mini-program/pages/info/city.vue

<template>
	<view class="container">
		<TopBar id="topbar" :icon="type==='edit'?'back':''"></TopBar>
		<view class="line-bar flex-between" id="linebar" v-if="type==='add'">
			<view class="span active"></view>
			<view class="span active"></view>
			<view class="span active"></view>
			<view class="span active"></view>
			<view class="span"></view>
		</view>
		<view class="title font44 fw600" id='title'>
			选择你常驻的城市
		</view>
		<view class="tip font28 fw400" id="tip">
			选择你居住的、经常去的城市，以便推荐异性朋友
		</view>
		<view class="choose-list flex-start" id="chooselist">
			<view class="choose-tag flex-center" v-for="(item,index) in chooseCitys" :key="index">
				<text class="tag-text font28 fw600">{{item}}</text>
				<image :src="`${assetsUrl}info-figure-close.png`" mode="aspectFill" class="tag-img" @click="deleteTag(index)"></image>
			</view>
		</view>
		<scroll-view scroll-y="true" class="citys" :style="{'height':`${scollHeight}px`}">
			<view class="city-tags" v-for="(item,index) in cityList" :key="index">
				<view class="c-label font28 fw700">
					{{item.name}}
				</view>
				<view class="c-tags flex-start">
					<view class="c-tag font28 fw400" :class="sitem.choose?'tag-choose':''" v-for="(sitem,sindex) in item.data" :key="sindex" @click="chooseTag(index,sindex)">
						{{sitem.name}}
					</view>
				</view>
				
			</view>
			
		</scroll-view>
		<cover-view class="btn font32 fw600" @click="sure">
			{{type==='add'?'下一步':'完成'}}
		</cover-view>
	</view>
</template>

<script>
	import TopBar from '@/components/TopBar/TopBar.vue';
	export default {
		components:{TopBar},
		data() {
			return {
				type:'add',
				assetsUrl:this.$util.assetsUrl,
				chooseCitys:[],
				cityList:[],
				scollHeight:0,
				saveOption:{
					cities:[],
					completeUser:null,
				}
			};
		},
		onLoad(option) {
			console.log(option)
			if(option.type==='edit'){
				this.type="edit";
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				this.chooseCitys=prevPage.$vm.myCitys;
				console.log(this.chooseCitys)
			}
			this.computedScollviewHeight();
			this.getHotCitys()
		},
		methods:{
			computedScollviewHeight(){
				let query = uni.createSelectorQuery();
				let heightLeaf=0;
				let str=this.type==='add'?'#topbar,#linebar,#title,#tip,#chooselist':'#topbar,#title,#tip,#chooselist'
				query.selectAll(str).boundingClientRect(data => {
					data.forEach(item=>{
						heightLeaf+=item.height;
					})
				}).exec(()=>{
					let sysInfo=uni.getSystemInfoSync();
					this.scollHeight=sysInfo.windowHeight-heightLeaf-(this.type==='add'?160:145);
					console.log(this.scollHeight)
				});
				
			},
			sure(){
				if(this.type==='add'){
					if(this.chooseCitys.length===0){
						uni.showToast({
							title:'请选择常驻城市',
							icon:'none'
						})
						return;
					}
					for(let i=0;i<this.chooseCitys.length;i++){
						this.saveOption.cities.push(`${this.chooseCitys[i]}`);
					}
					this.saveOption.completeUser=JSON.parse(uni.getStorageSync('user'));
					uni.showLoading({
						title:'保存中',
						mask:true
					})
					this.$api.login.saveCity(this.saveOption).then(res=>{
						if(res.data.succ){
							uni.setStorageSync('regStep','WxInfo');
							uni.hideLoading();
							uni.reLaunch({
								url:`/pages/info/wechat`
							})
						}
					})
				}else{
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2];
					let arr=[];
					for(let i=0;i<this.chooseCitys.length;i++){
						arr.push(`${this.chooseCitys[i]}`);
					}
					console.log(arr)
					prevPage.$vm.myCitys=arr;
					uni.navigateBack({
						delta:1
					})
				}
					
				
				
			},
			deleteTag(index){
				this.chooseCitys.splice(index,1);
				setTimeout(()=>{
					this.computedScollviewHeight();
				},10)
				
			},
			chooseTag(index,sindex){
				if(this.chooseCitys.length>5){return;}
				this.cityList[index].data[sindex].choose=!this.cityList[index].data[sindex].choose;
				if(this.cityList[index].data[sindex].choose&&!this.chooseCitys.includes(this.cityList[index].data[sindex].name)){
					this.chooseCitys.push(this.cityList[index].data[sindex].name)
				}
				setTimeout(()=>{
					this.computedScollviewHeight();
				},10)
				setTimeout(()=>{
					this.cityList[index].data[sindex].choose=false;
				},500)
			},
			getHotCitys(){
				let arr=[],obj={name:'',code:'',data:[]},obj1={name:'',code:'',choose:false}
				this.$api.login.popularCities({}).then(res=>{
					for(let i=0;i<res.data.cities.length;i++){
						obj={name:'',code:'',data:[]};
						obj.name=res.data.cities[i].n;
						obj.code=res.data.cities[i].c;
						for(let j=0;j<res.data.cities[i].cities.length;j++){
							obj1={name:'',code:'',choose:false}
							obj1.name=res.data.cities[i].cities[j].split('#')[1];
							obj1.code=res.data.cities[i].cities[j].split('#')[0];
							obj.data.push(obj1);
						}
						arr.push(obj)
					}
					this.cityList=arr;
				})
			},
			bindClick(e){
				console.log(e)
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.container{
	width: 100vw;
	min-height: 100vh;
	background-color: $bgcolor1;
	.line-bar{
		margin: 0 60rpx;
		margin-top: 30rpx;
		.span{
			width: 120rpx;
			height: 8rpx;
			border-radius: 4rpx 0rpx 0rpx 4rpx;
			background-color: $bgcolor4;
		}
		.active{
			background-color: $primary;
		}
	}
	.title{
		color: $fontcolor5;
		padding-left: 60rpx;
		margin-top: 108rpx;
	}
	.tip{
		color: $fontcolor3;
		padding-left: 60rpx;
		margin-top: 8rpx;
	}
	.choose-list{
		padding: 72rpx 60rpx 8rpx 60rpx;
		flex-wrap: wrap;
		.choose-tag{
			background-color: $bgcolor4;
			border-radius: 38rpx;
			padding: 0 20rpx;
			height: 72rpx;
			margin-right: 32rpx;
			margin-bottom: 32rpx;
			.tag-text{
				color: $fontcolor4;
				text-align: center;
				line-height: 72rpx;
			}
			.tag-img{
				width: 24rpx;
				height: 24rpx;
				padding-left: 16rpx;
			}
		}
	}
	.citys{
		height: 700rpx;
		padding: 0 60rpx;
		box-sizing: border-box;
		.city-tags{
			.c-label{
				color: $fontcolor3;
				margin-bottom: 24rpx;
				margin-top: 16rpx;
			}
			.c-tags{
				flex-wrap: wrap;
				.c-tag{
					background-color: $bgcolor3;
					color: $fontcolor3;
					padding: 0 20rpx;
					height: 72rpx;
					line-height: 72rpx;
					text-align: center;
					border-radius: 38rpx;
					margin-right: 24rpx;
					margin-bottom: 24rpx;
					transition: all .3s;
				}
			}
			
			.tag-choose{
				background: $primary !important;
				color: $fontcolor5 !important;
			}
		}
	}
	.btn{
		position: fixed;
		z-index: 999;
		left: 0;
		right: 0;
		bottom: 44rpx;
		margin: auto;
		width: 630rpx;
		height: 104rpx;
		border-radius: 52rpx;
		background-color: $primary;
		color: $fontcolor5;
		text-align: center;
		line-height: 104rpx;
	}
}
</style>