帮我这个页面 增加一个 查看他的朋友圈的按钮 放在哪里好看? 现在底部是有 聊天 喜欢 按钮
<template>
<view class="flex-col page">
<view class="flex-col self-start space-y-492">
<view class="flex-row justify-between">
<view class="flex flex-direction flex-wrap align-center justify-center benben-flex-layout firstHome_flex_1">
<view style="position: relative">
<swiper ref="benbenSwiperfd1_0" :current="bannerIndexfd1_0"
@change="bannerIndexfd1_0 = $event.detail.current"
class='flex position-relative firstHome_fd1_0' previous-margin="0rpx" next-margin="0rpx"
:display-multiple-items="1" :interval="5000" :duration="500" :autoplay='true' :circular='true'>
<swiper-item class='flex firstHome_fd1_0' v-for="(item, index) in bannerList" v-if="bannerList.length > 0">
<image class='firstHome_fd1_0_c1_c0' mode="aspectFill" :src='item' @tap.stop="multiImagePreview( item , bannerList )" ></image>
</swiper-item>
<swiper-item class='flex firstHome_fd1_0' v-if="bannerList.length == 0">
<image class='firstHome_fd1_0_c1_c0' mode="aspectFill" :src='info.f_head_img' @tap.stop="singleImagePreview(info.f_head_img)"></image>
</swiper-item>
</swiper>
<view data-v-774fccd4="" class="flex-col justify-start items-center self-start text-wrapper" v-if="bannerList.length > 0">
<text data-v-774fccd4="" class="font_2 text_3"><span>{{bannerIndexfd1_0 + 1}} / {{bannerList.length}}</span></text>
</view>
</view>
</view>
<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1" style="position: fixed;
top: -12px;
left: 0px;padding: 15px;" :style="{top:StatusBarRpx+'rpx', }">
<text class='fu-iconfont2 top_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back" data-url="1"></text>
</view>
<view class="self-end text_2" style="position:fixed;right: 0; font-size: 26px; top: 0; padding: 15px;font-size: 26px;color: #000;" @tap.stop="popupShow1692179452356=true"
:style="{top:StatusBarRpx+'rpx', }" v-if="!is_my && isLogin">...</view>
</view>
</view>
<view class="flex-col space-y-10">
<view class="flex-col section_2">
<view class="flex-row items-center space-x-8">
<text class="text_4">{{info.f_nickname}}</text>
<view class="flex-row shrink-0 section_3 space-x-4" v-if="info.sex == 2">
<image
class="shrink-0 image_5" :src="alipath+'/16994512298122140741.png'"/>
<text class="text_5">{{info.age}}</text>
</view>
<view class="flex-row shrink-0 section_3 space-x-4" v-if="info.sex == 1" style="background: #6FD4F3;">
<image
class="shrink-0 image_5" :src="alipath+'/16994512311687342470.png'">
<text class="text_5">{{info.age}}</text>
</view>
</view>
<view class="flex-row group_2 space-x-10">
<image
class="image_6"
:src="alipath+'/16994517866089658540.png'"
/>
<text class="text-999" style="font-size: 12px;">{{info.address}} {{info.juli}}</text>
</view>
<view class="flex-row items-center group_3 space-x-10">
<image
class="image_7"
:src="alipath+'/16994517867562976861.png'"
/>
<text class="font_4">交友宣言</text>
<image
class="image_7"
:src="alipath+'/16994517867562976861.png'"
/>
</view>
<text class="self-start text_6">{{info.autograph || '这个人很懒...且很神秘'}}</text>
</view>
<view class="flex-col section_2">
<view class="flex-row items-center space-x-10">
<image
class="image_7"
:src="alipath+'/16994517867562976861.png'"
/>
<text class="font_4">个人信息</text>
<image
class="image_7"
:src="alipath+'/16994517867562976861.png'"
/>
</view>
<view class="flex-row justify-between group_4">
<view class="flex-row hang1">
<text class="font_3">年龄:</text>
<text class="font_5">{{info.age > 0 ? info.age+'岁' : '未知'}}</text>
</view>
<view class="flex-row hang1">
<text class="font_3">身高:</text>
<text class="font_5">{{info.f_height || '未知'}}</text>
</view>
</view>
<view class="flex-row justify-between group_4">
<view class="flex-row hang1">
<text class="font_3">体重:</text>
<text class="font_5">{{info.f_weight || '未知'}}</text>
</view>
<view class="flex-row hang1">
<text class="font_3">学历:</text>
<text class="font_5">{{info.f_xueli || '未知'}}</text>
</view>
</view>
<view class="flex-row justify-between group_4">
<view class="flex-row hang1">
<text class="font_3">情感:</text>
<text class="font_5">{{info.f_qinggan || '未知'}}</text>
</view>
<view class="flex-row hang1">
<text class="font_3">职业:</text>
<text class="font_5">{{info.f_zhiye || '未知'}}</text>
</view>
</view>
</view>
</view>
<view class="flex-col section_4">
<view class="flex-col space-y-30">
<view class="flex-row items-center space-x-10">
<image
class="image_7"
:src="alipath+'/16994517867562976861.png'"
/>
<text class="font_4">个人标签</text>
<image
class="image_7"
:src="alipath+'/16994517867562976861.png'"
/>
</view>
<view class="flex-row " style="flex-wrap: wrap;">
<view class="flex-col justify-start items-center button" style="margin-right: 10px;" v-for="(item,index) in info.f_label_list">
<text class="font_2" >{{item}}</text>
</view>
</view>
</view>
<view class="" style="height: 100rpx;">
</view>
<view class="flex-row equal-division" v-if="!is_my && info.is_follow == 0">
<view class="flex-row justify-center items-center equal-division-item section_5 space-x-16" @tap.stop="toChat(info)">
<image
class="image_8"
:src="alipath+'/16994517860206336861.png'"
/>
<text class="font_6">聊天</text>
</view>
<view class="flex-row justify-center items-center equal-division-item_2 section_6 space-x-12" @click="followDo">
<image
class="image_9"
:src="alipath+'/16994517862130527894.png'"
/>
<text class="font_6" v-if="info.is_follow == 0" >喜欢</text>
</view>
</view>
<view class="flex-row equal-division" v-if="!is_my && info.is_follow == 1">
<view class="flex-row justify-center items-center equal-division-item section_5 space-x-16" @tap.stop="toChat(info)">
<image
class="image_8"
:src="alipath+'/16994517860206336861.png'"
/>
<text class="font_6">聊天</text>
</view>
<view class="flex-row justify-center items-center section_6 space-x-12" style="
width: 50px;height:50px;margin-left: 10px;" @click="followDo">
<image
class="image_9"
:src='STATIC_URL+"heart-break-fill.png"'
style="margin-left: 4px; width: 26px; height: 25px; "/>
<text class="font_6" ></text>
</view>
</view>
</view>
<benben-popup v-model="popupShow1692179452356" :mask="true" :mask-close-able="true" mode='bottom'>
<view class="flex benben-flex-layout flex-wrap align-center">
<view class='flex flex-direction flex-wrap align-stretch reviewDetails_fd2_0'>
<view class='flex flex-wrap align-center justify-around reviewDetails_fd2_0_c1'>
<view class='flex flex-direction flex-wrap align-center reviewDetails_fd2_0_c1_c0'
@tap.stop="handleJumpDiy"
data-type="navigateTo"
:data-url="`/pages/xtsz/feedBack/feedBack`">
<text class='reviewDetails_fd2_0_c1_c0_c1'>举报Ta</text>
</view>
<view class='flex flex-direction flex-wrap align-center' @tap.stop="lahei">
<text class='reviewDetails_fd2_0_c1_c0_c1'>拉黑Ta</text>
</view>
</view>
<view class='flex flex-wrap align-center justify-center reviewDetails_fd2_0_c2'>
<view class='flex flex-wrap align-center justify-center reviewDetails_fd2_0_c2_c0'
@tap.stop="popupShow1692179452356=false">
<text class='reviewDetails_fd2_0_c2_c0_c0'>取消</text>
</view>
</view>
</view>
</view>
</benben-popup>
</view>
</view>
</template>
<script>
export default {
data() {
return {
popupShow1692179452356:false,
id:0,
alipath:'https://huoxiaobang.oss-cn-wulanchabu.aliyuncs.com/appxcx',
info:[],
bannerList:[],
bannerIndexfd1_0: 0,
is_my:false,
dingwei:'',
};
},
computed: {
isLogin() {
return this.$store.state.token == '' ? false : true;
}
},
onLoad(option) {
let {
id
} = option
this.id = option.id
if(!global.token){
// this.toLoginDiy()
// return false
}else{
if(this.id == global.userInfo.id){
this.is_my = true
}else{
this.is_my = false
}
}
this.getInfo()
},
methods: {
lahei(){
if(!global.token){
this.toLoginDiy()
return false
}
var that = this
this.$util.showModal({
title: '提示',
content: '是否拉黑此用户?',
confirmColor: '#E93323',
// uni.showModal({
// title: "是否确定拉黑此用户?",
success: function (res) {
if (res.confirm) {
that.$api.post(global.apiUrls.post656bf07e55fa2,{
user_id:that.id
})
.then((res) => {
that.$message.info(res.data.msg)
if (res.statusCode == 200 && res.data.code == 1 && res.data.data.lahei == 1) {
setTimeout(function(){
uni.navigateBack()
},800)
}
that.popupShow1692179452356 = false
})
}
}
});
},
toChat(item){
if(!global.token){
this.toLoginDiy()
return false
}
var nameList = {
id: item.id,//对方id
name: item.f_nickname,//聊天窗口对方昵称
avatar: item.f_head_img
};
uni.navigateTo({
url: '/pages/index/friend/privateChat'+'?to=' + JSON.stringify(nameList)
});
// var islogin = uni.getStorageSync("myUsername");
// // 聊天没登录
// if (islogin == '') {
// this.$message.info("遇到了点小差错哦~请稍后重试")
// setTimeout(function(){
// uni.navigateBack()
// },800)
// return false
// }
// //聊天留存接口
// var nameList = {
// myName: global.userInfo.hx_uniqid_id,//我的id
// your: item.hx_uniqid_id,//对方环信id
// nickname: item.f_nickname,//聊天窗口对方昵称
// avatar: item.f_head_img, //我的头像? tade
// he_user_id : this.id, //用于点击详情主页
// my_user_id : global.userInfo.id //用于点击详情主页
// };
// uni.navigateTo({
// url:'/pages/chatroom/chatroom?username=' + JSON.stringify(nameList),
// });
},
followDo(){
if(this.follow_flag){
return false
}
this.follow_flag = true
this.$api.post(global.apiUrls.post5d7e38b5e7e31,{
user_id:this.id
})
.then((res) => {
this.$message.info(res.data.msg)
if (res.statusCode == 200 && res.data.code == 1) {
this.info.is_follow = !this.info.is_follow
this.$forceUpdate()
} else {
}
this.follow_flag = false
})
},
getInfo(){
this.dingwei = uni.getStorageSync('myPosition') || ''
console.log(this.dingwei);
var lat = this.dingwei.latitude || ''
var lng = this.dingwei.longitude || ''
this.$api.post(global.apiUrls.post656578e8e6103,{
id:this.id,
user_id:global.userInfo.id || 0,
latitude:lat,
longitude:lng
})
.then((res) => {
if (res.statusCode == 200 && res.data.code == 1) {
this.info = res.data.data
this.bannerList = res.data.data.f_images || []
} else {
this.$message.info(res.data.msg)
setTimeout(function(){
uni.navigateBack(-1)
},800)
}
})
.catch((err) => {
console.log("err: " + JSON.stringify(err));
});
}
},
};
</script>
<style scoped lang="css">
@import './common.css';
.reviewDetails_fd2_0_c2_c0_c0 {
color: #666666;
font-size: 15px;
font-weight: 400;
}
.reviewDetails_fd2_0_c2_c0 {
background:#ededed;
border-radius: 44rpx 44rpx 44rpx 44rpx;
width: 686rpx;
height: 80rpx;
margin: 24rpx 0rpx 24rpx 0rpx;
line-height: 40px;
}
.reviewDetails_fd2_0_c2 {
/* border-top: 1px solid #eee; */
}
.reviewDetails_fd2_0_c1_c0_c1 {
font-weight: 400;
color: #333;
line-height: 40px;
font-size: 15px;
}
.reviewDetails_fd2_0_c1_c0_c0 {
width: 80rpx;
height: 80rpx;
border-radius: 40rpx 40rpx 40rpx 40rpx;
margin: 0rpx 0rpx 16rpx 0rpx;
}
.reviewDetails_fd2_0_c1_c0 {
/* margin: 0rpx 57rpx 0rpx 0rpx; */
width: 100%;
}
.reviewDetails_fd2_0_c1 {
/* border-bottom: 1px solid #eee; */
padding: 40rpx 0rpx 0rpx 0rpx;
/* margin: 0rpx 46rpx 0rpx 46rpx; */
}
.reviewDetails_fd2_0_c0_c2_c0 {
width: 40rpx;
height: 40rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.reviewDetails_fd2_0_c0_c1_c0 {
font-size: 32rpx;
font-weight: 500;
color: #333;
margin: 0rpx 24rpx 0rpx 24rpx;
}
.reviewDetails_fd2_0_c0_c1 {
padding: 32rpx 0rpx 32rpx 0rpx;
}
.reviewDetails_fd2_0_c0_c0 {
width: 40rpx;
height: 40rpx;
}
.reviewDetails_fd2_0_c0 {
padding: 0rpx 32rpx 0rpx 32rpx;
}
.reviewDetails_fd2_0 {
background: #fff;
padding: 0rpx 0rpx 0rpx 0rpx;
background-size: 100% auto !important;
border-radius: 28rpx 28rpx 0rpx 0rpx;
width: 750rpx;
}
.firstHome_numberfd1_0_c0 {
background: rgba(213, 213, 213, 0.41);
position: absolute;
bottom: 20rpx;
right: 30rpx;
width: 80rpx;
height: 40rpx;
border-radius: 6rpx 6rpx 6rpx 6rpx;
font-size: 24rpx;
color: #FFFFFF;
line-height: 46rpx;
font-weight: 400;
}
.firstHome_fd1_0_c1_c0 {
width: 750rpx;
height: 750rpx;
/* border-radius: 24rpx 24rpx 24rpx 24rpx; */
}
.firstHome_fd1_0 {
width: 750rpx;
height: 750rpx;
/* border-radius: 24rpx 24rpx 24rpx 24rpx; */
overflow: hidden;
}
.firstHome_swiperDotUnselectedfd1_0 {
border: 3px solid rgba(255, 255, 255, 0.6);
background: #FFFFFF;
width: 8rpx;
height: 8rpx;
border-radius: 10rpx 10rpx 10rpx 10rpx;
margin: 0rpx 6rpx 0rpx 0rpx;
font-size: 24rpx;
color: #fff;
opacity: 0.5;
}
.firstHome_swiperDotSelectedfd1_0 {
border: 3px solid var(--benbenbdColor1);
background: #FFFFFF;
width: 28rpx;
height: 8rpx;
border-radius: 10rpx 10rpx 10rpx 10rpx;
margin: 0rpx 6rpx 0rpx 0rpx;
font-size: 24rpx;
color: #fff;
}
::v-deep .firstHome_swiperDotfd1_0 {
position: absolute;
bottom: 8rpx;
left: 0rpx;
right: 0rpx;
}
page{
}
body{
height: 100vh;
}
uni-page-body{
background-color: #fff;
}
.page {
background-color: #f9f9f9;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.section {
padding: 39rpx 20rpx 24rpx 35rpx;
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: #ffffff;
width: 755rpx;
}
.space-y-492 > view:not(:first-child),
.space-y-492 > text:not(:first-child),
.space-y-492 > image:not(:first-child) {
margin-top: 492rpx;
}
.space-y-41 > view:not(:first-child),
.space-y-41 > text:not(:first-child),
.space-y-41 > image:not(:first-child) {
margin-top: 41rpx;
}
.image {
width: 33rpx;
height: 20rpx;
}
.image_2 {
margin-left: 9rpx;
width: 30rpx;
height: 21rpx;
}
.font_1 {
font-size: 26rpx;
font-family: PingFang SC;
line-height: 20rpx;
font-weight: 700;
color: #000000;
}
.text {
margin-left: 26rpx;
}
.group {
margin-right: 9rpx;
}
.image_3 {
width: 54rpx;
height: 23rpx;
}
.text_2 {
/* margin-right: 7rpx; */
color: #ffffff;
font-size: 40rpx;
font-family: PingFang SC;
font-weight: 500;
line-height: 5rpx;
}
.image_4 {
width: 127rpx;
height: 127rpx;
}
.text-wrapper {
/* margin-top: 77rpx; */
padding: 8rpx 0;
background-color: #66666699;
border-radius: 20rpx;
min-width: 84rpx;
height: 40rpx;
position: absolute;
bottom: 15px;
right: 10px;
}
.font_2 {
font-size: 24rpx;
font-family: PingFang SC;
line-height: 24rpx;
font-weight: 500;
color: #556866;
}
.text_3 {
color: #ffffff;
font-weight: unset;
}
.space-y-10 > view:not(:first-child),
.space-y-10 > text:not(:first-child),
.space-y-10 > image:not(:first-child) {
margin-top: 10rpx;
}
.section_2 {
padding: 30rpx;
background-color: #ffffff;
}
.space-x-8 > view:not(:first-child),
.space-x-8 > text:not(:first-child),
.space-x-8 > image:not(:first-child) {
margin-left: 8rpx;
}
.text_4 {
color: #262626;
font-size: 40rpx;
font-family: PingFang SC;
font-weight: 700;
line-height: 38rpx;
}
.section_3 {
padding: 4rpx 8rpx;
background-color: #fa7eba;
border-radius: 12rpx;
height: 24rpx;
}
.space-x-4 > view:not(:first-child),
.space-x-4 > text:not(:first-child),
.space-x-4 > image:not(:first-child) {
margin-left: 4rpx;
}
.image_5 {
width: 16rpx;
height: 16rpx;
}
.text_5 {
color: #ffffff;
font-size: 20rpx;
font-family: PingFang SC;
line-height: 16rpx;
}
.group_2 {
margin-top: 26rpx;
}
.image_6 {
width: 20rpx;
height: 26rpx;
}
.hang1{
display: flex;
width: 50%;
}
.font_3 {
font-size: 26rpx;
font-family: PingFang SC;
line-height: 25rpx;
color: #999999;
width: 80rpx;
display: block;
}
.group_3 {
margin-top: 39rpx;
}
.space-x-10 > view:not(:first-child),
.space-x-10 > text:not(:first-child),
.space-x-10 > image:not(:first-child) {
margin-left: 10rpx;
}
.image_7 {
width: 10rpx;
height: 10rpx;
}
.font_4 {
font-size: 30rpx;
font-family: PingFang SC;
line-height: 28rpx;
font-weight: 500;
color: #333333;
}
.text_6 {
margin-top: 29rpx;
color: #999999;
font-size: 28rpx;
font-family: PingFang SC;
line-height: 28rpx;
}
.group_4 {
margin-top: 30rpx;
}
.font_5 {
width: calc(100% - 80rpx);
font-size: 26rpx;
font-family: PingFang SC;
line-height: 25rpx;
color: #333333;
}
.group_5 {
margin-right: 142rpx;
}
.space-x-49 > view:not(:first-child),
.space-x-49 > text:not(:first-child),
.space-x-49 > image:not(:first-child) {
margin-left: 49rpx;
}
.text_7 {
line-height: 21rpx;
}
.group_6 {
margin-top: 19rpx;
}
.space-x-164 > view:not(:first-child),
.space-x-164 > text:not(:first-child),
.space-x-164 > image:not(:first-child) {
margin-left: 164rpx;
}
.text_8 {
line-height: 26rpx;
}
.group_7 {
margin-top: 15rpx;
}
.group_8 {
margin-right: 144rpx;
}
.space-x-48 > view:not(:first-child),
.space-x-48 > text:not(:first-child),
.space-x-48 > image:not(:first-child) {
margin-left: 48rpx;
}
.section_4 {
padding: 30rpx 30rpx 73rpx;
background-color: #ffffff;
}
.space-y-30 > view:not(:first-child),
.space-y-30 > text:not(:first-child),
.space-y-30 > image:not(:first-child) {
margin-top: 30rpx;
}
.button {
background-color: #eaf4f3;
border-radius: 23rpx;
border-radius: 12px;
padding: 0 7px;
height: 25px;
line-height: 25px;
text-align: center;
display: block;margin-bottom: 5px;
}
.button_2 {
padding: 12rpx 0;
background-color: #eaf4f3;
border-radius: 23rpx;
width: 110rpx;
height: 46rpx;
}
.button_3 {
padding: 12rpx 0;
background-color: #eaf4f3;
border-radius: 23rpx;
width: 190rpx;
height: 46rpx;
}
.equal-division {
/* margin-right: 10rpx; */
margin-top: 46rpx;
position: fixed;left:25rpx;bottom:10px;width:700rpx }
.equal-division-item {
flex: 1 1 330rpx;
}
.section_5 {
padding: 30rpx 0;
background-image: linear-gradient(-73deg, #6bf4e6 0%, #9cffd6 100%);
border-radius: 50rpx;
height: 100rpx;
}
.space-x-16 > view:not(:first-child),
.space-x-16 > text:not(:first-child),
.space-x-16 > image:not(:first-child) {
margin-left: 16rpx;
}
.image_8 {
width: 38rpx;
height: 41rpx;
}
.font_6 {
font-size: 36rpx;
font-family: PingFang SC;
line-height: 34rpx;
font-weight: 500;
color: #ffffff;
}
.equal-division-item_2 {
flex: 1 1 330rpx;
margin-left: 20rpx;
}
.section_6 {
padding: 30rpx 0;
background-image: linear-gradient(-41deg, #d460ff 0%, #ff99da 100%);
border-radius: 50rpx;
height: 100rpx;
width: 100rpx;
}
.space-x-12 > view:not(:first-child),
.space-x-12 > text:not(:first-child),
.space-x-12 > image:not(:first-child) {
margin-left: 12rpx;
}
.image_9 {
width: 42rpx;
height: 38rpx;
}
</style>