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

<template>
    <view class="release">
        <form>
            <view class="uni-form-item uni-column">
                <view class="title">商品图片</view>
                <view class="uploadComp">
                    <proUpload @uploadDel='uploadDel' @uploadImg='uploadImg'/>
                </view>
            </view>
            <view class="uni-form-item uni-column">
                <view class="title"><span>*</span>商品名称</view>
                <view>
                    <input class="uni-input" focus placeholder="请输入想要采购的商品名称" v-model='formData.productName' />
                    <!-- <small>请输入商品名称</small> -->
                </view>
            </view>
            <view class="uni-form-item uni-column">
                <view class="title"><span>*</span>期望单价</view>
                <view>
                    <input class="uni-input" focus placeholder="请输入您对商品的期望单价" v-model="formData.price" />
                </view>
            </view>
            <view class="uni-form-item uni-column">
                <view class="title"><span>*</span>采购数量</view>
                <view>
                    <input class="uni-input" focus placeholder="请输入您的采购数量" v-model="formData.number" />
                </view>
            </view>
        </form>
        <view class="release_btn">
            <proBtn width="600rpx" v-if='isActive' @click="handlerSave" height="90rpx" background='#F3B574' color='#FFFFFF' fontSize='32rpx'>发布</proBtn>
            <proBtn width="600rpx" height="90rpx" v-else background='#E2E2E2' color='#999999' fontSize='32rpx'>发布</proBtn>
        </view>
    </view>
</template>

<script>
    import proBtn from './components/procurement-btn.vue'
    import proUpload from './components/upload.vue'
    import {mapState} from 'vuex'
    export default {
        components: {
            proUpload,
            proBtn
        },
        data() {
            return {
                // 发布需求
                formData: {
                    userId: 0,
                    productImage: '',
                    productName: '',
                    price: '',
                    number: '',
                    userName: ''
                },
                userInfo: {}, // 用户详情
                isActive: false
            }
        },
        watch: {
            'formData.productName': {
                handler() {
                    this.activeBtn()
                },
                deep: true
            },
            'formData.price': {
                handler() {
                    this.activeBtn()
                },
                deep: true
            },
            'formData.number': {
                handler() {
                    this.activeBtn()
                },
                deep: true
            }
        },
        onLoad(options) {
            if (options.id) {
                
            }
        },
        mounted() {
            this.userInfo = uni.getStorageSync('userInfo')
            this.formData.userId = this.userInfo.userId
            this.formData.userName = this.userInfo.name
        },
        methods: {
            // 发布按钮
            activeBtn() {
                if (this.formData.productName === '' || this.formData.price === ''|| this.formData.number === '') {
                    this.isActive = false
                } else {
                    this.isActive = true
                }
            },
            // 图片上传
            uploadImg(url) {
                if (url !== '' || url !== null) {
                    this.formData.productImage = url
                }
            },
            // 图片删除
            uploadDel(e) {
                this.formData.productImage = e
            },
            // submit 发布
            async handlerSave() {
                console.log(this.formData)
                try{
                    const data = await this.ProcurementService.procurementSave(this.formData)
                    console.log(data)
                }catch(error){
                    console.log(error)
                }
            },
            // 集采详情
            async handlerDetail(id) {
                try{
                    const data = await this.ProcurementService.procurementSave()
                }catch(e){
                    //TODO handle the exception
                }
            },
        },
    }
</script>

<style lang="scss" scoped>
    .release {
        padding: 24rpx;
    }
    span{
        color: #F85050;
        font-size: 28rpx;
    }
    .title {
        font-size: 28rpx;
        color: #666666;
        margin-bottom: 24rpx;
    }
    .uploadComp {
        margin-bottom: 40rpx;
    }
    .uni-input {
        height: 90rpx;
        border: 1px solid #B2B2B2;
        border-radius: 6rpx 6rpx 6rpx 6rpx;
        font-size: 28rpx;
        padding-left: 47rpx;
        margin-bottom: 40rpx;
    }
    .release_btn {
        position: fixed;
        left: 0;
        bottom: 0;
        margin-bottom: 76rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
</style>