warm_man/pages/Room/index.vue

<template>
  <view class="body-background"></view>
	<u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="#fff"
  ></u-navbar>
  <u-swiper
      :list="detail.images"
      height="720"
  ></u-swiper>
  <view class="detail-container">
    <view class="detail-item price row ">
      <view class="price-container row pad-26">
        <u-text mode="price" size="48" color="#FF9545" custom-style="margin-right:5rpx;" :text="detail.price"></u-text>
        <u-text size="28" color="#FF9545" text="元/月"></u-text>
      </view>
      <view class="street pad-26">
        <u-text size="28" color="#178AF2" :text="detail.street"></u-text>
      </view>
      <view class="item-desc row pad-26">
        <view class="item">
          <view class="title">
            <u-text align="center" size="36" color="#020B18" :text="detail.bedroom_number+'室'"></u-text>
          </view>
          <view class="desc">
            <u-text align="center" size="28" color="#AFB5BE" text="整租"></u-text>
          </view>
        </view>
        <view class="item">
          <view class="title">
            <u-text align="center" size="36" color="#020B18" :text="detail.area+'㎡'"></u-text>
          </view>
          <view class="desc">
            <u-text align="center" size="28" color="#AFB5BE" text="使用面积"></u-text>
          </view>
        </view>
        <view class="item">
          <view class="title">
            <u-text align="center" size="36" color="#020B18" :text="'朝'+detail.toward"></u-text>
          </view>
          <view class="desc">
            <u-text align="center" size="28" color="#AFB5BE" text="朝向"></u-text>
          </view>
        </view>
        <view class="item">
          <view class="title">
            <u-text align="center" size="36" color="#020B18" :text="detail.year+'年'"></u-text>
          </view>
          <view class="desc">
            <u-text align="center" size="28" color="#AFB5BE" text="建设时间"></u-text>
          </view>
        </view>
      </view>
      <view class="tags row pad-26">
        <view class="tag">{{detail.payment_cycle}}</view>
        <view class="tag">{{detail.payment_type}}</view>
        <view class="tag" v-for="tag in detail.rental_overview" v-show="tag.is_have">
          {{ tag.text }}
        </view>
      </view>
      <view class="hr"></view>
      <view class="address row pad-26">
        <u-text size="32" color="#020B18" :text="detail.address"></u-text>
       <view class="address-btn" @click="callLocation">
         <u-icon name="map" size="45" color="#ffffff"></u-icon>
       </view>
      </view>
    </view>
    <view class="detail-item info">
      <view class="cell-two-container row">
        <view class="cell-border"></view>
        <view class="cell-title">
          租住概况
        </view>
      </view>
      <view class="body">
        <view class="item row">
          <view class="check-item row col-6" v-for="item in detail.rental_overview">
            <u-icon name="checkmark" size="40" :color="item.is_have?'#FF9545':'#AFB5BE'" custom-style="margin-right:20rpx;"></u-icon>
            <u-text size="28" color="#020B18" :text="item.text"></u-text>
          </view>
        </view>
      </view>
    </view>
    <view class="detail-item detail">
      <view class="cell-two-container row">
        <view class="cell-border"></view>
        <view class="cell-title">
          房屋详情
        </view>
      </view>
      <view class="body">
        <view class="item row">
          <view class="sub-title col-12">家具情况</view>

          <view class="check-item row col-6" v-for="item in detail.furniture">
            <u-icon name="checkmark" size="40" :color="item.is_have?'#FF9545':'#AFB5BE'" custom-style="margin-right:20rpx;"></u-icon>
            <u-text size="28" color="#020B18" :text="item.text"></u-text>
          </view>
          <view class="sub-title col-12">家电情况</view>
          <view class="check-item row col-6" v-for="item in detail.jiadian">
            <u-icon name="checkmark" size="40" :color="item.is_have?'#FF9545':'#AFB5BE'" custom-style="margin-right:20rpx;"></u-icon>
            <u-text size="28" color="#020B18" :text="item.text"></u-text>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="foot-button border-box row">
    <view class="collect">
<!--      <u-icon name="heart-fill" size="48" color="#FF9545"></u-icon>-->
<!--      <u-text size="28" color="#FF9545" text="收藏" align="center"></u-text>-->
<!--      <u-icon name="heart-fill" size="48" color="#AFB5BE"></u-icon>-->
    </view>
    <view class="button-group">
      <view class="button phone ">
        <u-icon name="phone-fill" size="32" color="#000" custom-style="margin-right:10rpx;"></u-icon>
        <u-text size="32" color="#020B18" text="电话联系" @click="callPhone"></u-text>
      </view>
      <view class="button exchange">
        <u-text size="32" color="#020B18" text="暖新币兑换" @click="navTo('/pages/Order/detail?type=create&id='+detail.id+'&rent='+detail.price)"></u-text>
      </view>
    </view>
  </view>
</template>

<script>
  import api from "@/utils/functions.js";
  import {roomDetail} from "@/api/shop";
  import {systemConfig} from "@/api/other";

	export default {
    computed: {

    },
		components: {

		},
		data() {
			return {
				title: '公寓详情',
        size:{
          height:0
        },
        detail:{
          id:'',
          images:'',
          price:'',
          street:'',
          bedroom_number:'',
          area:'',
          toward:'',
          year:'',
          payment_cycle :'',
          payment_type:'',
          address:'',
          coordinate:'',
          rental_overview:'',
          jiadian:'',
          furniture:'',
          tel:'',
        },
        all:{
          rental_overview:[],
          furniture:[],
          jiadian:[],
        }
			}
		},
		onLoad(option) {
      this.getDetail(option.id)
		},
    onReady(){
      this.size.height = api.navHeight().navigationBar + api.navHeight().systemBar
    },
		methods: {
      navTo(url) {
        wx.navigateTo({
          url: url
        })
      },
      getDetail(id){
        roomDetail({
          house_id:id
        }).then(res => {
          res.data.coordinate = res.data.coordinate.split(',')
          this.detail = res.data;
        });
      },
      getInfo(){
        systemConfig({type:'rental_overview'}).then(res => {
          this.all.rental_overview = res.data;
        });
        systemConfig({type:'furniture'}).then(res => {
          this.all.furniture = res.data;
        });
        systemConfig({type:'jiadian'}).then(res => {
          this.all.jiadian = res.data;
        });
      },
      callPhone(){
        uni.makePhoneCall({
          phoneNumber: this.detail.tel?.toString()
        });
      },
      callLocation(){
        uni.openLocation({
          latitude:parseFloat(this.detail.coordinate[0]),
          longitude:parseFloat(this.detail.coordinate[1]),
          name:this.detail.address,
        })
      },
		},
		onPageScroll(res) {

		},
		created() {

      },
		mounted() {
      this.getInfo();
		},
	}
</script>

<style lang="scss">
@import './components/index.scss';
</style>