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" :imageData="formData.productImage" />
                </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"
                        maxlength="30"
                    />
                    <!-- <small>请输入商品名称</small> -->
                </view>
            </view>
            <view class="uni-form-item uni-column">
                <view class="title">
                    <span>*</span>
                    期望单价
                </view>
                <view>
                    <input
                        class="uni-input"
                        type="number"
                        focus
                        placeholder="请输入您对商品的期望单价"
                        v-model="formData.price"
                        @input="fpNumInput($event, 'formData')"
                    />
                </view>
            </view>
            <view class="uni-form-item uni-column">
                <view class="title">
                    <span>*</span>
                    采购数量
                </view>
                <view>
                    <input
                        class="uni-input"
                        type="number"
                        focus
                        placeholder="请输入您的采购数量"
                        v-model="formData.number"
                        @input="NumberInput($event, 'formData')"
                    />
                </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'
import procurementMixins from './mixins/procurementMixins.js'
export default {
    components: {
        proUpload,
        proBtn
    },
    mixins: [procurementMixins],
    data() {
        return {
            // 发布需求
            formData: {
                userId: 0,
                productImage: '',
                productName: '',
                price: '',
                number: '',
                userName: ''
            },
            userInfo: {}, // 用户详情
            isActive: false,
            currentTab: 0, //上一页tab
            detailData: {
                id: '',
                userId: '',
                procurementType: 1
            }
        }
    },
    watch: {
        'formData.productName': {
            handler() {
                this.activeBtn()
            },
            deep: true
        },
        'formData.price': {
            handler() {
                this.activeBtn()
            },
            deep: true
        },
        'formData.number': {
            handler() {
                this.activeBtn()
            },
            deep: true
        }
    },
    onLoad(options) {
        this.userInfo = uni.getStorageSync('userInfo')
        if (options.id) {
            this.detailData.id = options.id
            this.handlerDetail()
        } else {
            this.currentTab = Number(options.currentTab)
        }
    },
    mounted() {
        this.userInfo = uni.getStorageSync('userInfo')
        this.formData.userId = this.userInfo.userId
        this.formData.userName = this.userInfo.userName
    },
    methods: {
        // 校验 只能输入数字和小数点
        fpNumInput(e, str) {
            const o = e.target
            const inputRule = /[^\d.]/g //修改inputRule 的值
            this.$nextTick(() => {
                this[str].price = o.value.replace(inputRule, '')
            })
        },
        // 校验 只能输入数字
        NumberInput(e, str) {
            const o = e.target
            const inputRule = /[^\d]/g //修改inputRule 的值
            this.$nextTick(() => {
                this[str].number = o.value.replace(inputRule, '')
            })
        },
        // 发布按钮
        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() {
            const form = {
                userId: this.userInfo.userId,
                productImage: this.formData.productImage,
                productName: this.formData.productName,
                price: this.formData.price,
                number: this.formData.number,
                userName: this.formData.userName,
            }
            if (this.detailData.id) {
                form.id = this.detailData.id
            }
            try {
                const data = await this.ProcurementService.procurementSave(form)
                uni.showToast({
                    title: `${this.detailData.id ? '修改' : '发布'}成功`,
                    icon: 'success'
                })
                setTimeout(() => {
                    uni.navigateBack({
                        data: 1
                    })
                }, 1000)
                uni.$emit('refreshAddData', this.detailData.id) // 刷新修改的数据
            } catch (error) {
                console.log(error)
            }
        },
        // 发布详情
        async handlerDetail() {
            this.detailData.userId = this.userInfo.userId
            try {
                const data = await this.ProcurementService.procurementEditData(this.detailData)
                this.formData = data.data
            } catch (error) {
                console.log(error)
            }
        }
    }
}
</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>