uni-app 11设置备注和标签页

Posted 2021-09-22 2019ab

设置备注页 user-tag-set.nvue

<template>
	<view class="page"> 
		<!-- 导航栏 -->
		<free-nav-bar title="设置备注和标签" showBack :showRight="true">
			<free-main-button name="完成" slot="right" @click="submit"></free-main-button>
		</free-nav-bar>
		
		<view class="flex flex-column">
			<text class="font-sm text-secondary px-3 py-2">备注名</text>
			<input type="text" class="font-md border bg-white px-3" placeholder="请填写备注名" style="height: 100rpx;" v-model="nickname"/>
		</view>
		
		<view class="flex flex-column">
			<text class="font-sm text-secondary px-3 py-2">标签</text>
			<view class="border bg-white px-3 flex align-center flex-wrap pt-3 pb-2" @click="openTagSet">
				<view class="border border-main rounded-circle px-2 py-1 mr-1 mb-1" v-for="(item,index) in tagList" :key="index">
					<text class="font main-text-color">{{item}}</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
	import freeMainButton from '@/components/free-ui/free-main-button.vue';
	
	export default {
		components: {
			freeNavBar,
			freeMainButton
		},
		data() {
			return {
				id:0,
				nickname:"",
				tagList:['朋友','同学','家人']
			}
		},
		onLoad(e) {
			// if(!e.params){
			// 	return this.backToast()
			// }
			// let params = JSON.parse(e.params)
			// this.id = params.user_id
			// this.nickname = params.nickname
			// this.tagList = params.tags == '' ? [] : params.tags.split(',')
			uni.$on('updateTag',(e)=>{
				this.tagList = e
			})
		},
		beforeDestroy() {
			uni.$off('updateTag')
		},
		methods: {
			openTagSet(){
				uni.navigateTo({
					url: '../user-tag-set/user-tag-set?detail='+JSON.stringify(this.tagList)
				});
			},
			// 完成
			submit(){
				uni.$emit('saveRemarkTag',{
					nickname:this.nickname,
					tagList:this.tagList
				});
				uni.navigateBack({
					delta:1
				})
				// $H.post('/friend/setremarktag/'+this.id,{
				// 	nickname:this.nickname,
				// 	tags:this.tagList.join(',')
				// }).then(res=>{
				// 	uni.showToast({
				// 		title: '修改成功',
				// 		icon: 'none'
				// 	});
				// 	uni.navigateBack({
				// 		delta: 1
				// 	});
				// })
			}
		}
	}
</script>

<style>

</style>

设置备注页是酱紫的

设置标签页 user-tag-set.nvue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<free-nav-bar title="添加标签" showBack :showRight="true">
			<free-main-button name="保存" slot="right" @click="save"></free-main-button>
		</free-nav-bar>
		
		<view class="px-3 pt-3 pb-2 border-bottom flex align-center flex-wrap">
			<view class="border border-main rounded-circle py-1 px-2 flex align-center mb-1 mr-1 justify-center" v-for="(item,index) in list" :key="index" @click="delTag(index)">
				<text class="font main-text-color">{{item}}</text>
			</view>
			
			<input type="text" value="" class="border bg-white font rounded-circle text-center" placeholder="添加标签" style="border-style: dashed; width: 180rpx;" v-model="tag" @confirm="addTag" confirm-type="send"/>
		</view>
		
		<view class="flex flex-column">
			<text class="font-sm text-secondary px-3 py-2">所有标签</text>
			<view class="px-3 flex align-center flex-wrap pt-3 pb-2" @click="openTagSet">
				<view class="border bg-white rounded-circle px-2 py-1 mr-1 mb-1" v-for="(item,index) in allList" :key="index" @click="fastAddTag(item)">
					<text class="font text-dark">{{item}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
	import freeMainButton from '@/components/free-ui/free-main-button.vue';
	export default {
		components:{
			freeNavBar,
			freeMainButton
		},
		data() {
			return {
				tag:'',
				list:['123'],
				allList:['家人','哈哈哈','朋友']
			}
		},
		methods: {
			// 保存
			save(){
				uni.$emit('updateTag',this.list)
				uni.navigateBack({
					delta:1
				})
			},
			// 增加标签
			addTag(){
				if(this.tag===''){
					return;
				}
				if(this.list.indexOf(this.tag) !== -1){
				    this.tag='';
					return uni.showToast({
						title: '标签已存在',
						icon:'none'
					});
				}
				this.list.push(this.tag);
				this.tag = '';
			},
			// 快捷增加标签
			fastAddTag(item){
				if(this.list.indexOf(item) !== -1){
					return uni.showToast({
						title:'标签已存在',
						icon:'none'
					})
				}
				this.list.push(item)
			},
			// 删除标签
			delTag(index){
				uni.showModal({
					content:'是否删除该标签',
					success:(res)=>{
						if(res.confirm){
							this.list.splice(index,1);
						}
					}
				})
			}
		},
		onLoad(e) {
			if(e.detail){
				this.list = JSON.parse(e.detail);
				console.log(this.list);
			}
		}
	}
</script>

<style>

</style>

页面是酱紫的

感谢大家观看，我们下期再见。