240 lines
4.5 KiB
Vue
240 lines
4.5 KiB
Vue
<template>
|
||
<view>
|
||
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
|
||
<view class="navTitle fixed" :style="'top:'+menuTop+'px;line-height:'+menuH+'px;'">个人中心</view>
|
||
<view class="personalInfoC relative flex" :style="'margin-top:'+infoTop+'px;'" @click="clickPersonalInfo()">
|
||
<image class="avatar" src="" mode="aspectFill"></image>
|
||
<view class="flex1">
|
||
<view class="nickname">星河滚烫的理想</view>
|
||
<view class="mobile">手机号：13654800065</view>
|
||
</view>
|
||
<image class="arrow" src="/static/icon/mine/infoArrow.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="numList relative flex">
|
||
<view class="item flex1 flexColumnCenter" @click="clickNumItem(0)">
|
||
<view class="num">1</view>
|
||
<view class="title">评论回复</view>
|
||
</view>
|
||
<view class="item flex1 flexColumnCenter" @click="clickNumItem(1)">
|
||
<view class="num">1</view>
|
||
<view class="title">关注收藏</view>
|
||
</view>
|
||
<view class="item flex1 flexColumnCenter" @click="clickNumItem(2)">
|
||
<view class="num">1</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>
|
||
<view class="menuList relative">
|
||
<view class="list">
|
||
<view class="item relative flex" v-for="(item,index) in menuList" :key="index" @click="clickMenuItem(item.url)" >
|
||
<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-1" open-type="contact"></button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { inject } from 'vue';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
menuTop:inject('menuTop'),
|
||
menuH: inject('menuHeight'),
|
||
infoTop:'',
|
||
menuList:[{
|
||
icon:'/static/icon/mine/aboutUs.png',
|
||
title:'关于我们',
|
||
},
|
||
{
|
||
icon:'/static/icon/mine/serviceTerm.png',
|
||
title:'服务条款',
|
||
},
|
||
{
|
||
icon:'/static/icon/mine/privacyProtocol.png',
|
||
title:'隐私协议',
|
||
},
|
||
{
|
||
icon:'/static/icon/mine/feedback.png',
|
||
title:'意见反馈',
|
||
url:'/pages/mine/feedback/feedback'
|
||
},
|
||
{
|
||
icon:'/static/icon/mine/accountSetting.png',
|
||
title:'账户设置',
|
||
},
|
||
{
|
||
icon:'/static/icon/mine/customerService.png',
|
||
title:'联系客服',
|
||
}]
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.infoTop = inject('navHeight')+32/750*inject('windowWidth')
|
||
},
|
||
methods: {
|
||
/**
|
||
* 点击查看个人信息
|
||
*/
|
||
clickPersonalInfo()
|
||
{
|
||
uni.navigateTo({
|
||
url:'/pages/mine/basicInfo/basicInfo'
|
||
})
|
||
},
|
||
/**
|
||
* 点击vip
|
||
*/
|
||
clickVip()
|
||
{
|
||
uni.navigateTo({
|
||
url:'/pages/mine/vip/vip'
|
||
})
|
||
},
|
||
/**
|
||
* 查看评论收藏点赞
|
||
* @param {Object} index
|
||
*/
|
||
clickNumItem(index)
|
||
{
|
||
if(index==0)
|
||
{
|
||
//评论回复
|
||
uni.navigateTo({
|
||
url:'/pages/mine/commentReply/commentReply'
|
||
})
|
||
}else if(index==1)
|
||
{
|
||
|
||
}
|
||
},
|
||
clickMenuItem(url)
|
||
{
|
||
if(url)
|
||
{
|
||
uni.navigateTo({
|
||
url
|
||
})
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.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: #FFECD3;
|
||
}
|
||
.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
|
||
{
|
||
padding: 0 25rpx;
|
||
.icon
|
||
{
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
}
|
||
.menuList
|
||
{
|
||
background-color: white;
|
||
padding: 0 25rpx;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
.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%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|