Project-Annex/operationSupport/src/views/businessManagement/InvestmentResources/stepPage/programme.vue

<template>
    <el-form ref="form" :model="formData" :rules="formRules" label-width="90px">
        <div class="formContent-item_title">物业信息</div>
        <el-col :span="12"><el-form-item label="房屋地址："> xxxx </el-form-item></el-col>
        <el-col :span="12"><el-form-item label="房屋编号："> xxxx </el-form-item></el-col>
        <el-col :span="12"><el-form-item label="房屋类型："> xxxx </el-form-item></el-col>
        <el-col :span="12"><el-form-item label="租售类型："> xxxx </el-form-item></el-col>
        <el-col :span="12"><el-form-item label="租售状态："> xxxx </el-form-item></el-col>
        <el-col :span="12"><el-form-item label="建筑面积："> xxxx </el-form-item></el-col>
        <div class="formContent-item_title">招商信息</div>
        <el-form-item label="招商标题" prop="title">
            <el-input v-model="formData.title" placeholder="请输入招商标题"></el-input>
        </el-form-item>
        <el-form-item label="月租金额" prop="monthlyRent">
            <el-input v-model="formData.monthlyRent" placeholder="请输入月租金额"></el-input>
        </el-form-item>
        <el-form-item label="出售金额" prop="sell">
            <el-input v-model="formData.sell" placeholder="请输入出售金额"></el-input>
        </el-form-item>
        <el-form-item label="房屋图片" prop="pictureUrl">
            <div class="clickUpload">
                <div class="clickUpText" v-for="item in fileType" :key="item">
                    <video v-if="typeVideo(item)" :src="item"></video>
                    <img v-else class="dataImg" :src="item" />
                </div>
                <div class="clickUpText">
                    <div class="addImg" @click="clickFile('uploadImg')"><i class="el-icon-plus ashText"></i></div>
                </div>
                <el-upload
                    style="display: none"
                    :headers="token"
                    ref="uploadImg"
                    limit="3"
                    action="/sc-community/upload/uploadFile"
                    :on-success="uploadsuccess"
                    :before-upload="beforeAvatarUpload"
                    :auto-upload="true"
                    name="file"
                >
                </el-upload>
            </div>
        </el-form-item>
        <el-form-item label="房屋视频" prop="videoUrl">
            <div class="clickUpload">
                <div class="clickUpText" v-for="item in fileType" :key="item">
                    <video v-if="typeVideo(item)" :src="item"></video>
                    <img v-else class="dataImg" :src="item" />
                </div>
                <div class="clickUpText">
                    <div class="addImg" @click="clickFile('uploadVideo')"><i class="el-icon-plus ashText"></i></div>
                </div>
                <el-upload
                    style="display: none"
                    :headers="token"
                    ref="uploadVideo"
                    limit="3"
                    action="/sc-community/upload/uploadFile"
                    :on-success="uploadsuccess"
                    :before-upload="beforeAvatarUpload"
                    :auto-upload="true"
                    name="file"
                >
                </el-upload>
            </div>
        </el-form-item>
        <el-form-item label="招商描述" prop="userId">
            <tinymce v-model="formData.description" ref="endit" :height="150" />
        </el-form-item>
    </el-form>
</template>
<script >
// Tinymce 富文本编辑器
import Tinymce from '@/components/Tinymce';
export default {
    components: { Tinymce },
    props: ['params'],
    data() {
        return {
            formData: {
                houseId: '',
                description: '',
                monthlyRent: '',
                pictureUrl: '',
                videoUrl: '',
                sell: '',
                title: ''
            },
            findUser: [],
            formRules: {
                monthlyRent: [this.$valid.inputRequired('月租金额')],
                sell: [this.$valid.inputRequired('出售金额')],
                title: [this.$valid.inputRequired('招商标题')]
                // monthlyRent: [this.$valid.inputRequired('月租金额')],
                // monthlyRent: [this.$valid.inputRequired('月租金额')],
            }
        };
    },
    methods: {
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    var loading = this.$loading();
                    this.$http
                        .post('/sc-community/merchants/edit', this.formData)
                        .then(({ status, msg }) => {
                            if (status == 0) {
                                this.$message.success(msg);
                                this.params.callback();
                                this.$emit('close');
                            } else {
                                this.$message.error(msg);
                            }
                            loading.close();
                        })
                        .catch(() => {
                            loading.close();
                        });
                }
            });
        },
        uploadsuccess(response, file, fileList) {
            this.$refs.uploadBox.clearFiles();
            if (0 === response.status) {
                this.fileType.push(response.data);
            }
        },
        beforeAvatarUpload(file) {
            // const isVIDEO = file.type === 'video/mp4';
            // if (!isVIDEO) {
            //     this.$message.error('上传mp4视频!');
            // }
            // return isVIDEO;
        },
        typeVideo(str) {
            let type = str.slice(str.lastIndexOf('.') + 1, str.length);
            let videoType = ['mp4'];
            return videoType.includes(type);
        },
        clickFile(name) {
            // this.$refs['uploaduserlogo'].$refs['upload-inner'].handleClick();
            this.$refs[name].$children[0].$refs.input.click();
        }
    },
    created() {
        // this.params.house.map((item) => {
        //     this.formData.houseIds.push(item.houseId);
        // });
    }
};
</script>
<style lang="scss" scoped>
.formContent-item_title {
    clear: both;
}

.clickUpload {
    display: flex;
    .clickUpText {
        height: 76px;
        width: 76px;
        border: 1px solid #e0e1e3;
        box-sizing: border-box;
        background: white;
        border-radius: 5px;
        margin-right: 5px;
        z-index: 1;
        img.dataImg {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 5px;
        }
        .addImg {
            line-height: 76px;
            text-align: center;
            cursor: pointer;
            & > i {
                font-size: 30px;
            }
        }
        video {
            width: 100%;
            height: 100%;
        }
    }
}
</style>