leromro-mini/pages/mine.vue

<template>
	<view class="mine-container">

		<view class="mine-header">
			<up-image width="136rpx" height="136rpx" :show-loading="true" :src="userInfo.avatar"></up-image>
			<view class="header-info">
				<text class="info-name">{{ userInfo.nickName }}</text>
				<up-icon name="setting-fill" size="25" @click="handLsetTing" v-if="userType == 1"></up-icon>
				<!-- <text class="info-edit" @click="handLsetTing" v-if="userType == 1">设置></text> -->
			</view>
		</view>

		<view class="status-card2" v-if="userType == 1">
				<view  v-for="(listItem, listIndex) in userList" :key="listIndex"
					@click="onClick(listItem)">
					<view class="status-card-item2">
						<view class="status-card2-left">
						<view class="grid-img-box">
							<up-icon :name="listItem.iconName" :size="22"></up-icon>
						</view>
						<text class="grid-text">{{ listItem.name }}</text>
					</view>
					<up-icon name="arrow-right"></up-icon>
					</view>
					<up-divider v-if="listIndex !== userList.length -1"></up-divider>
				</view>
		</view>

		<view class="list-box" v-if="userType == 2">
			<view class="mine-card price-card" >
				<view v-for="(item, index) in priceList" :key="item.key" class="price-item"
					:style="{ alignItems: index === 0 ? 'flex-start' : 'flex-end' }" @click="onClick(item)">
					<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.balance] }}</text>
				</view>
			</view>

			<!-- 志愿者 -->
			<view class="mine-card status-card" >
				<view class="status-card-item" v-for="(listItem, listIndex) in adminList" :key="listIndex"
					@click="onClick(listItem)">
					<view class="grid-img-box">
						<up-icon :name="listItem.iconName" color="rgba(51, 51, 51, 1)" size="25"></up-icon>
					</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">
						<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" >
				<view class="count-title">订单统计</view>
				<view class="count-list">
					<view class="count-item" v-for="(item, index) in orderList" :key="index" @click="onClick(item)">
						<up-count-to :startVal="0" :endVal="data[item.key]"
							:color="data[item.key] > 0 && 'rgba(221, 94, 69, 1)'"></up-count-to>
						<text class="count-item-text">{{ item.name }}</text>
					</view>
				</view>
			</view>

			<view class="mine-card rate-card" >
				<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>

		<custom-tab-bar page="mine" />
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import {
	onLoad,
	onShow
} from '@dcloudio/uni-app';
import store from "@/store"
import { getVolunteerAccountInfo, volunteerOrderStatistics } from "@/api/mine";
import CustomTabBar from '@/components/CustomTabBar/index.vue'
const userInfo = ref({
	avatar: '/static/serverImg/mine/user.png'
})
const data = ref({
	balance: 0.0,
	reservationCount: 0,
	doingCount: 0,
	finishedCount: 0,
	cancelCount: 0,
	orderCount: 0,
	orderFrozenBalance: 0
});
const rateValue = ref(3)
const priceList = [{
	name: '账户余额',
	key: 'balance',
	decimals: 2,
	balance: 'orderFrozenBalance',
	page: '/pages_mine/pages/wallet/index'
},
{
	name: '订单总数',
	key: 'orderCount',
	decimals: 0,
	switchPage: '/pages/classify',
	value: 0
}
]
const orderList = ref([{
	name: '预约单',
	key: 'reservationCount',
	switchPage: '/pages/classify',
	value: 1
},

{
	name: '进行单',
	key: 'doingCount',
	switchPage: '/pages/classify',
	value: 2

},
{
	name: '完成单',
	key: 'finishedCount',
	switchPage: '/pages/classify',
	value: 3

},
{
	name: '取消单',
	key: 'cancelCount',
	switchPage: '/pages/classify',
	value: 4
}
]);


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

const adminList = ref(
	[
		{
			name: '差评申述',
			iconName: 'chat',
			page: '/pages_mine/pages/bad/index'
		},
		// {
		// 	name: '资质申请',
		// 	iconName: 'chat',
		// 	page: '/pages_home/pages/qualifications/index'
		// },
		{
			name: '帮助与客服',
			iconName: 'kefu-ermai',
		},
		{
			name: '用户端',
			iconName: 'account',
			operate: () => {
				uni.reLaunch({
					url: '/pages/UserSelection'
				});
			}
		},
	]);
const userList = ref([
	{
		name: '钱包',
		iconName: 'rmb-circle',
		page: '/pages_mine/pages/wallet/index'
	},
	{
		name: '浏览记录',
		iconName: 'eye',
	},
	{
		name: '收藏',
		iconName: 'star',
	},
	{
		name: '评论',
		iconName: 'edit-pen',
	},
	{
		name: '地址',
		iconName: 'map',
		page: '/pages_mine/pages/selectAddress/index'
	},
	{
		name: '帮助与客服',
		iconName: 'kefu-ermai',
	},
	{
		name: '志愿者',
		iconName: 'account',
		operate: () => {
			uni.reLaunch({
				url: '/pages/UserSelection'
			});
		}
	}
]);

const onClick = (record) => {
	console.log('record', record, record.page);
	if (record.page) {
		uni.navigateTo({
			url: record.page
		})
	}
	if (record.operate) {
		record.operate()
	}

	if (record.switchPage && record.value) {
		const app = getApp();
		app.globalData.switchTabParams = {
			tabKey: record.value
		};
		// JS跳转 
		uni.switchTab({
			url: record.switchPage
		});
		return;
	}
}



const getDetails = async () => {
	try {
		// const res = await getVolunteerAccount();
		// console.log('res',res);

	} catch (error) {
		console.log('error', error);

	}
}

const handLsetTing = () => {
	uni.navigateTo({
		url: '/pages_mine/pages/setupUser/index'
	})
}



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

onShow(() => {
	geUserInfo();
	init();
})

const init = async () => {
	try {
		// uni.hideLoading();
		uni.showLoading({
			title: '数据加载中...'
		});

		if (userType === 2) {
			const res1 = await getVolunteerAccountInfo();
			const res2 = await volunteerOrderStatistics();
			data.value = {
				...res1.data,
				...res2.data
			}
			console.log(11, res1, res2, data.value);

		}
	} catch (error) {
		console.log('error', error);
		uni.showToast({
			title: error.msg,
			icon: 'error',
		});
	} finally {
		uni.hideLoading();
	}
}


</script>

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

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


		.header-info {
			display: flex;
			// flex-direction: column;
			align-items: center;
			justify-content: space-between;
			margin-left: 36rpx;
			flex: 1;

			.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: #3366ff;
			}
		}

	}

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

		.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;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.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: 12rpx;
				}

				.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: 8rpx;
}

.status-card2 {
	margin-top: 24rpx;
	padding: 30rpx 30rpx;
	background-color: #fff;
	.status-card-item2{
		// height: 88rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.status-card2-left {
			display: flex;
			align-items: center;
			.grid-img-box {
				margin-right: 12rpx;
			}
		}
	}
}
</style>