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 5" :key="index" :style="{marginTop: index === 0 ? '40px' : ''}">
                <proCard @modelData="modelData" :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>
        <!--加载loadding-->
        <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
        <tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText"></tui-nomore>
        <!--加载loadding-->
    </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
                    }
                ],
                proDataInfo: {},
                popupShow: false,
                loadding: true,
                pullUpOn: true,
            }
        },
        mounted() {
            this.skeletonShow = false
        },
        methods:{
            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'
                })
            },
        },
    }
</script>

<style lang="scss" scoped>
.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>