AyaoJies-boot/AyaoJies-app/house-master/house-life/pages/detail/detail.vue

<template>
  <view class="u-margin-left-20 u-margin-right-20">
    <u-navbar :border-bottom="false" :custom-back="goHome" :is-back="true"
              back-text="返回" title="房源"></u-navbar>
    <view>
      <u-swiper :height="750" :interval="5000" :list="swiperlist" effect3d effect3d-previous-margin="20" mode="number"
                @click="clickImg"></u-swiper>
    </view>
    <view class="item u-margin-top-5">
      <view class="item-title">
        {{ room.type == '整租' ? room.houseNum + room.houseHall + room.toiletNum : room.roomType }}
      </view>
      <view class="item-price">¥{{ room.price }}/月</view>
    </view>
    <view class="item" style="display: flex;align-items: center;flex-wrap: wrap;">
      <view v-for="(item,index) in tagList" :key="index"
            style="background-color: #f5f5f5;color: #606266;margin-right: 15rpx;
			  margin-top: 15rpx;padding: 0 10rpx;height: 60rpx;line-height: 60rpx;">
        {{ item.title }}
      </view>
    </view>
    <!-- 小程序通讯 -->
    <button class="clearBtn" open-type="contact" type="default">
      <u-cell-group>
        <u-cell-item title="服务费另计" value="在线咨询"></u-cell-item>
      </u-cell-group>
    </button>
    <view v-if="room.introduce">
      <u-gap bg-color="#f8f8f8" height="10"></u-gap>
      <u-card :border="false" :head-border-bottom="false" padding="0" title="房源介绍" title-size="38">
        <view slot="body" class="u-padding-top-45 item">
          {{ room.introduce }}
        </view>
      </u-card>
    </view>
    <u-gap bg-color="#f8f8f8" height="1"></u-gap>
    <view style="position: relative;">
      <u-card :border="false" :head-border-bottom="false" padding="0" title="小区介绍" title-size="38">
        <view slot="body" class="u-padding-top-45">
          <view class="u-flex" style="justify-content: space-between;">
            <view class="item">
              <view>建筑年份：{{ village.year }}</view>
              <view>建筑类型：{{ village.type }}</view>
              <view>绿化率：{{ village.green }}%</view>
            </view>
            <image
                mode="widthFix"
                src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg"
                style="width: 250rpx;height: 200rpx;"></image>
          </view>
        </view>
      </u-card>
    </view>
    <u-gap bg-color="#f8f8f8" height="1"></u-gap>
    <view style="position: relative;">
      <u-card :border="false" :head-border-bottom="false" :title="room.villageName" padding="0" title-size="38">
        <view slot="body" class="u-padding-top-45">
          <map :latitude="latitude" :longitude="longitude">
            <cover-view style='width:100%;height:100%;' @click="clickMap"></cover-view>
          </map>
          <view
              style="margin-top: 30rpx;padding-left: 10rpx;height:80rpx;
					line-height: 80rpx;background-color: #fdfdfd;border-radius: 6px;
					display: flex;justify-content: space-between;
					padding-right: 10rpx;color: #909399;
					"
              @click="clickMap">
            <view>
              <u-icon color="#909399" name="map" size="30"></u-icon>
              <text style="margin-left: 8rpx;">
                房源直线距离约 {{ distance }} km
              </text>
            </view>
            <view>
              <text style="margin-right: 3rpx;">
                导航
              </text>
              <u-icon color="#909399" name="arrow-right" size="30"></u-icon>
            </view>
          </view>
          <view style="margin-top: 20rpx;margin-left: 10rpx;font-size: 10px;
							color: #909399">
            *数据仅供参考，请以实际看房为准
          </view>
        </view>
      </u-card>
    </view>
    <u-gap bg-color="#f8f8f8" height="1"></u-gap>
    <view style="position: relative;">
      <u-card :border="false" :head-border-bottom="false" padding="0" title="服务介绍" title-size="38">
        <view slot="body" class="u-padding-top-35">
          <u-cell-group :border="false">
            <u-cell-item :arrow="false" :border-bottom="false" hover-class="none" icon="heart"
                         title="承诺-四大租住承诺，安心有保障"></u-cell-item>
            <u-cell-item :arrow="false" :border-bottom="false" hover-class="none" icon="level"
                         title="品质-两类品质保障，入住更无忧"></u-cell-item>
            <u-cell-item :arrow="false" :border-bottom="false" hover-class="none" icon="star"
                         title="服务-两项日常服务，生活超便捷"></u-cell-item>
            <u-cell-item :arrow="false" :border-bottom="false" hover-class="none" icon="rmb"
                         title="付款-多种付款方式，支付更灵活"></u-cell-item>
          </u-cell-group>
        </view>
      </u-card>
    </view>
    <u-gap bg-color="#f8f8f8" height="1"></u-gap>
    <view style="position: relative;">
      <u-card :border="false" :head-border-bottom="false" padding="0" title="房源评价" title-size="38">
        <view slot="body" class="u-padding-top-50 u-padding-bottom-50">
          <u-cell-group :border="false">
            {{ evaluate }}
            <text style="float: right;color: #909399;font-size: 13px;">{{ credt }}</text>
          </u-cell-group>
        </view>
        <view slot="foot" style="padding-top: 30rpx;float: right;">
          <u-icon name="chat-fill"></u-icon>
          <text style="text-align: center;font-size: 12px;margin-left: 5rpx;" @click="moreEval">
            更多评价（{{ evalsize }}）
          </text>
        </view>
      </u-card>
    </view>
    <u-gap bg-color="#f8f8f8" height="10"></u-gap>
    <view style="position: relative;padding-bottom: 50rpx;">
      <u-card :border="false" :head-border-bottom="false" padding="0" title="经纪人" title-size="38">
        <view slot="body" class="u-padding-top-45">
          <view class="u-flex">
            <view class="u-m-r-20">
              <u-avatar :src="room.agentAvatar" size="80"></u-avatar>
            </view>
            <view class="u-flex-1">
              <view class="u-font-16 u-p-b-40">{{ room.agentName }}</view>
              <!-- <view class="u-font-12 u-p-b-10">{{user.agentPhone}}</view> -->
            </view>
          </view>
          <view class="arrow-right" @click="clickItem">
            <view class="phone">
              <u-icon class="u-p-l-10" color="#d1d1d1" name="phone"
                      size="40"
              ></u-icon>
            </view>
          </view>
        </view>
      </u-card>
      <view class="item">
        <u-divider>开源字节为您服务</u-divider>
      </view>
    </view>
    <view class="navigation">
      <view class="left">
        <button class="clearBtn" open-type="contact" style="font-size: 14px;color: #6a6a6a;"
                type="default">
          <view class="item">
            <u-icon :size="40" name="server-fill"></u-icon>
            <view class="text">客服</view>
          </view>
        </button>
        <view class="item" @click="heartHouse">
          <u-icon v-if="!room.heart" :size="40" name="heart"></u-icon>
          <u-icon v-if="room.heart" :size="40" color="#ff9900" name="heart-fill"></u-icon>
          <view class="text">收藏</view>
        </view>
        <button class="clearBtn" open-type="share" style="font-size: 14px;color: #6a6a6a;"
                type="default">
          <view class="item">
            <u-icon :size="40" name="zhuanfa"></u-icon>
            <view class="text">分享</view>
          </view>
        </button>
      </view>
      <view class="right" @click="clickItem">
        <view class="btn">联系经纪人</view>
      </view>
    </view>
  </view>
</template>

<script>
import config from "@/common/config.js" // 全局配置文件
export default {
  data() {
    return {
      room: {
        villageName: '',
        houseNum: '',
        houseHall: '',
        toiletNum: '',
        roomType: '',
        direction: '',
        price: '',
        introduce: '',
        heart: false,
      },
      village: {
        year: '',
        type: '',
        green: '',
      },
      swiperlist: [],
      tagList: [],
      //评价列表
      evaluList: [],
      user: {},
      longitude: 120.14,
      latitude: 30.35,
      distance: 0,
      //自己的评论
      ownevalu: '',
      houseId: null,
      evalsize: 0,
      havem: false,
      evaluate: '',
      credt: ''
    }
  },
  onLoad: function (option) {
    let houseId = option.houseId //上个页面传递的参数。
    this.houseId = houseId
    // 渲染当前房源信息
    this.findHouseById(houseId);

    // // 在页面中定义激励视频广告
    // let videoAd = null
    // // 在页面onLoad回调事件中创建激励视频广告实例
    // if (wx.createRewardedVideoAd) {
    //   videoAd = wx.createRewardedVideoAd({
    // 	adUnitId: 'adunit-8cd5789a01a51891'
    //   })
    //   videoAd.onLoad(() => {
    // 	  console.log('激励视频 成功加载广告')
    //   })
    //   videoAd.onError((err) => {})
    //   videoAd.onClose((res) => {
    // 	  console.log('激励视频 成功关闭广告')
    //   })
    // }
    // // 用户触发广告后，显示激励视频广告
    // if (videoAd) {
    //   videoAd.show().catch(() => {
    // 	// 失败重试
    // 	videoAd.load()
    // 	  .then(() => videoAd.show())
    // 	  .catch(err => {
    // 		console.log('激励视频 广告显示失败')
    // 	  })
    //   })
    // }
  },
  methods: {
    heartHouse() {
      // 判断是否有userId
      let lifeData = uni.getStorageSync('lifeData');
      let vuex_user = lifeData.vuex_user
      if (!vuex_user) {
        // 没有userId 则跳转到登录
        return uni.reLaunch({
          url: '../login/login'
        })
      }
      // 收藏
      let url = "api/houseApi/saveHeart";
      this.$u.post(url, {
        heart: this.room.heart,
        houseId: this.room.id,
        userId: vuex_user.user.userId,
      }).then(result => {
        this.room.heart = !this.room.heart
        this.$mytip.toast(result.msg)
      });
    },
    goHome() {
      uni.reLaunch({
        url: '../index/index'
      })
    },
    clickItem() {
      //拨打固定电话
      uni.makePhoneCall({
        phoneNumber: this.room.agentPhone,
      });
    },
    findHouseById(houseId) {
      let url = "api/houseApi/findHouseById";
      this.$u.get(url, {
        id: houseId
      }).then(result => {
        let room = result.data
        if (room.type == 0) {
          room.type = '整租'
        } else if (room.type == 1) {
          room.type = '合租'
        }
        if (room.roomType == 1) {
          room.roomType = '主卧'
        } else if (room.roomType == 2) {
          room.roomType = '次卧'
        } else {
          room.roomType = '未知'
        }

        if (this.$u.test.isEmpty(room.houseNum)) {
          room.houseNum = ''
        }
        if (this.$u.test.isEmpty(room.houseHall)) {
          room.houseHall = ''
        }
        if (this.$u.test.isEmpty(room.toiletNum)) {
          room.toiletNum = ''
        }
        if (this.$u.test.isEmpty(room.floor)) {
          room.floor = ''
        } else {
          room.floor = room.floor + '层'
        }
        this.swiperlist = room.imageList.map(val => {
          let imgUrl = val.imgUrl
          if (!imgUrl.includes(config.staticUrl)) {
            imgUrl = config.staticUrl + val.imgUrl
          } else {
            imgUrl = val.imgUrl
          }
          return {
            title: val.imageName,
            image: imgUrl
          }
        })
        this.tagList = room.featureList.map(val => {
          return {
            title: val.feature,
          }
        })
        if (!room.agentAvatar.includes(config.staticUrl)) {
          room.agentAvatar = config.staticUrl + room.agentAvatar
        }
        this.user = room.user
        this.village = room.village
        this.room = room
        // 判断是否收藏
        this.selectHouseHeart(houseId);
        //查询房源评价
        this.selectHouseEvals(houseId);

        // 分享自定义标题与图片
        let shareTitle = ''
        if (room.type == '整租') {
          shareTitle = this.village.name + " " + this.room.houseNum + this.room.houseHall + this.room.toiletNum + " " + this.room.decoration + " ¥" + this.room.price + "/月"
        } else {
          shareTitle = this.village.name + " " + room.roomType + " " + this.room.decoration + " ¥" + this.room.price + "/月"
        }
        this.$u.mpShare = {
          title: shareTitle, // 默认为小程序名称，可自定义
          // 支持PNG及JPG，默认为当前页面的截图
          imageUrl: this.room.faceUrl,
        }

        // 添加到浏览历史
        let houseHistory = uni.getStorageSync('houseHistory')
        if (!houseHistory) {
          houseHistory = []
        }
        // 如果超过20个了，则删除最后一个
        if (houseHistory.length >= 20) {
          houseHistory.pop()
        }
        houseHistory.push(this.room)
        // 数据去重
        const keyArr = [];
        houseHistory.forEach((element, index) => {
          keyArr.push(element.code);  // 通过code来判断
        });
        const newArr = [];
        const newKey = new Set(keyArr);  // key去重
        newKey.forEach(item => {
          const index = keyArr.findIndex(item2 => item2 === item);
          newArr.push(houseHistory[index]);
        })
        uni.setStorageSync('houseHistory', newArr)

        // 经纬度
        this.longitude = room.longitude
        this.latitude = room.latitude
        // 计算距离
        let lat1 = 39.909
        let lng1 = 116.39742
        let lat2 = this.latitude
        let lng2 = this.longitude
        uni.getLocation({
          type: 'gcj02',
          success: res => {
            lat1 = res.latitude
            lng1 = res.longitude
            this.distance = this.getDistance(lat1, lng1, lat2, lng2);
          }
        })
      });
    },
    selectHouseHeart(houseId) {
      // 判断是否有userId
      let lifeData = uni.getStorageSync('lifeData');
      let vuex_user = lifeData.vuex_user
      if (vuex_user) {
        let url = "api/houseApi/selectHouseHeart";
        this.$u.get(url, {
          houseId: houseId,
          userId: vuex_user.user.userId,
        }).then(result => {
          this.room.heart = result.data
        });
      }
    },
    selectHouseEvals(houseId) {
      let url = "api/houseApi/selectHouseEvals";
      this.$u.get(url, {
        houseId: houseId,
        pageNum: 1,
        pageSize: 1
      }).then(result => {
        if (result.total > 0) {
          this.evaluate = result.rows[0].evaluate;
          if (this.evaluate.length > 30) {
            this.evaluate = this.evaluate.substring(0, 30) + "......";
          }
          this.credt = result.rows[0].createTime;
          this.havem = true;
          this.evalsize = result.total;
        }
      });
    },
    moreEval() {
      this.$u.route({
        url: '/pages/detail/evalList',
        params: {
          houseId: this.houseId
        }
      })
    },
    clickImg(index) {
      let imgArr = this.swiperlist.map(val => {
        return val.image
      })
      console.log(imgArr);
      // 预览图片
      uni.previewImage({
        current: index,
        urls: imgArr
      });
    },
    clickMap(e) {
      uni.openLocation({
        longitude: Number(this.longitude),
        latitude: Number(this.latitude),
        name: this.room.villageName,
        address: this.room.address
      })
    },
    getDistance(lat1, lng1, lat2, lng2) {
      lat1 = lat1 || 0;
      lng1 = lng1 || 0;
      lat2 = lat2 || 0;
      lng2 = lng2 || 0;
      var rad1 = lat1 * Math.PI / 180.0;
      var rad2 = lat2 * Math.PI / 180.0;
      var a = rad1 - rad2;
      var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
      var r = 6378137;
      var distance = r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2)));
      return (distance / 1000).toFixed(2);
    }
  }
}
</script>

<style>
/* page不能写带scope的style标签中，否则无效 */
page {
  background-color: rgb(255, 255, 255);
}
</style>


<style lang="scss" scoped>
map {
  width: 100%;
  height: 350 rpx;
}

.item {
  padding: 25 rpx;
  line-height: 80 rpx;
  margin-top: -30rpx;
}

.item-title {
  font-size: 42 rpx;
  color: $u-main-color;
  font-weight: bold;
}

.item-price {
  font-weight: normal;
  font-size: 45 rpx;
  color: $u-type-warning;
}

.item-desc {
  font-weight: normal;
  font-size: 36 rpx;
  color: $u-tips-color;
}

.arrow-right {
  position: absolute;
  top: 80 rpx;
  right: 28 rpx;
  font-weight: normal;
  font-size: 28 rpx;
  color: $u-tips-color;

  .phone {
    width: 90 rpx;
    height: 90 rpx;
    border-radius: 100%;
    box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.wayClass {
  color: #606266;
  padding: 30 rpx;
  line-height: 50 rpx;
}

.clearBtn {
  margin: 0;
  padding: 0;
  line-height: 1;
  background-color: #FFFFFF;
}

.clearBtn::after {
  position: unset !important;
  border: unset;
}

.navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 rpx 15 rpx;
  background-color: #ffffff;
  box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.05);
  z-index: 9999;

  .left {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 38 rpx;
    font-size: 14px;
    color: #6a6a6a;

    .item {
      display: flex;

      .text {
        margin-left: 4 rpx;
      }
    }
  }

  .right {
    display: flex;
    font-size: 28 rpx;
    align-items: center;

    .btn {
      line-height: 66 rpx;
      margin-left: 30 rpx;
      padding: 5 rpx 50 rpx;
      color: #ffffff;
      border-radius: 36 rpx;
      background-color: #2979ff;
    }
  }
}
</style>