settle_down_wx/pages/subPackages/peripheralService/detail.vue

<template>
    <div class="peripheralDetail">
        <div class="peripheralFirstBox">
          <div class="periTitle">{{detail.businessName}}<span class="periType">{{detail.typeName}}</span></div>
          <div class="periTime">更新时间：{{detail.releaseTime}}</div>
          <div class="periAddress">
            <span>地址：{{detail.businessAddress}}</span>
            <img src="../parkActivity/image/dhIcon.png" class="dhIcon" @tap="searchAddress(detail.businessAddress)">
          </div>
          <div class="contactBox">
          <span class="contackLeft">
            <span style="color: #666666;font-size: 28rpx">联系电话：</span>
            <span style="color: #18172A;font-size: 36rpx;font-weight: 600">{{detail.businessPhone}}</span>
          </span>
            <img src="https://www.idea-co-sf.com/gardenProduct/image/phoneIcon.png" class="phoneIcon" @tap="phoneCall(detail.businessPhone)">
          </div>
        </div>
      <div class="peripheralFirstBox" style="padding: 32rpx">
        <div class="periTitle" style="padding: 0 0 32rpx 0">简介</div>
<!--        <img src="https://www.idea-co-sf.com/gardenProduct/image/img1.png" class="firstImg"/>-->
        <div v-for="fit in detail.imageUrl" :key="fit">
          <img :src="fit" class="firstImg" />
        </div>
        <div class="perInfo" v-html="detail.introduction">
        </div>
      </div>
    </div>
</template>

<script>
import { peripheryGetById,getUserLocalStorageInfo,getByCodes } from "@/js_sdk/http";
export default {
  name: "detail",
  data(){
    return{
      getUserLocalStorageInfo: getUserLocalStorageInfo(),
      dc_key: ['periphery_type'],
      serviceList:[],
      detail:{}
    }
  },
  created(){
    this.getByCodes()
  },
  onLoad(item){
    console.log(item.id)
    this.getDetailById(item.id)
  },
  methods:{
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dc_key));
      this.dic_SelectList = this.$common.handleDicList(data);
      this.serviceList = this.dic_SelectList.periphery_type
    },
    phoneCall(phone){
      uni.makePhoneCall({
        phoneNumber: phone, // 需要拨打的电话号码
        success: function () {
          console.log('拨打电话成功！');
        },
        fail: function (err) {
          console.error('拨打电话失败：', err);
          // 可能的失败原因包括：用户拒绝、没有安装电话应用等
          uni.showToast({
            title: '拨打电话失败',
            icon: 'none'
          });
        }
      })
    },
    searchAddress(address){
      console.log(address)
      uni.getLocation({
        type: 'wgs84',
        geocode: true, // 是否解析地址为经纬度
        address: address,
        success: function (res) {
          console.log(res)
          const latitude = res.latitude; //待web端传经纬度
          const longitude = res.longitude;//待web端传经纬度
          uni.openLocation({
            latitude: latitude,
            longitude: longitude,
            address: address,
            // ...其他参数
          });
        },
        fail: function (error) {
          console.error('获取位置失败', error);
        }
      });
    },
    getDetailById(id) {
      const _this = this
      peripheryGetById({ id }).then((res) => {
        console.log(res.data)
        if (res.data) {
          const det = _this.getItemJson(res.data)
          this.detail = det
          this.star = Math.ceil((det.score == null ? 0 : det.score) / (det.evaluateNum == null ? 1 : det.evaluateNum))
        }
        // const item = _this.getItemJson(res)
      })
    },
    getItemJson: function(item) {
      item.releaseTime = this.$common.transDate(item.releaseTime)
      // item.type = this.dic_SelectList.periphery_type[item.type]
      let transformedObject = this.dic_SelectList.periphery_type.reduce((acc, obj) => {
        acc[obj.value] = obj.label;
        return acc;
      }, {'':'全部'});
      item.typeName = transformedObject[item.type]

      if (item.fileUrl && item.fileUrl.length > 2) {
        const files = JSON.parse(item.fileUrl)
        item.imageUrl = []
        files.forEach(itemm => {
          itemm.url = itemm.url.replace('server', 'smartParkH5Server')
          item.imageUrl.push(itemm.url)
        })
      }
      return item
    }
  }
}
</script>

<style lang="scss">
    .peripheralDetail{
      box-sizing: border-box;
       .peripheralFirstBox{
         margin: 24rpx 0;
         padding: 32rpx 0;
         background: white;
         box-sizing: border-box;
         .periTitle{
           color: rgba(34, 34, 34, 1);
           font-size: 32rpx;
           font-weight: 600;
           display: flex;
           align-items: center;
           padding: 0 32rpx;
           box-sizing: border-box;
           .periType{
             display: flex;
             align-items: center;
             justify-content: center;
             width: 92rpx;
             height: 48rpx;
             background: rgba(3, 101, 249, 0.20);
             color: rgba(3, 101, 249, 1);
             border-radius: 8rpx;
             font-size: 28rpx;
             font-weight: 500;
             margin-left: 24rpx;
           }
         }
         .periTime{
           font-size: 28rpx;
           color: rgba(102, 102, 102, 1);
           padding: 16rpx 32rpx;
           box-sizing: border-box;
         }
         .periAddress{
           display: flex;
           justify-content: space-between;
           align-items: center;
           font-size: 28rpx;
           color: rgba(102, 102, 102, 1);
           padding: 0 32rpx 32rpx 32rpx;
           box-sizing: border-box;
           .dhIcon{
             width: 36rpx;
             height: 36rpx;
             padding-left: 20rpx;
             border-left: 1px solid #E6E6E6;
           }
         }
         .contactBox{
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding:24rpx 32rpx 0 32rpx;
           border-top: 1px solid #E6E6E6;
           .contackLeft{
             display: flex;
             align-items: center;
           }
           .phoneIcon{
             width: 64rpx;
             height: 64rpx;
           }
         }
         .firstImg{
           width: 686rpx;
           height: 300rpx;
         }
         .perInfo{
           font-size: 28rpx;
           color: rgba(51, 51, 51, 1);
           line-height: 50rpx;
           margin-top: 24rpx;
         }
       }
    }
</style>