concrete-transportation-uniapp-20250821/pages/index/center.vue

<template>
	<view class="page">
		<view class="content">
			<!-- 顶部背景和用户信息 -->
			<view class="banner b-relative">
				<image src="/static/re/center.png" class="banner-before" mode="scaleToFill" />
				<view class="flex head-d" @click="clickLogin">
					<view class="square120 garden mr20">
						<image :src="userAvatar" mode="aspectFill" class="square120" />
					</view>
					<view class="nickname">{{ name || '点击登录' }}</view>
				</view>
			</view>
			
			<!-- 用户/泵司功能菜单 -->
			<view v-if="Number(role) === 0" style="background-color:white">
				<view class="re-item flex-sb bottom-line" @click="clickSells">
					<view>我要推荐</view>
					<view class="subf">推荐领奖
						<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
					</view>
				</view>
				<view class="re-item flex-sb bottom-line" @click="clickOrder">
					<view>我的订单</view>
					<view class="subf">立即查看
						<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
					</view>
				</view>
				<view class="re-item flex-sb bottom-line" @click="clickHistory">
					<view>历史订单</view>
					<view class="subf">点击查看
						<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
					</view>
				</view>
				<view class="re-item flex-sb">
					<view>我要拒单</view>
					<button class="subf" @click="clickService">联系客服
						<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
					</button>
				</view>
			</view>
			
			<!-- 企业功能菜单 -->
			<view v-if="Number(role) === 1" style="background-color:white">
				<view class="re-item flex-sb bottom-line" @click="clickCars">
					<view>企业设备</view>
					<view class="subf">{{ cars.length || 0 }}台
						<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
					</view>
				</view>
				<view class="re-item flex-sb bottom-line" @click="clickPush">
					<view>发布订单</view>
					<view class="subf">立即发布
						<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
					</view>
				</view>
				<view class="re-item flex-sb">
					<view>联系客服</view>
					<button class="subf" @click="clickService">微信客服
						<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
					</button>
				</view>
			</view>
			
			<!-- 员工功能菜单 -->
			<view v-if="Number(role) === 2" style="background-color:white">
				<view class="re-item flex-sb bottom-line" @click="clickCars">
					<view>企业设备</view>
					<view class="subf">{{ cars.length || 0 }}台
						<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
					</view>
				</view>
				<view class="re-item flex-sb bottom-line" @click="clickSells">
					<view>推荐司机</view>
					<view class="subf">推荐有礼
						<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
					</view>
				</view>
				<view class="re-item flex-sb bottom-line" @click="clickStaff">
					<view>员工管理</view>
					<view class="subf">管理员工
						<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
					</view>
				</view>
				<view class="re-item flex-sb">
					<view>员工订单</view>
					<view class="subf" @click="swichHall">查看订单
						<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
					</view>
				</view>
			</view>
			
			<!-- 区域管理员功能菜单 -->
			<view v-if="Number(role) === 3" style="background-color:white">
				<view class="re-item flex-sb bottom-line" @click="clickRejectApply">
					<view>拒单申请</view>
					<view class="subf">查看申请
						<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
					</view>
				</view>
				<view class="re-item flex-sb">
					<view>区域订单</view>
					<view class="subf" @click="swichHall">查看订单
						<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
					</view>
				</view>
			</view>
			
			<!-- 通用功能菜单 -->
			<view style="background-color:white; margin-top: 20rpx;">
				<view class="re-item flex-sb bottom-line" @click="swichHall">
					<view>切换大厅</view>
					<view class="subf">{{ roleText }}
						<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
					</view>
				</view>
				<view class="re-item flex-sb bottom-line" @click="clickYuan">
					<view>意见反馈</view>
					<view class="subf">提交建议
						<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
					</view>
				</view>
				<view class="re-item flex-sb">
					<view>关于我们</view>
					<view class="subf" @click="clickShen">了解更多
						<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
					</view>
				</view>
			</view>
		</view>

		<tabber select="center" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	export default {
		components: {
			tabber,
		},
		data() {
			return {
				name: '',
				role: '1',
				cars: [],
				userAvatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132'
			}
		},
		computed: {
			roleText() {
				const roleNum = Number(this.role);
				if (roleNum === 0) {
					return '用户/泵司';
				} else if (roleNum === 1) {
					return '企业用户';
				} else if (roleNum === 2) {
					return '员工';
				} else if (roleNum === 3) {
					return '区域管理员';
				} else {
					return '用户';
				}
			}
		},
		onShow() {
			this.role = uni.getStorageSync('role') || '1';
			this.name = uni.getStorageSync('name') || '用户';
			this.loadCars();
		},
		methods: {
			// 点击头像
			clickLogin() {
				uni.showToast({
					title: '用户信息',
					icon: 'none'
				});
			},
			// 我的订单
			clickOrder() {
				uni.navigateTo({ url: '/pages_order/user/orders' });
			},
			// 历史订单
			clickHistory() {
				uni.navigateTo({ url: '/pages_order/user/history' });
			},
			// 推荐功能
			clickSells() {
				uni.navigateTo({ url: '/pages_order/base/sells' });
			},
			// 员工功能
			clickStaff() {
				uni.navigateTo({ url: '/pages_order/staff/staffManage' });
			},
			// 企业设备
			clickCars() {
				uni.navigateTo({ url: '/pages_order/staff/cars' });
			},
			// 发布订单
			clickPush() {
				uni.navigateTo({ url: '/pages_order/staff/create' });
			},
			// 意见反馈
			clickYuan() {
				uni.navigateTo({ url: '/pages_order/base/yuan' });
			},
			// 关于我们
			clickShen() {
				uni.navigateTo({ url: '/pages_order/base/shen' });
			},
			// 切换大厅
			swichHall() {
				uni.reLaunch({ url: '/pages/index/order' });
			},
			// 拒单申请（区域管理员）
			clickRejectApply() {
				uni.navigateTo({ url: '/pages_order/base/rejectApply' });
			},
			// 联系客服
			clickService() {
				uni.showModal({
					title: '联系客服',
					content: '确定拨打客服电话？',
					success: (res) => {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: '400-123-4567'
							});
						}
					}
				});
			},
			// 加载设备数据
			loadCars() {
				// 模拟加载设备数据
				this.cars = [
					{ id: 1, name: '泵车001' },
					{ id: 2, name: '泵车002' },
					{ id: 3, name: '搅拌车001' }
				];
			}
		}
	}
</script>

<style scoped lang="scss">
	body {
		background-color: #f5f5f5;
	}
	
	page {
		background-color: #f5f5f5;
	}
	
	button {
		padding: 0;
		margin: 0;
		background-color: transparent;
		border: none;
	}
	
	button::after {
		border: none;
	}
	
	button:hover {
		background-color: transparent;
	}
	
	.head-d {
		position: absolute;
		top: 188rpx;
		left: 64rpx;
		z-index: 3;
	}
	
	.banner {
		width: 100vw;
		min-height: 420rpx;
		position: relative;
	}
	
	.banner-before {
		content: " ";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		filter: blur(2rpx);
		z-index: -1;
	}
	
	.banner::after {
		content: " ";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .2);
		-webkit-backdrop-filter: blur(5rpx);
		backdrop-filter: blur(5rpx);
		z-index: 1;
	}
	
	.nickname {
		line-height: 120rpx !important;
		font-weight: bolder !important;
		color: #fff;
		font-size: 32rpx;
	}
	
	.square120 {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		overflow: hidden;
	}
	
	.garden {
		border-radius: 50%;
	}
	
	.mr20 {
		margin-right: 20rpx;
	}
	
	.flex {
		display: flex;
		align-items: center;
	}
	
	.flex-sb {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.re-item {
		padding: 30rpx;
		font-size: 32rpx;
		color: #333;
	}
	
	.bottom-line {
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.subf {
		font-size: 28rpx;
		color: #999;
		display: flex;
		align-items: center;
		gap: 10rpx;
	}
	
	.b-relative {
		position: relative;
	}
</style>