uni-app 171部分小细节优化

Posted 2019ab

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uni-app 171部分小细节优化相关的知识,希望对你有一定的参考价值。

/pages/mail/user-base/user-base.vue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<free-nav-bar showBack :showRight="detail.friend" bgColor="bg-white">
			<free-icon-button slot="right" v-if="detail.friend"><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="detail.avatar" 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">detail.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">账号:detail.username</text>
				<!-- <text class="font-md text-light-muted">地区:广东广州</text> -->
			</view>
		</view>

		<free-list-item v-if="detail.friend" showRight :showLeftIcon="false" @click="navigate(tagPath)">
			<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 detail.tags"
					:key="index">item</text>
			</view>
		</free-list-item>
		<free-divider></free-divider>
		<free-list-item v-if="detail.friend" 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 v-if="detail.friend" class="py-3 flex align-center justify-center bg-white" hover-class="bg-light" @click="doEvent">
			<text class="iconfont text-primary mr-1" v-if="!detail.isBlack">&#xe64e;</text>
			<text class="font-md text-primary">detail.isblack ? '移除黑名单' : '发信息'</text>
		</view>

		<view v-else class="py-3 flex align-center justify-center bg-white" hover-class="bg-light"
			@click="navigate(addFriend())">
			<text class="font-md text-primary">添加好友</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';
	import auth from '@/common/mixin/auth.js';
	import $H from '@/common/free-lib/request.js';

	export default 
		mixins: [auth],
		components: 
			freeNavBar,
			freeIconButton,
			freeChatItem,
			freePopup,
			freeListItem,
			freeDivider,
			freeAvatar
		,
		data() 
			return 
				detail: 
					id: 0,
					username: '',
					nickname: '',
					avatar: '',
					sex: '',
					sign: '',
					area: '',
					friend: false,
					lookhim: 1,
					lookme: 1,
					star: 0,
					isblack: 0,
					tags: []
				,
			
		,
		onShow() 
			this.getData();
		,
		onLoad(e) 
			uni.$on('saveRemarkTag', (e) => 
				this.detail.tagList = e.detail.tagList
				this.nickname = e.nickname;
			)
			if (!e.user_id) 
				return this.backToast();
			
			this.detail.id = e.user_id;
			// 获取当前用户资料
			this.getData();
		,
		beforeDestroy() 
			this.$refs.action.hide();
			uni.$off('saveRemarkTag')
		,
		computed: 
			tagPath() 
				return "mail/user-remark-tag/user-remark-tag?params="+JSON.stringify(
					user_id:this.detail.id,
					nickname:this.detail.nickname,
					tags:this.detail.tags ? this.detail.tags.join(',') : ''
				)
			,
			actions() 
				return [
					icon: "\\ue6b3",
					title: "设置备注和标签",
					type: "navigate",
					path: "mail/user-remark-tag/user-remark-tag?params="+JSON.stringify(
						user_id:this.detail.id,
						nickname:this.detail.nickname,
						tags:this.detail.tags ? this.detail.tags.join(',') : ''
					)
				, 
					icon: "\\ue613",
					title: "把他推荐给朋友",
					type: "navigate",
					path: "mail/send-card/send-card"
				, 
					icon: "\\ue6b0",
					title: this.detail.star ? '取消星标好友' : "设为星标朋友",
					type: "event",
					event: "setStar"
				, 
					icon: "\\ue667",
					title: "设置朋友圈和动态权限",
					type: "navigate",
					path: "mail/user-moments-auth/user-moments-auth?user_id="+this.detail.id+"&params="+JSON.stringify(
						lookme:this.detail.lookme,
						lookhim:this.detail.lookhim,
					)
				, 
					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: 
			addFriend() 
				let obj = 
					friend_id: this.detail.id,
					nickname: this.detail.nickname,
					lookme: typeof this.detail.lookme === 'number' ? this.detail.lookme : 1,
					lookhim: typeof this.detail.lookhim === 'number' ? this.detail.lookhim : 1,
				;
				return 'mail/add-friend/add-friend?params=' + JSON.stringify(obj);
			,
			getData() 
				$H.get('/friend/read/' + this.detail.id).then(res => 
					if (!res) 
						return this.backToast('该用户不存在');
					
					this.detail = res;
					console.log(res);
				);
			,
			openAction() 
				this.$refs.action.show()
			,
			navigate(url) 
				console.log(url)
				uni.navigateTo(
					url: '/pages/' + url,
				);
			,
			// 操作菜单事件
			popupEvent(e) 
				if (!e.type) 
					return;
				
				setTimeout(() => 
					// 关闭弹出层
					this.$refs.action.hide()
				, 300)
				switch (e.type) 
					case 'navigate':
						this.navigate(e.path);
						break;
					case 'event':
						this[e.event](e);
						break;
				



			,
			// 删除好友
			deleteItem()
				uni.showModal(
					title: '是否要删除好友?',
					success: res => 
						if(res.confirm)
							$H.post('/friend/destroy',friend_id:this.detail.id).then(res=>
								uni.showToast(
									title:'删除好友成功',
									icon:'none'
								);
								uni.reLaunch(
									url:'/pages/tabbar/index/index'
								)
							)
						
					,
					fail: () => ,
					complete: () => 
				);
			,
			// 设为星标
			setStar(e) 
				let star = this.detail.star == 0 ? 1 : 0;

				$H.post('/friend/setstar/' + this.detail.id, 
					star
				).then(res => 
					this.detail.star = star;
					e.title = this.detail.star ? '取消标星好友' : '设为标星好友';
				);
			,
			// 加入黑名单
			setBlack(e) 
				let msg = this.detail.isblack ? '移出黑名单' : '加入黑名单';
			
				uni.showModal(
					content: '是否要' + msg,
					success: (res) => 
						if (res.confirm) 
							let isblack = this.detail.isblack == 0 ? 1:0
							$H.post('/friend/setblack/' + this.detail.id, 
								isblack
							).then(res => 
								this.detail.isblack = isblack;
							);
							// this.detail.isBlack = !this.detail.isBlack;
							// e.title = this.isBlack ? '移出黑名单' : '加入黑名单';
							uni.showToast(
								title: msg + '成功',
								icon: 'none'
							)
						
					
				)
			,
		    // 发送消息
			doEvent(e)
				if(this.detail.isblack)
					return this.setBlack();
				
				uni.navigateTo(
					url:'../../chat/chat/chat?params='+encodeURIComponent(JSON.stringify(
						id:this.detail.id,
						name:this.detail.nickname ?  this.detail.nickname : this.detail.username,
						avatar:this.detail.avatar,
						chat_type:'user'
					))
				)
			
		
	
</script>

<style>

</style>

/pages/chat/chat-set/chat-set.vue

<template>
	<view style="background-color: #EDEDED;">
		<!-- 导航栏 -->
		<free-nav-bar title="聊天信息" showBack :showRight="false"></free-nav-bar>
		<view class="flex flex-wrap py-3 bg-white">
			<!-- 私聊 -->
			<view v-if="detail.chat_type === 'user'" class=uni-app swiper数量过多时卡顿优化方案,微信小程序swiper优化

Java 性能优化:35 个小细节,让你提升 Java 代码的运行效率

Java这 35 个 Java 代码优化细节!

;~ 小部分AutoHotkey源代码片段测试模板2019年10月9日.ahk

35个Java代码优化的细节,你知道几个?

入门学习uni-app只需这一篇即可