yixing_zc_wx/pages/subPackages/housedetails/housedetails.vue

<template>
  <div class="housedetails" style="padding-bottom: 500rpx">
    <div class="list-row">
      <div class="cell_1">
        <div class="width100 mb8rpx">
          <div class="first_title">
            {{
              form.groupName + form.floorDiscName + form.buildName + form.roomNo
            }}
          </div>
        </div>
        <div class="width100 mb8rpx chuzuborder">
          <div style="display: flex">
            <div class="float_left chuzu_label">出租指导价（元/㎡/月）：</div>
            <div class="float_left chuzu_vlaue">
              {{ form.guidePrice ? form.guidePrice : "未知" }}
            </div>
          </div>
          <div style="display: flex">
            <div class="float_left">承重：</div>
            <div class="float_left chuzu_vlaue">
              {{ form.bearing ? form.bearing : "未知" }}
            </div>
          </div>
          <div style="display: flex">
            <div class="float_left">层高：</div>
            <div
              class="float_left chuzu_vlaue"
              style="white-space: normal; width: auto"
            >
              {{ form.floorHeight ? form.floorHeight : "未知" }}
            </div>
          </div>
          <div style="display: flex">
            <div class="float_left">用电：</div>
            <div class="float_left chuzu_vlaue">
              {{ form.electricity ? form.electricity : "未知" }}
            </div>
          </div>
          <div style="display: flex; margin: 20rpx 0">
            <div class="roomstatus">
              {{
                form.propertyNature
                  ? getDicType("zaiti", form.propertyNature)
                  : "暂无"
              }}
            </div>
            <div class="roomstatus" v-if="form.currentState == '1'">空置</div>
            <div class="roomstatus" v-if="form.currentState == '2'">锁定</div>
            <div class="roomstatus" v-if="form.currentState == '3'">预约</div>
            <div class="roomstatus" v-if="form.currentState == '4'">临期</div>
            <div class="roomstatus" v-if="form.currentState == '5'">已租</div>
            <div class="roomstatus" v-if="form.currentState == '6'">到期</div>
          </div>
        </div>
        <div class="width100 pdt32 pdb32 chuzuborder">
          <van-row>
            <van-col :span="8">
              <div class="yongtu_first_title">
                {{
                  form.roomUse ? getDicType("roomUse", form.roomUse) : "暂无"
                }}
              </div>
              <div class="yongtu_second_title">用途</div>
            </van-col>

            <van-col :span="8">
              <div class="yongtu_first_title">
                {{ form.direction ? form.direction : "暂无" }}
              </div>
              <div class="yongtu_second_title">朝向</div>
            </van-col>
            <van-col :span="8">
              <div class="yongtu_first_title">
                {{ form.size ? form.size : "暂无" }}
              </div>
              <div class="yongtu_second_title">面积(m²)</div>
            </van-col>
          </van-row>
        </div>
        <!-- <div class="width100 pdt32 height50rpx pdb32 chuzuborder">

        </div> -->
        <div class="width100 pdt32 pdb32 chuzuborder">
          <van-row>
            <van-col :span="5">
              <div style="white-space: nowrap">装修情况</div>
            </van-col>
            <van-col :span="19">
              <span>
                {{
                  !form.decorationSituation ||
                  form.decorationSituation == "暂无"
                    ? "未知"
                    : dic_SelectList.DECORATION_SITUATION[
                        form.decorationSituation - 1
                      ].label
                }}
              </span>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>

    <div class="project-column pdt32 pdl32 pdr32">
      <div class="pdb16 chuzuborder">房型图</div>
    </div>
    <div class="housepicture">
      <img
        class="picList"
        v-if="planPictureList.length > 0"
        @click="previewImage(item.url)"
        v-for="(item, index) in planPictureList"
        :key="index"
        :src="item.url"
        alt=""
      />
      <div class="housepicture">
        <van-empty
          v-if="planPictureList.length == 0"
          style="width: 100%"
          image="error"
          description="暂无房型图"
        />
      </div>
    </div>

    <div class="project-column pdt32 pdl32 pdr32">
      <div class="pdb16 chuzuborder">室外环境</div>
    </div>
    <div class="housepicture">
      <img
        class="picList"
        v-if="environmentPictureList.length != 0"
        @click="previewImage1(item.url)"
        v-for="(item, index) in environmentPictureList"
        :key="index"
        :src="item.url"
        alt=""
      />
      <van-empty
        v-if="environmentPictureList.length == 0"
        style="width: 100%"
        image="error"
        description="暂无室外环境图"
      />
    </div>

    <div class="project-column pdt32 pdl32 pdr32">
      <div class="pdb16 chuzuborder">已锁定项目</div>
    </div>

    <div class="list-row" v-if="list.length == 0">
      <van-empty style="width: 100%" image="error" description="暂未锁定" />
    </div>
    <div v-if="list.length > 0" class="list-row" v-for="item in list">
      <div class="cell_1">
        <div class="width100 height44rpx mb8rpx">
          <div class="first_title float_left chaochuyincang">
            {{ item.projectName }}
          </div>
          <div class="width20 float_left">
            <div
              class="button_primary float_right"
              v-if="item.reservationStatus == 2"
            >
              锁定
            </div>
            <div
              class="button_primary float_right"
              v-if="item.reservationStatus == 7"
            >
              已解锁
            </div>
            <div
              class="button_primary float_right"
              v-if="item.reservationStatus == '3'"
            >
              预约
            </div>
            <div
              class="button_primary float_right"
              v-if="item.reservationStatus == '4'"
            >
              临期
            </div>
            <div
              class="button_primary float_right"
              v-if="item.reservationStatus == '5'"
            >
              已租
            </div>
            <div
              class="button_primary float_right"
              v-if="item.reservationStatus == '6'"
            >
              到期
            </div>
          </div>
        </div>

        <div class="width100 height44rpx mb8rpx">
          <div class="second_title width100">
            联系人：{{ item.projectManager }}
          </div>
        </div>
        <div class="width100 height44rpx mb8rpx">
          <div class="second_title width100">
            联系电话：{{ item.managerPhone }}
          </div>
        </div>
        <div class="width100 height44rpx mb8rpx">
          <div class="second_title width100">
            项目介绍：{{ item.projectInfo }}…
          </div>
        </div>
      </div>
    </div>
    <view class="btn-view">
      <div
        v-if="form.currentState == '1'"
        class="btn"
        @click="jumpCreatedProject()"
      >
        去预约
      </div>
      <button class="btn btn-disable" v-else @click="jumpCreatedProject()">
        去预约
      </button>
    </view>
  </div>
</template>

<script>
import { getByCodes, getRoomInfo, listByModel } from "@/js_sdk/http";
export default {
  components: {},
  data() {
    return {
      dic_key: ["PROPERTY_NATURE", "HOUSE_USAGE", "DECORATION_SITUATION"],
      dic_SelectList: {},
      search: {
        pageSize: 10,
        pageNum: 1,
      },
      form: {
        id: "",
      },
      roomId: "",
      list: [],
      info: [
        {
          colorClass: "uni-bg-red",
          url: "https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg",
          content: "内容 A",
        },
        {
          colorClass: "uni-bg-green",
          url: "https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg",
          content: "内容 B",
        },
        {
          colorClass: "uni-bg-blue",
          url: "https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg",
          content: "内容 C",
        },
      ],
      dotStyle: [
        {
          backgroundColor: "rgba(0, 0, 0, .3)",
          border: "1px rgba(0, 0, 0, .3) solid",
          color: "#fff",
          selectedBackgroundColor: "rgba(0, 0, 0, .9)",
          selectedBorder: "1px rgba(0, 0, 0, .9) solid",
        },
        {
          backgroundColor: "rgba(255, 90, 95,0.3)",
          border: "1px rgba(255, 90, 95,0.3) solid",
          color: "#fff",
          selectedBackgroundColor: "rgba(255, 90, 95,0.9)",
          selectedBorder: "1px rgba(255, 90, 95,0.9) solid",
        },
        {
          backgroundColor: "rgba(83, 200, 249,0.3)",
          border: "1px rgba(83, 200, 249,0.3) solid",
          color: "#fff",
          selectedBackgroundColor: "rgba(83, 200, 249,0.9)",
          selectedBorder: "1px rgba(83, 200, 249,0.9) solid",
        },
      ],
      modeIndex: -1,
      styleIndex: -1,
      current: 0,
      mode: "default",
      dotsStyles: {},
      planPictureList: [],
      environmentPictureList: [],
      swiperDotIndex: 0,
    };
  },
  onLoad(options) {
    this.getByCodes();
    this.form.id = options.id;
    getRoomInfo(options.id).then((e) => {
      this.form = e;
      this.roomId = e.id;
      this.form.currentState = options.currentState;
      console.log(e.planPicture);
      if (e.planPicture && e.planPicture.length != 0) {
        this.planPictureList = e.planPicture
          .split(",")
          .filter((e) => e.length > 0)
          .map((e) => {
            console.log(e.length);
            return {
              isShow: e.length == 0 ? false : true,
              url: this.$constant.BASE_URI + "/FileController/download/" + e,
            };
          });
      } else {
        this.planPictureList = [];
      }
      if (e.environmentPicture && e.environmentPicture.length != 0) {
        this.environmentPictureList = e.environmentPicture
          .split(",")
          .filter((e) => e.length > 0)
          .map((e) => {
            return {
              isShow: e.length == 0 ? false : true,
              url: this.$constant.BASE_URI + "/FileController/download/" + e,
            };
          });
      } else {
        this.environmentPictureList = [];
      }
      listByModel({ parkRoomId: this.form.id, ...this.search }).then((e) => {
        this.list = e;
        console.log(this.list);
      });
    });
    //
    console.log({ id: this.form.id, ...this.search });
  },
  methods: {
    previewImage(url = null) {
      let pictureList = [];
      for (let i = 0; i < this.planPictureList.length; i++) {
        if (this.planPictureList[i].isShow) {
          pictureList.push(this.planPictureList[i].url);
        }
      }
      console.log(pictureList);
      uni.previewImage({
        urls: pictureList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
        current: url, // 当前显示图片的http链接，默认是第一个
        success: function (res) {
          console.log(res);
        },
        fail: function (res) {},
        complete: function (res) {
          console.log(res);
        },
      });
    },
    previewImage1(url = null) {
      let pictureList = [];
      for (let i = 0; i < this.environmentPictureList.length; i++) {
        if (this.environmentPictureList[i].isShow) {
          pictureList.push(this.environmentPictureList[i].url);
        }
      }
      console.log(pictureList);
      uni.previewImage({
        urls: pictureList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
        current: url, // 当前显示图片的http链接，默认是第一个
        success: function (res) {
          console.log(res);
        },
        fail: function (res) {},
        complete: function (res) {
          console.log(res);
        },
      });
    },
    jumpCreatedProject() {
      if (this.form.currentState != 1) {
        this.$showToast("该房源已锁定不能预约");
      } else {
        uni.navigateTo({
          url:
            "/pages/subPackages/addintention/addintention?ids=" +
            this.form.id +
            "&status=" +
            this.form.currentState,
        });
      }
    },
    getDicType(type, value) {
      if (type == "zaiti" && this.dic_SelectList.PROPERTY_NATURE) {
        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" && this.dic_SelectList.HOUSE_USAGE) {
        let HOUSE_USAGE = this.dic_SelectList.HOUSE_USAGE;
        let index = HOUSE_USAGE.findIndex((e) => e.value == value);
        return HOUSE_USAGE[index].label;
      }
    },
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dic_key));
      this.dic_SelectList = this.$common.handleDicList(data);
    },

    change(e) {
      this.current = e.detail.current;
    },
    selectStyle(index) {
      this.dotsStyles = this.dotStyle[index];
      this.styleIndex = index;
    },
    selectMode(mode, index) {
      this.mode = mode;
      this.modeIndex = index;
      this.styleIndex = -1;
      this.dotsStyles = this.dotStyle[0];
    },
    clickItem(e) {
      this.swiperDotIndex = e;
    },
    onBanner(index) {
      console.log(22222, index);
    },
  },
};
</script>

<style lang="scss">
.chaochuyincang {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.button_primary {
  width: 96rpx;
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
  color: #1d18bc;
  font-weight: 500;
  background: rgba(29, 24, 188, 0.05);
  border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.housedetails {
  .btn-view {
    width: 100%;
    height: 100rpx;
    padding: 20rpx 10%;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
  }
  .btn {
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    width: 75%;
    height: 90rpx;
    text-align: center;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    background: #1d18bc;
    line-height: 90rpx;
    margin-top: 10rpx;
    color: white;
    float: left;
  }
  .btn-disable {
    background: #cccccc;
  }
  .over_hidden {
    overflow: hidden;
  }
  .textflow {
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cell_1 {
    float: left;
    width: 100%;
  }

  .project-column {
    border-radius: 8rpx 8rpx 0rpx 0rpx;
    //height: 44rpx;
    font-size: 32rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    background: #ffffff;
  }
  .shuomingflex {
    display: flex;
    min-height: 110rpx;
  }
  .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;
  }

  .height50rpx {
    height: 50rpx;
  }
  .pd32 {
    padding: 32rpx;
  }
  .cell_1 {
    float: left;
    width: 100%;
  }
  .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;
  }
  .chuzuborder {
    border-bottom: 1rpx solid #cccccc;
  }
  .chuzu_vlaue {
    width: 86rpx;
    font-size: 32rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #ec7359;
    line-height: 38rpx;
  }

  .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;
  }
  .housepicture {
    width: calc(100% - 64rpx);
    padding: 16rpx 32rpx 18rpx 32rpx;
    background: #ffffff;
    margin-bottom: 16rpx;
    display: flex;
    //height: 278rpx;
    flex-wrap: wrap;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    .picList {
      height: 200rpx;
      width: 600rpx;
      flex: 0 0 calc(100% / 3);
    }
  }
  .mb8rpx {
    margin-bottom: 8rpx;
  }
  padding: 32rpx;
  .swiper-box {
    height: 200px;
  }
  .content {
    margin-bottom: 32rpx;
  }
  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    color: #fff;
  }

  .swiper-item0 {
    background-color: #cee1fd;
  }

  .swiper-item1 {
    background-color: #b2cef7;
  }

  .swiper-item2 {
    background-color: #cee1fd;
  }

  .image {
    width: 750rpx;
  }

  .uni-bg-red {
    background-color: #ff5a5f;
  }

  .uni-bg-green {
    background-color: #09bb07;
  }

  .uni-bg-blue {
    background-color: #007aff;
  }

  .active {
    border-style: solid;
    border-color: #007aff;
    border-width: 1px;
  }
}
</style>