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" :format="$u.priceFormat"></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" custom-style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; "></u-text>
       <view class="address-btn" @click="callLocation">
         <u-image mode="widthFix" width="50" height="50" :src="staticImage.mapPosition"></u-image>
       </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" style="margin-bottom:20rpx;">
          <u-text line-height="40" text="1、丰行侠需在小程序选定公寓后，在线下签订租房协议，并支付房租；" color="#020b18" size="28"></u-text>
        </view>
        <view class="item row" style="margin-bottom:20rpx;">
          <u-text line-height="40" text="2、在小程序点击暖新币兑换，上传支付凭证和租赁协议提交审核；" color="#020b18" size="28"></u-text>
        </view>
        <view class="item row" style="margin-bottom:20rpx;">
          <u-text line-height="40" text="3、街道对丰行侠提交的暖新币兑换进行审核；" color="#020b18" size="28"></u-text>
        </view>
        <view class="item row">
          <u-text line-height="40" text="4、审核通过后，丰行侠可在每月指定时间（请留意小程序首页消息提醒）前往社区领取暖新币兑换金额；" color="#020b18" size="28"></u-text>
        </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="item.is_have?'checkmark':'close'" 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="item.is_have?'checkmark':'close'" 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="item.is_have?'checkmark':'close'" 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">
    <follow :is_collect="detail.is_collect" :id="detail.id" type="house"></follow>
    <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" v-if="(detail.is_vacant !== 2)">
        <u-text size="32" color="#020B18" text="暖新币兑换" @click="navTo('/pages/Order/detail?type=create&id='+detail.id+'&rent='+detail.price,true)"></u-text>
      </view>
    </view>
  </view>
</template>

<script>
  import api from "@/utils/functions.js";
  import {roomDetail} from "@/api/shop";
  import {systemConfig} from "@/api/other";
  import {imghost} from "@/config/host";
  import follow from "@/components/Follow/index.vue";

	export default {
    computed: {

    },
		components: {
      follow

    },
		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:[],
        },
        staticImage:{
          mapPosition:imghost+'/map-position.png'
        }
			}
		},
		onLoad(option) {
      this.getDetail(option.id)
		},
    onReady(){
      this.size.height = api.navHeight().navigationBar + api.navHeight().systemBar
    },
		methods: {
      navTo(url,token = false) {
        if(token){
          if(uni.getStorageSync('token')){
            wx.navigateTo({
              url: url
            })
          }else{
            wx.navigateTo({
              url: '/pages/Login/index'
            })
          }
        }else{
          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[1]),
          longitude:parseFloat(this.detail.coordinate[0]),
          name:this.detail.address,
        })
        console.log(this.detail)
      },
		},
		onPageScroll(res) {

		},
		created() {

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

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