HSW_WX/pages/subPackages/housedetails/housedetails.vue

<template>
  <div class="housedetails" style="padding-bottom: 500rpx">
    <div class="content" v-if="planPictureList.length != 0">
      <uni-swiper-dot
        class="uni-swiper-dot-box"
        @clickItem="clickItem"
        :info="info"
        :current="current"
        :mode="mode"
        :dots-styles="dotsStyles"
        field="content"
      >
        <swiper class="swiper-box" @change="change" :current="swiperDotIndex">
          <swiper-item v-for="(item, index) in planPictureList" :key="index">
            <view class="swiper-item" :class="'swiper-item' + index">
              <img :src="item.url" alt="" style="width: 100%; height: 100%" />
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </div>
    <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 height50rpx chuzuborder">
          <div class="float_left chuzu_label">出租指导价（元/㎡/月）：</div>
          <div class="float_left chuzu_vlaue">
            {{ form.guidePrice ? form.guidePrice : "未知" }}
          </div>
        </div>
        <div class="width100 pdt32 pdb32 chuzuborder">
          <van-row>
            <van-col :span="6">
              <div class="yongtu_first_title">
                {{
                  form.roomUse ? getDicType("roomUse", form.roomUse) : "暂无"
                }}
              </div>
              <div class="yongtu_second_title">用途</div>
            </van-col>
            <van-col :span="6">
              <div class="yongtu_first_title over_hidden textflow">
                {{
                  !form.decorationSituation ||
                  form.decorationSituation != "null"
                    ? "暂无"
                    : form.decorationSituation
                }}
                <!--							decorationSituation-->
              </div>
              <div class="yongtu_second_title">装修情况</div>
            </van-col>
            <van-col :span="6">
              <div class="yongtu_first_title">
                {{ form.direction ? form.direction : "暂无" }}
              </div>
              <div class="yongtu_second_title">朝向</div>
            </van-col>
            <van-col :span="6">
              <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 class="roomstatus" v-if="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 class="width100 pdt32 pdb32 chuzuborder">
          <van-row>
            <van-col :span="4">
              <div style="white-space: nowrap">说明</div>
            </van-col>
            <van-col :span="20">
              <span>{{ form.remark ? form.remark : "暂无" }}</span>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>
    <div class="project-column pdt32 pdl32 pdr32">
      <div class="pdb16 chuzuborder">关联项目</div>
    </div>
    <div class="list-row" v-for="item in list">
      <div class="cell_1">
        <div class="width100 height44rpx mb8rpx">
          <div class="first_title float_left chaochuyincang" style="width: 80%">
            {{ item.projectName }}
          </div>
          <div class="width20 float_left">
            <div
              class="button_primary float_right"
              v-if="item.reservationStatus == '1'"
            >
              空置
            </div>
            <div
              class="button_primary float_right"
              v-if="item.reservationStatus == '2'"
            >
              锁定
            </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.companyId || item.companyId == null
                ? "未知"
                : item.companyId
            }}
          </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">
      <button
        class="btn"
        @click="jumpCreatedProject()"
        style="margin-left: 10rpx"
      >
        创建项目
      </button>
    </view>
  </div>
</template>

<script>
import { getByCodes, getRoomInfo, listByModel } from "@/js_sdk/http";
export default {
  components: {},
  data() {
    return {
      dic_key: ["PROPERTY_NATURE", "HOUSE_USAGE"],
      dic_SelectList: {},
      search: {
        pageSize: 10,
        pageNum: 1,
      },
      form: {
        id: "",
      },
      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: [],
      swiperDotIndex: 0,
    };
  },
  onLoad(options) {
    this.getByCodes();
    this.form.id = options.id;
    getRoomInfo(options.id).then((e) => {
      this.form = e;
      this.form.currentState = options.currentState;
      console.log(e.planPicture.split(","));
      if (e.planPicture.length != 0) {
        this.planPictureList = e.planPicture.split(",").map((e) => {
          return {
            url: this.$constant.BASE_URI + "/FileController/download/" + e,
          };
        });
      } else {
        this.planPictureList = [];
      }
    });
    //
    console.log({ id: this.form.id, ...this.search });
    listByModel({ id: options.id, ...this.search }).then((e) => {
      this.list = e.rows;
    });
  },
  methods: {
    jumpCreatedProject() {
      uni.navigateTo({
        url: "/pages/subPackages/addintention/addintention?ids=" + this.form.id,
      });
    },
    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);
    },
    getMoreListByModel() {
      listByModel({ id: this.form.id, ...this.search }).then((e) => {
        this.list.push(...e.rows);
      });
    },
    onReachBottom() {
      this.search.pageNum += 1;
      this.getMoreListByModel();
      console.log("滑动到距离底部100px的时候触发,可以放 。。业务逻辑");
    }, //下拉执行的时候触发 （下拉刷新）

    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 {
    width: 75%;
    height: 90rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    background: #1d18bc;
    line-height: 90rpx;
    color: white;
    float: left;
  }
  .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: 2px 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;
  }
  .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>