settle_down_wx/pages/subPackages/housingResources/detail.vue

<template>
  <div class="housingDetail">
    <div class="swiperBody">
      <!--室内外环境图-->
      <!-- <div v-if="selectImgType">
        <swiper
          :indicator-dots="false"
          circular
          style="height: 360rpx"
          @change="changeImg"
        >
          <swiper-item v-for="item in envList">
            <img :src="item.url" class="swiperImg" />
          </swiper-item>
        </swiper>
      </div> -->
      <!--房型图-->
      <!-- <div v-if="!selectImgType">
        <swiper
          :indicator-dots="false"
          circular
          style="height: 360rpx"
          @change="changeImg"
        >
          <swiper-item v-for="item in layOutList">
            <img :src="item.url" class="swiperImg" />
          </swiper-item>
        </swiper>
      </div> -->
      <!-- <div class="radioBox" @tap="changeType">
        <div :class="selectImgType ? 'selectEnvironment' : 'unSelEn'">
          室内外环境
          <span v-if="selectImgType">{{ current }}/{{ envList.length }}</span>
        </div>
        <div :class="!selectImgType ? 'selectLayout' : 'unSelLayout'">
          房型图
          <span v-if="!selectImgType"
            >{{ current }}/{{ layOutList.length }}</span
          >
        </div>
      </div> -->
    </div>
    <div class="housingInfoBody">
      <div class="housingName">
        {{
          form.groupName +
          "-" +
          form.discName +
          "-" +
          form.buildName +
          "-" +
          form.roomNo
        }}
      </div>
      <div class="housingImportBox">
        <div class="housingImportItem">
          <span class="housingImportInfo">
            <span style="font-size: 40rpx; font-weight: 600">
              {{ HOUSE_USAGE[form.roomUse - 1].label }}
            </span>
          </span>
          <span class="housingInportName">用途</span>
        </div>
        <div class="housingImportItem">
          <span class="housingImportInfo">
            <span style="font-size: 40rpx; font-weight: 600">{{
              form.actualInternalArea ? form.actualInternalArea : "暂无数据"
            }}</span>
            ㎡
          </span>
          <span class="housingInportName"> 实测套内面积（㎡） </span>
        </div>
        <div class="housingImportItem">
          <span class="housingImportInfo">
            <span style="font-size: 40rpx; font-weight: 600">{{
              !form.decorationSituation
                ? "暂无数据"
                : DECORATION_SITUATION[form.decorationSituation - 1].label
            }}</span>
          </span>
          <span class="housingInportName">装修情况</span>
        </div>
      </div>
      <!-- <div class="placeBox">
        <span class="placeTit">位置</span>
        <div class="placeInfo">{{ form.address }}</div>
        <img src="../parkActivity/image/dhIcon.png" class="dhIcon" />
      </div> -->
      <div class="housingInfoBox">
        <div class="housingInfoItem">
          <span class="infoTitle">父级</span>
          <span class="infoMsg">
            {{ form.groupName + "-" + form.discName + "-" + form.buildName }}
          </span>
        </div>
        <div class="housingInfoItem">
          <span class="infoTitle">户室号</span>
          <span class="infoMsg">{{ form.floor }}</span>
        </div>

        <div class="housingInfoItem">
          <span class="infoTitle">所在层</span>
          <span class="infoMsg">{{ form.floor }}</span>
        </div>

        <div class="housingInfoItem">
          <span class="infoTitle">预测套内面积（㎡）</span>
          <span class="infoMsg">{{
            form.predictionInternalArea
              ? form.predictionInternalArea
              : "暂无数据"
          }}</span>
        </div>
        <div class="housingInfoItem">
          <span class="infoTitle">预测分摊面积（㎡）</span>
          <span class="infoMsg">{{
            form.actualShareArea ? form.actualShareArea : "暂无数据"
          }}</span>
        </div>

        <div class="housingInfoItem">
          <span class="infoTitle">预测建筑面积（㎡）</span>
          <span class="infoMsg">{{
            form.predictionBuildArea ? form.predictionBuildArea : "暂无数据"
          }}</span>
        </div>
        <div class="housingInfoItem">
          <span class="infoTitle">预测土地面积（㎡）</span>

          <span class="infoMsg">{{
            form.predictionLandArea ? form.predictionLandArea : "暂无数据"
          }}</span>
        </div>
        <div class="housingInfoItem">
          <span class="infoTitle">实测套内面积（㎡）</span>
          <span class="infoMsg">{{
            form.actualInternalArea ? form.actualInternalArea : "暂无数据"
          }}</span>
        </div>
        <div class="housingInfoItem">
          <span class="infoTitle">实测分摊面积（㎡）</span>
          <span class="infoMsg">{{
            form.actualShareArea ? form.actualShareArea : "暂无数据"
          }}</span>
        </div>

        <div class="housingInfoItem">
          <span class="infoTitle">实测建筑面积（㎡）</span>
          <span class="infoMsg">{{
            form.actualBuildArea ? form.actualBuildArea : "暂无数据"
          }}</span>
        </div>
        <div class="housingInfoItem">
          <span class="infoTitle">实测土地面积（㎡）</span>

          <span class="infoMsg">{{
            form.actualLandArea ? form.actualLandArea : "暂无数据"
          }}</span>
        </div>
        <div class="housingInfoItem">
          <span class="infoTitle">用途</span>
          <span class="infoMsg">{{ HOUSE_USAGE[form.roomUse - 1].label }}</span>
        </div>
        <div class="housingInfoItem">
          <span class="infoTitle">可售状态</span>
          <span class="infoMsg">{{
            SALE_STATUS[form.saleStatus - 1].label
          }}</span>
        </div>
        <div class="housingInfoItem">
          <span class="infoTitle">已售状态</span>
          <span class="infoMsg">
            {{ SOLD_STATUS[form.soldStatus - 1].label }}
          </span>
        </div>
        <div class="housingInfoItem">
          <span class="infoTitle">户型</span>
          <span class="infoMsg">
            <picker
              @change="getHouseImageList"
              :value="index"
              :range="houseTypeList"
              range-key="label"
            >
              {{ houseType ? houseType : "请选择" }}
            </picker>
          </span>
        </div>
        <div class="imageList">
          <img
            @click="showImgList(item.url)"
            v-for="item in imageList"
            :key="item.url"
            :src="item.url"
            alt=""
          />
        </div>
      </div>

      <button class="submitBtn" @click="goBack()">返回上一页</button>
    </div>
  </div>
</template>

<script>
import { getRoomInfo, getByCodes, getHouseImage } from "@/js_sdk/http";
import constant from "../../utils/constant";
export default {
  name: "detail",

  onLoad(options) {
    this.form.id = options.id;
    this.getByCodes();
  },
  data() {
    return {
      constant: constant,
      imgs: [],
      dic_key: [
        "HOUSE_USAGE",
        "DECORATION_SITUATION",
        "SALE_STATUS",
        "SOLD_STATUS",
      ],
      selectImgType: true,
      current: 1,
      HOUSE_USAGE: [],
      dic_SelectList: {},
      envList: [],
      layOutList: [],
      HOUSE_USAGE: [],
      DECORATION_SITUATION: [],
      SALE_STATUS: [],
      SOLD_STATUS: [],
      BIZ_OA: [],
      form: {},
      houseTypeList: [],
      imageList: [],
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    showImgList(url) {
      console.log(this.imgs);
      console.log(url);
      uni.previewImage({
        urls: this.imgs,
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {
            console.log(
              "选中了第" +
                (data.tapIndex + 1) +
                "个按钮,第" +
                (data.index + 1) +
                "张图片"
            );
          },
          fail: function (err) {
            console.log(err.errMsg);
          },
        },
      });
    },
    getHouseImageList({ detail }) {
      this.houseType = this.houseTypeList[detail.value].label;
      this.imgs = [];
      let fileList = JSON.parse(this.houseTypeList[detail.value].fileList);
      for (let i = 0; i < fileList.length; i++) {
        console.log(fileList[i].url);
        fileList[i].url =
          this.constant.BASE_URI + fileList[i].url.replace("/webServer", "");
        this.imgs.push(fileList[i].url.replace("/webServer", ""));
      }
      this.imageList = fileList;
    },
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dic_key));
      this.dic_SelectList = this.$common.handleDicList(data);
      this.HOUSE_USAGE = this.dic_SelectList.HOUSE_USAGE;
      this.DECORATION_SITUATION = this.dic_SelectList.DECORATION_SITUATION;
      this.SALE_STATUS = this.dic_SelectList.SALE_STATUS;
      this.SOLD_STATUS = this.dic_SelectList.SOLD_STATUS;
      this.BIZ_OA = this.dic_SelectList.BIZ_OA;
      this.getById();
    },
    async getHouseImage() {
      let data = await getHouseImage({ discId: this.form.discId });
      this.houseTypeList = data.map((e) => {
        return {
          label: `${e.name},建筑面积${e.buildArea},使用面积${e.useArea}`,
          fileList: e.fileList,
        };
      });
      console.log(data);
    },
    getById() {
      const _this = this;
      getRoomInfo(this.form.id).then((res) => {
        if (res) {
          this.form = res;
          this.form.imgNo = res.imgNo == null ? "" : this.form.imgNo;
          this.form.bearing = res.bearing == null ? "" : this.form.bearing;
          this.form.floorHeight =
            res.floorHeight == null ? "" : this.form.floorHeight;
          this.form.electricity =
            res.electricity == null ? "" : this.form.electricity;
          this.form.remark = res.remark == null ? "" : this.form.remark;
          this.getHouseImage();
        }
      });
    },
    changeType() {
      this.selectImgType = !this.selectImgType;
      this.current = 1;
    },
    changeImg(index) {
      this.current = index.detail.current + 1;
    },
    toPredetermine() {
      uni.navigateTo({
        url:
          "/pages/subPackages/housingResources/addPredetermine?roomId=" +
          this.form.id,
      });
    },
  },
};
</script>

<style lang="scss">
.housingDetail {
  .imageList {
    display: flex;
    flex-wrap: nowrap;
    img {
      width: 230rpx;
      height: 230rpx;
    }
  }
  .swiperBody {
    position: relative;
    .swiperImg {
      width: 750rpx;
      height: 360rpx;
    }
    .radioBox {
      width: 344rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 30rpx;
      background: rgba(0, 0, 0, 0.7);
      position: absolute;
      color: white;
      left: 204rpx;
      top: 268rpx;
      font-size: 26rpx;
      box-sizing: border-box;
      .selectEnvironment {
        width: 220rpx;
        height: 60rpx;
        background: rgba(3, 101, 249, 1);
        border-radius: 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
      }
      .unSelEn {
        width: 164rpx;
        height: 60rpx;
        border-radius: 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
      }
      .selectLayout {
        width: 180rpx;
        height: 60rpx;
        display: flex;
        background: rgba(3, 101, 249, 1);
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border-radius: 30rpx;
      }
      .unSelLayout {
        width: 124rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border-radius: 30rpx;
      }
    }
  }
  .housingInfoBody {
    background: white;
    padding: 32rpx;
    .housingName {
      font-size: 40rpx;
      color: rgba(51, 51, 51, 1);
      // margin-bottom: 24rpx;
    }
    .housingImportBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10rpx;
      margin-top: 10rpx;
      .housingImportItem {
        display: flex;
        flex-direction: column;
        align-items: center;
        .housingImportInfo {
          color: rgba(226, 81, 0, 1);
          font-size: 28rpx;
          line-height: 46rox;
        }
        .housingInportName {
          color: rgba(136, 136, 136, 1);
          font-size: 28rpx;
          line-height: 32rpx;
          margin-top: 10rpx;
        }
      }
    }
  }
  .placeBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(245, 247, 250, 1);
    padding: 16rpx 24rpx;
    border-radius: 8rpx;
    margin-top: 32rpx;
    .placeTit {
      color: rgba(136, 136, 136, 1);
      font-size: 28rpx;
      white-space: nowrap;
    }
    .placeInfo {
      color: rgba(51, 51, 51, 1);
      font-size: 28rpx;
      width: 466rpx;
      line-height: 42rpx;
      word-wrap: break-word;
    }
    .dhIcon {
      width: 48rpx;
      height: 48rpx;
    }
  }
  .housingInfoBox {
    display: flex;
    flex-direction: column;
    margin-top: 32rpx;
    .housingInfoItem {
      display: flex;
      align-items: center;
      margin-bottom: 24rpx;
      .infoTitle {
        color: rgba(136, 136, 136, 1);
        font-size: 28rpx;
        margin-left: 8rpx;
        width: 300rpx;
      }
      .infoMsg {
        font-size: 28rpx;
        color: rgba(51, 51, 51, 1);
      }
    }
    .bzInfo {
      width: 640rpx;
      padding: 0 24rpx;
      word-wrap: break-word;
      font-size: 28rpx;
      color: #333333;
      line-height: 42rpx;
    }
  }
  .submitBtn {
    width: 654rpx;
    height: 96rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 35rpx;
    background: rgba(3, 101, 249, 1);
    margin: 64rpx auto;
  }
}
</style>