H5/pzhgt.git - Gitblit

<template>
  <div class="box-a">
    <v-header title="发布/编辑房源"></v-header>
    <div class="form-box">
      <el-form
        ref="form"
        label-width="120px"
      >
        <el-form-item
          required
          label="房屋标题"
        >
          <el-input v-model="os.title"></el-input>
        </el-form-item>
        <el-form-item
          required
          label="房源类型"
        >
          <el-select
            v-model="os.houseType"
            placeholder="请选择房源类型"
          >
            <el-option
              label="出租"
              :value="1"
            ></el-option>
            <el-option
              label="出售"
              :value="2"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="os.houseType==1"
          required
          label="租房类型"
        >
          <el-select
            v-model="os.rentType"
            placeholder="请选择租房类型"
          >
            <el-option
              label="整租"
              :value="1"
            ></el-option>
            <el-option
              label="合租"
              :value="2"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          required
          :label="+os.houseType===2?'房屋售价':'月租金 元/月'"
        >
          <el-input v-model="os.amount"></el-input>
        </el-form-item>
        <el-form-item
          required
          label="所在小区"
        >
          <el-select
            v-model="os.houseCommunityId"
            placeholder="请选择小区"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.areaName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          required
          label="房屋户型"
        >
          <el-input-number
            v-model="os.brn"
            :min="0"
            style="width: 60px"
            :controls="false"
            size="mini"
          ></el-input-number>
          室
          <el-input-number
            v-model="os.lrn"
            :min="0"
            style="width: 60px"
            :controls="false"
            size="mini"
          ></el-input-number>
          厅
          <el-input-number
            v-model="os.wcn"
            :min="0"
            style="width: 60px"
            :controls="false"
            size="mini"
          ></el-input-number>
          卫
        </el-form-item>
        <el-form-item
          required
          label="房屋面积 ㎡"
        >
          <el-input v-model="os.area"></el-input>
        </el-form-item>
        <el-form-item
          required
          label="房屋朝向"
        >
          <el-select
            v-model="os.orient"
            placeholder="请选择房屋朝向"
          >
            <el-option
              v-for="item in orient"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在楼层">
          第
          <el-input-number
            :min="0"
            style="width: 60px"
            :controls="false"
            size="mini"
            v-model="os.floor"
          ></el-input-number>
          层，共
          <el-input-number
            :min="0"
            style="width: 60px"
            :controls="false"
            size="mini"
            v-model="os.totalFloor"
          ></el-input-number>
          层
        </el-form-item>
        <el-form-item label="房屋装修情况">
          <el-input v-model="os.decoration"></el-input>
        </el-form-item>
        <el-form-item label="房屋介绍">
          <el-input
            type="textarea"
            v-model="os.introduction"
          ></el-input>
        </el-form-item>
        <el-form-item
          required
          label="联系方式"
        >
          <el-input v-model="os.mobile"></el-input>
        </el-form-item>
        <el-form-item
          required
          label="房屋照片 最多9张"
        >
          <div class="upImage">
            <div
              class="sec"
            >
              <div v-for="(url,index) in os.mediaPaths" :key="index" class="image-box">
                <img @click="clear(index)" class="clear" src="/static/image/clear.png" alt="">
                <img :src="url" alt="">
              </div>
              <div
                style="margin: 5px"
                class="avatar"
                v-if="true"
              >
                <vUpload
                  :showImg="true"
                  :boxWidth="800"
                  :boxHeight="400"
                  :width="200"
                  :height="200"
                  @path="onUpload1($event)"
                ></vUpload>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          required
          label="上下架"
        >
          <el-radio-group v-model="os.status">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="3">下架</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-button
        size="medium"
        @click="check"
        type="primary"
      >确认</el-button>
      <el-button
        @click="back"
        size="medium"
      >取消</el-button>
    </div>
  </div>
</template>
<script>
import vUpload from "com/upload/upload1";
 
export default {
  props: [],
  components: { vUpload },
  data() {
    return {
      os: {
        title: "",
        houseType: "",
        rentType: "",
        amount: "",
        houseCommunityId: "",
        brn: "1",
        lrn: "1",
        wcn: "1",
        area: "",
        orient: "",
        decoration: "",
        introduction: "",
        floor: "",
        totalFloor: "",
        photoPah: "",
        status: "",
        mobile: "",
        mediaPaths: [],
      },
      options: [],
      orient: [
        {
          name: "无",
          value: 0,
        },
        {
          name: "东",
          value: 1,
        },
        {
          name: "南",
          value: 2,
        },
        {
          name: "西",
          value: 3,
        },
        {
          name: "北",
          value: 4,
        },
        {
          name: "东南",
          value: 5,
        },
        {
          name: "东北",
          value: 6,
        },
        {
          name: "西南",
          value: 7,
        },
        {
          name: "西北",
          value: 8,
        },
        {
          name: "南北",
          value: 9,
        },
        {
          name: "东西",
          value: 10,
        },
      ],
    };
  },
  created() {
    this.pagecommunity();
    if (this.$route.query.item) {
      // console.log(JSON.parse(this.$route.query.item))
      let item = JSON.parse(this.$route.query.item);
      item.mediaPaths = item.photoPah.split(",");
      console.log(item);
      this.os = item;
      // photoPah
    }
  },
  mounted() {},
  methods: {
    back() {
      this.$router.back();
    },
    sub() {
      this.os.photoPah = this.os.mediaPaths.join();
      this.$api.post("house", this.os, (e) => {
        this.back();
      });
    },
    edit() {
      //编辑修改
      this.os.photoPah = this.os.mediaPaths.join();
      this.$api.put("house", this.os, (e) => {
        this.back();
      });
    },
    onUpload1(e) {
      console.log(e);
      this.os.mediaPaths.push(e)
      // this.$set(this.os.mediaPaths, index, e);
      // this.imgList[index] = e
    },
    check() {
      if (this.os.title === "") {
        return demo.toast("请输入房屋标题");
      }
      if (this.os.houseType === "") {
        return demo.toast("请选择房源类型");
      }
      if (this.os.rentType === "" && this.os.houseType === 1) {
        return demo.toast("请选择租房类型");
      }
      if (this.os.amount === "") {
        return demo.toast("请输入价格");
      }
      if (this.os.houseCommunityId === "") {
        return demo.toast("请选择所在小区");
      }
      if (this.os.brn === "" || this.os.lrn === "" || this.os.wcn === "") {
        return demo.toast("请输入房屋户型");
      }
      if (this.os.area === "") {
        return demo.toast("请输入房屋面积");
      }
      let reg = /^[1-9]\d*$/
      if(!reg.test(this.os.area)) {
         return demo.toast("房屋面积只能输入大于0的整数");
      }
      if (this.os.orient === "") {
        return demo.toast("请选择房屋朝向");
      }
      if (this.os.mobile === "") {
        return demo.toast("请输入联系方式");
      }
      if (this.os.mediaPaths.length === 0) {
        return demo.toast("请上传房屋照片");
      }
      if (this.os.status === "") {
        return demo.toast("请选择上下架");
      }
      if (this.os.id) {
        //编辑
        this.edit();
      } else {
        // 修改
        this.sub();
      }
    },
    clear(index){
      this.os.mediaPaths.splice(index,1)
    },
    pagecommunity() {
      //社区下拉列表  ************待修改 communitymanager/pagearea  pagecommunity
      this.$api.post("communitymanager/pagearea ", {}, (e) => {
        this.options = e.records;
        // console.log(e)
      });
    },
  },
  watch: {
    "os.amount"(n) {
      if (n > 99999) {
        this.os.amount = 99999;
      }
    },
  },
  computed: {},
};
</script>
<style scoped >
.box-a {
  overflow: scroll;
}
 
.form-box {
  max-width: 500px;
}
 
.upImage {
  /*width: 100%;*/
  display: flex;
  box-sizing: border-box;
  flex-wrap: wrap;
}
 
.sec {
  margin: 10px;
}
  .image-box{
    width:104px;
    height: 104px;
    margin: 5px;
    position: relative;
  }
  .image-box>img{
    width: 100%;
    height: 100%;
  }
  .clear{
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    width: 28px!important;
    height: 28px!important;
  }
</style>