<template> <view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}"> <cus-header title='我的' :showback="false" bgColor='transparent'></cus-header> <image class="topbg" src="http://106.54.209.120:8188/static/my_topbg.png"></image> <div class="info adffcacjc"> <image src="http://106.54.209.120:8188/static/my_avatat_default.png"></image> <p>{{username}}</p> </div> <div class="items"> <div class="item adfacjb" @tap="toTurn('/pagesMy/device')"> <div class="il adfac"> <image src="http://106.54.209.120:8188/static/my_device.png"></image> <text>我的设备</text> </div> <div class="ir"> <u-icon name="arrow-right" color="#D3D2D2" size="34"></u-icon> </div> </div> <div class="item adfacjb" @tap="toTurn('/pagesMy/useBook')"> <div class="il adfac"> <image src="http://106.54.209.120:8188/static/my_book.png"></image> <text>用户使用手册</text> </div> <div class="ir"> <u-icon name="arrow-right" color="#D3D2D2" size="34"></u-icon> </div> </div> <div class="item adfacjb" @tap="toTurn('/pagesMy/feedback')"> <div class="il adfac"> <image src="http://106.54.209.120:8188/static/myu_idea.png"></image> <text>意见反馈</text> </div> <div class="ir"> <u-icon name="arrow-right" color="#D3D2D2" size="34"></u-icon> </div> </div> <div class="item adfacjb"> <div class="il adfac"> <image src="http://106.54.209.120:8188/static/my_version.png"></image> <text>版本</text> </div> <div class="ir">{{'1.0.0'}}</div> </div> </div> <div class="exit" @tap="exitLogin">退出登录</div> <cus-tabbar :tabbarIndex="2"></cus-tabbar> </view> </template> <script> import cusTabbar from '@/components/CusTabbar/index.vue' export default { components:{ cusTabbar }, data(){ return { username:'' } }, onShow() { if(uni.getStorageSync('userInfo')){ let username = JSON.parse(uni.getStorageSync('userInfo')).username; this.username = username.replace(/^(.{3})(?:\d+)(.{4})$/, "$1 **** $2"); } }, methods:{ toTurn(url){ if(!url) return uni.navigateTo({ url }) }, exitLogin(){ uni.showModal({ title:'温馨提示', content:'是否确定退出登录?', success: (res) => { if(res.confirm){ uni.clearStorageSync(); uni.reLaunch({ url:'/pages/login' }) } } }) } } } </script> <style scoped lang="less"> .tabPage{ background: #FFFFFF; padding: 0 30rpx 192rpx; box-sizing: border-box; .topbg{ width: 100%; height: 720rpx; position: fixed; top: 0; left: 0; } .info{ position: relative; margin-top: 68rpx; &>image{ width: 200rpx; height: 200rpx; border-radius: 50%; } p{ font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 48rpx; color: #111111; line-height: 32rpx; text-align: center; margin-top: 40rpx; } } .items{ position: relative; margin-top: 93rpx; .item{ width: 100%; padding: 39rpx 20rpx; box-sizing: border-box; background: #FFFFFF; box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC; border-radius: 16rpx 16rpx 0rpx 0rpx; .il{ image{ width: 36rpx; height: 36rpx; } text{ font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 30rpx; color: #111111; line-height: 32rpx; margin-left: 34rpx; } } .ir{ font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 30rpx; color: #111111; line-height: 32rpx; text-align: right; } } } .exit{ width: 100%; height: 88rpx; background: #F8F8F7; border-radius: 24rpx; margin-top: 190rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 30rpx; color: #111111; line-height: 88rpx; text-align: center; letter-spacing: 2rpx; } } </style>