uni-app 13标星朋友和加入移出黑名单

Posted 2021-09-24 2019ab

页面代码 user-base.nvue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<free-nav-bar showBack :showRight="true" bgColor="bg-white">
			<free-icon-button slot="right"><text class="iconfont font-md" @click="openAction">&#xe6fd;</text></free-icon-button>
		</free-nav-bar>
		<view class="px-3 py-4 flex align-center bg-white border-bottom">
			<free-avatar src="/static/images/demo/demo6.jpg" size="120"></free-avatar>
			
			<view class="flex flex-column ml-3 flex-1">
				<view class="font-lg font-weight-bold flex justify-between">
					<text class="font-lg font-weight-bold mb-1">{{nickname}}</text>
					<image v-if="detail.star" src="/static/images/star.png" style="width: 40rpx;height: 40rpx;"></image>
				</view>
				<text class="font-md text-light-muted mb-1">账号：VmzhbjzhV</text>
				<text class="font-md text-light-muted">地区：广东广州</text>
			</view>
		</view>
		
		<free-list-item showRight :showLeftIcon="false">
			<view class="flex align-center">
				<text class="font-md text-dark mr-3">标签</text>
				<text class="font-md text-light-muted mr-2" v-for="(item,index) in tagList" :key="index">{{item}}</text>
			</view>
		</free-list-item>
		<free-divider></free-divider>
		<free-list-item showRight :showLeftIcon="false">
			<view class="flex align-center">
				<text class="font-md text-dark mr-3">朋友圈</text>
				<image src="/static/images/demo/cate_01.png" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image>
				<image src="/static/images/demo/cate_01.png" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image>
				<image src="/static/images/demo/cate_01.png" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image>
			</view>
		</free-list-item>
		<free-list-item title="更多信息" showRight :showLeftIcon="false"></free-list-item>
		<free-divider></free-divider>
		<view class="py-3 flex align-center justify-center bg-white" hover-class="bg-light">
			<text class="iconfont text-primary mr-1" v-if="!isBlack">&#xe64e;</text>
			<text class="font-md text-primary">{{isBlack ? '移除黑名单' : '发信息'}}</text>
		</view>
		
		<!-- 扩展菜单 -->
		<free-popup ref="action" bottom transformOrigin="center bottom" maskColor>
			<scroll-view style="height: 580rpx;" scroll-y="true" class="bg-white" :show-scrollbar="false">
				<free-list-item v-for="(item,index) in actions"  :key="index" :title="item.title" :showRight="false" :border="false" @click="popupEvent(item)">
					<text slot="icon" class="iconfont font-lg py-1">{{item.icon}}</text>
				</free-list-item>
			</scroll-view>
		</free-popup>
	</view>
</template>

<script>
	import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
	import freeIconButton from '@/components/free-ui/free-icon-button.vue';
	import freeChatItem from '@/components/free-ui/free-chat-item.vue';
	import freePopup from '@/components/free-ui/free-popup.vue';
	import freeListItem from '@/components/free-ui/free-list-item.vue';
	import freeDivider from '@/components/free-ui/free-divider.vue';
	import freeAvatar from '@/components/free-ui/free-avatar.vue';
	
	export default {
		components: {
			freeNavBar,
			freeIconButton,
			freeChatItem,
			freePopup,
			freeListItem,
			freeDivider,
			freeAvatar
		},
		data() {
			return {
				detail:{
					star:false,
				},
				isBlack:false,
				tagList:[],
				nickname:'昵称'
			}
		},
		onLoad() {
			uni.$on('saveRemarkTag',(e)=>{
				this.tagList = e.tagList
				this.nickname = e.nickname;
			})
		},
		beforeDestroy() {
			this.$refs.action.hide();
			uni.$off('saveRemarkTag')
		},
		computed:{
			tagPath(){
				return "mail/user-remark-tag/user-remark-tag"
			},
			actions(){
					return [{
						icon:"\\ue6b3",
						title:"设置备注和标签",
						type:"navigate",
						path:this.tagPath
					},{
						icon:"\\ue613",
						title:"把他推荐给朋友",
						type:"navigate",
						path:"chat/chat-list/chat-list?params="+encodeURIComponent(JSON.stringify({
							type: "card",
							data: '哈哈',
							options: {
								avatar: '',
								id: 0
							}
						}))
					},{
						icon:"\\ue6b0",
						title:this.detail.star ? '取消星标好友' : "设为星标朋友",
						type:"event",
						event:"setStar"
					},{
						icon:"\\ue667",
						title:"设置朋友圈和动态权限",
						type:"navigate",
						path:"mail/user-moments-auth/user-moments-auth"
					},{
						icon:"\\ue638",
						title:this.detail.isblack ? '移出黑名单' : "加入黑名单",
						type:"event",
						event:"setBlack"
					},{
						icon:"\\ue61c",
						title:"投诉",
						type:"navigate",
						path:"mail/user-report/user-report?params="+JSON.stringify({
							user_id:this.detail.id,
							type:"user"
						})
					},{
						icon:"\\ue638",
						title:"删除",
						type:"event",
						event:"deleteItem"
					}]
				}
		},
		methods: {
			openAction(){
				this.$refs.action.show()
			},
			navigate(url){
				console.log(url)
				uni.navigateTo({
					url: '/pages/'+url,
				});
			},
			// 操作菜单事件
            popupEvent(e){
				if(!e.type){
					return;
				}
				switch(e.type){
					case 'navigate':
					this.navigate(e.path);
					break;
					case 'event':
					this[e.event](e);
					break;
				}
				setTimeout(()=>{
					// 关闭弹出层
					this.$refs.action.hide();
				},150);
			},
			// 设为星标
			setStar(e){
				this.detail.star = !this.detail.star
			},
			// 加入黑名单
			setBlack(e){
				let msg  = '加入黑名单';
				if(this.isBlack){
					msg = '移出黑名单';
				}
				uni.showModal({
					content:'是否要'+msg,
					success:(res)=>{
						if(res.confirm){
							this.isBlack = !this.isBlack;
							e.title = this.isBlack ? '移出黑名单' : '加入黑名单';
							uni.showToast({
								title:msg+'成功',
								icon:'none'
							})
						}
					}
				})
			}
		}
	}
</script>

<style>

</style>

页面是酱紫的

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