240 lines
7.0 KiB
Vue
240 lines
7.0 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view>
|
|||
|
|
<u-navbar :custom-back="goback" title=" " :background="{ background: '#ffffff' }" :border-bottom="false">
|
|||
|
|
<view class="slot-wrap" @click="toDetail()">
|
|||
|
|
<view>
|
|||
|
|
<u-icon name="more-dot-fill" color="#000000" :size="35"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</u-navbar>
|
|||
|
|
</view>
|
|||
|
|
<view class="friendInfo">
|
|||
|
|
<view class="img">
|
|||
|
|
<u-image :src="friendInfo.avatar"
|
|||
|
|
mode="aspectFill" width="120" height="120" border-radius="12">
|
|||
|
|
<u-loading slot="loading"></u-loading>
|
|||
|
|
<view slot="error"
|
|||
|
|
class="u-flex u-row-center u-col-center u-p-t-10"
|
|||
|
|
style="width: 90rpx;height: 90rpx;background-color: #f1f1f1;border-radius: 12rpx;">
|
|||
|
|
<view>
|
|||
|
|
<image src="/static/image/default/default-user/default-user.png"
|
|||
|
|
style="width: 64rpx;height: 64rpx;"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</u-image>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="friendInfo-desc">
|
|||
|
|
<view class="friendInfo-desc-name u-flex u-row-left u-col-center">
|
|||
|
|
<view class="u-line-2" style="font-size:42rpx;max-width: 400rpx;">
|
|||
|
|
<text>{{friendInfo.nickName}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="u-m-l-10 u-flex u-row-center u-col-center u-p-b-10">
|
|||
|
|
<view>
|
|||
|
|
<u-image v-if="friendInfo.sex==1" src="/static/image/chat/addFriend/woman.png" width="34rpx" height="34rpx"></u-image>
|
|||
|
|
<u-image v-if="friendInfo.sex==0" src="/static/image/chat/addFriend/man.png" width="34rpx" height="34rpx"></u-image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="friendInfo-desc-gray u-line-1 u-m-b-4" style="max-width: 500rpx;">微信号：{{friendInfo.chatNumber}}</view>
|
|||
|
|
<view v-if="friendInfo.address&&friendInfo.address!=0&&friendInfo.address.length>0" class="friendInfo-desc-gray">地区：{{friendInfo.address}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<u-cell-group>
|
|||
|
|
<u-cell-item title="备注和标签" :title-style="titleStyle"></u-cell-item>
|
|||
|
|
<u-cell-item :border-bottom="false" title="朋友权限"
|
|||
|
|
:title-style="titleStyle" @click="setFiendPermission"></u-cell-item>
|
|||
|
|
<u-gap height="20" bg-color="#eee" margin-top="1" margin-bottom="1"></u-gap>
|
|||
|
|
<u-cell-item :title-style="titleStyle">
|
|||
|
|
<view slot="title" class="u-flex u-row-left u-col-center">
|
|||
|
|
<view>
|
|||
|
|
<text>朋友圈</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="u-flex u-row-left u-col-center u-m-l-50"
|
|||
|
|
v-if="friendInfo.friendCircle&&friendInfo.friendCircle.length>0">
|
|||
|
|
<template v-for="(circle,index) in friendInfo.friendCircle.length">
|
|||
|
|
<view class="u-m-l-10" v-if="circle!=circle&&circle.length>0">
|
|||
|
|
<u-image :src="circle" :width="90" :height="90"></u-image>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</u-cell-item>
|
|||
|
|
<u-cell-item title="视频号" :title-style="titleStyle"></u-cell-item>
|
|||
|
|
<u-cell-item :border-bottom="false" title="更多信息" :title-style="titleStyle" @click="linkToMoreInfoMation"></u-cell-item>
|
|||
|
|
</u-cell-group>
|
|||
|
|
<u-gap height="20" bg-color="#eee" margin-top="0" margin-bottom="1"></u-gap>
|
|||
|
|
<view style="background-color: #ffffff;">
|
|||
|
|
<view class="u-flex u-row-center u-col-center u-p-30"
|
|||
|
|
style="font-size: 32rpx;color: #335f83;">
|
|||
|
|
<view class="u-m-r-20">
|
|||
|
|
<!-- width="36rpx" height="36rpx" -->
|
|||
|
|
<u-image src="/static/image/chat/sms-send.png" mode="aspectFit" width="40rpx" height="40rpx"></u-image>
|
|||
|
|
</view>
|
|||
|
|
<view style="font-weight: 450;">
|
|||
|
|
<text>发信息</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<u-gap height="1" bg-color="#eee"></u-gap>
|
|||
|
|
<view class="u-flex u-row-center u-col-center u-p-30"
|
|||
|
|
style="font-size: 32rpx;color: #335f83;">
|
|||
|
|
<view class="u-m-r-20">
|
|||
|
|
<!-- src="/static/image/chat/yinshipin.jpg" width="40rpx" height="40rpx"-->
|
|||
|
|
<u-image src="/static/image/chat/video-call.png" mode="aspectFit" width="50rpx" height="50rpx"></u-image>
|
|||
|
|
</view>
|
|||
|
|
<view style="font-weight: 450;">
|
|||
|
|
<text>音视频通话</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<u-action-sheet :list="callList" v-model="callShow" @click="callClick"></u-action-sheet>
|
|||
|
|
<u-top-tips ref="uTips"></u-top-tips>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
titleStyle: {
|
|||
|
|
marginLeft: '10rpx',
|
|||
|
|
color: '#000000',
|
|||
|
|
fontSize: "34rpx",
|
|||
|
|
},
|
|||
|
|
friendInfo: {},
|
|||
|
|
callList:[
|
|||
|
|
{text: '视频通话'},
|
|||
|
|
{text: '语音通话'}
|
|||
|
|
],
|
|||
|
|
callShow:false,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
let that=this;
|
|||
|
|
/* let param=JSON.parse(decodeURIComponent(option.personInfo));
|
|||
|
|
this.friendInfo=param; */
|
|||
|
|
this.friendInfo=this.yyy_current_user;
|
|||
|
|
//往好友里面塞
|
|||
|
|
let arr=JSON.parse(JSON.stringify(this.vuex_yyyFriendList));
|
|||
|
|
let isExist = arr.some(item=>item.chatNumber===this.friendInfo.chatNumber);
|
|||
|
|
if(!isExist){
|
|||
|
|
arr.push(this.friendInfo);
|
|||
|
|
};
|
|||
|
|
this.$u.vuex("vuex_yyyFriendList",arr);
|
|||
|
|
console.log("this.vuex_yyyFriendList=======",this.vuex_yyyFriendList);
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
goback(){
|
|||
|
|
console.log("自定义返回");
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta:3,
|
|||
|
|
animationType:"slide-out-right"
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//创建单聊会话
|
|||
|
|
createSingleChat:function(){
|
|||
|
|
let that=this;
|
|||
|
|
},
|
|||
|
|
//跳转聊天窗口
|
|||
|
|
linkToChatting:function(groupInfo) {
|
|||
|
|
let that=this;
|
|||
|
|
},
|
|||
|
|
//音视频弹窗
|
|||
|
|
toCall() {
|
|||
|
|
return;
|
|||
|
|
},
|
|||
|
|
//确认发起音视频
|
|||
|
|
callClick:function(index){
|
|||
|
|
this.globalUtil.utilAlert("不能进,没完事~敬请期待");
|
|||
|
|
},
|
|||
|
|
//设置标签
|
|||
|
|
setFiendTag() {
|
|||
|
|
this.globalUtil.utilAlert("不能进,没完事~敬请期待");
|
|||
|
|
return;
|
|||
|
|
},
|
|||
|
|
//设置朋友权限
|
|||
|
|
setFiendPermission() {
|
|||
|
|
this.globalUtil.utilAlert("不能进,没完事~敬请期待");
|
|||
|
|
return;
|
|||
|
|
},
|
|||
|
|
//查看朋友的朋友圈
|
|||
|
|
viewHisFiendCircle() {
|
|||
|
|
this.globalUtil.utilAlert("不能进,没完事~敬请期待");
|
|||
|
|
return;
|
|||
|
|
},
|
|||
|
|
//更多信息
|
|||
|
|
linkToMoreInfoMation() {
|
|||
|
|
this.$u.route({
|
|||
|
|
url: "/pages/tabbar/contact/friends/friend-more-info",
|
|||
|
|
params: {
|
|||
|
|
signature: this.friendInfo.signature
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
toDetail:function(){
|
|||
|
|
this.$u.route({
|
|||
|
|
url: "/pages/tabbar/contact/friends/friend-home-detail",
|
|||
|
|
params: {
|
|||
|
|
friendInfo:encodeURIComponent(JSON.stringify(this.friendInfo))
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.slot-wrap {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
/* 如果您想让slot内容占满整个导航栏的宽度 */
|
|||
|
|
flex: 1;
|
|||
|
|
width: 100%;
|
|||
|
|
/* 如果您想让slot内容与导航栏左右有空隙 */
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.perch {
|
|||
|
|
height: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friendInfo {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
padding: 20rpx 30rpx 40rpx 40rpx;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
|
|||
|
|
.img {
|
|||
|
|
display: block;
|
|||
|
|
width: 130rpx;
|
|||
|
|
height: 130rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-desc {
|
|||
|
|
padding-left: 30rpx;
|
|||
|
|
&-name {
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
transform: translateY(-10rpx);
|
|||
|
|
color: #000000;
|
|||
|
|
}
|
|||
|
|
&-gray {
|
|||
|
|
color: #757575;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 420rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<style>
|
|||
|
|
page{
|
|||
|
|
background-color: #eeeeee;
|
|||
|
|
}
|
|||
|
|
</style>
|