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" />
            </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>
        <tui-bottom-popup :zIndex="1002" :maskZIndex="1001" :show="popupShow" @close="handlerPopupClose">
            <view class="popup_content">
                <view class="pro_popup_title">参与需求</view>
                <view class="popup_form">
                    <view class="popup_form_item">商品图片：</view>
                    <view class="popup_img">
                        <image style="width: 100%;height: 100%;" src="" mode="aspectFill"></image>
                    </view>
                </view>
                <view class="popup_form">
                    <view class="popup_form_item">商品名称：</view>
                    <view class="popup_form_name">
                        韩国恩盛进口氢洁气小气泡清韩进口氢洁气小气泡清 口氢洁气小气泡清韩进口氢洁气小气泡
                    </view>
                </view>
                <form>
                    <view class="uni-form-item uni-column">
                        <view class="title">
                            <text style="font-size: 26rpx;color: #F85050;">*</text>
                            期望单价：
                        </view>
                        <view style="position: relative;">
                            <view class="input_icon">￥</view>
                            <input class="uni-input" focus placeholder="自动获得焦点" />
                        </view>
                    </view>
                    <view class="uni-form-item uni-column">
                        <view class="title">
                            <text style="font-size: 26rpx;color: #F85050;">*</text>
                            采购数量：
                        </view>
                        <view style="position: relative;">
                            <input class="uni-input" focus placeholder="自动获得焦点" />
                        </view>
                    </view>
                    <view class="submit_btn">
                        <button class="popup_btn cancel">取消</button>
                        <button class="popup_btn submit">确定</button>
                    </view>
                </form>
            </view>
        </tui-bottom-popup>
        <view :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>
    </view>
</template>

<script>
import proCard from './components/procurement_card.vue'
import jumpMixins from '@/mixins/jumpMixins.js'
import { mapState } from 'vuex'
export default {
    components: {
        proCard
    },
    mixins: [jumpMixins],
    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: {},
            popupShow: false, // 底部上移栏
            loadding: true, // 下拉刷新
            pullUpOn: true, // 下拉刷新
            // 分页参数
            pageInfo: {
                pageNo: 1,
                pageSize: 10
            },
            // 我参与的数据请求
            participate: {
                userId: '',
                procurementType: 0,
            },
            // 所有数据
            procurementList: [], 
            // 下拉刷新
            nomoreText: '已经被掏空了~',
            userInfo: {},
            isLastPage: false, // 是否是最后一页
        }
    },
    watch: {
        currentTab(val) {
            this.loadding = true
            this.pullUpOn = true
            if (val>0) {
                this.participate.procurementType = --val
                this.procurementTabChange()
            } else {
                this.isLastPage = false
                this.pageInfo.pageNo = 1
                this.procurementAllList()
            }
        }
    },
    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')
        // }
    },
    onReachBottom() {
        this.pageInfo.pageNo+=1
        this.procurementAllList()
    },
    methods: {
        // tab 切换
        handlerTabs($event) {
            this.currentTab = $event.index
        },
        // 弹窗确认或取消
        handleClick($event) {
            this.modal = false
            if ($event.index === 1) {
            }
        },
        hideMobel($event) {},
        // 组件传递商品详情
        modelData(proData) {
            this.modal = true
            this.proDataInfo = proData
        },
        // 关闭底部
        handlerPopupClose() {
            this.popupShow = false
        },
        // 我要参与
        popupAdd($event) {
            console.log($event)
            this.popupShow = true
        },
        // 修改
        popupChange($event) {
            uni.navigateTo({
                url: '/pages/goods/procurement_info'
            })
        },
        // 发布
        procurementAdd() {
            uni.navigateTo({
                url: '/pages/goods/procurementAdd'
            })
        },
        /**
         * 网络请求
         */
        // 全部集采
        async procurementAllList() {
            if (!this.isLastPage) {
                try {
                    const {data} = await this.ProcurementService.procurementAllList(this.pageInfo)
                    this.procurementList = [...this.procurementList, ...data.list]
                    this.isLastPage = data.isLastPage
                    this.loadding = !data.isLastPage
                    this.pullUpOn = !data.isLastPage
                    this.skeletonShow = false
                } catch (error) {
                    console.log(error)
                }
            }
        },
        // 我参与的 | 我发起的
        async procurementTabChange() {
            try{
                const {data} = await this.ProcurementService.procurementTabChange(this.participate)
                this.procurementList = data
                this.loadding = false
                this.pullUpOn = false
                this.skeletonShow = false
            }catch(error){
                console.log(error)
            }
        },
    }
}
</script>

<style lang="scss">
page {
    background-color: #f7f7f7;
}
.proInit {
    background-color: #f7f7f7;
}
.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;
}
.popup_content {
    padding: 0 64rpx;
}
.pro_popup_title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin: 40rpx auto;
    text-align: center;
}
.popup_form {
    margin-bottom: 32rpx;
}
.popup_form .popup_form_item {
    color: #999999;
    font-size: 26rpx;
    margin-bottom: 16rpx;
}
.popup_form .popup_img {
    width: 136rpx;
    height: 136rpx;
    border: 1px dotted black;
}
.popup_form .popup_form_name {
    color: #333333;
    font-size: 26rpx;
    font-weight: 400;
    line-height: 44rpx;
}
.uni-form-item .title {
    color: #999999;
    font-size: 26rpx;
    margin-bottom: 16rpx;
}
.input_icon {
    position: absolute;
    left: 15rpx;
    top: 24rpx;
    color: #b2b2b2;
    font-size: 26rpx;
}
.uni-form-item .uni-input {
    height: 80rpx;
    border: 1px solid #b2b2b2;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    font-size: 26rpx;
    padding-left: 47rpx;
    margin-bottom: 32rpx;
}
.submit_btn {
    margin-top: 56rpx;
    height: 84rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50rpx;
}
.submit_btn .popup_btn {
    width: 280rpx;
    height: 100%;
    border-radius: 45rpx 45rpx 45rpx 45rpx;
    text-align: center;
    line-height: 84rpx;
}
::v-deep .submit_btn .cancel {
    background-color: #fff4e6;
    color: #f3b574;
    font-size: 32rpx;
}
::v-deep .submit_btn .submit {
    background-color: #f3b574;
    color: #ffffff;
    font-size: 32rpx;
}
</style>