355 lines
7.2 KiB
Vue
355 lines
7.2 KiB
Vue
<template>
|
||
<view>
|
||
<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
|
||
<view class="navTitle fixed" :style="'top:'+menuTop+'px;line-height:'+menuH+'px;'">个人中心</view>
|
||
<view v-if="userInfo" class="personalInfoC relative flex" :style="'margin-top:'+infoTop+'px;'" @click="clickPersonalInfo()">
|
||
<image class="avatar" :src="userInfo.basic_info.avatar_url" mode="aspectFill"></image>
|
||
<view class="flex1">
|
||
<view class="nickname">{{userInfo.basic_info.nickname}}</view>
|
||
<view class="mobile">手机号：{{userInfo.basic_info.phone}}</view>
|
||
<view v-if="memberInfo&&memberInfo.is_member" class="mobile">{{memberInfo.subscription_type}}会员</view>
|
||
</view>
|
||
<image class="arrow" src="/static/icon/mine/infoArrow.png" mode="widthFix"></image>
|
||
</view>
|
||
<view v-if="userInfo" class="numList relative flex">
|
||
<view class="item flex1 flexColumnCenter" @click="clickNumItem(0)">
|
||
<view class="num">{{userInfo.statistics.total_comments}}</view>
|
||
<view class="title">评论回复</view>
|
||
</view>
|
||
<view class="item flex1 flexColumnCenter" @click="clickNumItem(1)">
|
||
<view class="num">{{userInfo.statistics.follows_count}}</view>
|
||
<view class="title">关注收藏</view>
|
||
</view>
|
||
<view class="item flex1 flexColumnCenter" @click="clickNumItem(2)">
|
||
<view class="num">{{userInfo.statistics.likes_count}}</view>
|
||
<view class="title">我的点赞</view>
|
||
</view>
|
||
</view>
|
||
<view class="vipC relative" @click="clickVip()">
|
||
<image class="icon" src="/static/image/mine/vipBg.png" mode="widthFix"></image>
|
||
<view v-if="memberInfo&&memberInfo.is_member" class="absolute tips">{{memberInfo.subscription_type}}会员，{{memberInfo.days_left}}天后到期</view>
|
||
<view v-else class="absolute tips">成为会员，可以获取更多价值资讯</view>
|
||
</view>
|
||
<view class="menuList relative">
|
||
<view class="list">
|
||
<view class="item relative flex" v-for="(item,index) in menuList" :key="index" @click="clickMenuItem(item.url,index)" >
|
||
<image class="icon" :src="item.icon" mode="aspectFit"></image>
|
||
<view class="title flex1">{{item.title}}</view>
|
||
<image class="arrow" src="/static/icon/mine/menuArrow.png" mode="widthFix"></image>
|
||
<!-- <button class="absolute" v-if="index==menuList.length-2" open-type="contact"></button> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<uni-popup ref="popup" type="center">
|
||
<view class="popup">
|
||
<image class="icon" src="/static/image/mine/service.png" mode="widthFix" show-menu-by-longpress></image>
|
||
<view class="title">企业二维码</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { inject } from 'vue';
|
||
import { userInfo, membershipStatus } from '@/request/api';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
menuTop:inject('menuTop'),
|
||
menuH: inject('menuHeight'),
|
||
infoTop:'',
|
||
userInfo:null, //用户信息
|
||
memberInfo:null, //会员信息
|
||
menuList:[{
|
||
icon:'/static/icon/mine/aboutUs.png',
|
||
title:'关于我们',
|
||
url:'/pages/mine/web/web?type=1'
|
||
},
|
||
{
|
||
icon:'/static/icon/mine/serviceTerm.png',
|
||
title:'服务条款',
|
||
url:'/pages/mine/web/web?type=2'
|
||
},
|
||
{
|
||
icon:'/static/icon/mine/privacyProtocol.png',
|
||
title:'隐私协议',
|
||
url:'/pages/mine/web/web?type=3'
|
||
},
|
||
{
|
||
icon:'/static/icon/mine/feedback.png',
|
||
title:'意见反馈',
|
||
url:'/pages/mine/feedback/feedback'
|
||
},
|
||
{
|
||
icon:'/static/icon/mine/customerService.png',
|
||
title:'联系客服',
|
||
},
|
||
{
|
||
icon:'/static/icon/mine/logout.png',
|
||
title:'退出登录',
|
||
}],
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.infoTop = inject('navHeight')+32/750*inject('windowWidth')
|
||
},
|
||
onShow() {
|
||
this.getUserInfoData()
|
||
this.getMemberStatus()
|
||
},
|
||
methods: {
|
||
|
||
/**
|
||
* 点击查看个人信息
|
||
*/
|
||
clickPersonalInfo()
|
||
{
|
||
uni.navigateTo({
|
||
url:'/pages/mine/basicInfo/basicInfo'
|
||
})
|
||
},
|
||
/**
|
||
* 点击vip
|
||
*/
|
||
clickVip()
|
||
{
|
||
uni.navigateTo({
|
||
url:'/pagesMine/vip/vip'
|
||
})
|
||
},
|
||
/**
|
||
* 查看评论收藏点赞
|
||
* @param {Object} index
|
||
*/
|
||
clickNumItem(index)
|
||
{
|
||
if(index==0)
|
||
{
|
||
//评论回复
|
||
uni.navigateTo({
|
||
url:'/pages/mine/commentReply/commentReply'
|
||
})
|
||
}else if(index==1)
|
||
{
|
||
//关注收藏
|
||
uni.navigateTo({
|
||
url:'/pages/mine/followCollect/followCollect'
|
||
})
|
||
}else
|
||
//我的点赞
|
||
uni.navigateTo({
|
||
url:'/pages/mine/myLike/myLike'
|
||
})
|
||
},
|
||
/**
|
||
* 点击菜单
|
||
* @param {Object} url
|
||
* @param {Object} index
|
||
*/
|
||
clickMenuItem(url,index)
|
||
{
|
||
if(url)
|
||
{
|
||
uni.navigateTo({
|
||
url
|
||
})
|
||
}else if(index==this.menuList.length-2)
|
||
{
|
||
//联系客服
|
||
this.$refs['popup'].open()
|
||
}else if(index==this.menuList.length-1)
|
||
{
|
||
//退出登录
|
||
uni.showModal({
|
||
title:'您确定要退出登录么',
|
||
success(res) {
|
||
if(res.confirm)
|
||
{
|
||
uni.removeStorageSync('token')
|
||
uni.switchTab({
|
||
url:'/pages/index/index'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
/**
|
||
* 获取用户信息数据
|
||
*/
|
||
getUserInfoData()
|
||
{
|
||
userInfo().then(res=>{
|
||
if(res.code==200)
|
||
{
|
||
this.userInfo = res.data
|
||
}else
|
||
wx.showToast({
|
||
title:res.message,
|
||
icon:'none'
|
||
})
|
||
}).catch(error=>{
|
||
|
||
})
|
||
},
|
||
/**
|
||
* 获取会员状态
|
||
*/
|
||
getMemberStatus()
|
||
{
|
||
membershipStatus().then(res=>{
|
||
if (res.code==200) {
|
||
this.memberInfo = res.data
|
||
} else
|
||
uni.showToast({
|
||
title:res.message,
|
||
icon:'none'
|
||
})
|
||
}).catch(error=>{
|
||
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
page
|
||
{
|
||
background-color: black;
|
||
}
|
||
.topBg
|
||
{
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
.navTitle
|
||
{
|
||
left: 0;
|
||
margin: 0 23rpx;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: white;
|
||
}
|
||
.personalInfoC
|
||
{
|
||
padding: 0 25rpx 0 30rpx;
|
||
.avatar
|
||
{
|
||
margin-right: 11rpx;
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
border-radius: 50%;
|
||
border: solid 3rpx white;
|
||
}
|
||
.nickname
|
||
{
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: white;
|
||
}
|
||
.mobile
|
||
{
|
||
margin-top: 6rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #F3C368;
|
||
}
|
||
.arrow
|
||
{
|
||
width: 15rpx;
|
||
height: auto;
|
||
}
|
||
}
|
||
.numList
|
||
{
|
||
.item
|
||
{
|
||
padding: 25rpx 0;
|
||
.num
|
||
{
|
||
font-size: 48rpx;
|
||
font-weight: 800;
|
||
color: white;
|
||
}
|
||
.title
|
||
{
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #FFECD3;
|
||
}
|
||
}
|
||
}
|
||
.vipC
|
||
{
|
||
margin: 0 45rpx;
|
||
.icon
|
||
{
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
.tips
|
||
{
|
||
top: 0;
|
||
left: 80rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
line-height: 90rpx;
|
||
z-index: 2;
|
||
}
|
||
|
||
}
|
||
.menuList
|
||
{
|
||
background-color: white;
|
||
margin: 0 25rpx;
|
||
padding: 0 20rpx 220rpx;
|
||
border-radius: 20rpx;
|
||
.item
|
||
{
|
||
height: 100rpx;
|
||
padding: 0 18rpx 0 20rpx;
|
||
border-bottom: solid 1rpx #F7F7F7;
|
||
font-size: 28rpx;
|
||
color: #222;
|
||
.icon
|
||
{
|
||
margin-right: 16rpx;
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
}
|
||
.arrow
|
||
{
|
||
width: 11rpx;
|
||
height: auto;
|
||
}
|
||
button
|
||
{
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.popup
|
||
{
|
||
background-color: white;
|
||
.icon
|
||
{
|
||
width: 560rpx;
|
||
height: auto;
|
||
}
|
||
.title
|
||
{
|
||
margin-top: 10rpx;
|
||
border-radius: 10rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|