channels_web/src/pages/goods/addGoods/index.vue

<template>
    <div class="wrapper">
        <div class="title">新增商品</div>
        <el-form class="form" ref="form" :model="form" label-width="80px">
            <el-form-item class="single" label="商品名:" label-width="100px">
                <el-input class="pr-50" placeholder="请输入" v-model="form.title" maxlength="60" show-word-limit>
                </el-input>
            </el-form-item>
            <el-form-item label="类目:" label-width="100px">
                <el-select v-model="form.third_cat_audit" placeholder="请选择" clearable filterable>
                    <el-option label="申请通过的类目" value="1"></el-option>
                    <el-option label="无需审核类目" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品ID:" label-width="100px">
                <el-input placeholder="请输入" v-model="form.out_product_id" maxlength="25">
                </el-input>
            </el-form-item>
            <el-form-item label="品牌:" label-width="100px">
                <el-select v-model="form.has_brand" placeholder="请选择" clearable filterable>
                    <el-option label="申请通过的品牌" value="1"></el-option>
                    <el-option label="无品牌" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品库存:" label-width="100px">
                <el-input placeholder="请输入" type='number' maxlength="25" v-model="form.stock_num">
                </el-input>
            </el-form-item>
            <el-form-item label="售卖价格:" label-width="100px">
                <el-input placeholder="请输入" type='number' maxlength="25" v-model="form.sale_price">
                </el-input>
            </el-form-item>
            <el-form-item label="市场价格:" label-width="100px">
                <el-input placeholder="请输入" type='number' maxlength="25" v-model="form.market_price">
                </el-input>
            </el-form-item>
            <el-form-item class="single" label="小程序链接:" label-width="100px">
                <el-input class="pr-50" placeholder="请输入" v-model="form.path" maxlength="100">
                </el-input>
            </el-form-item>
            <el-form-item label="一级类目:" v-if="false" label-width="100px">
                <el-input placeholder="请输入" maxlength="25">
                </el-input>
            </el-form-item>
            <el-form-item label="二级类目:" v-if="false" label-width="100px">
                <el-input placeholder="请输入" maxlength="25">
                </el-input>
            </el-form-item>
            <el-form-item label="三级类目:" v-if="form.has_brand=='0'" label-width="100px">
                <el-input placeholder="请输入" maxlength="25" v-model="form.third_cat_id">
                </el-input>
            </el-form-item>
            <el-form-item class="single" label="商品图片:" label-width="100px">
                <el-upload :action="uploadUrl" list-type="picture-card" :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item class="single" label="商品资质图片:" label-width="100px">
                <el-upload :action="uploadUrl" list-type="picture-card" :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item class="commit">
                <el-button class="blackbtn" :loading="loading" @click.native.prevent="commit">提交
                </el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
    import store from '@/store/index'
    export default {
        components: {},
        props: {},
        data() {
            return {
                uploadUrl: global_config.BASE_URL + 'file/img/upload',
                form: {
                    title: '',
                    third_cat_audit: '',
                    out_product_id: '',
                    has_brand: '',
                    stock_num: '',
                    sale_price: '',
                    market_price: '',
                    path: '',
                    third_cat_id: '',
                },
                loading: false
            };
        },
        watch: {},
        computed: {},
        methods: {
            commit(){
                store.commit('REMOVETAB','新增商品')
                this.$router.go(-1)
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true
            }
        },
        created() {},
        mounted() {}    
    };
</script>
<style lang="less" scoped>
    .wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
            font-weight: bold;
            width: 100%;
            text-align: left;
            margin-left: 100px;
        }

        .form {
            margin-top: 20px;
            width: 75%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .el-form-item {
                color: #232323;
                font-weight: bold;
            }

            .el-select {
                width: 300px;
            }

            .el-input {
                width: 300px;
            }

            .single {
                width: 100%;

                .el-input {
                    width: 875px;
                }

                .el-select {
                    width: 875px;
                }
            }
            .commit{
                width: 100%;
                text-align: center;
            }
        }


    }
</style>