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">科创园一期A栋1305</div>
        <div class="housingImportBox">
          <div class="housingImportItem">
            <span class="housingImportInfo">
              <span style="font-size: 40rpx;font-weight: 600">2899</span>
              元/㎡/月</span>
            <span class="housingInportName">出租指导价</span>
          </div>
          <div class="housingImportItem">
            <span class="housingImportInfo">
               <span style="font-size: 40rpx;font-weight: 600">355</span>
              ㎡
            </span>
            <span class="housingInportName">
              面积
            </span>
          </div>
          <div class="housingImportItem">
            <span class="housingImportInfo">
              <span style="font-size: 40rpx;font-weight: 600">精装</span>
            </span>
            <span class="housingInportName">装修情况</span>
          </div>
        </div>
        <div class="placeBox">
          <span class="placeTit">位置</span>
          <div class="placeInfo">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</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">科教产业园</span>
          </div>
          <div class="housingInfoItem">
            <span style="color: red">*</span>
            <span class="infoTitle">楼层</span>
            <span class="infoMsg">19/28</span>
          </div>
          <div class="housingInfoItem">
            <span style="color: red">*</span>
            <span class="infoTitle">出租单元号</span>
            <span class="infoMsg">1904号</span>
          </div>
          <div class="housingInfoItem">
            <span style="color: red;visibility: hidden">*</span>
            <span class="infoTitle">平面图单元号</span>
            <span class="infoMsg">1904号</span>
          </div>
          <div class="housingInfoItem">
            <span style="color: red;">*</span>
            <span class="infoTitle">用途</span>
            <span class="infoMsg">研发办公</span>
          </div>
          <div class="housingInfoItem">
            <span style="color: red;">*</span>
            <span class="infoTitle">朝向</span>
            <span class="infoMsg">南</span>
          </div>
          <div class="housingInfoItem">
            <span style="color: red;visibility: hidden">*</span>
            <span class="infoTitle">称重情况（kg/㎡）</span>
            <span class="infoMsg"></span>
          </div>
          <div class="housingInfoItem">
            <span style="color: red;visibility: hidden">*</span>
            <span class="infoTitle">层高（m）</span>
            <span class="infoMsg">4.5m</span>
          </div>
          <div class="housingInfoItem">
            <span style="color: red;visibility: hidden">*</span>
            <span class="infoTitle">用电说明</span>
            <span class="infoMsg"></span>
          </div>
          <div class="housingInfoItem" style="margin-top: 12rpx">
            <span style="color: red;visibility: hidden">*</span>
            <span class="infoTitle">备注</span>
          </div>
          <div class="bzInfo">
            XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
          </div>
        </div>
        <button class="submitBtn" @click="toPredetermine">去预定</button>
      </div>
    </div>
</template>

<script>
export default {
  name: "detail",
  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')},
      ]
    };
  },
  methods:{
    changeType(){
      this.selectImgType = !this.selectImgType
      this.current = 1
    },
    changeImg(index){
      this.current = index.detail.current+1
    },
    toPredetermine() {
      uni.navigateTo({
        url:'/pages/subPackages/housingResources/addPredetermine'
      })
    }
  }
}
</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>