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

<template>
	<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="https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"
					       mode="aspectFill" class="square120"/>
				</view>
				<view class="nickname">
					{{name}}
				</view>
			</view>
		</view>

		<view v-if="+role===0" style="background-color: white;">
			<view class="re-item flex-sb bottom-line" @click="clickSells">
				<view>我要推荐</view>
				<view class="subf">推荐领奖<uni-icons type="right" size="12" color="#aaa"/></view>
			</view>
			<view class="re-item flex-sb bottom-line" @click="clickOrder">
				<view>我的订单</view>
				<view class="subf">立即查看<uni-icons type="right" size="12" color="#aaa"/></view>
			</view>
			<view class="re-item flex-sb bottom-line" @click="clickHistory">
				<view>历史订单</view>
				<view class="subf">点击查看<uni-icons type="right" size="12" color="#aaa"/></view>
			</view>
			<view class="re-item flex-sb">
				<view>我要拒单</view>
				<button class="subf" open-type="contact">
					<span>联系客服</span>
					<uni-icons type="right" size="12" color="#aaa"/>
				</button>
			</view>
		</view>
		<view v-if="+role===1" style="background-color: white;">
			<view class="re-item flex-sb bottom-line" @click="clickCars">
				<view>企业设备</view>
				<view class="subf">{{cars.length}}<uni-icons type="right" size="12" color="#aaa"/></view>
			</view>
			<view class="re-item flex-sb bottom-line" @click="clickPush">
				<view>发布订单</view>
				<view class="subf">立即发布<uni-icons type="right" size="12" color="#aaa"/></view>
			</view>
			<view class="re-item flex-sb">
				<view>联系客服</view>
				<button class="subf" open-type="contact">
					<span>微信客服</span>
					<uni-icons type="right" size="12" color="#aaa"/>
				</button>
			</view>
		</view>
		<view v-if="+role===2" style="background-color: white;">
			<view class="re-item flex-sb bottom-line" @click="clickCars">
				<view>企业设备</view>
				<view class="subf">{{cars.length}}<uni-icons type="right" size="12" color="#aaa"/></view>
			</view>
			<view class="re-item flex-sb bottom-line" @click="clickStaff">
				<view>推荐司机</view>
				<view class="subf">推荐有礼<uni-icons type="right" size="12" color="#aaa"/></view>
			</view>
			<view class="re-item flex-sb bottom-line" @click="clickYuan">
				<view>员工管理</view>
				<view class="subf">管理员工<uni-icons type="right" size="12" color="#aaa"/></view>
			</view>
			<view class="re-item flex-sb" @click="swichHall">
				<view>员工订单</view>
				<view class="subf">查看订单<uni-icons type="right" size="12" color="#aaa"/></view>
			</view>
		</view>
		<view v-if="+role===3" style="background-color: white;">
			<view class="re-item flex-sb bottom-line" @click="clickShen">
				<view>拒单申请</view>
				<view class="subf">查看申请<uni-icons type="right" size="12" color="#aaa"/></view>
			</view>
			<view class="re-item flex-sb bottom-line" @click="swichHall">
				<view>区域订单</view>
				<view class="subf">查看订单<uni-icons type="right" size="12" color="#aaa"/></view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				role: "1",
				name: "",
				cars: []
			}
		},
		onShow() {
			this.role = uni.getStorageSync("role");
			this.name = uni.getStorageSync("name");
			this.loadCars()
			if(!uni.getStorageSync("userid")){
				uni.showModal({
					title: "登陆检测",
					content: "无法识别您的用户身份，请先登陆",
					success: (res) => {
						if(res.confirm === true){
							uni.navigateTo({
								url: "/pages/login/login"
							})
						} else {
							uni.navigateBack({delta: 1})
						}
					}
				})
			}
		},
		methods: {
			clickOrder(){ uni.navigateTo({ url: '/pages/user/orders' }) },
			clickHistory(){ uni.navigateTo({ url: '/pages/user/history' }) },
			clickLogin(){ uni.navigateTo({ url: '/pages/login/login' }) },
			clickSells(){ uni.navigateTo({ url: '/pages/base/sells' }) },
			
			clickStaff(){ uni.navigateTo({ url: '/pages/staff/sells' }) },
			clickCars (){ uni.navigateTo({ url: '/pages/staff/cars' }) },
			clickPush (){ uni.navigateTo({ url: '/pages/staff/create' }) },
					  
			clickYuan (){ uni.navigateTo({ url: '/pages/base/yuan' }) },
			clickShen (){ uni.navigateTo({ url: '/pages/base/shen' }) },
			swichHall (){ uni.switchTab( { url: '/pages/index/order' }) },
			
			clickService(){
				uni.makePhoneCall({
					phoneNumber: '1234567890',
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function(err) {
						console.log('拨打电话失败：', err.errMsg);
					}
				});
			},
			loadCars(){
				this.$httpGet("/api/car/list", {useridp: ""}, (res) => {
					console.log('[/car/list]', res);
					if(res.data){
						this.cars = this.$utils.toArray(res.data)
					} 
				})
			},
		}
	}
</script>

<style>
	body{
		background-color: #f5f5f5;
	}
	page{
		background-color: #f5f5f5;
	}
	button{ padding: 0;margin: 0;background-color: transparent; }
	button::after{ border: none; }
	button:hover{ background-color: transparent; }
	button{ margin: 0 !important;border: none !important; }
	
	.head-d{
		position: absolute; 
		top: 188rpx; 
		left: 64rpx;
		z-index: 3;
	}
	
	.banner {
		width: 100vw;
		min-height: 420rpx;
	}
	.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);
		backdrop-filter: blur(5rpx);
		z-index: 1;
	}
	.nickname{
		line-height: 120rpx !important;
		font-weight: bolder !important;
		font-size: 36rpx !important;
		color: #fff;
	}
	.head-div{
		width: calc(100vw - 72rpx);
		height: 268rpx;
		padding: 72rpx 36rpx 0;
		margin: 0 auto;
	}
	.subf{
		font-size: 26rpx;
		color: #6B768A;
		line-height: 120rpx;
	}
	.nickname{
		height: 50rpx;
		line-height: 60rpx;
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #ffffff;
	}
	.tel{
		font-size: 24rpx;
		line-height: 60rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #ffffff;
		
	}
	
	
</style>