AyaoJies-boot/AyaoJies-app/house-master/house-life/components/zy/addSubHouse.vue

<template>
  <view>
    <scroll-view class="scroll-wrapper" scroll-y="true">
      <view>
        <view class="wrap">
          <u-form ref="uForm">
            <u-form-item :label-position="labelPosition" label="出租房间" label-width="150" required>
              <u-input v-model="roomLabelVo" :border="border" :select-open="selectShow" placeholder="请选择出租房间"
                       type="select" @click="selectShow = true"></u-input>
            </u-form-item>

            <u-form-item :label-position="labelPosition" label="房间号" label-width="150" required>
              <u-input v-model="model.roomCode" :border="border" placeholder="如 A01..." type="text"></u-input>
            </u-form-item>
            <u-form-item :label-position="labelPosition" label="房屋面积" label-width="150" required>
              <u-input v-model="model.roomArea" :border="border" placeholder="请输入房屋面积" type="number"></u-input>
            </u-form-item>
            <u-form-item :label-position="labelPosition" label="朝向" label-width="150">
              <u-input v-model="directionVo" :border="border" :select-open="directionShow" placeholder="请选择朝向"
                       type="select" @click="directionShow = true"></u-input>
            </u-form-item>
            </u-form-item>
            <u-form-item :label-position="labelPosition" label="租金" label-width="150" required>
              <u-input v-model="model.price" :border="border" placeholder="请输入租金" type="number"></u-input>
            </u-form-item>
            <u-form-item :label-position="labelPosition" label="起租日期" label-width="150">
              <view class="dateBtn" @click="dateClick">
                {{ dateLabel }}
                <u-icon name="arrow-right"></u-icon>
              </view>
            </u-form-item>
            <view class="custom-gap"></view>
            <u-form-item :label-position="labelPosition" label="房源图片" label-width="150" required>
              <u-upload
                  ref="uUpload" :action="action" :auto-upload="true" :custom-btn="true" :max-size="10 * 1024 * 1024"
                  :size-type="siteType" height="160" max-count="9" width="160">
                <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
                  <u-icon :color="$u.color['lightColor']" name="plus" size="60"></u-icon>
                </view>
              </u-upload>
            </u-form-item>
            <u-form-item :label-position="labelPosition" label="房源描述" label-width="150">
              <u-input v-model="model.introduce" :border="border" placeholder="请填写房屋描述" type="textarea"/>
            </u-form-item>
            <u-form-item :label-position="labelPosition" label="房源亮点" label-width="150" required>
              <u-checkbox-group :width="radioCheckWidth" :wrap="radioCheckWrap" @change="checkboxGroupChange">
                <u-checkbox v-for="(item, index) in checkboxList" :key="index" v-model="item.checked" :name="item.name">
                  {{ item.name }}
                </u-checkbox>
              </u-checkbox-group>
            </u-form-item>
          </u-form>
        </view>
      </view>
    </scroll-view>
    <u-select v-model="selectShow" :list="selectList" mode="single-column" @confirm="selectConfirm"></u-select>
    <u-select v-model="directionShow" :list="directionList" mode="single-column" @confirm="directionConfirm"></u-select>
    <u-action-sheet v-model="actionSheetShow" :list="actionSheetList" @click="actionSheetCallback"></u-action-sheet>
    <u-calendar v-model="show" :mode="mode" max-date="2100-01-01" @change="changeDate"></u-calendar>
    <view class="bottom-btn">
      <u-button type="primary" @click="submit">提交</u-button>
    </view>
  </view>
</template>

<script>
import config from "@/common/config.js" // 全局配置文件
export default {
  props: {
    model: Object
  },
  data() {
    return {
      roomLabelVo: '',
      directionVo: '',
      show: false,
      mode: 'date',
      selectList: [
        {
          value: '1',
          label: '主卧'
        },
        {
          value: '2',
          label: '次卧'
        }
      ],
      directionList: [
        {
          value: '东',
          label: '东'
        },
        {
          value: '南',
          label: '南'
        },
        {
          value: '西',
          label: '西'
        },
        {
          value: '北',
          label: '北'
        },
      ],
      border: false,
      check: false,
      checkboxList: [
        {
          name: '看房方便',
          checked: false,
          disabled: false
        },
        {
          name: '独卫',
          checked: false,
          disabled: false
        },
        {
          name: '独立阳台',
          checked: false,
          disabled: false
        },
        {
          name: '智能锁',
          checked: false,
          disabled: false
        },
        {
          name: '可短租',
          checked: false,
          disabled: false
        },
        {
          name: '首次出租',
          checked: false,
          disabled: false
        },
        {
          name: '免物业费',
          checked: false,
          disabled: false
        },
        {
          name: '民用水电',
          checked: false,
          disabled: false
        }
      ],
      actionSheetList: [
        {
          text: '电梯房'
        },
        {
          text: '楼梯房'
        }
      ],
      selectShow: false,
      directionShow: false,
      radioCheckWidth: 'auto',
      radioCheckWrap: false,
      labelPosition: 'left',
      errorType: ['toast'],
      actionSheetShow: false,
      dateLabel: '随时入住',
      // 图片服务器地址
      action: config.staticUrl + '/common/upload',
      siteType: ['compressed'],
    };
  },
  watch: {
    model: {
      handler(newName, oldName) {
        this.roomLabelVo = newName.roomLabel
        // 回显房源亮点
        if (this.model.featureList) {
          this.checkboxList.forEach(item => {
            this.model.featureList.forEach(feature => {
              if (feature.feature == item.name) {
                item.checked = true
              }
            })
          })
          this.directionVo = newName.direction
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    submit() {
      if (this.$u.test.isEmpty(this.model.roomType)) {
        return this.$mytip.toast('请选择租房间')
      }
      if (this.$u.test.isEmpty(this.model.roomCode)) {
        return this.$mytip.toast('请输入房间号')
      }
      if (this.$u.test.isEmpty(this.model.roomArea)) {
        return this.$mytip.toast('请输入房屋面积')
      }
      // if(this.$u.test.isEmpty(this.model.direction)){
      // 	return this.$mytip.toast('请输入朝向')
      // }
      if (this.$u.test.isEmpty(this.model.price)) {
        return this.$mytip.toast('请输入租金')
      }
      let files = [];
      // 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
      files = this.$refs.uUpload.lists.filter(val => {
        return val.progress == 100;
      })
      if (this.$u.test.isEmpty(files)) {
        return this.$mytip.toast('请至少选择一张房源图片')
      }
      let imageList = files.map(val => {
        return {
          imageName: val.response.realName,
          imagePath: val.response.fileName,
          imgUrl: val.response.url,
          imageSize: val.file.size
        }
      })
      this.model.imageList = imageList
      if (this.$u.test.isEmpty(this.model.featureList)) {
        return this.$mytip.toast('请至少选择一个房源亮点')
      }
      let url = "api/houseApi/saveHouse";
      if (this.model.id) {
        url = "api/houseApi/updateHouse";
      }
      this.model.publishId = uni.getStorageSync('lifeData').vuex_user.user.userId;
      this.$u.post(url, this.model).then(data => {
        // uni.$emit('findIndexHouseList', {});
        // this.$u.route({
        // 	type: 'tab',url: '/pages/index/index'
        // })
        this.$u.route({
          url: 'pages/center/order',
        })
      });
    },
    // 选择类型回调
    selectConfirm(e) {
      this.model.roomLabel = ''
      this.model.roomType = ''
      e.map((val, index) => {
        this.model.roomLabel += val.label;
        this.model.roomType += val.value;
      })
      this.roomLabelVo = this.model.roomLabel
    },
    directionConfirm(e) {
      e.map((val, index) => {
        this.model.direction = val.label;
        this.directionVo = val.label;
      })
    },
    // 点击actionSheet回调
    actionSheetCallback(index) {
      uni.hideKeyboard();
      this.model.stepType = this.actionSheetList[index].text;
    },
    // checkbox选择发生变化
    checkboxGroupChange(e) {
      let featureList = e.map(val => {
        return {
          feature: val
        }
      })
      this.model.featureList = featureList
    },
    borderChange(index) {
      this.border = !index;
    },
    labelPositionChange(index) {
      this.labelPosition = index == 0 ? 'left' : 'top';
    },
    codeChange(text) {
      this.codeTips = text;
    },
    dateClick() {
      this.show = true
    },
    changeDate(e) {
      this.model.startDate = e.result
      this.dateLabel = e.result
    }
  }
};
</script>

<style>
page {
  background-color: #FFFFFF;
}
</style>
<style lang="scss" scoped>

.wrap {
  padding: 30 rpx;
}

.scroll-wrapper {
  position: absolute;
  left: 0 rpx;
  right: 0 rpx;
  top: 0 rpx;
  bottom: 120 rpx;
}

.bottom-btn {
  position: fixed;
  bottom: 8 rpx;
  width: 100%;
  padding: 30 rpx;
  border-top: 1 rpx solid #ccc;
  background-color: #FFFFFF;
}

.dateBtn {
  position: absolute;
  right: 0 rpx;
  top: 10 rpx;
  color: #606266;
}

.slot-btn {
  width: 160 rpx;
  height: 160 rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(244, 245, 246);
  border-radius: 10 rpx;
}

.slot-btn__hover {
  background-color: rgb(235, 236, 238);
}

.custom-gap {
  width: 1000 rpx;
  height: 10 rpx;
  margin: 0 -200rpx 0 -200rpx;
  background-color: rgb(235, 236, 238);
}
</style>