partnerApp/pages/components/leverStaff.vue

<template>
    <view>
        <view class="partner-type dis">
				<view style="width: 650px;overflow-x: auto;">
					<text :class="typeStatistics == val.value ? 'selected' : ''" v-for="val in partnerTypeOption"
						:key="val.value" @click="getPartnerType(val.value)">{{ val.lable }}</text>
				</view>
			</view> 
    </view>
</template>
<script>
import {
	mapState,
} from "vuex"
export default {
    data(){
        return{
			typeStatistics: 1,
            partnerTypeOption: [
				{
					lable: '一级合伙人',
					value: '1'
				}, {
					lable: '二级合伙人',
					value: '2'
				}, {
					lable: '三级合伙人',
					value: '3'
				}, {
					lable: '四级合伙人',
					value: '4'
				},
			],
        }
    },
    computed: {
		...mapState(['userInfo']),
	},
    onLoad() {
		this.level = this.userInfo.sysUser.level
		if (this.level == 2) {
			this.partnerTypeOption = this.partnerTypeOption.slice(0, -1);
		}
		if (this.level == 3) {
			this.partnerTypeOption = this.partnerTypeOption.slice(0, -2);
		}
		if (this.level == 4) {
			this.partnerTypeOption = this.partnerTypeOption.slice(0, 1);
		}
	},
    methods:{
        getPartnerType(type) {
			this.typeStatistics = type
            this.$emit('getPartnerType',type)
		},
    }
}
</script>
<style lang="scss" scoped>

.partner-type {
	margin: 10px;
	width: 97%;
	overflow: hidden;
	white-space: nowrap;

	text {
		display: inline-block;
		border-radius: 14px 14px 14px 14px;
		font-size: 14px;
		color: #666666;
		padding: 1px 10px;
		background: #F4F4F4;
		margin-right: 8px;
	}

	.selected {
		color: #FFFFFF;
		background: linear-gradient(132deg, #2DD9FF 0%, #2D6DFF 100%);
	}
}
</style>