重新优化 不知道你去掉了什么 直接报错了
<template>
<view class="flex-col page">
<view class="flex-col flex-auto group_2 space-y-10">
<view class="flex-col section">
<view class="flex-col justify-start items-start self-start relative group">
<image class="image_2"
:src="alipath+'/16994517123840546907.png'" />
<image class="image pos_2"
:src="alipath+'/16994517125586237777.png'" />
<view class="flex-col section_2 pos_3" style="width: 100%;"
:style="{paddingTop:StatusBarRpx+'rpx', }">
<view class="flex-col space-y-25">
<image class="image_3"
:src="alipath+'/16994517130786049328.png'"
@tap.stop="handleJumpDiy" data-type="navigateTo"
:data-url="`/pages/xtsz/system/system`" :class="!isXcx ? 'self-end' : ''" :style="isXcx ? 'margin-left:40rpx' : ''"/>
<view class="flex-row items-center"
style="width: 100%;display: flex;justify-content: space-between;">
<view class="flex-row items-center space-x-23" style="margin-left: 15px;position:relative"
@tap.stop="handleJumpDiy" data-type="navigateTo"
:data-url="`/pages/index/friend/user`">
<image class="image_4" mode="widthFix" :src="info.f_head_img" v-if="isLogin"/>
<image class="image_4" mode="widthFix" :src="'/static/logo.png'" v-if="!isLogin"/>
<!-- 在线状态start -->
<view class='flex align-center justify-center line2_0_c0_c1'
v-if="info.isOnline == 1 && isLogin ">
<view class='flex align-center line2_0_c0_c1_c0'>
</view>
<text class='line2_0_c0_c1_c1'>在线</text>
</view>
<view class='flex align-center justify-center line2_0_c0_c1'
v-if="info.isOnline == -1 && isLogin ">
<view class='flex align-center line2_0_c0_c1_c0' style="background:#be6dc9">
</view>
<text class='line2_0_c0_c1_c1' style="color:#be6dc9">隐身</text>
</view>
<view class='flex flex-wrap align-center justify-center line2_0_c0_c1'
v-if="info.isOnline == 0 && isLogin ">
<view class='flex flex-wrap align-center line2_0_c0_c1_c0' style="background: #999999;">
</view>
<text class='line2_0_c0_c1_c1' style="color: #999999;">离线</text>
</view>
<!-- 在线状态end -->
<view class="flex-col space-y-18">
<view class="flex-row" style=" overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 170px; height: 22px; line-height: 22px; display: block;">
<text class="text" v-if="isLogin">{{info.f_nickname}}</text>
<text class="text" v-if="!isLogin">请先登录</text>
<image class="shrink-0 image_5"
:src="alipath+'/16994517134198692639.png'" />
</view>
<text v-if="isLogin" class="text_3" style=" width: 170px; line-height: 17px; display: block; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;">{{info.autograph || '您还没填写个性签名哦~'}}</text>
<text v-if="!isLogin" class="text_3" style=" width: 170px; line-height: 17px; display: block; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;">登录后查看更多功能</text>
</view>
</view>
<view class="flex-col justify-start text-wrapper_2" @click="goMy" v-if="isLogin">
<text class="text_2">查看个人名片</text>
</view>
</view>
</view>
<view class="" style=" width: 100%; display: flex; justify-content: space-evenly; flex-wrap: nowrap; flex-direction: row; margin-top: 60px; "> <view class="flex-col items-center space-y-26">
<text class="font_1 text_4" style="color:#000">{{info.f_look_num || '-'}}</text>
<text class="font_2">被查看次数</text>
</view>
<view class="horiz-divider section_3"></view>
<view class="flex-col items-center space-y-26">
<text class="font_1 text_5" style="color:#000">{{info.f_like_num || '-'}}</text>
<text class="font_2">被喜欢次数</text>
</view>
</view>
</view>
</view>
</view>
<view class="flex-col section_4">
<view class="flex-row justify-between items-center group_4" style="display: flex;flex-wrap: wrap;"
@tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/index/friend/album`" v-if="info && isLogin">
<view class="flex-row space-x-20">
<text class="font_3">照片墙</text>
</view>
<image class="image_9"
:src="alipath+'/16994517137526599838.png'"/>
<view class="" style="width: 100%; max-height: 112px; margin-top: 15px;">
<view style="display: flex; flex-wrap: nowrap; justify-content: flex-start;" v-if="info && info.f_images.length > 0">
<image class="image_7 equal-division-item" v-for="(item,inde) in info.f_images"
:src="item" mode="aspectFill"/>
</view>
<view class="" v-if="info && info.f_images.length == 0">
<view class="" style="border: 1px solid #6bf4e6; padding: 25px 20px; border-radius: 10px; position: relative; color: #333;">
<image src="https://apps.xiaodan01.com/xcx/friend/jingmei.png" mode="widthFix" style="width: 30px;"></image>
<text style=" margin-top: -28px; display: block; margin-left: 36px;">上传你的第一张照片吧~</text>
<view class="flex-col justify-start text-wrapper_2" style=" position: absolute; right: 15px;top: 42px; border-radius: 15px; padding: 0 0; }">
<text class="text_2" style="line-height: 28px;">立即上传</text>
</view>
</view>
</view>
</view>
</view>
<view class="flex-row justify-between items-center group_4" @tap.stop="goUrl('/pages/index/friend/likes')">
<view class="flex-row space-x-20">
<image class="shrink-0 image_8" :src="alipath+'/16994517139178409865.png'" />
<text class="font_3">我的喜欢</text>
</view>
<image class="image_9" :src="alipath+'/16994517137526599838.png'" />
</view>
<view class="flex-row justify-between items-center group_4" @tap.stop="goUrl('/pages/index/friend/laheilist')">
<view class="flex-row space-x-20">
<image class="shrink-0 image_10" :src="alipath+'/16994517140932942492.png'" />
<text class="font_3">我的拉黑</text>
</view>
<image class="image_9" :src="alipath+'/16994517137526599838.png'" />
</view>
<view class="flex-row justify-between items-center group_4 border_group_0" @tap.stop="yinshen" v-if="isLogin">
<view class="flex-row space-x-20">
<image class="shrink-0 image_10" :src="alipath+'/clearonline.png'" />
<text class="font_3" v-if="info && info.isOnline == -1">点击上线(当前状态:<text style='color:#be6dc9'>隐身</text>)</text>
<text class="font_3" v-else>隐身并清除位置</text>
</view>
</view>
</view>
</view>
<view class="flex-row justify-between tab-bar page_bottom">
<view class="flex-col items-center group_11" @click="goTab(1)">
<image class="image_7" src="https://apps.xiaodan01.com/xcx/friend/tab1.png" /> <text class="font_7">交友</text>
</view>
<view class="flex-col items-center group_11" @click="goTab(2)">
<view class="badge" v-if="chatNoNum > 0">{{ chatNoNum > 99 ? '•••' : chatNoNum }}</view>
<image class="image_7" src="https://apps.xiaodan01.com/xcx/friend/tab2.png" style="width: 45rpx;height: 42rpx;" /> <text
class="font_7">消息</text>
</view>
<view class="flex-col items-center group_11" @click="goTab(3)">
<image class="image_7" src="https://apps.xiaodan01.com/xcx/friend/tab3_sel.png" style="width: 43rpx;height: 45rpx;" /> <text
class="font_7 sel_tab">我的</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isXcx:true,
info: {
f_images: [],
isOnline:0
},
alipath:'https://huoxiaobang.oss-cn-wulanchabu.aliyuncs.com/appxcx',
unreadnum: 0,
};
},
computed: {
chatNoNum() {
return this.$store.state.chatNoNum;
},
isLogin() {
return this.$store.state.token == '' ? false : true;
}
},
onLoad() {
//#ifdef MP-WEIXIN
this.isXcx = true
//#endif
if(global.token){
//并且将邂逅用户状态设置为在线状态
// this.$api.post(global.apiUrls.post5cb54af125f1c, {isOnline:1}).then((res) => {console.log('更新用户为在线状态')})
}
},
onShow() {
// this.unreadnum = getApp().globalData.unReadMessageNum2
if(global.token){
this.getInfo()
}
},
methods: {
goUrl(_url){
if(!global.token){
this.toLoginDiy()
return false
}
uni.navigateTo({
url:_url
})
},
goMy() {
uni.navigateTo({
url: '/pages/index/friend/detail?id=' + global.userInfo.id
})
},
yinshen(){
var _this = this
var txt = '';
var _isOnlineClear = 1;//清除位置
if(this.info.isOnline == -1){
txt = '是否立即上线,即可在交友大厅展示给其他人~'
_isOnlineClear = 0
}else if(this.info.isOnline == 1){
txt = '隐身并清除位置之后,其他人无法在交友大厅看见你哦~'
_isOnlineClear = 1
}
this.$util.showModal({
title: '提示',
content: txt,
confirmColor: '#be6dc9',
success: function(res) {
if (res.confirm) {
//并且将邂逅用户状态设置为隐身状态
_this.$api.post(global.apiUrls.post5cb54af125f1c, {isOnlineClear:_isOnlineClear,isOnline:6}).then((res) => {
console.log('更新用户为隐身状态')
if(res.data.code == 1){
_this.getInfo()
}
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
getInfo() {
if (!global.token) {
uni.redirectTo({
url: '/pagesLogin/login/login/login'
})
return false
}
this.$api.post(global.apiUrls.post656578e8e6103, {
id: global.userInfo.id,
is_my: 1
})
.then((res) => {
if (res.statusCode == 200 && res.data.code == 1) {
this.info = res.data.data
// isOnline
// this.$forceUpdate()
} else {
this.$message.info(res.data.msg)
setTimeout(function() {
uni.navigateBack(-1)
}, 800)
}
})
.catch((err) => {
console.log(err);
console.log("err: " + JSON.stringify(err));
});
},
goTab(_tab) {
var _url = ''
switch (_tab) {
case 1:
_url = '/pages/index/friend/friend'
break;
case 2:
_url = '/pages/index/friend/xiaoxi'
break;
case 3:
_url = '/pages/index/friend/wode'
break;
}
uni.redirectTo({
url: _url
})
},
},
};
</script>
<style scoped lang="css">
@import './common.css';
.page {
background-color: #fff;
width: 100%;
height: 100vh;
}
.line2_0_c0_c1_c1 {
color: #00C70F;
font-size: 22rpx;
font-weight: 400;
transform: scale(0.6);
white-space: nowrap;
}
.line2_0_c0_c1_c0 {
background: #00C70F;
width: 10rpx;
height: 10rpx;
border-radius: 10rpx;
margin: 0rpx 0rpx 0rpx 0rpx;
}
.line2_0_c0_c1 {
background: rgba(0, 0, 0, 0.6);
position: absolute;
left: 8rpx;
bottom: -1px;
border-radius: 15rpx 15rpx 15rpx 15rpx;
/* width: 60rpx;
height: 28rpx; */
padding: 0px 3px;
}
.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 {
/* padding-bottom: 32rpx; */
background-color: #ffffff;
/* height: 836rpx; */
}
.group {
/* margin-left: -488rpx; */
/* padding-bottom: 226rpx; */
width: 100%;
}
.image_2 {
margin-left: 0;
width: 750rpx;
height: 499rpx;
}
.image {
width: 1035rpx;
height: 501rpx;
}
.pos_2 {
position: absolute;
left: -100px;
top: 0;
}
.text-wrapper {
padding: 529rpx 0 165rpx;
background-image:url(https://huoxiaobang.oss-cn-wulanchabu.aliyuncs.com/appxcx/16994517127291192994.png);
background-size: 100% 100%;
background-repeat: no-repeat;
width: 921rpx;
}
.pos {
position: absolute;
left: 0;
top: 0;
}
.font_3 {
font-size: 32rpx;
font-family: PingFang SC;
line-height: 31rpx;
font-weight: 500;
color: #333333;
}
.text_6 {
margin-right: 305rpx;
}
.section_2 {
/* padding: 40rpx 9rpx 0; */
background-image:url(https://huoxiaobang.oss-cn-wulanchabu.aliyuncs.com/appxcx/16994517129071023893.png);
background-size: 100% 100%;
background-repeat: no-repeat;
/* width: 1093rpx; */
}
.pos_3 {
position: absolute;
right: 0;
top: 0;
}
.space-y-25>view:not(:first-child),
.space-y-25>text:not(:first-child),
.space-y-25>image:not(:first-child) {
margin-top: 25rpx;
}
.image_3 {
width: 32rpx;
height: 31rpx;
margin-right: 20px;
margin-top: 20px;
}
.space-x-23>view:not(:first-child),
.space-x-23>text:not(:first-child),
.space-x-23>image:not(:first-child) {
margin-left: 23rpx;
}
.image_4 {
width: 135rpx;
height: 135rpx;
border-radius: 135rpx;
}
.space-y-18>view:not(:first-child),
.space-y-18>text:not(:first-child),
.space-y-18>image:not(:first-child) {
margin-top: 18rpx;
}
.text {
color: #262626;
font-size: 40rpx;
font-family: PingFang SC;
font-weight: 700;
line-height: 38rpx;
}
.image_5 {
margin: 3rpx 0 0 19rpx;
width: 17rpx;
height: 32rpx;
}
.text_3 {
color: #999999;
font-size: 22rpx;
font-family: PingFang SC;
line-height: 21rpx;
}
.button {
margin-left: 165rpx;
}
.text-wrapper_2 {
padding: 14rpx 0;
background-color: #6bf4e6;
border-radius: 28rpx 0px 0px 28rpx;
height: 56rpx;
margin-top: -15px;
}
.text_2 {
margin-left: 24rpx;
margin-right: 15rpx;
color: #ffffff;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
line-height: 28rpx;
}
.equal-division {
align-self: flex-start;
margin-left: 89rpx;
margin-top: 64rpx;
}
.group_3 {
width: 516rpx;
}
.space-y-26>view:not(:first-child),
.space-y-26>text:not(:first-child),
.space-y-26>image:not(:first-child) {
margin-top: 26rpx;
}
.font_1 {
font-size: 40rpx;
font-family: PingFang SC;
line-height: 31rpx;
font-weight: 500;
color: #333333;
}
.text_4 {
line-height: 30rpx;
}
.font_2 {
font-size: 28rpx;
font-family: PingFang SC;
line-height: 28rpx;
font-weight: 500;
color: #666666;
}
.horiz-divider {
margin: 4rpx 0 19rpx;
}
.section_3 {
width: 2rpx;
height: 59rpx;
background: #d4d4d4;
}
.text_5 {
line-height: 30rpx;
}
.equal-division_2 {
position: relative;
margin: -131rpx 32rpx 0;
}
.image_6 {
flex: 1 1 210rpx;
}
.equal-division-item {
border-radius: 6rpx;
width: 210rpx;
height: 210rpx;
margin-left: 7px;
}
.section_4 {
padding: 0 30rpx 100rpx;
background-color: #ffffff;
}
.group_4 {
padding: 36rpx 0 33rpx;
border-bottom: solid 2rpx #eeeeee;
}
.border_group_0{
border:0;
}
.space-x-20>view:not(:first-child),
.space-x-20>text:not(:first-child),
.space-x-20>image:not(:first-child) {
margin-left: 20rpx;
}
.image_8 {
width: 32rpx;
height: 29rpx;
}
.image_9 {
width: 14rpx;
height: 26rpx;
}
.group_5 {
padding-top: 36rpx;
}
.image_10 {
width: 32rpx;
height: 32rpx;
}
.badge {
position: absolute;
top: -5px;
right: 8px;
width: 20px;
height: 20px;
z-index: 9;
border: 1px solid #FFFFFF;
color: #ffffff;
background: #FF6464;
border-radius: 50%;
font-size: 16rpx;
text-align: center;
line-height: 20px;
}
</style>
最新发布
由于博客内容为空，无法提取关键信息生成摘要。
扫一扫
1337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
