caimei-applets-mcare/pages/goods/procurement.vue

<template>
    <view class="proInit">
        <tui-skeleton
        	v-if="skeletonShow"
        	backgroundColor="#fafafa"
        	borderRadius="10rpx"
        	:isLoading="true"
        	:loadingType="5"
        ></tui-skeleton>
        <view v-else>
            <tui-tabs :tabs="tabs" :currentTab="currentTab" @change="handlerTabs" class="tab"></tui-tabs>
            <view class="tabsContent" @modelData='modelData' v-for="(item, index) in 5" :key="index" :style="{marginTop: index === 0 ? '40px' : ''}">
                <proCard />
            </view>
        </view>
        <!-- 弹窗提示 -->
        <tui-modal
        	:show="modal"
        	@click="handleClick"
        	@cancel="hideMobel"
        	:content="contentModalText"
        	:button="modalButton"
        	color="#333"
        	:size="32"
        	shape="circle"
        	:maskClosable="false"
        >
        </tui-modal>
        <view class="add_btn">
            <image style="width: 100%;height: 100%;" src="@/static/procurement/add_pro.png"></image>
        </view>
    </view>
</template>

<script>
    import proCard from './components/procurement_card.vue'
    export default {
        components: {
            proCard,
        },
        data() {
            return {
                skeletonShow: true,
                tabs: [
                    {
                        name: '全部'
                    },
                    {
                        name:'我参与的'
                    },
                    {
                        name: '我发起的'
                    }
                ],
                currentTab: 0,
                modal: false,
                contentModalText: '确定退出参与该需求吗？',
                modalButton: [
                    {
                        text: '取消',
                        type: 'gray',
                        plain: true, //是否空心
                    },
                    {
                        text: '确认',
                        customStyle: {
                            color: '#fff',
                            bgColor: 'linear-gradient(90deg, #F28F31 0%, #F3B574 100%)'
                        },
                        plain: false
                    }
                ]
            }
        },
        mounted() {
            this.skeletonShow = false
        },
        methods:{
            handlerTabs($event) {
                console.log($event)
                this.currentTab = $event.index
            },
            handleClick($event) {
                console.log($event.index)
                this.modal = false
            },
            hideMobel($event) {},
            modelData(proData) {
                console.log(proData)
            },
        },
    }
</script>

<style lang="scss" scoped>
.proInit .tab {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9;
}
::v-deep .tui-tabs-slider.data-v-9311a734 {
    background: #F3B574 !important;
}
::v-deep .tui-tabs-title.tui-tabs-active {
    color: #F3B574 !important;
}
.tabsContent {
    background-color: #F7F7F7;
    padding: 16rpx 32rpx;
    // margin-bottom: 32rpx;
}
.add_btn {
    width: 100rpx;
    height: 100rpx;
    position: fixed;
    bottom: 129rpx;
    right: 34rpx;
}
</style>