gree_leran/pages/user/user.vue

248 lines
5.0 KiB
Vue
Raw Normal View History

2024-06-22 07:20:39 +00:00
<template>
<up-popup :show="show" mode="bottom" :round="10" @close="close" @open="open" bgColor="#A8E6CF">
<view class="updata-user" >
<UpdateUserBox @updata="updata"></UpdateUserBox>
</view>
2024-06-22 14:19:10 +00:00
2024-06-22 07:20:39 +00:00
</up-popup>
<view class="main">
<view class="top-back">
<text class="page-title">我的</text>
2024-06-22 14:19:10 +00:00
2024-06-22 07:20:39 +00:00
<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>
2024-06-22 14:19:10 +00:00
<button v-if="!islogin" @click="clickLogin">登录</button>
2024-06-22 07:20:39 +00:00
</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" @click="goToYm(item)">
<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>
2024-06-14 01:11:29 +00:00
<script setup>
import {
ref,
reactive
} from 'vue';
import {
2024-06-16 01:04:56 +00:00
onLoad,onShow
2024-06-14 01:11:29 +00:00
} from "@dcloudio/uni-app"
2024-06-20 15:36:19 +00:00
const app=getApp();
2024-06-22 07:20:39 +00:00
2024-06-20 15:36:19 +00:00
const userUtils=ref(app.globalData.utils);
2024-06-16 01:04:56 +00:00
import {isLogin,getToken} from "../../utils/Auth.js"
import {loginByCode,userInfo} from "@/comm/api.js"
2024-06-14 01:11:29 +00:00
const serviceList = reactive([{
2024-06-22 07:20:39 +00:00
title: "修改信息",
thumb: '/static/icon_1/renyuan.png',
page: "000"
2024-06-14 01:11:29 +00:00
},
{
2024-06-22 07:20:39 +00:00
title: "我的喜欢",
thumb: '/static/icon_1/aixin.png',
page: "/pages/userLik/userLik"
2024-06-14 01:11:29 +00:00
},
2024-06-22 07:20:39 +00:00
{
title: "我的收藏",
thumb: '/static/icon_1/biaoqian.png',
page: "/pages/ymCollection/ymCollection"
},
// {
// title: "设置中心",
// thumb: '/static/icon/icon_wdszzx.png',
// page: "/pages/user/setting"
// },
2024-06-14 01:11:29 +00:00
])
2024-06-22 07:20:39 +00:00
const show=ref(false);
2024-06-22 14:19:10 +00:00
const islogin=ref(false);
2024-06-14 01:11:29 +00:00
const user = ref({
avatar: "/static/icon/tx.png",
nickName: "点击登录"
})
2024-06-22 07:20:39 +00:00
const close=()=>{
show.value=false;
}
const open=()=>{
show.value=true;
}
2024-06-22 14:19:10 +00:00
const clickLogin=()=>{
gologin();
}
2024-06-20 15:36:19 +00:00
async function gologin(){
2024-06-16 01:04:56 +00:00
if(isLogin()){
2024-06-22 14:19:10 +00:00
islogin.value=true;
2024-06-16 01:04:56 +00:00
return
}
2024-06-20 15:36:19 +00:00
let res=await userUtils.value.login();
2024-06-22 07:20:39 +00:00
if(res.code==200){
2024-06-22 14:19:10 +00:00
islogin.value=true;
2024-06-22 07:20:39 +00:00
getUserInfo();
}else{
uni.showToast({
icon: "none",
title: "登录失败,请检查网络"
})
}
2024-06-16 01:04:56 +00:00
}
async function getUserInfo(){
const resp = await userInfo()
user.value = resp.data
2024-06-22 14:19:10 +00:00
islogin.value=true;
2024-06-16 01:04:56 +00:00
}
2024-06-22 07:20:39 +00:00
const updata=()=>{
getUserInfo();
close();
}
const goToYm=(e)=>{
if(e.page=="000"){
open();
return ;
}
// 尝试 navigateTo 方法
uni.navigateTo({
url: e.page,
fail: () => {
// 如果 navigateTo 失败,尝试 switchTab 方法
uni.switchTab({
url: e.page,
fail: (err) => {
console.error('导航失败:', err);
}
});
}
});
}
2024-06-16 01:04:56 +00:00
onShow(()=>{
getUserInfo()
})
2024-06-14 01:11:29 +00:00
onLoad(() => {
})
</script>
<style lang="scss" scoped>
@import "../../css/var.scss";
2024-06-22 07:20:39 +00:00
.updata-user{
width: 90%;
// margin:2;
// padding: 20rpx;
// box-sizing: border-box;
margin: 20rpx auto;
// background-color:#A8E6CF;
}
2024-06-14 01:11:29 +00:00
.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>