You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
361 lines
8.6 KiB
361 lines
8.6 KiB
<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>
|