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"
                v-for="(item, index) in procurementList"
                :key="index"
                :style="{ marginTop: index === 0 ? '40px' : '' }"
            >
                <proCard
                    @modelData="modelData"
                    :proTabId="currentTab"
                    :procuretInfo="item"
                    @popupAdd="popupAdd"
                    @popupChange="popupChange"
                    @proDelete="proDelete"
                    @procureDetail="procureDetail"
                />
            </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" @click="procurementAdd">
            <image style="width: 100%;height: 100%;" src="@/static/procurement/add_pro.png"></image>
        </view>
        <pro-pupop
            :dataObj="joinData"
            :isShow="popupShow"
            @handlerPopupClose="handlerPopupClose"
            @procurementParticipate="procurementParticipate($event, proListCallback)"
        />
        <view v-if="procurementList.length > 2" :style="{ marginTop: procurementList.length > 0 ? '0' : '88rpx' }">
            <!--加载loadding-->
            <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
            <tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText"></tui-nomore>
            <!--加载loadding-->
        </view>
        <proEmpty v-if="isEmpty" />
    </view>
</template>

<script>
import proCard from './components/procurement_card.vue'
import { mapState } from 'vuex'
import procurementMixins from './mixins/procurementMixins.js'
import proEmpty from './components/procurement-empty.vue'
import proPupop from './components/procurement-popup.vue'
export default {
    components: {
        proCard,
        proEmpty,
        proPupop
    },
    mixins: [procurementMixins],
    data() {
        return {
            skeletonShow: true, // loading
            // tab 栏切换
            tabs: [
                {
                    name: '全部'
                },
                {
                    name: '我参与的'
                },
                {
                    name: '我发起的'
                }
            ],
            currentTab: 0, // tab 当前所在栏
            modal: false, // 弹窗
            contentModalText: '', // 弹窗内容
            // 弹窗配置
            modalButton: [
                {
                    text: '取消',
                    type: 'gray',
                    plain: true //是否空心
                },
                {
                    text: '确认',
                    customStyle: {
                        color: '#fff',
                        bgColor: 'linear-gradient(90deg, #F28F31 0%, #F3B574 100%)'
                    },
                    plain: false
                }
            ],
            proDataInfo: {}, // 弹窗prodata
            popupShow: false, // 底部上移栏
            loadding: true, // 下拉刷新
            pullUpOn: true, // 下拉刷新
            // 分页参数
            pageInfo: {
                pageNo: 1,
                pageSize: 10,
                userId: '',
                status: 0
            },
            // 我参与的数据请求
            participate: {
                userId: '',
                procurementType: 0
            },
            // 所有数据
            procurementList: [],
            // 下拉刷新
            nomoreText: '已经没有了~',
            isLastPage: false, // 是否是最后一页
            joinData: {}, // 我要参与
            procurement: {},
            isEmpty: false, // 判断是否为空
        }
    },
    computed: {
        // 是否登录
        ...mapState(['hasLogin'])
    },
    onShow() {
        if (this.hasLogin) {
         	this.userInfo = uni.getStorageSync('userInfo')
            this.pageInfo.userId = this.userInfo.userId
          	this.participate.userId = this.userInfo.userId
            this.procurementAllList()
        } else {
            this.$api.redirectTo('/pages/login/login')
        }
    },
    onLoad() {
        // 刷新数据
        uni.$on('refreshAddData', () => {
            this.isEmpty = false
            this.procurementAllAddList()
        })
    },
    onReachBottom() {
        if (!this.isLastPage) {
            this.loadding = true
            this.pullUpOn = true
            this.pageInfo.pageNo += 1
            this.procurementAllList()
        }
    },
    onPullDownRefresh() {
        this.isEmpty = false
        this.isLastPage = false
        this.procurementList = []
        this.procurementAllList()
        uni.stopPullDownRefresh()
    },
    methods: {
        // tab 切换
        handlerTabs($event) {
            uni.showToast({
                icon:'loading',
                duration:1000
            })
            this.isEmpty = false
            this.isLastPage = false
            this.procurementList = []
            this.currentTab = $event.index
            this.loadding = true
            this.pullUpOn = true
            this.pageInfo.pageNo = 1
            this.pageInfo.status = $event.index
            this.procurementAllList()
        },
        // 弹窗确认或取消
        handleClick($event) {
            if ($event.index === 1) {
                if (this.procurement.isInvolved === 1) {
                    // 退出参与
                    this.procurementUpdate(1, () => this.procurementAllAddList())
                } else {
                    // 删除
                    this.procurementUpdate(0, () => this.procurementAllAddList())
                }
            }
            this.modal = false
        },
        hideMobel($event) {},
        // 组件传递商品详情 退出
        modelData(proData) {
            this.contentModalText = '确定退出参与该需求吗？'
            this.modal = true
            this.procurement = proData
        },
        // 关闭底部
        handlerPopupClose($event) {
            this.popupShow = $event
        },
        // 我要参与
        popupAdd($event) {
            this.joinData = $event
            this.popupShow = true
        },
        // 修改
        popupChange($event) {
            this.procurement = $event
            if (this.procurement.isInvolved === 1) {
                this.procurementEditData()
            } else {
                uni.navigateTo({
                    url: '/pages/goods/procurementAdd?id=' + $event.id
                })
            }
        },
        // 发布
        procurementAdd() {
            uni.navigateTo({
                url: `/pages/goods/procurementAdd?currentTab=${this.currentTab}`
            })
        },
        // 删除
        proDelete($event) {
            this.contentModalText = '确定删除该需求吗？'
            this.modal = true
            this.procurement = $event
        },
        // 详情
        procureDetail($event) {
            uni.navigateTo({
                url: `/pages/goods/procurement_info?id=${$event.id}&proTabId=${this.currentTab}`
            })
        },
        proListCallback() {
            this.procurementAllAddList()
        },
        /**
         * 网络请求
         */
        // 全部集采
        async procurementAllList() {
            if (!this.isLastPage) {
                try {
                    const { data } = await this.ProcurementService.procurementAllList(this.pageInfo)
                    this.procurementList = [...this.procurementList, ...data.list]
                    this.isLastPage = data.total === this.procurementList.length
                    this.loadding = !this.isLastPage
                    this.pullUpOn = !this.isLastPage
                    this.skeletonShow = false
                    if (this.procurementList.length === 0) {
                        this.isEmpty = true
                    }
                } catch (error) {
                    console.log(error)
                }
            }
        },
    }
}
</script>

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