|
@@ -0,0 +1,187 @@
|
|
|
+<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>
|