caimei-applets-caimei/pages/seller/components/homeIndex/zoneFloor.vue

<template>
	<view>
		<view class="page-content clearfix" v-for="(page, index) in list" :key="index">
			<view class="tui-group-title">
				<view class="tui-group-name">{{ page.floorTitle }}</view>
                <view class="tui-group-tabs">
                    <view class="tui-group-tabs-left">
                        <view class="tui-tabs-item" @click="handleNavTo(page,1)">产品</view>
                        <view class="tui-tabs-item" @click="handleNavTo(page,2)">仪器</view>
                        <view class="tui-tabs-item" @click="handleNavTo(page,3)">耗材配件</view>
                    </view>
                    <view class="tui-group-tabs-right" @click="handleNavTo(page,0)">
                       <text>更多</text> 
                       <text class="iconfont icon-xiayibu"></text>
                    </view>
                </view>
			</view>
            <templateZ :pageData="page" :userIdentity="userIdentity"></templateZ>
		</view>
	</view>
</template>

<script>
import templateZ from './template-page/templateZ.vue'
export default {
	name: 'zoneFloor',
	components: {
		templateZ
	},
	props: {
		list: {
			type: Array
		},
		pageType: {
			type: Number
		},
		userIdentity: {
			type: Number
		}
	},
	data() {
		return {
			pageFloorList: []
		}
	},
	created() {
		
	},
	watch: {
		list: {
			handler: function (el) {//监听对象的变换使用 function，箭头函数容易出现this指向不正确
				this.list = el
			},
			deep: true
		}
	},
	methods: {
		handleNavTo(page,typeSort) {
			//跳转
			this.$api.navigateTo(`/pages/goods/good-floor-zone?zoneId=${page.id}&typeSort=${typeSort}&floorTitle=${page.floorTitle}`)
		}
	}
}
</script>

<style lang="scss">
.page-content {
	background-color: #F7F7F7;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 0 24rpx;
}

.tui-group-title {
	width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    box-sizing: border-box;
    .tui-group-name {
    	font-size: $font-size-36;
        font-weight: bold;
        color: #333333;
    }
    .tui-group-tabs{
        height: 100rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .tui-group-tabs-left{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-right: 20rpx;
            .tui-tabs-item{
                display: flex;
                font-size: $font-size-28;
                line-height: 100rpx;
                color: #333;
                margin: 0 15rpx;
            }
        }
        .tui-group-tabs-right{
            font-size: $font-size-24;
            line-height: 100rpx;
            color: #999999;
            .icon-xiayibu {
            	font-size: $font-size-30;
            	color: #999999;
            }
        }
    }
}
</style>