Browse Source

我的页面样式改版

tanxue 1 month ago
parent
commit
cf203720c2

+ 19 - 50
common/styles/global/pages.scss

@@ -893,43 +893,27 @@
 
 // 我的页面
 .ezy-my-page{
-	width: 100%;height: 100vh;min-height: 1400rpx;background-color: #00c5fe;position: relative;overflow: auto;
-	padding-top:var(--status-bar-height);@include ezy-no-repeat-cover(bottom);background-image: url("@/static/images/my/my-page-bj.png");
+	width: 100%;height: 100vh;position: relative;overflow: auto;background: #f9f9fb;
+	.my-page-box{position: relative;z-index: 1;margin-top: calc(-24rpx - var(--status-bar-height));}
 	.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;border-radius: 50%;}
+		width: 100%;padding: 0 24rpx 42rpx;box-sizing: border-box;display: flex;align-items: center;color: #fff;
+		.head-img-box{width: 126rpx;height: 126rpx;margin: 0 24rpx 0 12rpx;@include ezy-no-repeat-cover;border-radius: 50%;}
 		.head-content-box{font-size: 30rpx;}
 	}
-
-	// hyqy
-	.my-hyqy-swiper{
-		height: 363rpx;margin-bottom: 32rpx;
-		.uni-swiper-dots-horizontal{bottom: 24rpx;}
-	}
-	.hyqy-box{
-		width: 690rpx;height: 363rpx;margin: 0 auto;position: relative;
-		@include ezy-no-repeat-cover;
-		.hyqy-box-img{width: 690rpx;height: 363rpx;margin: 0 auto;display: block;border-radius: 10rpx;}
+	
+	.my-banner-img{
+		width: 730rpx;height: 413rpx;@include ezy-no-repeat-cover;margin: 0 auto;
+		background-image: url("@/static/images/my/my-banner.png");border-radius: 16rpx;
 	}
+
 	// list
 	.my-list-box{
-		width:690rpx;margin: 16rpx auto;display: flex;padding: 16rpx 0;
-		background-color: rgba(255, 255, 255, 0.6);border-radius: 8rpx;
-		.list-item{color: #333;width: 25%;text-align: center;font-size: 28rpx;}
-		.list-icon{
-			width: 87rpx;height: 77rpx;display: block;margin: 0 auto;
-			@include ezy-no-repeat-cover;
-			}
-		.cpsc-icon{background-image: url("@/static/images/my/list-icon1.png");}
-		.sxtk-icon{background-image: url("@/static/images/my/list-icon2.png");}
-		.error-icon{background-image: url("@/static/images/my/list-icon3.png");}
-		.xxjl-icon{background-image: url("@/static/images/my/list-icon4.png");}
-		.order-icon{background-image: url("@/static/images/my/list-icon5.png");}
-		.duihuanma-icon{background-image: url("@/static/images/my/list-icon6.png");}
-		.kfdh-icon{background-image: url("@/static/images/my/list-icon7.png");}
-		.yysz-icon{background-image: url("@/static/images/my/list-icon8.png");}
-		.zhuxiao-icon{background-image: url("@/static/images/my/list-icon9.png");}
-		.login-out-icon{background-image: url("@/static/images/my/list-icon10.png");}
+		width:710rpx;margin: 24rpx auto;display: flex;padding: 42rpx 6rpx;
+		background-color: #fff;border-radius: 16rpx;box-shadow: 0 0rpx 4rpx rgba(100, 159, 241, 0.2);
+		.list-item{color: #444;width: 25%;text-align: center;font-size: 28rpx;}
+		.list-icon{width: 64rpx;height: 64rpx;display: block;
+		margin: 0 auto 12rpx;@include ezy-no-repeat-cover;}
+		.yysz-icon{background-image: url("@/static/images/my/list-icon1.png");}
 	}
 	
 	.kefu-dialog{
@@ -937,16 +921,11 @@
 		.confirm-btn{margin: 24rpx auto;}
 	}
 }
-.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");
-}
 
 // 应用设置
 .ezy-yysz-page{
 	width: 100%;height: 100vh;min-height: 1400rpx;background-color: #00c5fe;position: relative;overflow: auto;
-	padding-top:var(--status-bar-height);@include ezy-no-repeat-cover(bottom);background-image: url("@/static/images/my/my-page-bj.png");
+	padding-top:var(--status-bar-height);
 	display: flex;flex-direction: column;
 	.yysz-row-box{width: 94%;background-color: rgba(255, 255, 255, 0.6);
 	border-radius: 8rpx;margin: 16rpx 3% 0;color: #333;font-size: 30rpx;}
@@ -1797,19 +1776,6 @@
 }
 
 
-// 更换头像
-.ezy-ghtx-page{
-	width: 100%;height: 100vh;background-color: #00c5fe;position: relative;overflow: auto;
-	padding-top:var(--status-bar-height);@include ezy-no-repeat-cover(bottom);background-image: url("@/static/images/my/my-page-bj.png");
-	.ghtx-img{width: 644rpx;height: 644rpx;margin: 0 auto 86rpx;display: block;}
-	.xc-btn,.qx-btn{
-		width: 644rpx;height: 108rpx;line-height: 108rpx;@include ezy-no-repeat-cover;
-		margin: 30rpx auto 0;font-size: 30rpx;color: #fff;text-align: center;}
-	.xc-btn{background-image: url("@/static/images/common/confirm-btn.png");}
-	.qx-btn{background-image: url("@/static/images/common/cancel-btn.png");}
-}
-
-
 //  选课
 .ezy-xuanke-page{
 	width: 100%;height: 100vh;display: flex;flex-direction: column;padding-bottom: 100rpx;overflow: hidden; 
@@ -1883,6 +1849,9 @@
 			position: absolute;bottom: 12rpx;right: 12rpx;
 			
 		}
+		.item-play-btn:active{
+			transform: rotate(180deg);
+		}
 		.item-play-btn::before{
 			content: '';width: 46rpx;height: 48rpx;display: block;
 			background-image: url("@/static/images/xuanke/xbb-item-jt.png");@include ezy-no-repeat-cover;

+ 0 - 5
pages.json

@@ -85,11 +85,6 @@
 				"navigationStyle": "custom"
 			}
 		}, {
-			"path": "pages/my/headImg",
-			"style": {
-				"navigationStyle": "custom"
-			}
-		}, {
 			"path": "pages/my/xuexiJilu",
 			"style": {
 				"navigationStyle": "custom"

+ 21 - 13
pages/chanpinMy/my.vue

@@ -1,22 +1,30 @@
 <template>
 	<view class="ezy-my-page">
-		<view class="my-head-box">
-			<icon class="head-img-box" :style="{backgroundImage: 'url(' + myInfoData.icon + ')'}"></icon>
-			<view class="head-content-box">
-				<text>{{myInfoData.nickName}}</text>
-			</view>
+		<view class="icon-title-navBar-box">
+			<view class="nav-bar-title"></view>
 		</view>
-		<!-- 图 -->
-		<!-- <img :src="" class="hyqy-box-img" /> -->
+		<view class="my-page-box">
+			<view class="my-head-box">
+				<icon class="head-img-box" :style="{backgroundImage: 'url(' + myInfoData.icon + ')'}"></icon>
+				<view class="head-content-box">
+					<text>{{myInfoData.nickName}}</text>
+					<!-- <view class="ezy-jf-box" v-if="loginFlag">
+						<icon class="jf-icon"></icon>
+						<text class="jf-text">{{myInfoData.credit}}</text>
+					</view> -->
+				</view>
+			</view>
+			<!-- 图 -->
+			<view class="my-banner-img"></view>
 
-		<!-- 设置 -->
-		<view class="my-list-box">
-			<view class="list-item" @click="yingyongshezhi">
-				<icon class="list-icon yysz-icon"></icon>
-				<text>应用设置</text>
+			<!-- 设置 -->
+			<view class="my-list-box">
+				<view class="list-item" @click="yingyongshezhi">
+					<icon class="list-icon yysz-icon"></icon>
+					<text>应用设置</text>
+				</view>
 			</view>
 		</view>
-
 		<!-- 底部 -->
 		<CustomTabBar :currentTabNumber="3"></CustomTabBar>
 	</view>

+ 1 - 1
pages/chanpinMy/myInfo.vue

@@ -123,7 +123,7 @@
 
 	function handleBack() {
 		uni.redirectTo({
-			url: '/pages/chanpinXuanze/my'
+			url: '/pages/chanpinMy/my'
 		})
 	}
 

+ 0 - 175
pages/my/headImg.vue

@@ -1,175 +0,0 @@
-<template>
-	<view class="ezy-ghtx-page">
-		<view class="icon-title-navBar-box">
-			<view @click="handleBack" class="nav-bar-icon"></view>
-			<text class="nav-bar-title">更换头像</text>
-		</view>
-		<img class="ghtx-img" :src="userImg" alt="">
-
-		<view @click="chooseImage" class="xc-btn">相册</view>
-		<view @click="handleBack" class="qx-btn">取消</view>
-	</view>
-</template>
-
-<script setup>
-	import agreeContentDialog from '@/pages/login/agreeContentDialog.vue';
-	import {
-		toast,
-		getUserIdentity
-	} from "@/utils/common";
-	import cacheManager from '@/utils/cacheManager.js';
-	import {
-		getFilePolicy,
-		updataHead,myInfo
-	} from '@/api/my.js'
-	import {
-		onLoad
-	} from '@dcloudio/uni-app';
-	import axios from 'axios';
-	import {
-		reactive,
-		ref
-	} from "vue";
-	import {
-		onShow
-	} from '@dcloudio/uni-app';
-
-	let userImg = ref(null);
-	let currentPlatform = ref(null);
-	const tempPath = ref('')
-	const checkAlbumPermission = async () => {
-		const status = await uni.getSetting()
-		if (!status.authSetting['scope.album']) {
-			await uni.authorize({
-				scope: 'scope.album'
-			})
-		}
-	}
-	const chooseImage = async () => {
-		try {
-			await checkAlbumPermission()
-			uni.chooseImage({
-				count: 1,
-				sizeType: ['compressed'],
-				sourceType: ['album'], // 仅限相册选择‌:ml-citation{ref="1" data="citationList"}
-				success: (res) => {
-
-					uploadFile(res.tempFilePaths[0])
-				},
-				fail: (err) => {
-					console.error('选择失败:', err)
-				}
-			})
-		} catch (err) {
-			uni.showModal({
-				title: '权限申请失败',
-				content: '请前往设置开启相册权限'
-			})
-		}
-	}
-	function updateIcon(data){
-		updataHead({icon:data}).then(res=>{
-			if(res.code ==0){
-			uni.showToast({
-				title: '上传成功',
-				icon: 'success'
-			});	
-			}else{
-				uni.showToast({
-					title: '上传失败',
-				});
-			}
-		})
-	}
-	function uploadFile(filePath) {
-		const suffix = filePath.split('.').pop();
-		let req = {
-			prefix: 'resource/',
-			suffix: suffix
-		}
-		getFilePolicy(req).then(res => {
-			if (res.code === 0) {
-				const policyData = res.data;
-				console.log('policyData', policyData);
-				uni.uploadFile({
-					url: policyData.uploadUrl,
-					filePath: filePath,
-					name: 'file',
-					formData: {
-						key: policyData.key,
-						policy: policyData.policy,
-						OSSAccessKeyId: policyData.accessid,
-						signature: policyData.signature,
-						success_action_status: '200'
-					},
-					header: {
-						'Content-Type': 'multipart/form-data'
-					},
-					success(uploadRes) {
-						console.log('uploadRes', uploadRes);
-						if (uploadRes.statusCode === 200) {
-							userImg.value = `${policyData.downloadUrl}/${policyData.key}`;					
-							updateIcon(userImg.value)
-						} else {
-							uni.showToast({
-								title: '阿里云上传错误,请重试!',
-							});
-							return false
-						}
-					},
-					fail(err) {
-						console.log('err', err);
-					}
-				});
-
-
-			}
-		})
-
-	}
-
-
-
-	function handleBack() {
-		uni.redirectTo({
-			url: '/pages/my/yingyongshezhi'
-		})
-	}
-
-	function openXiangce2() {
-
-	}
-
-
-	function openXiangce() {
-
-	}
-
-	function isIOSorAndroid() {
-		const systemInfo = uni.getSystemInfoSync();
-
-		console.log('systemInfo', systemInfo);
-
-		if (systemInfo.platform == 'ios') {
-			return currentPlatform.value = 'ios'
-		} else {
-			return currentPlatform.value = 'android'
-		}
-	}
-	function getMyInfo() {
-			myInfo({}).then(res => {
-				if (res.code == 0) {
-					userImg.value = res.data.icon;
-				} else {
-					toast('获取头像失败')
-					return false
-				}
-	
-			})
-		}
-			
-	onLoad((options) => {
-		isIOSorAndroid();
-		getMyInfo();
-	})
-</script>

BIN
static/images/my/list-icon1.png


BIN
static/images/my/list-icon10.png


BIN
static/images/my/list-icon2.png


BIN
static/images/my/list-icon3.png


BIN
static/images/my/list-icon4.png


BIN
static/images/my/list-icon5.png


BIN
static/images/my/list-icon6.png


BIN
static/images/my/list-icon7.png


BIN
static/images/my/list-icon8.png


BIN
static/images/my/list-icon9.png


BIN
static/images/my/my-banner.png


BIN
static/images/my/my-page-img.png