style: 我的

pages/mine.vue

@@ -1,93 +1,144 @@
 <template>
-	<view class="mine-container" :style="{ height: `${windowHeight}px` }">
-		<view class="mine-top-bgc"></view>
-		<view class="mine-box">
-			<view class="mine-user">
-				<view class="user-name-box">
-					<view class="user-avatar">
-						<up-avatar :src="userInfo.avatar" shape="square"></up-avatar>
-					</view>
-					<view class="user-name">{{ userInfo.nickName }}</view>
-				</view>
-				<up-divider></up-divider>
-				<view class="service-list">
-					<up-grid :border="false" col="4">
-						<up-grid-item v-for="(listItem, listIndex) in serviceList" :key="listIndex"
-							@click="onClick(listItem)">
-							<view class="grid-box">
-								<!-- <up-badge :isDot="true" type="success" class="item-badge"></up-badge> -->
-								<up-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.iconName"
-									:size="22"></up-icon>
-								<text class="grid-text">{{ listItem.name }}</text>
-
-							</view>
-						</up-grid-item>
-					</up-grid>
-				</view>
+	<view class="mine-container">
+
+		<view class="mine-header">
+			<img :src="userInfo.avatar" alt="" style="width: 136rpx;height: 136rpx;">
+			<view class="header-info">
+				<text class="info-name">{{ userInfo.nickName }}</text>
+				<text class="info-id">ID: 88888888</text>
+				<text class="info-edit">编辑资料> </text>
 			</view>
+		</view>
 
-			<view class="mine-card price-box">
-				<view class="price-item" v-for="item in priceList" :key="item.key">
+		<view class="list-box">
+			<view class="mine-card price-card" v-if="userType == 2">
+				<view v-for="(item, index) in priceList" :key="item.key" class="price-item"
+					:style="{ alignItems: index === 0 ? 'flex-start' : 'flex-end' }">
 					<view class="price-name flex-center"> {{ item.name }} </view>
 					<view class="price-data flex-center">
-						<up-count-to :startVal="0" :endVal="data[item.key]" :decimals="item.decimals"></up-count-to>
+						{{ index === 0 ? '¥' : '' }}<up-count-to :startVal="0" :endVal="data[item.key]"
+							:decimals="item.decimals"></up-count-to>
 					</view>
-					<text class="grid-min-price" v-if="item.key === 'balance'">待入账余额：{{ data[item.key] }}</text>
-
+					<text class="grid-min-price" v-if="item.key === 'balance'">待入账 ¥{{ data[item.key] }}</text>
 				</view>
 			</view>
 
-			<view class="mine-card">
-				<up-grid :border="false" col="4">
-					<up-grid-item v-for="(listItem, listIndex) in orderList" :key="listIndex">
-						<view class="grid-box">
-							<text class="grid-text">{{ listItem.name }}</text>
-							<up-count-to :startVal="0" :endVal="data[listItem.key]"></up-count-to>
-
-						</view>
-					</up-grid-item>
-				</up-grid>
+			<!-- 志愿者 -->
+			<view class="mine-card status-card" v-if="userType == 2">
+				<view class="status-card-item" v-for="(listItem, listIndex) in adminList" :key="listIndex"
+					@click="onClick(listItem)">
+					<view class="grid-img-box">
+						<img :src="listItem.iconName" alt="" style="width: 52rpx;height: 52rpx;">
+					</view>
+					<text class="grid-text">{{ listItem.name }}</text>
+				</view>
+			</view>
+			<!-- 用户端 -->
+			<view class="mine-card status-card" v-if="userType == 1">
+				<view class="status-card-item" v-for="(listItem, listIndex) in userList" :key="listIndex"
+					@click="onClick(listItem)">
+					<view class="grid-img-box">
+						<!-- <img :src="listItem.iconName" alt="" style="width: 52rpx;height: 52rpx;"> -->
+						<up-icon :name="listItem.iconName" :size="22"></up-icon>
+					</view>
+					<text class="grid-text">{{ listItem.name }}</text>
+				</view>
+			</view>
+			<view class="mine-card count-card" v-if="userType == 2">
+				<view class="count-title">订单统计</view>
+				<view class="count-list">
+					<view class="count-item" v-for="(item, index) in orderList" :key="index">
+						<up-count-to :startVal="0" :endVal="data[item.key]"></up-count-to>
+						<text class="count-item-text">{{ item.name }}</text>
+					</view>
+				</view>
 			</view>
 
-			<view class="mine-card rate-box">
-				<view class="rate-left">
-					<label>好评率：</label>
+			<view class="mine-card rate-card" v-if="userType == 2">
+				<view class="count-title">好评率</view>
+				<view class="rate-list">
+					<view class="rate-box">
+						<label class="rate-count">{{ rateValue }}</label>
+						<text class="rate-text">优秀</text>
+					</view>
 					<up-rate v-model="rateValue" active-color="rgba(255, 87, 4, 1)" inactive-color="#b2b2b2" gutter="20"
 						readonly></up-rate>
 				</view>
-
-				<view class="rate-rigth">
-					<label class="rate-count">{{ rateValue }}</label>
-					分
-				</view>
-
 			</view>
-
 		</view>
+
+
 	</view>
 </template>
 
 <script setup>
-import {
-	onMounted,
-	ref
-} from 'vue';
-import {
-	getVolunteerAccount
-} from '@/api/volunteer.js'
+import { onMounted, ref } from 'vue';
 import {
 	onLoad,
 	onShow
 } from '@dcloudio/uni-app';
 import store from "@/store"
-const userType = uni.getStorageSync('userType') //读取本地存储
+const userInfo = ref({
+	avatar: '/static/serverImg/mine/user.png'
+})
 
-// 用户/志愿者 识别标识
-const userOrWorker = uni.getStorageSync('storage_data').vuex_userOrWorker //读取本地存储
+const priceList = [{
+	name: '账户余额',
+	key: 'balance',
+	decimals: 2
+},
+{
+	name: '订单总数',
+	key: 'orderCount',
+	decimals: 0
+}
+]
+const data = ref({
+	balance: 0.0,
+	orderCount: 0,
+});
 
-const userInfo = ref({});
+const userType = uni.getStorageSync('userType') //读取本地存储
 
-const serviceList = ref(
+const adminList = ref(
+	[{
+		name: '待服务',
+		iconName: '/static/serverImg/mine/icon1.png',
+		page: '/pages/classify',
+		value: 1
+	},
+	{
+		name: '进行中',
+		iconName: '/static/serverImg/mine/icon2.png',
+		page: '/pages/classify',
+		value: 2
+	},
+	{
+		name: '已完成',
+		iconName: '/static/serverImg/mine/icon3.png',
+		page: '/pages/classify',
+		value: 3
+	},
+	{
+		name: '差评申述',
+		iconName: '/static/serverImg/mine/icon4.png',
+		page: '/pages_mine/pages/bad/index'
+	},
+	{
+		name: '钱包',
+		iconName: '/static/serverImg/mine/icon5.png',
+		page: '/pages_mine/pages/wallet/index'
+	},
+	{
+		name: '帮助与客服',
+		iconName: '/static/serverImg/mine/icon6.png',
+	},
+	{
+		name: '用户端',
+		iconName: '/static/serverImg/mine/icon6.png',
+	},
+	]);
+const userList = ref(
 	[{
 		name: '待服务',
 		iconName: 'clock',
@@ -107,81 +158,40 @@ const serviceList = ref(
 		value: 3
 	},
 	{
-		name: '差评申述',
+		name: '评论',
 		iconName: 'edit-pen',
-		page: '/pages_mine/pages/bad/index'
 	},
 	{
 		name: '钱包',
 		iconName: 'rmb-circle',
 		page: '/pages_mine/pages/wallet/index'
 	},
+	{
+		name: '浏览记录',
+		iconName: 'eye',
+	},
+	{
+		name: '收藏',
+		iconName: 'star',
+	},
 	{
 		name: '帮助与客服',
 		iconName: 'kefu-ermai',
 	},
+	{
+		name: '地址',
+		iconName: 'kefu-ermai',
+	},
+	{
+		name: '志愿者',
+		iconName: 'kefu-ermai',
+	},
 	]);
 
 
 
 
-const serviceList2 = ref([{
-	name: '待服务',
-	iconName: 'clock',
-	page: '/pages/classify',
-	value: 1
-},
-
-{
-	name: '进行中',
-	iconName: 'car',
-	page: '/pages/classify',
-	value: 2
-},
-{
-	name: '已完成',
-	iconName: 'car-fill',
-	page: '/pages/classify',
-	value: 3
-},
-{
-	name: '评论',
-	iconName: 'edit-pen',
-	// page: '/pages/myCenter/bad'
-},
-{
-	name: '钱包',
-	iconName: 'rmb-circle',
-	page: '/pages_mine/pages/wallet/index'
-},
-{
-	name: '帮助与客服',
-	iconName: 'kefu-ermai',
-},
-{
-	name: '浏览记录',
-	iconName: 'eye',
-	page: '/pages_mine/pages/wallet/index'
-},
-{
-	name: '收藏',
-	iconName: 'star',
-},
-]);
-
-const priceList = [{
-	name: '余额',
-	key: 'balance',
-	decimals: 2
-},
-{
-	name: '订单总数',
-	key: 'orderCount',
-	decimals: 0
-}
-]
-
-
+const rateValue = ref(3);
 
 const orderList = ref([{
 	name: '预约单',
@@ -204,13 +214,6 @@ const orderList = ref([{
 
 }
 ]);
-
-const avatarSrc = ref('/static/my/客服.png');
-const data = ref({
-	balance: 0.0,
-	orderCount: 0,
-});
-const rateValue = ref(3);
 const onClick = (record) => {
 	console.log('record', record, record.page);
 	if (record.page && record.value) {
@@ -230,20 +233,10 @@ const onClick = (record) => {
 		});
 	}
 
-	onMounted(getDetails)
-}
-
-const getDetails = async () => {
-	try {
-		// const res = await getVolunteerAccount();
-		// console.log('res',res);
 
-	} catch (error) {
-		console.log('error', error);
-
-	}
 }
 
+
 const geUserInfo = () => {
 	console.log(store.state, '>>>>99');
 	userInfo.value = store.state.user
@@ -253,295 +246,192 @@ onShow(() => {
 	geUserInfo();
 
 })
+
 </script>
 
 <style lang="scss" scoped>
-.mine-card {
-	border-radius: 8px;
-	background: rgba(255, 255, 255, 1);
-	padding: 12px;
-	margin-bottom: 12px;
-}
-
 .mine-container {
 	position: fixed;
-	top: 0px;
-	left: 0px;
-	right: 0px;
-	bottom: 0px;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
 	background: rgba(245, 245, 245, 1);
+	overflow-y: auto;
 
-	.mine-top-bgc {
-		height: 120px;
-		background: linear-gradient(180deg, rgba(255, 219, 171, 1) 0%, rgba(242, 151, 99, 1) 100%);
-
-	}
-
-	.mine-box {
-		position: absolute;
-		top: 40px;
-		left: 12px;
-		right: 12px;
-		bottom: 0px;
-		overflow-y: auto;
-
-
-		.mine-user {
-			border-radius: 8px;
-			background: rgba(255, 255, 255, 1);
-			margin-bottom: 12px;
-
-			.user-name-box {
-				display: flex;
-				align-items: center;
-				padding: 12px 12px 0;
-
-				.user-avatar {}
-
-				.user-name {
-					font-size: 18px;
-					font-weight: 700;
-					line-height: 21.09px;
-					color: rgba(51, 51, 51, 1);
-					margin-left: 12px;
-				}
-			}
-		}
-	}
-
-	.service-img {
-		width: 60rpx;
-		height: 60rpx;
-		margin-bottom: 10rpx;
-	}
-
-	.service-list {
-		padding-bottom: 12px;
-	}
-
-	.grid-text {
-		font-size: 14px;
-		color: #909399;
-		padding: 10rpx 0 20rpx 0rpx;
-		/* #ifndef APP-PLUS */
-		box-sizing: border-box;
-		/* #endif */
-	}
-
-
-	.grid-box {
+	.mine-header {
+		padding: 42rpx 44rpx;
+		background: #fff;
 		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-direction: column;
-		position: relative;
-
-		.item-badge {
-			position: absolute;
-		}
-	}
-
-	.price-box {
-		display: flex;
-		align-content: center;
-		justify-content: space-between;
-		// padding: 12px;
-
-		.price-item {
-			width: 50%;
-			padding: 12px;
-
-			.user-name-box {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				justify-content: center;
-
-				padding: 12px 12px 0;
-
-				.user-avatar {}
-
-				.user-name {
-					font-size: 18px;
-					font-weight: 700;
-					line-height: 21.09px;
-					color: rgba(51, 51, 51, 1);
-					margin-left: 12px;
-				}
-			}
-		}
-	}
-
-	.service-img {
-		width: 60rpx;
-		height: 60rpx;
-		margin-bottom: 10rpx;
-	}
-
-	.service-list {
-		padding-bottom: 12px;
-	}
 
-	.grid-text {
-		font-size: 14px;
-		color: #909399;
-		padding: 10rpx 0 20rpx 0rpx;
-		/* #ifndef APP-PLUS */
-		box-sizing: border-box;
-		/* #endif */
-	}
-
-
-	.grid-box {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-direction: column;
-		position: relative;
-
-		.item-badge {
-			position: absolute;
-		}
-	}
-
-	.price-box {
-		display: flex;
-		align-content: center;
-		justify-content: space-between;
-		// padding: 12px;
-
-		.price-item {
-			width: 50%;
-			padding: 12px;
+		.header-info {
 			display: flex;
 			flex-direction: column;
-			align-items: center;
-			justify-content: center;
+			margin-left: 36rpx;
 
-			.price-name {
-				font-size: 16px;
-				font-weight: 700;
-				line-height: 23.17px;
+			.info-name {
+				font-size: 36rpx;
+				font-weight: 400;
+				line-height: 54rpx;
 				color: rgba(51, 51, 51, 1);
-				margin-bottom: 12px;
 			}
 
-			.price-data {
-				font-size: 20px;
-				font-weight: 700;
-				line-height: 23.44px;
-				color: rgba(51, 51, 51, 1);
-			}
-
-			.grid-min-price {
-				font-size: 12px;
-				font-weight: 500;
-				line-height: 17.38px;
+			.info-id {
+				font-size: 28rpx;
+				font-weight: 400;
+				letter-spacing: 0rpx;
+				line-height: 42rpx;
 				color: rgba(153, 153, 153, 1);
-				margin-top: 4px;
 			}
 
-
+			.info-edit {
+				font-size: 24rpx;
+				font-weight: 400;
+				letter-spacing: 0rpx;
+				line-height: 36rpx;
+				color: rgba(102, 102, 102, 1);
+			}
 		}
 
-		.service-list {
-			padding-bottom: 12px;
-		}
+	}
 
-		.grid-text {
-			font-size: 14px;
-			color: #909399;
-			padding: 10rpx 0 20rpx 0rpx;
-			/* #ifndef APP-PLUS */
-			box-sizing: border-box;
-			/* #endif */
-		}
+	.list-box {
+		padding: 16rpx 40rpx;
 
-		.grid-box {
+		.price-card {
 			display: flex;
 			align-items: center;
-			justify-content: center;
-			flex-direction: column;
-			position: relative;
-
-			.item-badge {
-				position: absolute;
-			}
-		}
-
-		.price-box {
-			display: flex;
-			align-content: center;
 			justify-content: space-between;
-			// padding: 12px;
 
 			.price-item {
-				width: 50%;
-				padding: 12px;
+				display: flex;
+				align-items: center;
+				flex-direction: column;
 
 				.price-name {
-					font-size: 16px;
-					font-weight: 700;
-					line-height: 23.17px;
-					color: rgba(51, 51, 51, 1);
-					margin-bottom: 12px;
+					font-size: 28rpx;
+					font-weight: 400;
+					line-height: 42rpx;
+					color: rgba(102, 102, 102, 1);
 				}
 
 				.price-data {
-					font-size: 20px;
-					font-weight: 700;
-					line-height: 23.44px;
+					font-size: 48rpx;
+					font-weight: 400;
+					line-height: 72rpx;
 					color: rgba(51, 51, 51, 1);
 				}
 
 				.grid-min-price {
-					font-size: 12px;
-					font-weight: 500;
-					line-height: 17.38px;
+					font-size: 24rpx;
+					font-weight: 400;
+					line-height: 36rpx;
 					color: rgba(153, 153, 153, 1);
-					margin-top: 4px;
 				}
 			}
+		}
 
-			.price-item:first-child {
-				border-right: 1px solid #dcdfe6;
+		.status-card {
+			display: grid;
+			grid-template-columns: repeat(3, 1fr);
+			gap: 48rpx;
 
-			}
+			/* 网格项之间的间距 */
+			.status-card-item {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-direction: column;
+
+				.grid-img-box {
+					padding: 35rpx;
+					border-radius: 50%;
+					background: rgba(249, 250, 251, 1);
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					margin-bottom: 18rpx;
+				}
 
+				.grid-text {
+					font-size: 28rpx;
+					font-weight: 400;
+					line-height: 42rpx;
+					color: rgba(51, 51, 51, 1);
+				}
+			}
 		}
 
-	}
+		.count-card {
 
-	.rate-box {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
 
-		.rate-left {
-			font-size: 14px;
-			font-weight: 500;
-			letter-spacing: 0px;
-			line-height: 20.27px;
-			color: rgba(0, 0, 0, 1);
 
-			display: flex;
-			align-items: center;
-			justify-content: left;
+			.count-list {
+				display: grid;
+				grid-template-columns: repeat(4, 1fr);
+				/* 3 列，每列等宽 */
+				gap: 32rpx;
+
+				/* 网格项之间的间距 */
+				.count-item {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
 
-			flex: 1;
+					.count-item-text {
+						font-size: 28rpx;
+						font-weight: 400;
+						line-height: 42rpx;
+						color: rgba(102, 102, 102, 1);
+					}
+				}
+			}
 		}
 
-		.rate-rigth {
-			font-size: 14px;
-			font-weight: 500;
-			letter-spacing: 0px;
-			line-height: 20.27px;
-			color: rgba(0, 0, 0, 1);
+		.rate-card {
+			.rate-list {
+				display: flex;
+				align-items: center;
 
-			.rate-count {
-				color: rgba(237, 123, 47, 1);
+				.rate-box {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+
+					.rate-count {
+						font-size: 64rpx;
+						font-weight: 400;
+						line-height: 96rpx;
+						color: rgba(51, 51, 51, 1);
+					}
+
+					.rate-text {
+						font-size: 28rpx;
+						font-weight: 400;
+						line-height: 42rpx;
+						color: rgba(102, 102, 102, 1);
+					}
+				}
 			}
 		}
+
 	}
 }
+
+.mine-card {
+	border-radius: 24rpx;
+	background: rgba(255, 255, 255, 1);
+	box-shadow: 0rpx 0rpx 0rpx rgba(0, 0, 0, 0), 0rpx 0rpx 0rpx rgba(0, 0, 0, 0), 0rpx 4rpx 16rpx rgba(0, 0, 0, 0.05);
+	margin-bottom: 16rpx;
+	padding: 40rpx;
+}
+
+.count-title {
+	font-size: 32rpx;
+	font-weight: 400;
+	line-height: 48rpx;
+	color: rgba(51, 51, 51, 1);
+	margin-bottom: 32rpx;
+}
 </style>