CBB3/pages/chat/friend/info.vue

<template>
	<view>
		<uni-nav-bar statusBar backgroundColor="#fff" fixed title="查看好友" left-icon="left" @clickLeft="utils.navigateBack()">
		</uni-nav-bar>
		

		<view class="info fx-r fd-bc" v-if="data != null">
			<view class="avatar">
				<image :src="data.avatar == '' ? '/static/img/user-avatar1.png' : data.avatar" mode="aspectFill"></image>
			</view>
			<view class="user-info">
				<view class="nickname fx-r fx-bc">
					<image  src="/static/chat/sex.png" mode="widthFix"></image>
					{{data.friend != null ?  (data.friend.remark || data.nickname) : data.nickname}}
				</view>
				<view class="tag-nickname" v-if="data.friend != null && data.friend.remark != ''" >昵称:{{data.nickname}}</view>
				<view class="info-name">编码：{{data.number_code}}</view>
				<view class="info-name">地区：{{data.region}}</view>
			</view>
		</view>
		<view class="info-qm">
			<view class="label">个性签名</view>
			<view class="mono">{{data.signature || '~暂无~'}}</view>
		</view>
		<view class="list-item" v-if="data.friend != null">
			<view class="item fx-r fx-bc fx-ac" @tap="tapOpen" :data-url="'noteinfo?usercode=' + usercode">
				<view class="label">备注信息</view>
				<view class="fx-g1"></view>
				<view class="tag-label">{{data.friend.remark}}</view>
				<image class="pve" src="/static/chat/ic_next.png" mode="widthFix"></image>
			</view>
			<view class="item fx-r fx-bc fx-ac" @tap="tapPhone">
				<view class="label">电话号码</view>
				<view class="fx-g1"></view>
				<view class="tag-label" v-for="item in isPhone(data.friend.phone)">
					{{item}}
				</view>
				<image class="pve" src="/static/chat/ic_next.png" mode="widthFix"></image>
			</view>
		</view>
		
		<view class="list-item"v-if="data.friend != null" @tap="tapOpen"  :data-url="'more?usercode=' + usercode + '&is_black=' + data.friend.is_black">
			<view class="item fx-r fx-bc fx-ac">
				<view class="label">更多信息</view>
				<view class="fx-g1"></view>
				<view></view>
				<image class="pve" src="/static/chat/ic_next.png" mode="widthFix"></image>
			</view>
		</view>
		
		
		<view class="list-item" @tap="tapAddBtn" v-if="data.friend == null && data.is_me == 0">
			<view class="item fx-r fx-bc fx-ac">
				<view class="label">添加通讯录</view>
			</view>
		</view>
		
		
		<view class="list-item" v-if="data.friend != null">
			<view class="item fx-r fx-bc fx-ac" @tap="tapSend">
				<view class="label">发送消息</view>
			</view>
		</view>
		
		<view class="black-item" v-if="data.friend != null && data.friend.is_black == 1">已添加至黑名单，你将不在收到对方的消息</view>
		
		
		<view class="call-pop" v-if="isPop">
			<view class="bg"></view>
			<view class="sheel-foot">
				<view class="items">
					<view class="item" @tap="tapOpenPhone(item)" v-for="item in isPhone(data.friend.phone)">{{item}}</view>
				</view>
				<view class="not-item" @tap="isPop = false">取消</view>
			</view>
			
		</view>	
		
	</view>
</template>
<style lang="scss">
	.info{background: #fff;padding: 10px;margin-top: 20rpx;}
	.info .avatar image{width: 60px;height: 60px;border-radius: 50%;}
	.user-info{margin-left: 10px;width: calc(100% - 70px);}
	.user-info .nickname{font-size: 16px;}
	.user-info .nickname image{width: 15px;}
	.info-name{color: $ic-default-text;font-size: 12px;margin-top: 6px;}
	.info-qm{padding: 10px;background: #fff;}
	.info-qm .label{color:$ic-default-text;font-size: 14px;}
	.info-qm .mono{color:$ic-default-text;font-size: 14px;padding: 20px;}
	.list-item{background: #fff;padding: 0px 20px;margin-top: 10px;}
	.list-item .item{padding: 20px 0;border-bottom: 1px solid #f1f1f1;}
	.list-item .item:last-child{border-bottom: 0;}
	.list-item .item .label{font-size: 16px;color:$ic-default-text;}
	.list-item .item .pve{width: 20px;}
	.tag-nickname{font-size: 14px;color: $ic-default-text;margin-top: 4px;}
	.tag-label{color:$ic-default-text ;}
	.call-pop{position:fixed;width: 100%;height: 100%;left: 0;top: 0;}
	.call-pop .bg{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);}
	.call-pop .sheel-foot{position: absolute;bottom: 0;width: 100%;}
	.call-pop .sheel-foot .items{border-radius: 10px;background: #fff;margin: 10px;}
	.call-pop .sheel-foot .items .item{padding: 10px 0;text-align: center;border-bottom: 1px solid #f1f1f1;color: $ic-appcolor;font-size: 16px;}
	.call-pop .sheel-foot .items .item:last-child{border-bottom: 0;}
	.call-pop .sheel-foot .not-item{border-radius: 10px;background: #fff;margin: 10px;padding: 10px;text-align: center;color: red;}
	.black-item{font-size: 14px;color:$ic-default-text;padding: 10px;text-align: center;}
</style>


<script>
	import {mapState,mapMutations } from 'vuex';
	export default {
	    data() {
	        return {
				data : {},
				usercode : "",
				isPop:false
	        }  
	    },
		
		onLoad(option){
			this.usercode = option.usercode || "";
		},
		
		onShow() {
			this.getData();
		},
		
	    methods: {
			
			/**
				 * 获取get数据
				 */
				getData:function(){
					uni.showLoading({	title: '获取数据中..'});
					this
						.request
						.post("chatFriendFind",{usercode:this.usercode})
						.then(res => {
							uni.hideLoading();
							if(res.code == 200) {
								this.data = res.data;
							} else {
								uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
							}
						})
						.catch(res=>{
							console.log(res);
							uni.hideLoading();
							uni.showModal({title: '系统提示',content: '加载失败，重新点击尝试！',showCancel: false});
						});
				},
				isPhone:function(str){
					if(str == '') return [];
					return str.split(',');
				},
				/**
				 * open
				 * @param {Object} ev
				 */
				tapOpen:function(ev){
					let url = ev.currentTarget.dataset.url;
					this.utils.navigateTo(url);
				},
				tapSend:function(){
					this.utils.navigateTo("/pages/chat/chat?groupId=" + this.data.friend.group_id + "&usercode=" + this.data.uid);
				},	
				
				/**
				 * 
				 */
				tapPhone:function(){
					if(this.data.friend.phone == '') {
						return;
					}
					this.isPop = true;
				},
				/**
				 * 打开手机号码
				 * @param {Object} item
				 */
				tapOpenPhone:function(item){
					uni.makePhoneCall({ phoneNumber:item});
				},
				/**
				 * 添加好友
				 */
				tapAddBtn:function(){
					uni.showLoading({	title: '获取数据中..'});
					this
						.request
						.post("chatFriendAdd",{usercode:this.usercode})
						.then(res => {
							uni.hideLoading();
							if(res.code == 200) {
								if(res.data.stats == 1) {
									this.utils.Tip("加入成功");
									this.getData();
								} else {
									uni.navigateTo({
										url:"checkAdd?userCode=" + this.usercode
									})
								}
							} else {
								uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
							}
						})
						.catch(res=>{
							console.log(res);
							uni.hideLoading();
							uni.showModal({title: '系统提示',content: '加载失败，重新点击尝试！',showCancel: false});
						});
					
				}
	    }
	}
</script>

<style>
</style>