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

<template>
	<view class="container">
		<TopBar id="topbar" :icon="'back'"></TopBar>
		<view class="title font44 fw600" id='title'>
			选择你{{type==='wants'?'喜欢':'个性'}}标签
		</view>
		<view class="tip font28 fw400" id="tip">
			{{type==='wants'?'添加你喜欢的特质，让推荐更加精准':'增加自己的的个性标签，让大家更了解你'}}
		</view>
		<view class="choose-list flex-start" id="chooselist">
			<view class="choose-tag flex-center" v-for="(item,index) in chooseLabels" :key="index">
				<text class="tag-text font28 fw600">{{item.name}}</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 labelsList" :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.list" :key="sindex" @click="chooseTag(index,sindex)">
						{{sitem.name}}
					</view>
				</view>
				
			</view>
			
		</scroll-view>
		<cover-view class="btn font32 fw600" @click="sure">
			完成
		</cover-view>
	</view>
</template>

<script>
	import TopBar from '@/components/TopBar/TopBar.vue';
	export default {
		components:{TopBar},
		data() {
			return {
				assetsUrl:this.$util.assetsUrl,
				chooseLabels:[],
				labelsList:[],
				scollHeight:0,
				type:''
			};
		},
		onLoad(option) {
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2];
			console.log(option)
			if(option.type&&option.type==='wants'){
				this.type=option.type;
				this.chooseLabels=prevPage.$vm.myWants;
			}
			else if(option.type&&option.type==='labels'){
				this.type=option.type;
				this.chooseLabels=prevPage.$vm.myLabels;
			}
			this.computedScollviewHeight();
			
			
			this.getLabels();
		},
		methods:{
			computedScollviewHeight(){
				let query = uni.createSelectorQuery();
				let heightLeaf=0;
				let str='#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-145;
					console.log(this.scollHeight)
				});
				
			},
			sure(){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				let arr=[],ids=[];
				for(let i=0;i<this.chooseLabels.length;i++){
					arr.push(this.chooseLabels[i]);
					ids.push(`${this.chooseLabels[i].id}`);
				}
				console.log(ids)
				if(this.type==="wants"){
					prevPage.$vm.myWants=arr;
					prevPage.$vm.saveOptions.wantedLabelIds=ids;
				}
				else{
					prevPage.$vm.myLabels=arr;
					prevPage.$vm.saveOptions.myLabelIds=ids;
				}
				
				uni.navigateBack({
					delta:1
				})
			},
			deleteTag(index){
				this.chooseLabels.splice(index,1);
				setTimeout(()=>{
					this.computedScollviewHeight();
				},10)
				
			},
			chooseTag(index,sindex){
				this.labelsList[index].list[sindex].choose=!this.labelsList[index].list[sindex].choose;
				if(this.labelsList[index].list[sindex].choose&&!this.chooseLabels.includes({name:this.labelsList[index].list[sindex].name,id:this.labelsList[index].list[sindex].id})){
					this.chooseLabels.push({name:this.labelsList[index].list[sindex].name,id:this.labelsList[index].list[sindex].id})
				}
				setTimeout(()=>{
					this.computedScollviewHeight();
				},10)
				setTimeout(()=>{
					this.labelsList[index].list[sindex].choose=false;
				},500)
			},
			getLabels(){
				this.$api.login.labelsConfig({
					isSpLabel:this.type==='labels'?true:false,
					pageNum:1,
					pageSize:20,
					//type:['Looks','Character','Trait','Hobby']
				}).then(res=>{
					this.labelsList=res.data;
				}).catch(err=>{
					console.log(err)
				})
			},
			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>