176 lines
3.4 KiB
Vue
176 lines
3.4 KiB
Vue
<script setup>
|
|
import {
|
|
ref,
|
|
reactive
|
|
} from 'vue';
|
|
import {
|
|
onLoad,onShow
|
|
} from "@dcloudio/uni-app"
|
|
import {isLogin,getToken} from "../../utils/Auth.js"
|
|
import {loginByCode,userInfo} from "@/comm/api.js"
|
|
const serviceList = reactive([{
|
|
title: "个人信息",
|
|
thumb: '/static/icon/icon_wdgrxx.png',
|
|
page: "/pages/user/userInfo"
|
|
},
|
|
|
|
{
|
|
title: "设置中心",
|
|
thumb: '/static/icon/icon_wdszzx.png',
|
|
page: "/pages/user/setting"
|
|
},
|
|
|
|
])
|
|
const user = ref({
|
|
avatar: "/static/icon/tx.png",
|
|
nickName: "点击登录"
|
|
})
|
|
function gologin(){
|
|
if(isLogin()){
|
|
return
|
|
}
|
|
uni.navigateTo({
|
|
url:"/pages/user/login"
|
|
})
|
|
}
|
|
async function getUserInfo(){
|
|
const resp = await userInfo()
|
|
user.value = resp.data
|
|
}
|
|
onShow(()=>{
|
|
getUserInfo()
|
|
})
|
|
onLoad(() => {
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view class="main">
|
|
<view class="top-back">
|
|
<text class="page-title">我的</text>
|
|
<view class="info-box" @click="gologin">
|
|
<image :src="user.profilePicture||'/static/icon/tx.png'" mode="scaleToFill"></image>
|
|
<view class="text-box">
|
|
<text class="nick-name">
|
|
{{user.username}}
|
|
</text>
|
|
<view class="tag">
|
|
{{user.phoneNumber}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="list-box">
|
|
<up-list :scrollable="false">
|
|
<up-list-item v-for="(item, index) in serviceList" :key="index">
|
|
<up-cell :title="item.title">
|
|
<template #icon>
|
|
<up-avatar shape="square" size="35" :src="item.thumb"
|
|
customStyle="margin: -3px 5px -3px 0"></up-avatar>
|
|
</template>
|
|
</up-cell>
|
|
</up-list-item>
|
|
</up-list>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@import "../../css/var.scss";
|
|
|
|
.uni-list-item__content-title {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.main {
|
|
background-color: $backgrud-color;
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
.list-box {
|
|
width: calc(100% - 20px);
|
|
margin: 0 auto;
|
|
height: 60vh;
|
|
background: #FFFFFF;
|
|
margin-top: 20rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
|
|
.top-back {
|
|
|
|
height: 400rpx;
|
|
background-size: contain;
|
|
// background-color: $prmary-back;
|
|
background: $prmary-back;
|
|
// background-image: url("https://juyuanzhineng.oss-cn-beijing.aliyuncs.com/20b6251b-f92e-4207-8671-f80552a143e0.png");
|
|
|
|
.info-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
position: relative;
|
|
top: 186rpx;
|
|
left: 28rpx;
|
|
|
|
.text-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 24rpx;
|
|
|
|
.tag {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #FFFFFF;
|
|
line-height: 44rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
background-color: #4878FF;
|
|
border-radius: 40rpx;
|
|
text-align: center;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.nick-name {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #333333;
|
|
line-height: 70rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
}
|
|
|
|
&>image {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.page-title {
|
|
margin: 0 auto;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #fff;
|
|
line-height: 28rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
top: 112rpx;
|
|
}
|
|
}
|
|
</style> |