240 lines
6.7 KiB
Vue
240 lines
6.7 KiB
Vue
<template>
|
||
|
||
|
||
<!-- 注意，如果userinfo被加载出来才会显示这个内容，避免报错。否则就显示loding -->
|
||
<view class="userLayout pageBg" v-if="userinfo">
|
||
<!-- 添加一个状态栏的高度，避免被刘海屏挡住了 -->
|
||
<view :style="{height:getNavBarHeight() + 'px'}"></view>
|
||
|
||
<view class="userinfo">
|
||
<view class="avatar">
|
||
<image src="/static/images/xxmLogo.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="ip">{{userinfo.IP}}</view>
|
||
<view class="address">来自于：
|
||
<!-- 避免开代理获取不到城市和省份的情况，外面考虑以下爱的内容，最不其给你在中国 -->
|
||
<!-- 1. 安全访问操作符 (?.) 确保拥有该属性，没回的返回undefined，不会报错/如果都没有，就默认是“中国” -->
|
||
{{userinfo?.address?.city || userinfo?.address?.province || userinfo?.address?.country || '中国' }}
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
<!-- 菜单 -->
|
||
<view class="section">
|
||
<view class="list">
|
||
<!-- 区分页面，表明这是通过user页面然后点击“我的下载”进入的 -->
|
||
<navigator url="/pages/classlist/classlist?name=我的下载&type=download">
|
||
<view class="row">
|
||
<!-- 这里分为左右两部分，（图标、文字）以及 (右箭头) -->
|
||
<view class="left">
|
||
<uni-icons type="download-filled" size="20" color="#28b389"></uni-icons>
|
||
<view class="text" >我的下载</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="text">{{userinfo.downloadSize}}</view>
|
||
<uni-icons type="forward" size="15" color="#aaa"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</navigator>
|
||
|
||
<!-- 区分页面，表明这是通过user页面然后点击“我的评分”进入的 -->
|
||
<navigator url="/pages/classlist/classlist?name=我的评分&type=score">
|
||
<view class="row">
|
||
<!-- 这里分为左右两部分，（图标、文字）以及 (右箭头) -->
|
||
<view class="left">
|
||
<uni-icons type="star-filled" size="20" color="#28b389"></uni-icons>
|
||
<view class="text" >我的评分</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="text">{{userinfo.scoreSize}}</view>
|
||
<uni-icons type="forward" size="15" color="#aaa"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</navigator>
|
||
|
||
<view class="row">
|
||
<!-- 这里分为左右两部分，（图标、文字）以及 (右箭头) -->
|
||
<view class="left">
|
||
<uni-icons type="chatboxes-filled" size="20" color="#28b389"></uni-icons>
|
||
<view class="text" >联系客服</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="text"></view>
|
||
<uni-icons type="forward" size="15" color="#aaa"></uni-icons>
|
||
</view>
|
||
|
||
<!-- #ifdef MP -->
|
||
<button open-type="contact" class="contact">联系客服</button>
|
||
<!-- #endif -->
|
||
|
||
<!-- #ifdef WEB -->
|
||
<button @click="clickContact">拨打电话</button>
|
||
<!-- #endif -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
<view class="section">
|
||
<view class="list">
|
||
<!-- 订阅更新和常见问题的页面都是在公告列表里面的，但是id变一下就可以了 -->
|
||
<navigator url="/pages/notice/detail?id=653507c6466d417a3718e94b&name=订阅更新">
|
||
<view class="row">
|
||
<!-- 这里分为左右两部分，（图标、文字）以及 (右箭头) -->
|
||
<view class="left">
|
||
<uni-icons type="notification-filled" size="20" color="#28b389"></uni-icons>
|
||
<view class="text" >订阅更新</view>
|
||
</view>
|
||
<view class="right">
|
||
<uni-icons type="forward" size="15" color="#aaa"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</navigator>
|
||
|
||
<!-- 订阅更新和常见问题的页面都是在公告列表里面的，但是id变一下就可以了 -->
|
||
<navigator url="/pages/notice/detail?id=6536358ce0ec19c8d67fbe82&name=常见问题">
|
||
<view class="row">
|
||
<!-- 这里分为左右两部分，（图标、文字）以及 (右箭头) -->
|
||
<view class="left">
|
||
<uni-icons type="flag-filled" size="20" color="#28b389"></uni-icons>
|
||
<view class="text" >常见问题</view>
|
||
</view>
|
||
<view class="right">
|
||
<uni-icons type="forward" size="15" color="#aaa"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</navigator>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- userinfo没有被加载出来就显示loading -->
|
||
<view class="loadingLayout" v-else>
|
||
<view :style="{height:getNavBarHeight()+'px'}"></view>
|
||
<uni-load-more status="loading"></uni-load-more>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import {getNavBarHeight} from "@/utils/system.js"
|
||
import {apiUserInfo} from "@/api/apis.js"
|
||
import { ref } from "vue";
|
||
|
||
const userinfo = ref(null)
|
||
|
||
const clickContact = ()=>{
|
||
uni.makePhoneCall({
|
||
phoneNumber: '114' //仅为示例
|
||
});
|
||
}
|
||
|
||
const getUserInfo = async ()=>{
|
||
let res = await apiUserInfo()
|
||
// console.log(res);
|
||
userinfo.value = res.data
|
||
}
|
||
|
||
getUserInfo()
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.userLayout{
|
||
.userinfo{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 50rpx 0;
|
||
.avatar{
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
// 对父组件设置border-radius和overflow：hidden
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
// 同时还需要image设置width和height 100%
|
||
image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.ip{
|
||
font-size: 44rpx;
|
||
color: #333;
|
||
padding: 20rpx 0 5rpx;
|
||
}
|
||
.address{
|
||
font-size: 28rpx;
|
||
color: #aaa;
|
||
}
|
||
}
|
||
|
||
.section{
|
||
width: 690rpx;
|
||
// 父元素使其居中处理
|
||
margin: 50rpx auto;
|
||
border: 1px solid #eee;
|
||
border-radius: 10rpx;
|
||
box-shadow: 0 0 30rpx rgba(0,0,0,0.05);
|
||
|
||
.list{
|
||
.row{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
//细节处理，不要贴边
|
||
padding:0 30rpx;
|
||
height: 100rpx;
|
||
border-bottom: 1px solid #eee;
|
||
position: relative;
|
||
background: #fff;
|
||
|
||
//最后一个元素会有两个边框，所以我们需要去掉一个
|
||
//&：&号表示同名，
|
||
//这里即指（.row） 还要一个伪类选择器宣导最后一个元素
|
||
&:last-child{
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.left{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.text{
|
||
padding-left: 20rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.right{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.text{
|
||
font-size: 28rpx;
|
||
color: #aaa;
|
||
}
|
||
}
|
||
|
||
button{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
// display: flex;
|
||
// justify-content: center;
|
||
// align-items: center;
|
||
opacity: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style>
|