settle_down_wx/pages/subPackages/chosseHouse/chosseHouse.vue

<template>
  <div class="chosseHouse">
    <div class="chosseHouse">
      <div class="form">
        <van-row>
          <van-col :span="4">
            <div class="label">园区</div>
          </van-col>
          <van-col :span="20">
            <uni-data-checkbox
              v-model="form.groupIds"
              mode="tag"
              :localdata="yuanqu_loacldata"
              selectedTextColor="#1D18BC"
              selectedColor="rgba(29,24,188,0.05);"
              @change="getSelectedYuanqu"
            >
            </uni-data-checkbox>
          </van-col>
        </van-row>
        <van-row v-if="form.groupIds != null">
          <van-col class="labelcolmt26" :span="4">
            <div class="label">楼盘</div>
          </van-col>
          <van-col class="labelcolmt26" :span="20">
            <uni-data-checkbox
              v-model="form.loupan_value"
              mode="tag"
              :localdata="loupan_loacldata"
              selectedTextColor="#1D18BC"
              selectedColor="rgba(29,24,188,0.05);"
              @change="getSelectedLoupan"
            >
            </uni-data-checkbox>
          </van-col>
        </van-row>
        <van-row>
          <van-col class="labelcolmt26" :span="4">
            <div class="label">状态</div>
          </van-col>
          <van-col class="labelcolmt26 status" :span="20">
            <uni-data-checkbox
              v-model="form.statusArray"
              :localdata="statusList"
              :multiple="true"
              selectedTextColor="#1D18BC"
              selectedColor="rgba(29,24,188,0.05);"
              @change="getSelectedStatus"
            >
            </uni-data-checkbox>
          </van-col>
        </van-row>
        <van-row>
          <van-col class="labelcolmt26" :span="4">
            <div class="label">朝向</div>
          </van-col>
          <van-col class="labelcolmt26 status" :span="20">
            <uni-data-checkbox
              v-model="form.chaoxiangArray"
              :localdata="fangxiangList"
              :multiple="true"
              selectedTextColor="#1D18BC"
              selectedColor="rgba(29,24,188,0.05);"
              @change="getChaoxiang"
            >
            </uni-data-checkbox>
          </van-col>
        </van-row>
        <van-row>
          <van-col class="labelcolmt26" :span="6">
            <div class="label">载体性质</div>
          </van-col>
          <van-col class="labelcolmt26" :span="18">
            <uni-data-checkbox
              v-model="form.zaitiTypeArray"
              mode="tag"
              :localdata="xinzhiList"
              selectedTextColor="#1D18BC"
              selectedColor="rgba(29,24,188,0.05);"
              @change="getSelectedXingZhi"
            >
            </uni-data-checkbox>
          </van-col>
        </van-row>
        <van-row>
          <van-col class="labelcolmt26" :span="5">
            <div class="label">指导价</div>
          </van-col>
          <van-col class="labelcolmt26" :span="9">
            <input
              v-model="form.guidePrice1"
              type="number"
              placeholder="最低价"
            />
          </van-col>
          <van-col :span="1">
            <div class="width100 txt_center" style="margin-top: 30rpx">-</div>
          </van-col>
          <van-col class="labelcolmt26" :span="9">
            <input
              v-model="form.guidePrice2"
              type="number"
              placeholder="最高价"
            />
          </van-col>
        </van-row>
        <van-row>
          <van-col class="labelcolmt26" :span="5">
            <div class="label">面积</div>
          </van-col>
          <van-col class="labelcolmt26" :span="9">
            <input
              v-model="form.roomSize1"
              type="number"
              placeholder="最小面积"
            />
          </van-col>
          <van-col :span="1">
            <div class="width100 txt_center" style="margin-top: 30rpx">-</div>
          </van-col>
          <van-col class="labelcolmt26" :span="9">
            <input
              v-model="form.roomSize2"
              type="number"
              placeholder="最大面积"
            />
          </van-col>
        </van-row>
        <van-row>
          <van-col class="labelcolmt26" :span="6">
            <van-button color="#F1F2F9" custom-class="reset_btn" @click="reast"
              >重置</van-button
            >
          </van-col>
          <van-col class="labelcolmt26" :span="18">
            <van-button
              color="#2527AA"
              custom-class="search_btn"
              @click="search"
            >
              <van-icon name="search" />
              搜索
            </van-button>
          </van-col>
        </van-row>
      </div>
      <div class="list" style="padding-bottom: 200rpx">
        <div v-if="vamTabStatus">
          <van-tabs
            id="tabs"
            @change="getSelectedLoudong"
            @before-change="onBeforeChange"
            line-width="80rpx"
            title-active-color="#1D18BC"
          >
            <van-tab
              v-for="(item, index) in loudongList"
              :title="item.ldmc"
              :name="item.id"
              :key="index"
            >
            </van-tab>
          </van-tabs>
        </div>
        <div class="total" v-if="roomList.length != 0">
          共
          <span style="color: #1d18bc">{{ form.total }}</span>
          间
        </div>
        <van-checkbox-group :value="result" @change="onChange">
          <div
            class="list-row"
            v-if="roomList.length != 0"
            v-for="item in roomList"
            :key="item.id"
          >
            <div class="cell_0">
              <van-checkbox :name="item.id"> </van-checkbox>
            </div>
            <div class="cell_1">
              <div class="width100 height44rpx mb8rpx">
                <div class="first_title">
                  {{
                    item.yuanquName +
                    item.quyuName +
                    item.loudongName +
                    item.roomNo
                  }}
                </div>
              </div>
              <div class="width100 height40rpx mb8rpx">
                <div class="second_title">
                  用途：{{
                    getDicType("roomUse", item.roomUse) == undefined
                      ? "未知"
                      : getDicType("roomUse", item.roomUse)
                  }}
                </div>
                <div class="second_title_1 width50 chaochuyincang">
                  装修情况：{{
                    !item.decorationSituation
                      ? "未知"
                      : item.decorationSituation
                  }}
                </div>
              </div>
              <div class="width100 height36rpx mb14rpx">
                <div class="third_title" v-if="item.roomSize">
                  面积(㎡)：{{ item.roomSize }}平米
                </div>
                <div class="third_title" v-if="!item.roomSize">
                  面积(㎡)：未知
                </div>
                <div class="third_title_1">
                  朝向：{{ item.roomDirection ? item.roomDirection : "未知" }}
                </div>
              </div>
              <div class="width100 height50rpx mb14rpx">
                <div
                  class="roomstatus"
                  v-if="getDicType('zaiti', item.zaitiType)"
                >
                  {{ getDicType("zaiti", item.zaitiType) }}
                </div>
                <div class="roomstatus" v-if="item.currentState == 1">空置</div>
                <div class="roomstatus" v-if="item.currentState == 2">锁定</div>
                <div class="roomstatus" v-if="item.currentState == 3">预约</div>
                <div class="roomstatus" v-if="item.currentState == 4">临期</div>
                <div class="roomstatus" v-if="item.currentState == 5">已租</div>
                <div class="roomstatus" v-if="item.currentState == 6">到期</div>
              </div>
              <div class="width100 height36rpx">
                <div class="float_left chuzu_label">
                  出租指导价（元/㎡/月）：
                </div>
                <span class="float_left chuzu_vlaue">
                  <span class="float_left chuzu_vlaue">
                    {{ !item.guidePrice ? "未知" : item.guidePrice }}
                  </span>
                </span>
              </div>
            </div>
            <div class="cell_2" @click="jumpPage(item.id)">
              <img src="../../../static/mine/youjiantou.png" alt="" />
            </div>
          </div>
          <div class="list-row" v-if="roomList.length == 0">
            <van-empty
              class="disblock marginauto"
              style="background: white"
              description="暂无数据"
            />
          </div>
        </van-checkbox-group>
      </div>
    </div>
    <view class="‘btn-view‘">
      <button class="btn" @click="takeParamsGoBack()">添加</button>
    </view>
  </div>
</template>

<script>
import vanTab from "../../../wxcomponents/weapp/dist/tab/index";
import vanTabs from "../../../wxcomponents/weapp/dist/tabs/index";
import vanEmpty from "../../../wxcomponents/weapp/dist/empty/index";
import {
  findYuanQuList,
  findLongPanList,
  findLouDongList,
  findRoomByCondition,
  getByCodes,
} from "@/js_sdk/http.js";

const form = {
  isFromApp: 1,
  status: [],
  chaoxiang: [],
  statusArray: [],
  chaoxiangArray: [],
  zaitiTypeArray: [],
  roomSize1: "",
  roomSize2: "",
  guidePrice1: "",
  guidePrice2: "",
  loupan_value: null,
  groupIds: null,
  pageNum: 1,
  pageSize: 10,
  total: 0,
  mnpBuildingIds: "",
  currentState: "",
};

export default {
  components: {
    vanTab,
    vanTabs,
    vanEmpty,
  },
  name: "chosseHouser.vue",
  data() {
    return {
      result: [],
      copy_result: [],
      dic_key: ["PROPERTY_NATURE", "HOUSE_USAGE"],
      dic_SelectList: {},
      loudongList: [],
      activezhaoshang: "0",
      form: {
        ...form,
      },
      active: 0,
      formData: {},
      value: 0,
      vamTabStatus: false,
      yuanqu_loacldata: [],
      loupan_loacldata: [],
      range: [
        {
          value: 0,
          text: "科教产业园",
        },
        {
          value: 1,
          text: "安居",
        },
        {
          value: 2,
          text: "胡埭",
        },
      ],
      loupanList: [
        {
          value: 0,
          text: "一期",
        },
        {
          value: 1,
          text: "二期",
        },
        {
          value: 2,
          text: "三期",
        },
        {
          value: 3,
          text: "四期",
        },
        {
          value: 4,
          text: "五期",
        },
        {
          value: 5,
          text: "六期",
        },
        {
          value: 6,
          text: "七期",
        },
        {
          value: 7,
          text: "八期",
        },
        {
          value: 8,
          text: "九期",
        },
      ],
      statusList: [
        {
          value: 1,
          text: "空置",
        },

        {
          value: 3,
          text: "预约",
        },
        {
          value: 4,
          text: "临期",
        },

        {
          value: 6,
          text: "到期",
        },
      ],
      roomList: [],
      fangxiangList: [
        {
          value: 0,
          text: "东",
        },
        {
          value: 1,
          text: "南",
        },
        {
          value: 2,
          text: "西",
        },
        {
          value: 3,
          text: "北",
        },
      ],
      xinzhiList: [
        {
          value: 1,
          text: "自有物业",
        },
        {
          value: 2,
          text: "社会物业",
        },
      ],
    };
  },

  mounted() {
    this.findYuanQuList();
    this.getByCodes();
  },

  methods: {
    async searchMore() {
      let data = await findRoomByCondition(this.form);
      this.roomList.push(...data.rows);
      this.form.total = data.total;
    },
    onReachBottom() {
      this.form.pageNum += 1;
      this.searchMore();
      console.log("滑动到距离底部100px的时候触发,可以放 。。业务逻辑");
    }, //下拉执行的时候触发 （下拉刷新）
    reast() {
      this.roomList = [];
      this.form = { ...form };
      this.findYuanQuList();
      this.getByCodes();
    },
    async search() {
      if (!this.form.groupIds && !this.form.loupan_value) {
        return this.$showToast("请选择园区和楼盘后重试");
      }
      if (!this.form.groupIds) {
        return this.$showToast("请选择园区后重试");
      }
      if (!this.form.loupan_value) {
        return this.$showToast("请选择楼盘后重试");
      }
      this.form.pageNum = 1;
      this.form.pageSize = 10;
      this.form.total = 0;
      let data = await findRoomByCondition(this.form);
      this.roomList = data.rows;
      this.form.total = data.total;
    },
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dic_key));
      this.dic_SelectList = this.$common.handleDicList(data);
    },
    onBeforeChange() {
      this.copy_result = [...this.result];
    },
    getSelectedLoudong(event) {
      let that = this;
      let result = [...that.result];
      that.result = [];
      that.roomList = [];
      this.form.mnpBuildingIds =
        event.detail.title == "全部" ? "" : event.detail.name;
      // this.form

      findRoomByCondition(that.form).then((res) => {
        res.rows.forEach((element) => {
          that.roomList.push(element);
        });
        that.form.total = res.total;

        // setTimeout(() => {
        that.result = result;
        // }, 200);
      });
    },
    async getSelectedYuanqu() {
      let data = await findLongPanList(this.form.groupIds);
      this.roomList = [];

      this.loudongList = [];
      if (data.length > 0) {
        this.loupan_loacldata = data.map((e) => {
          return {
            value: e.id,
            text: e.name,
          };
        });
      } else {
        this.loupan_loacldata = [{ value: null, text: "暂无" }];
      }
      console.log(this.loupan_loacldata);
    },
    async getSelectedLoupan() {
      try {
        let data = await findLouDongList(this.form.loupan_value);
        this.vamTabStatus = false;
        console.log(data);
        if (data.length == 0) {
          this.loudongList = [];
          this.roomList = [];
          this.tabsStatus = !this.tabsStatus;
          return;
        } else {
          console.log("我tm有数据的", data);
          this.loudongList = [...data];
          this.form.mnpBuildingIds = data[0].id;
          this.roomList = [];
        }

        let row = await findRoomByCondition(this.form);
        console.log("我是row", row);
        this.roomList = row.rows;
        this.form.total = row.total;
        this.vamTabStatus = true;
        console.log(row);
      } catch (e) {
        console.log("e这天真热", e);
      }
    },
    findYuanQuList() {
      findYuanQuList().then((data) => {
        let yuanqu_list = [...data];
        let yuanqu_loacldata = yuanqu_list.map((e) => {
          return {
            value: e.id,
            text: e.groupName,
          };
        });
        this.yuanqu_loacldata = yuanqu_loacldata;
      });

      // console.log(yuanqu_loacldata)
    },
    jumpPage(id) {
      uni.navigateTo({
        url: "/pages/subPackages/housedetails/housedetails?id=" + id,
      });
    },
    getDicType(type, value) {
      if (!value) return;
      if (type == "zaiti") {
        let PROPERTY_NATURE = this.dic_SelectList.PROPERTY_NATURE;
        let index = PROPERTY_NATURE.findIndex((e) => e.value == value);
        return PROPERTY_NATURE[index].label;
      }
      if (type == "roomUse") {
        let HOUSE_USAGE = this.dic_SelectList.HOUSE_USAGE;
        let index = HOUSE_USAGE.findIndex((e) => e.value == value);
        return HOUSE_USAGE[index].label;
      }
    },
    onLoadMore() {},
    onLoad: function (option) {
      //option为object类型，会序列化上个页面传递的参数
      this.type = option.type; //打印出上个页面传递的参数。
    },
    getChaoxiang() {
      this.form.roomDirection = this.form.chaoxiangArray.join(",");
    },
    getSelectedStatus(e) {
      this.form.currentState = this.form.statusArray.join(",");
    },
    getSelectedXingZhi() {
      this.form.zaitiType = this.form.zaitiTypeArray.join(",");
    },
    takeParamsGoBack() {
      let params = {
        type: this.type,
        result: this.result,
      };
      uni.$emit("getuser", params);
      uni.navigateBack();
    },

    change(e) {},

    getStatus() {},
    onChange(event) {
      this.result = event.detail;
    },
  },
  onPullDownRefresh: function () {
    // 加载数据
  },
  onReachBottom() {}, //下拉执行的时候触发 （下拉刷新）
};
</script>

<style lang="scss">
.chaochuyincang {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/deep/.van-cell {
  padding: 0 0 0 28rpx !important;
}
.inputClass {
  padding: 0 0 0 28rpx !important;
}
.chosseHouse {
  .search_btn {
    margin-left: 18rpx;
    width: calc(100% - 18rpx);
    height: 60rpx;
  }
  .reset_btn {
    color: #2628a9 !important;
    width: 100%;
    height: 60rpx;
  }
  .btn-view {
    width: 100%;
    height: 100rpx;
    padding: 20rpx 10%;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
  }
  .btn {
    width: 80%;
    height: 90rpx;
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    background: #1d18bc;
    line-height: 90rpx;
    color: white;
  }
  .float_left {
    float: left;
  }
  .chuzu_label {
    width: 312rpx;
    height: 36rpx;
    font-size: 26rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 36rpx;
  }
  .chuzu_vlaue {
    width: 86rpx;
    font-size: 32rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #ec7359;
    line-height: 38rpx;
  }
  .mb14rpx {
    margin-bottom: 14rpx;
  }
  .height34rpx {
    height: 34rpx;
  }
  .height50rpx {
    height: 50rpx;
  }
  .roomstatus {
    height: 50rpx;
    line-height: 50rpx;
    font-size: 24rpx;
    padding: 0rpx 16rpx;
    float: left;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #1d18bc;
    border: 2rpx solid #1d18bc;
    margin-left: 16rpx;
  }
  .roomstatus:first-child {
    margin-left: 0 !important;
  }
  .height50px {
    height: 50rpx;
  }
  .mb8rpx {
    margin-bottom: 8rpx;
  }
  .width100 {
    width: 100%;
  }
  .height36rpx {
    height: 36rpx;
  }
  .height40rpx {
    height: 40rpx;
  }
  .height66rpx {
    height: 66rpx;
  }
  .height44rpx {
    height: 44rpx;
  }

  .total {
    padding: 8rpx 32rpx 8rpx 0;
    text-align: right;
    background: #ffffff;
  }

  .roomstatus {
    height: 50rpx;
    line-height: 50rpx;
    font-size: 24rpx;
    padding: 0rpx 16rpx;
    float: left;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #1d18bc;
    border: 2rpx solid #1d18bc;
    margin-left: 16rpx;
  }
  .roomstatus:first-child {
    margin-left: 0 !important;
  }
  .list-row {
    width: calc(100% - 64rpx);
    padding: 16rpx 32rpx 18rpx 32rpx;
    background: #ffffff;
    margin-bottom: 16rpx;
    display: flex;
    //height: 278rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
  }
  .second_title {
    float: left;
    width: 40%;
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #777777;
  }
  .second_title_1 {
    float: left;
    width: 60%;
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #777777;
  }
  .cell_0 {
    float: left;
    width: 10%;
  }
  .cell_1 {
    float: left;
    width: 80%;
  }
  .cell_2 {
    float: left;
    width: 10%;
    img {
      height: 60rpx;
      width: 60rpx;
      float: right;
      margin: 96rpx 0rpx 94rpx 0;
    }
  }
  .list {
    width: calc(100% - 64rpx);

    margin: 32rpx;
  }

  .form {
    width: calc(100% - 128rpx);
    margin: 32rpx;
    background: #ffffff;
    padding: 32rpx;

    .label {
      height: 53rpx;
      line-height: 53rpx;
    }
  }

  .checklist-box {
    margin-right: 16rpx !important;
  }

  .labelcolmt26 {
    input {
      font-size: 24rpx;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      border: 2rpx solid #cccccc;
      text-align: center;
    }
    .van-col {
      margin-top: 26rpx !important;
    }

    label {
      color: #333333;
      font-size: 30rpx;
      margin-top: 10rpx !important;
    }

    .uni-data-checklist {
      margin-top: -10rpx !important;
    }
  }

  .status {
    .uni-data-checklist {
      margin-top: 0rpx !important;
    }

    label {
      color: #333333;
      font-size: 30rpx;
      padding-right: 0rpx !important;
    }
  }
}
</style>