uniapp-049-标签页-完成-全局自定义事件

• 点击编辑完成要进行状态判断，如果是编辑状态，会调用update_label云函数，保存更新用户的label_ids字段。

<template>
	<view class="label">
		<view class="label-box">
			<view class="label-header">
				<view class="label-title">我的标签</view>
				<view class="label-edit" @click="editLabel">{{is_edit?'完成':'编辑'}}</view>
			</view>
			<uni-load-more v-if="if_load" status="loading" icon-type="snow"></uni-load-more>
			<view v-if="!if_load" class="label-content">
				<view class="label-content__item" v-for="(item, index) in label_list" :key="item._id">
					{{item.name}}
					<uni-icons v-if="is_edit" class="icons-close" type="clear" size="20" color="red"
						@click="add_list(index)"></uni-icons>
				</view>
			</view>
			<view v-if="label_list.length === 0 && !if_load" class="no-data">
				当前没有数据
			</view>
		</view>
		<view class="label-box">
			<view class="label-header">
				<view class="label-title">标签推荐</view>
			</view>
			<uni-load-more v-if="if_load" status="loading" icon-type="snow"></uni-load-more>
			<view v-if="!if_load" class="label-content">
				<view class="label-content__item" v-for="(item, index) in list" :key="item._id" @click="add_label_list(index)">
					{{item.name}}
				</view>
			</view>
			<view v-if="list.length === 0 && !if_load" class="no-data">
				当前没有数据
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_edit: false,
				label_list: [],
				list: [],
				if_load: true
			}
		},
		onLoad() {
			/* 自定义事件 this.$emit uni.$emit */
			/* 自定义事件只能在打开的页面触发 */
			this.getLabel()
		},
		methods: {
			editLabel() {
				if (this.is_edit) {
					/* 此时用户点击了完成 */
					this.is_edit = false
					this.set_update_label(this.label_list)
				} else {
					/* 此时用户点击了编辑 */
					this.is_edit = true
				}
			},
			getLabel() {
				this.if_load = true
				this.$api.get_label({
					type: 'all'
				}).then((res) => {
					const {
						data
					} = res
					this.label_list = data.filter(item => item.current)
					this.list = data.filter(item => !item.current)
					this.if_load = false
				})
			},
			set_update_label(label) {
				let new_arr_ids = []
				label.forEach(item => {
					new_arr_ids.push(item._id)
				})
				uni.showLoading()
				this.$api.update_label({
					label: new_arr_ids
				}).then((res) => {
					uni.hideLoading()
					uni.showToast({
						title: '更新成功',
						icon: 'none'
					})
					uni.$emit('labelChange')
				})
				
			},
			add_list(index) {
				if (!this.is_edit) return
				this.list.push(this.label_list[index])
				this.label_list.splice(index, 1)
			},
			add_label_list(index) {
				if (!this.is_edit) return
				this.label_list.push(this.list[index])
				this.list.splice(index, 1)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.label {
		.label-box {
			background-color: #fff;
			margin-bottom: 10px;

			.label-header {
				display: flex;
				justify-content: space-between;
				padding: 10px 15px;
				font-size: 14px;
				color: #666;
				border-bottom: 1px #f5f5f5 solid;

				.label-edit {
					color: #30b33a;
					font-weight: bold;
				}
			}

			.label-content {
				display: flex;
				flex-wrap: wrap;
				padding: 15px;
				padding-top: 0;

				.label-content__item {
					position: relative;
					padding: 2px 5px;
					margin-top: 12px;
					margin-right: 10px;
					border-radius: 5px;
					border: 1px #666 solid;
					font-size: 14px;
					color: #666;

					.icons-close {
						position: absolute;
						right: -8px;
						top: -8px;
						background-color: #fff;
						border-radius: 50%;
					}
				}
			}
		}
	}
	.no-data {
		width: 100%;
		text-align: center;
		padding: 50px 0;
		color: #999;
		font-size: 14px;
	}
</style>

uni.$emit: 全局自定义事件；

uni.$on: 首页接收