增加音乐,摇一摇,服务等页面
This commit is contained in:
cansnow
@@ -0,0 +1,239 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user