leromro-mini/pages/mine.vue

<template>
	<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="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">
						{{ 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>
				</view>
			</view>

			<!-- 志愿者 -->
			<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-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>
		</view>


	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import {
	onLoad,
	onShow
} from '@dcloudio/uni-app';
import store from "@/store"
const userInfo = ref({
	avatar: '/static/serverImg/mine/user.png'
})

const priceList = [{
	name: '账户余额',
	key: 'balance',
	decimals: 2
},
{
	name: '订单总数',
	key: 'orderCount',
	decimals: 0
}
]
const data = ref({
	balance: 0.0,
	orderCount: 0,
});

const userType = uni.getStorageSync('userType') //读取本地存储

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',
		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',
	},
	{
		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 rateValue = ref(3);

const orderList = ref([{
	name: '预约单',
	key: 'orderCount'
},

{
	name: '进行单',
	key: 'orderCount'

},
{
	name: '完成单',
	key: 'orderCount'

},
{
	name: '取消单',
	key: 'orderCount'

}
]);
const onClick = (record) => {
	console.log('record', record, record.page);
	if (record.page && record.value) {
		const app = getApp();
		app.globalData.switchTabParams = {
			tabKey: record.value
		};
		// JS跳转 
		uni.switchTab({
			url: record.page
		});
		return;
	}
	if (record.page) {
		uni.navigateTo({
			url: record.page
		});
	}


}


const geUserInfo = () => {
	console.log(store.state, '>>>>99');
	userInfo.value = store.state.user
}

onShow(() => {
	geUserInfo();

})

</script>

<style lang="scss" scoped>
.mine-container {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(245, 245, 245, 1);
	overflow-y: auto;

	.mine-header {
		padding: 42rpx 44rpx;
		background: #fff;
		display: flex;

		.header-info {
			display: flex;
			flex-direction: column;
			margin-left: 36rpx;

			.info-name {
				font-size: 36rpx;
				font-weight: 400;
				line-height: 54rpx;
				color: rgba(51, 51, 51, 1);
			}

			.info-id {
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 42rpx;
				color: rgba(153, 153, 153, 1);
			}

			.info-edit {
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 36rpx;
				color: rgba(102, 102, 102, 1);
			}
		}

	}

	.list-box {
		padding: 16rpx 40rpx;

		.price-card {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.price-item {
				display: flex;
				align-items: center;
				flex-direction: column;

				.price-name {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 42rpx;
					color: rgba(102, 102, 102, 1);
				}

				.price-data {
					font-size: 48rpx;
					font-weight: 400;
					line-height: 72rpx;
					color: rgba(51, 51, 51, 1);
				}

				.grid-min-price {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 36rpx;
					color: rgba(153, 153, 153, 1);
				}
			}
		}

		.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 {



			.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;

					.count-item-text {
						font-size: 28rpx;
						font-weight: 400;
						line-height: 42rpx;
						color: rgba(102, 102, 102, 1);
					}
				}
			}
		}

		.rate-card {
			.rate-list {
				display: flex;
				align-items: center;

				.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>