<template>
|
<view class="container">
|
<view class="service-box">
|
<u-grid :col="3" :border="false">
|
<u-grid-item bg-color="transparent" v-for="(item, index) in serviceButton" :key="index"
|
@click="goBusinessPage(item.url,index)">
|
<view class="service-item">
|
<image :src="item.img" mode="widthFix" class="img"></image>
|
<view class="name">{{ item.name }}</view>
|
</view>
|
</u-grid-item>
|
</u-grid>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
fakeServiceButton
|
} from "@/api/mock/dispatch.js";
|
|
export default {
|
data() {
|
return {
|
dataList: [],
|
serviceButton: []
|
};
|
},
|
onLoad() {
|
|
},
|
onReachBottom() {
|
|
},
|
mounted() {},
|
methods: {
|
onLoad() {
|
if (this.$store.state.UserData.rname[0] == '保安') {
|
|
this.serviceButton = [{
|
name: '接收指令查询',
|
img: '/static/images/dispatch/look.png',
|
url: '../dispatch/receive'
|
}]
|
|
} else if (this.$store.state.UserData.rname[0] == '保安公司管理员') {
|
|
this.serviceButton = [{
|
name: '接收指令查询',
|
img: '/static/images/dispatch/look.png',
|
url: '../dispatch/receive'
|
}]
|
|
} else {
|
this.serviceButton = [{
|
name: '下发指令查询',
|
img: '/static/images/dispatch/up-down.png',
|
url: '../dispatch/send'
|
},
|
{
|
name: '文字指令下发',
|
img: '/static/images/dispatch/issue.png',
|
url: '../dispatch/text'
|
},
|
{
|
name: '图片指令下发',
|
img: '/static/images/dispatch/imgissue.png',
|
url: '../dispatch/imgissue'
|
}
|
]
|
}
|
// 加载服务按钮数据
|
// fakeServiceButton().then(data => {
|
// this.serviceButton = data;
|
// });
|
},
|
//页面跳转
|
goBusinessPage(url, index) {
|
uni.navigateTo({
|
url: url
|
})
|
},
|
}
|
};
|
</script>
|
|
|
<style lang="scss">
|
.container {
|
background-color: #f7f7f7;
|
min-height: 100vh;
|
overflow: hidden;
|
}
|
|
.service-box {
|
background: #ffffff;
|
border-radius: 20px 20px 20px 20px;
|
margin: 30rpx 20rpx 0;
|
padding: 0rpx 20rpx;
|
|
.service-item {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: center;
|
width: 100%;
|
height: 120rpx;
|
font-size: 26rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #585b61;
|
|
.img {
|
width: 70rpx;
|
height: auto;
|
}
|
}
|
}
|
</style>
|
