<template> <view class="user-content"> <!-- 头部 --> <view class="user-head" @click="toUserPage"> <view class="user-photo"> <text v-if="hasLogin"><open-data type="userAvatarUrl"></open-data></text> <u-image v-else src="/static/logo.png" width="100" height="100"></u-image> </view> <view class="user-info"> <text v-if="hasLogin"><open-data type="userNickName"></open-data></text> <u-button v-else size="mini" shape="circle" @click="toLoginPage">登录</u-button> </view> <view v-if="hasLogin"> <u-icon name="arrow-right" color="#fff"></u-icon> </view> </view> <view class="my-ledou" v-if="hasLogin"> <view class="user-jifen"> <view>我的乐豆:<text>345</text></view> <u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image> </view> <view> <u-button size="mini" type="warning" shape="circle" @click="toLdPage">查看明细</u-button> </view> </view> <!-- 列表 --> <view class="user-list"> <u-cell-group> <u-cell-item icon="order" icon-size="38" :icon-style="{color:'#ff5500'}" index="1" @click="toPage" title="我的订单"></u-cell-item> <u-cell-item icon="gift" icon-size="40" :icon-style="{color:'#00aaff'}" index="0" @click="toPage" title="投递记录"></u-cell-item> <u-cell-item icon="question-circle" icon-size="40" :icon-style="{color:'#19be6b'}" index="0" @click="toPage" title="常见问题"></u-cell-item> <u-cell-item icon="phone" icon-size="40" :icon-style="{color:'#f00'}" index="0" @click="toPage" title="联系客服"></u-cell-item> <u-cell-item icon="file-text" icon-size="40" :icon-style="{color:'#ffaa00'}" index="2" @click="toPage" title="服务协议"></u-cell-item> <!-- <u-cell-item icon="info-circle" icon-size="38" :icon-style="{color:'#55aa00'}" index="3" @click="toPage" title="关于我们"></u-cell-item> --> </u-cell-group> </view> </view> </template> <script> import {logout, checkLogin } from '@/api/login.js' export default { data() { return { quitButton: { borderRadius:'100rpx', fontSize:'30rpx', background: '#01c9b2' }, hasLogin: false }; }, onShow() { checkLogin().then(res => { console.log(res) this.hasLogin = res.status == 200 }) }, onLoad() { }, methods:{ // 打开对应的页面 toPage(index){ let pageUrl=[ '/pages/userCenter/deliveryRecord', '/pages/order/order', '/pages/agreement/agreement?fromPage=usercenter', '/pages/userCenter/aboutUs' ] if(index<2&&this.hasLogin || index>=2){ uni.navigateTo({ url: pageUrl[index] }) }else{ this.toLoginPage() } }, // 跳转 toUserPage(){ // 未登录跳转登录,已登录跳转用户信息页 if(this.hasLogin){ uni.navigateTo({ url: '/pages/userCenter/userInfo/userInfo' }) }else{ this.toLoginPage() } }, // 乐豆明细 toLdPage(){ uni.navigateTo({ url: '/pages/userCenter/ldDetailed' }) }, bindGetUserInfo(res){ console.log(res) }, toLoginPage(){ uni.navigateTo({ url: '/pages/login/login' }) } } } </script> <style lang="scss"> .user-content{ width: 100%; .user-head{ background: #01c9b2; display: flex; align-items: center; padding: 35rpx 55rpx; .user-info{ flex-grow: 1; padding: 0 20rpx; color: #FFFFFF; } .user-photo{ width: 100rpx; height: 100rpx; border-radius: 50%; overflow: hidden; margin-right: 5rpx; } } .my-ledou{ background: #FFFFFF; border-radius: 15upx; display: flex; align-items: center; justify-content: space-between; padding: 20upx; margin: 20upx; box-shadow: 0upx 3upx 6upx #eee; .user-jifen{ display: flex; align-items: center; text{ font-size: 40upx; font-weight: bold; color: red; } >view{ &:first-child{ display: flex; align-items: center; } } } } .user-list{ border-radius: 15upx; margin: 20upx; overflow: hidden; box-shadow: 0upx 3upx 6upx #eee; } .user-btn{ padding: 85rpx 200rpx; } } </style>