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>
        <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="joinData.productImage" mode="aspectFill"></image>
                    </view>
                </view>
                <view class="popup_form">
                    <view class="popup_form_item">商品名称：</view>
                    <view class="popup_form_name">{{ joinData.productName }}</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" type="number" focus v-model="joinData.price" />
                        </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" type="number" focus v-model="joinData.number" />
                        </view>
                    </view>
                    <view class="submit_btn">
                        <button class="popup_btn cancel" @click="handlerPopupClose">取消</button>
                        <button class="popup_btn submit" @click="procurementParticipate">确定</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,
            },
            // 删除退出
            deleteData: {
                id: 0,
                userId: 0,
                procurementType: 0
            },
            // 所有数据
            procurementList: [],
            // 下拉刷新
            nomoreText: '已经被掏空了~',
            userInfo: {},
            isLastPage: false, // 是否是最后一页
            joinData: {}, // 我要参与
        }
    },
    watch: {
        currentTab(val) {
            this.loadding = true
            this.pullUpOn = true
            this.pageInfo.pageNo =1
            if (val>0) {
                this.participate.procurementType = --val
                this.procurementTabChange()
            } else {
                this.isLastPage = false
                this.pageInfo.pageNo = 1
                this.procurementAllList()
            }
        }
    },
    computed: {
        // 是否登录
        ...mapState(['hasLogin'])
    },
    onShow() {
        if (uni.getStorageSync('userInfo')) {
            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.procurementAllAddList()
        })
        uni.$on('refreshChangeData', () => {
            this.procurementTabChange()
        })
    },
    onReachBottom() {
        if (!this.isLastPage) {
            this.pageInfo.pageNo+=1
            this.procurementAllList()
        }
    },
    
    methods: {
        // tab 切换
        handlerTabs($event) {
            this.currentTab = $event.index
        },
        // 弹窗确认或取消
        handleClick($event) {
            if ($event.index === 1) {
                if(this.proDataInfo.isInvolved === 1) {
                    // 退出参与
                    this.procurementUpdate(1)
                } else{
                    // 删除
                    this.procurementUpdate(0)
                }
            }
            this.modal = false
        },
        hideMobel($event) {},
        // 组件传递商品详情 退出
        modelData(proData) {
            this.contentModalText = '确定退出参与该需求吗？'
            this.modal = true
            this.proDataInfo = proData
        },
        // 关闭底部
        handlerPopupClose() {
            this.popupShow = false
        },
        // 我要参与
        popupAdd($event) {
            this.joinData = Object.assign($event, {number: '', price: '', userId: this.userInfo.userId})
            this.popupShow = true
        },
        // 修改
        popupChange($event) {
            this.joinData = $event
            console.log($event)
            if(this.joinData.isInvolved === 1) {
                this.procurementEditData()
            } else {
                uni.navigateTo({
                    url: '/pages/goods/procurementAdd?id='+$event.sid
                })
            }
        },
        // 发布
        procurementAdd() {
            uni.navigateTo({
                url: `/pages/goods/procurementAdd?currentTab=${this.currentTab}`
            })
        },
        // 删除
        proDelete($event) {
            this.contentModalText = '确定删除该需求吗？'
            this.modal = true
            this.proDataInfo = $event
        },
        // 详情
        procureDetail($event) {
            uni.navigateTo({
                url: `/pages/goods/procurement_info?id=${$event.sid}&proTabId=${this.currentTab}`
            })
        },
        /**
         * 网络请求
         */
        // 全部集采
        async procurementAllList() {
            if (!this.isLastPage) {
                try {
                    const {data} = await this.ProcurementService.procurementAllList(this.pageInfo)
                    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 procurementAllAddList() {
            const form = {
                pageNo: 1,
                userId: this.userInfo.userId,
                pageSize: this.pageInfo.pageNo*this.pageInfo.pageSize
            }
            try {
                const {data} = await this.ProcurementService.procurementAllList(form)
                this.procurementList = data.list
                this.isLastPage = data.isLastPage
                this.loadding = !data.isLastPage
                this.pullUpOn = !data.isLastPage
            } 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)
            }
        },
        // 我要参与
        async procurementParticipate() {
            if(this.joinData.price === '') {
                return this.$util.msg('请输入期望单价', 2000)
            }
            if(this.joinData.number === '') {
                return this.$util.msg('请输入期望数量', 2000)
            }
            const form = {
                userId: this.userInfo.userId,
                productImage: this.joinData.productImage,
                productName: this.joinData.productName,
                price: this.joinData.price,
                number: this.joinData.number
            }
            try{
                const data = await this.ProcurementService.procurementParticipate(form)
                if (this.joinData.isInvolved === 0) {
                    this.procurementAllAddList()
                } else {
                    this.procurementTabChange()
                }
                this.popupShow = false
                uni.showToast({
                    title:`${this.joinData.isInvolved === 0 ? '参与' : '修改'}成功`,
                    icon: 'success'
                })
            }catch(error){
                console.log(error)
            }
        },
        // 删除 退出
        async procurementUpdate(type) {
            const form = {
                id: `${this.proDataInfo.sid}`,
                userId: this.userInfo.userId,
                procurementType: type
            }
            try{
                await this.ProcurementService.procurementUpdate(form)
                this.procurementTabChange()
                uni.showToast({
                    title: `${type === 0 ? '删除' : '退出'}成功`,
                    icon: 'success'
                })
            }catch(error){
                console.log(error)
            }
        },
        // 参与详情
        async procurementEditData() {
            const form = {
                id: `${this.joinData.sid}`,
                userId: this.userInfo.userId,
                procurementType: 0
            }
            try{
                const data = await this.ProcurementService.procurementEditData(form)
                this.joinData = data.data
                this.popupShow = 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.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>