first save
This commit is contained in:
215
scoring/pages/my/my.vue
Normal file
215
scoring/pages/my/my.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<view class="my">
|
||||
<view class="user-info">
|
||||
<view class="background">
|
||||
|
||||
</view>
|
||||
<view class="info-content">
|
||||
<view class="top-user-name" :style="{'height': topHeight, 'line-height': topHeight}">
|
||||
{{userInfo.nickName}}
|
||||
</view>
|
||||
<view class="avatars">
|
||||
<image class="avatar-img" :src="userInfo.avatarUrl ? userInfo.avatarUrl : 'https://pic.rmb.bdstatic.com/bjh/down/1742bc3845cbbcf0c78c01eb59bb1c1a.jpeg'"></image>
|
||||
</view>
|
||||
<view class="hello-text">
|
||||
<p>你好，{{userInfo.nickName}}</p>
|
||||
<p>欢迎使用计分小程序</p>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="section">
|
||||
<view class="list">
|
||||
<view class="row">
|
||||
<view class="left">
|
||||
<uni-icons type="contact" size="20" color="#28b389"></uni-icons>
|
||||
<view class="text">更改头像昵称</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<uni-icons type="right" size="20"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="left">
|
||||
<uni-icons type="fire" size="20" color="#28b389"></uni-icons>
|
||||
<view class="text">数据统计</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="text">33</view>
|
||||
<uni-icons type="right" size="20"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="left">
|
||||
<uni-icons type="redo" size="20" color="#28b389"></uni-icons>
|
||||
<view class="text">分享给朋友</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<uni-icons type="right" size="20"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="section">
|
||||
<view class="list">
|
||||
<view class="row">
|
||||
<view class="left">
|
||||
<uni-icons type="info" size="20" color="#28b389"></uni-icons>
|
||||
<view class="text">使用说明</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<uni-icons type="right" size="20"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="row">
|
||||
<view class="left">
|
||||
<uni-icons type="chatboxes" size="20" color="#28b389"></uni-icons>
|
||||
<view class="text">建议与反馈</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<uni-icons type="right" size="20"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted, ref, getCurrentInstance } from 'vue'
|
||||
import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
|
||||
import { getOpenId } from '@/utils/wxutils.js'
|
||||
import { register, login } from '@/api/user.js'
|
||||
|
||||
const proxy = getCurrentInstance().proxy;
|
||||
|
||||
// 小程序胶囊高度
|
||||
const topHeight = ref(proxy.$StaticValue.getTopHeight());
|
||||
|
||||
// 用户信息相关
|
||||
const userInfo = ref({});
|
||||
const getUserInfo = async () => {
|
||||
// 从本地获取用户信息
|
||||
userInfo.value = proxy.$StaticValue.getUserInfo();
|
||||
if(!userInfo.value?.userId) {
|
||||
// 如果没有登录, 获取到当前用户的openid
|
||||
const openIdRes = await getOpenId();
|
||||
const openId = openIdRes.openid;
|
||||
userInfo.value = {
|
||||
openId: openId,
|
||||
nickName: '用户'+openId.substring(0, 6)
|
||||
};
|
||||
register(userInfo.value).then(res => {
|
||||
// 注册成功就执行登录
|
||||
login(userInfo.value).then(loginRes => {
|
||||
userInfo.value = loginRes.data;
|
||||
// 存储用户信息到本地
|
||||
proxy.$StaticValue.setUserInfo(userInfo.value);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
getUserInfo();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.my {
|
||||
width: 750rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.user-info {
|
||||
--user-height: 500rpx;
|
||||
width: 750rpx;
|
||||
height: var(--user-height);
|
||||
background-color: #f5f5f5;
|
||||
position: relative;
|
||||
.background {
|
||||
width: 750rpx;
|
||||
height: var(--user-height);
|
||||
background-image: linear-gradient(rgb(87, 255, 87), rgb(144, 251, 144));
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
.info-content {
|
||||
width: 750rpx;
|
||||
height: var(--user-height);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
.top-user-name {
|
||||
width: 750rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.avatars {
|
||||
width: 750rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20rpx;
|
||||
.avatar-img {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
border-radius: 75rpx;
|
||||
border: 4rpx solid #ffffff;
|
||||
}
|
||||
}
|
||||
.hello-text {
|
||||
width: 750rpx;
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
font-size: 30rpx;
|
||||
color: #000000;
|
||||
p {
|
||||
margin: 5rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.section{
|
||||
width: 690rpx;
|
||||
margin: 50rpx auto;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||
.list{
|
||||
.row{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 5rpx;
|
||||
padding: 0 30rpx;
|
||||
height: 100rpx;
|
||||
border: 1px solid #eee;
|
||||
&last-child{
|
||||
border-bottom: 0;
|
||||
}
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.text{
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.text{
|
||||
font-size: 28rpx;
|
||||
color:#aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user