barter-app/components/store-staff/store-staff.vue

<template>
	<view class="staff">
        <!-- 员工权限工具 -->
        <view class="tool-flex store">
            <!-- manage-scan -->
            <view class="store-item" @click="$Router.push({name: 'Verification'})" v-if="toolList.manageScan">
                <image class="icon" src="@/static/icons/tool_icon_00.png" mode="aspectFill"></image>
                <view class="title">扫码核销</view>
                <image class="arrow" src="@/static/icons/equity_arrow_right.png" mode="aspectFill"></image>
            </view>
            
            <!-- manage-goods -->
            <view class="store-item" @click="$Router.push({name: 'GoodsMag'})" v-if="toolList.manageGoods">
                <image class="icon" src="@/static/icons/tool_icon_01.png" mode="aspectFill"></image>
                <view class="title">商品权证</view>
                <image class="arrow" src="@/static/icons/equity_arrow_right.png" mode="aspectFill"></image>
            </view>
            
            <!-- manage-employee -->
            <view class="store-item" @click="$Router.push({name: 'Employees'})" v-if="toolList.manageEmployee">
                <image class="icon" src="@/static/icons/tool_icon_08.png" mode="aspectFill"></image>
                <view class="title">员工管理</view>
                <image class="arrow" src="@/static/icons/equity_arrow_right.png" mode="aspectFill"></image>
            </view>
            
            <!-- order-shipment -->
            <view class="store-item" @click="$Router.push({name: ''})" v-if="toolList.orderShipment">
                <image class="icon" src="@/static/icons/tool_icon_04.png" mode="aspectFill"></image>
                <view class="title">发货单管理</view>
                <image class="arrow" src="@/static/icons/equity_arrow_right.png" mode="aspectFill"></image>
            </view>
            
            <!-- order-refund -->
            <view class="store-item" @click="$Router.push({name: ''})" v-if="toolList.orderRefund">
                <image class="icon" src="@/static/icons/tool_icon_07.png" mode="aspectFill"></image>
                <view class="title">退换货管理</view>
                <image class="arrow" src="@/static/icons/equity_arrow_right.png" mode="aspectFill"></image>
            </view>
            
            <!-- manageStore -->
            <view class="store-item" @click="$Router.push({name: 'shopLists'})" v-if="toolList.manageStore">
                <image class="icon" src="@/static/icons/tool_icon_07.png" mode="aspectFill"></image>
                <view class="title">部门/门店</view>
                <image class="arrow" src="@/static/icons/equity_arrow_right.png" mode="aspectFill"></image>
            </view>
            
            <!-- manage-coupons -->
            <view class="store-item" @click="$Router.push({name: 'CouponsMag'})" v-if="toolList.manageCoupons">
                <image class="icon" src="@/static/icons/tool_icon_02.png" mode="aspectFill"></image>
                <view class="title">优惠券管理</view>
                <image class="arrow" src="@/static/icons/equity_arrow_right.png" mode="aspectFill"></image>
            </view>
            
            <view class="store-item">
            	<image class="icon" src="@/static/icons/tool_icon_06.png" mode="aspectFill"></image>
            	<view class="title">营销推广码</view>
            </view>
        </view>
	</view>
</template>

<script>
	export default {
		name:"store-staff",
		props:{
			// 员工数据
			toolList: {},
		},
	    created() {
	        // console.log(this.$props.toolList)
	    }
	}
</script>

<style lang="scss" scoped>
	.staff{
		// 店铺统计
		.statistical{
			display: flex;
			background: $text-price;
			padding: $padding ($padding/2) $padding*2;
			flex-wrap: wrap;
			justify-content: space-between;
			.item{
				width: calc(25% - #{$padding});
				text-align: center;
				color: white;
				margin: 0 $margin / 2;
				.number{
					font-weight: bold;
					font-size: $title-size;
				}
				.text{
					font-size: $title-size-sm;
				}
			}
		}
		// 店铺概况
		.general{
			margin: -$margin*2 $margin 0 $margin;
			.general-box{
				background-color: white;
				border-radius: $radius/2;
				display: flex;
				padding: $padding - 20 $padding/2;
				flex-wrap: wrap;
				.general-item{
					width: 50%;
					text-align: center;
					padding: $padding/2;
					box-sizing: border-box;
					.number{
						font-weight: bold;
						font-size: $title-size;
						line-height: 50rpx;
					}
					.text{
						font-size: $title-size-sm;
						color: $text-gray;
						line-height: 40rpx;
					}
				}
			}
		}
		// 店铺工具
		.tool-flex{
			margin: $margin*2 $margin $margin;
			.store-item{
                background: white;
                border-radius: $radius/2;
                padding: $padding/2;
				box-sizing: border-box;
                margin-bottom: $margin;
                display: flex;
                position: relative;
				.icon{
					width: 54rpx;
					height: 54rpx;
                    margin-right: $margin - 15;
					vertical-align: top;
				}
				.title{
                    line-height: 58rpx;
					font-size: $title-size-m;
					color: $text-gray;
				}
                .arrow {
                    width: 38rpx;
                    height: 38rpx;
                    filter: brightness(.9);
                    position: absolute;
                    right: $padding - 20;
                    top: $padding - 6;
                }
			}
			.order-item{
				position: relative;
				padding: $padding/2;
				text-align: center;
				width: 20%;
				box-sizing: border-box;
				.icon{
					width: 58rpx;
					height: 58rpx;
					vertical-align: top;
				}
				.title{
					font-size: $title-size-sm;
					color: $text-gray;
				}
				.number{
					position: absolute;
					top: 10rpx;
					left: calc( 50% + 10rpx );
					font-size: $title-size-sm;
					background: $text-price;
					color: white;
					height: 30rpx;
					line-height: 30rpx;
					border-radius: 15rpx;
					min-width: 30rpx;
					z-index: 9;
				}
			}
		}
	}
</style>