cansnow
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>
|