product_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.floorDiscName + form.buildName + form.roomNo }}</div>
        <div class="housingImportBox">
          <div class="housingImportItem">
            <span class="housingImportInfo">
              <span style="font-size: 40rpx;font-weight: 600">{{form.guidePrice}}</span>
              元/㎡/月</span>
            <span class="housingInportName">出租指导价</span>
          </div>
          <div class="housingImportItem">
            <span class="housingImportInfo">
               <span style="font-size: 40rpx;font-weight: 600">{{ form.size }}</span>
              ㎡
            </span>
            <span class="housingInportName">
              面积
            </span>
          </div>
          <div class="housingImportItem">
            <span class="housingImportInfo">
              <span style="font-size: 40rpx;font-weight: 600">{{ form.decorationSituation }}</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 style="color: red">*</span>
            <span class="infoTitle">区域</span>
            <span class="infoMsg">{{ form.region }}</span>
          </div>
          <div class="housingInfoItem">
            <span style="color: red">*</span>
            <span class="infoTitle">楼层</span>
            <span class="infoMsg">{{ form.floor }}</span>
          </div>
          <div class="housingInfoItem">
            <span style="color: red">*</span>
            <span class="infoTitle">出租单元号</span>
            <span class="infoMsg">{{ form.roomNo }}</span>
          </div>
          <div class="housingInfoItem">
            <span style="color: red;visibility: hidden">*</span>
            <span class="infoTitle">平面图单元号</span>
            <span class="infoMsg">{{ form.imgNo }}</span>
          </div>
          <div class="housingInfoItem">
            <span style="color: red;">*</span>
            <span class="infoTitle">用途</span>
            <span class="infoMsg">{{ form.roomUse }}</span>
          </div>
          <div class="housingInfoItem">
            <span style="color: red;">*</span>
            <span class="infoTitle">朝向</span>
            <span class="infoMsg">{{ form.direction }}</span>
          </div>
          <div class="housingInfoItem">
            <span style="color: red;visibility: hidden">*</span>
            <span class="infoTitle">承重情况（kg/㎡）</span>
            <span class="infoMsg">{{ form.bearing }}</span>
          </div>
          <div class="housingInfoItem">
            <span style="color: red;visibility: hidden">*</span>
            <span class="infoTitle">层高（m）</span>
            <span class="infoMsg">{{ form.floorHeight }}</span>
          </div>
          <div class="housingInfoItem">
            <span style="color: red;visibility: hidden">*</span>
            <span class="infoTitle">用电说明</span>
            <span class="infoMsg">{{ form.electricity }}</span>
          </div>
          <div class="housingInfoItem" style="margin-top: 12rpx">
            <span style="color: red;visibility: hidden">*</span>
            <span class="infoTitle">备注</span>
          </div>
          <div class="bzInfo">
            {{ form.remark }}
          </div>
        </div>
        <button class="submitBtn" @click="toPredetermine">去预定</button>
      </div>
    </div>
</template>

<script>
import {
  getRoomInfo,
} from "@/js_sdk/http";
import constant from "../../utils/constant";
export default {
  name: "detail",
  onLoad(options){
    this.form.id = options.id
    this.getById()
  },
  data() {
    return {
      selectImgType:true,
      current:1,
      envList:[
        // {url:require('./testImg.png')},
        // {url:require('./testImg.png')},
        // {url:require('./testImg.png')},
        // {url:require('./testImg.png')},
        // {url:require('./testImg.png')},
      ],
      layOutList:[
        // {url:require('./testImg.png')},
        // {url:require('./testImg.png')},
      ],
      form:{

      }
    };
  },
  methods:{
    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
            // 房型图
            if(res.planPicture){
              const layOutList = []
              res.planPicture.split(',').forEach(v => {
                if (v) {
                  layOutList.push({
                    url: constant.BASE_URI + '/FileController/download/' + v,
                    id: v
                  })
                }
              })
              _this.layOutList = layOutList
            }
            // 室内外环境
            if(res.environmentPicture){
              const envList = []
              res.environmentPicture.split(',').forEach(v => {
                if (v) {
                  envList.push({
                    url: constant.BASE_URI + '/FileController/download/' + v,
                    id: v
                  })
                }
              })
              _this.envList = envList
            }
          }
      })
    },
    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{
      .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.70);
          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;
          .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: 240rpx;
          }
          .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>