我的页面第一版

api/my.js

@@ -0,0 +1,12 @@
+import request from '@/utils/request'
+export function myInfo(data = {}) {
+  return request({
+    'url': '/app/user/my/info',
+    headers: {
+      isToken: true
+    },
+    method: 'post',
+    data,
+    timeout: 20000
+  })
+}

common/styles/global/pages.scss

@@ -549,20 +549,68 @@
 	@media (max-height: 600px) {margin-bottom: 40%;}
 }
 	
-// height:$titleBar-tabBar-page;
-.lli-develop-expect-page{
-	width: 100%;height: 100vh;
-	display: flex;flex-direction: column;justify-content: center;align-items: center;
-	position: relative;box-sizing: border-box;
-		.page-content{
-			background-color: #9ed5cf;width: 100%;text-align: center;display: block;
-			margin-top: 44px;flex: 1;
-			span{
-				font-size: 24px;padding: 20px 0;display: block;font-weight: 900;color: #09539a; 
-				-webkit-text-stroke: 1rpx #fff; /* 文字描边（仅webkit内核浏览器支持） */
-				text-stroke: 1rpx #fff; /* 未来可能的标准属性，目前支持有限 */
-				text-shadow: 4px 4px 4px rgba(110, 229, 249, 0.5); /* 文字阴影 */
-			}
+// 我的页面
+.ezy-my-page{
+	width: 100%;height: 100vh;background-color: #00c5fe;position: relative;
+	padding-top:var(--status-bar-height);display: flex;flex-direction: column;
+	@include ezy-no-repeat-cover(bottom);background-image: url("@/static/images/my/my-page-bj.png");
+	.my-head-box{
+		width: 100%;padding: 80rpx 24rpx 42rpx;box-sizing: border-box;display: flex;align-items: center;color: #fff;
+		.head-img-box{width: 154rpx;height: 154rpx;margin: 0 24rpx 0 12rpx;@include ezy-no-repeat-cover;}
+		.head-content-box{font-size: 30rpx;}
+		.jf-box{
+			width: 142rpx;height: 46rpx;display: flex;align-items: center;line-height: 1.2;font-size: 26rpx;
+			@include ezy-no-repeat-cover;background-image: url("@/static/images/my/jf-bj.png");margin-top: 20rpx;
+		}
+		.jf-icon{width: 35rpx;height: 35rpx;margin:0 4rpx 0 10rpx;flex-shrink: 0;
+		@include ezy-no-repeat-cover;background-image: url("@/static/images/my/jf-qb.png");}
+		.jf-text{min-width: 60rpx;
+		text-align: center;}
+	}
+	.hyqy-box,.hyqy-disabled-box{
+		width: 731rpx;height: 385rpx;margin: 0 auto;position: relative;
+		@include ezy-no-repeat-cover;
+		.hyqy-btn{width: 154rpx;height: 54rpx;position: absolute;top: 46rpx;right: 46rpx;
+		@include ezy-no-repeat-cover;background-image: url("@/static/images/my/hyqy-btn.png");}
+	}
+	.hyqy-box{background-image: url("@/static/images/my/hyqy-img.png");}
+	// 未登录的值----待修改
+	.hyqy-disabled-box{background-image: url("@/static/images/my/hyqy-img.png");}
+	.my-list-box{
+		width:700rpx;margin: 36rpx auto 0;
+		.list-row{border-bottom: 2rpx solid #5bcdfb;color: #fff;box-sizing: border-box;padding: 30rpx 20rpx;
+		display: flex;align-items: center;position: relative;}
+		.list-row::after{
+			content: '';width: 19rpx;height: 33rpx;@include ezy-no-repeat-cover;
+			background-image: url("@/static/images/my/list-jt.png");
+			position: absolute;right: 20rpx;
+		}
+		.list-row:last-child::after{display: none;}
+		.list-icon{width: 42rpx;height: 42rpx;@include ezy-no-repeat-cover;margin-right: 10rpx;}
+		.tel-icon{background-image: url("@/static/images/my/list-icon1.png");}
+		.error-icon{background-image: url("@/static/images/my/list-icon2.png");}
+		.order-icon{background-image: url("@/static/images/my/list-icon3.png");}
+		.login-out-icon{background-image: url("@/static/images/my/list-icon4.png");}
+	}
+	@media (max-height: 700px) {
+		.my-head-box{padding: 60rpx 24rpx 32rpx;}
+		.my-list-box{
+			margin: 16rpx auto 0;
+			.list-row{padding: 24rpx 20rpx;}
 		}
-		.bottom-word{position: absolute;bottom: 0;margin-top: 0;}
-	}
+	}
+	@media (max-height: 600px) {
+		min-height: 1200rpx;overflow-y: auto;
+		.my-head-box{padding: 42rpx 24rpx 24rpx;}
+		.my-list-box{
+			margin: 12rpx auto 0;
+			.list-row{padding: 16rpx;}
+			.list-row::after{right: 16rpx;}
+		}
+	}
+}
+.ezy-my-page::before{
+	content: '';width: 279rpx;height: 250rpx;display:block;
+	position: absolute;top:calc(20rpx - var(--status-bar-height));right:20rpx;
+	@include ezy-no-repeat-cover;background-image: url("@/static/images/my/my-page-img.png");
+}

pages.json

@@ -46,6 +46,28 @@
 				"navigationBarTitleText" : "单元测试",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/pay/svip",
+			"style" : 
+			{
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path" : "pages/pay/order",
+			"style" : 
+			{
+				"navigationStyle": "custom"
+			}
+		},
+		
+		{
+			"path" : "pages/pay/orderPay",
+			"style" : 
+			{
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	 "tabBar": {

pages/my/index.vue

@@ -1,21 +1,58 @@
 <template>
-	<view class="lli-develop-expect-page">
-		<button class="lli-btn" @click="quitClick">退出登录</button>
+	<view class="ezy-my-page">
+		<view class="my-head-box">
+			<icon class="head-img-box" :style="{backgroundImage: 'url(' + myInfoData.userImg + ')'}"></icon>
+			<view class="head-content-box">
+				<text>{{myInfoData.userName}}</text>
+				<view class="jf-box" v-if="loginFlag">
+					<icon class="jf-icon"></icon>
+					<text class="jf-text" >{{myInfoData.credit}}</text>
+				</view>
+			</view>
+		</view>
+		<view :class="loginFlag && myInfoData.vipFlag?'hyqy-box':'hyqy-disabled-box'">
+			<view class="hyqy-btn" @click="hyqyBtn" v-if="!myInfoData.vipFlag"></view>
+		</view>
+		<view class="my-list-box">
+			<view class="list-row">
+				<icon class="list-icon tel-icon"></icon>
+				<text>手机号码</text>
+			</view>
+			<view class="list-row">
+				<icon class="list-icon error-icon"></icon>
+				<text>我的错题</text>
+			</view>
+			<view class="list-row">
+				<icon class="list-icon order-icon"></icon>
+				<text>我的订单</text>
+			</view>
+			<view class="list-row" @click="quitClick">
+				<icon class="list-icon login-out-icon"></icon>
+				<text>退出登录</text>
+			</view>
+		</view>
 		<CustomTabBar></CustomTabBar>
 	</view>
 </template>
 
 <script setup>
-	import {
-		logout
-	} from '@/api/login.js'
+	import {logout} from '@/api/login.js'
+	import {myInfo} from '@/api/my.js'
 	import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
-	import {
-		getCurrentInstance
-	} from 'vue';
-	import {
-		onLoad,
-	} from '@dcloudio/uni-app';
+	import {getCurrentInstance} from 'vue';
+	import {onLoad} from '@dcloudio/uni-app';
+	import {getAuth} from '@/utils/auth.js';
+	import {reactive,ref} from "vue";
+	import { toast } from "../../utils/common";
+	
+	let loginFlag = ref(false);
+	let myInfoData = reactive({
+		userImg: 'static/images/my/head-unlogin-img.png',
+		userName: '',
+		credit: '',
+		vipFlag: '',
+	});
+	
 	const quitClick = () => {
 		uni.showModal({
 			title: '提示',
@@ -24,7 +61,6 @@
 				if (res.confirm) {
 					quit();
 				} else if (res.cancel) {
-					// 用户点击了取消按钮
 					console.log('用户点击了取消');
 				}
 			}
@@ -32,11 +68,7 @@
 
 	}
 
-
-
-
 	const quit = () => {
-
 		uni.removeStorage({
 			key: 'Mta-Auth',
 			success: function(res) {
@@ -48,41 +80,70 @@
 		});
 
 	}
+	
+	// 获取用户数据
+	function getMyInfo(){
+		myInfo({}).then(res => {
+			getUserImg(res.data.growth)
+			myInfoData.userName = res.data.userName;
+			myInfoData.credit = res.data.credit;
+			myInfoData.vipFlag = res.data.vipFlag;
+		})
+	}
+	
+	// 获取用户头像
+	function getUserImg(data){
+		 switch (data) {
+		    case 0:
+		        myInfoData.userImg = 'static/images/my/head-img0.png'
+		        break;
+		    case 10:
+		        myInfoData.userImg = 'static/images/my/head-img1.png'
+		        break;
+		    case 20:
+		        myInfoData.userImg = 'static/images/my/head-img2.png'
+		        break;
+		    case 50:
+		        myInfoData.userImg = 'static/images/my/head-img30.png'
+		        break;
+		    default:
+		        myInfoData.userImg = 'static/images/my/head-unlogin-img.png'
+		        break;
+
+		}
+	}
+	// 会员权益按钮
+	function hyqyBtn(){
+		if(loginFlag.value){
+			uni.redirectTo({
+				url: '/pages/pay/svip'
+			})
+		}else{
+			toast("当前为游客模式请登录！")
+			uni.redirectTo({
+				url: '/pages/login/index'
+			})
+		}
+	}
+	
+	// 判断是否登陆
+	function myGetAuth(){
+		if (getAuth()) {
+			// 已登录
+			loginFlag.value = true;
+			console.log(loginFlag.value,'已登录');
+			getMyInfo();
+		} else {
+			loginFlag.value = false;
+			myInfoData.userName = '游客';
+			myInfoData.userImg = 'static/images/my/head-unlogin-img.png'
+			console.log(loginFlag.value,'未登录');
+		}
+	}
+	
 	onLoad((options) => {
+		myGetAuth();
 		const instance = getCurrentInstance();
-		console.log(instance.appContext.config.globalProperties)
+		// console.log(instance.appContext.config.globalProperties,'instance.appContext.config.globalProperties')
 	})
-	// import { ref, onMounted } from 'vue';
-	//
-	// const listData = ref([]);
-	// const page = ref(1);
-	// const pageSize = ref(10);
-	// const isLoading = ref(false);
-	// const noMoreData = ref(false);
-	//
-	// // 加载
-	// const loadData = async () => {
-	// 	if (isLoading.value || noMoreData.value) return;
-	// 	isLoading.value = true;
-	// 	const newData = await fetchData(page.value, pageSize.value); // 假设 fetchData 是你的请求函数
-	// 	if (newData.length > 0) {
-	// 		listData.value = listData.value.concat(newData);
-	// 		page.value++;
-	// 	} else {
-	// 		noMoreData.value = true;
-	// 	}
-	// 	isLoading.value = false;
-	// };
-	// onMounted(() => {
-	// 	loadData();
-	// });
-	//
-	// // 下拉加载更多
-	// const loadMore = () => {
-	// 	loadData();
-	// };
 </script>
-
-<style>
-
-</style>