settle_down_wx/pages/subPackages/aboutThePark/index.vue

<template>
    <div class="aboutThePark">
       <div class="whiteBoard">
         <div class="parkBgBox">
           <swiper :indicator-dots="false" circular style="height: 320rpx;position: relative" autoplay>
             <swiper-item v-for="item in briefImg">
               <img :src="item.url" class="testImg"/>
             </swiper-item>
           </swiper>
         </div>
<!--          <img  :src="briefImg.url" class="testImg">-->
         <div class="info" v-html="form.content">
         </div>
       </div>
       <div class="whiteBoard">
         <div class="detailLi">
          <span class="liName">
            <span class="callName">招商电话：</span>
            <span class="callNumber">{{ form.attractPhone }}</span>
          </span>
           <img src="https://www.idea-co-sf.com/gardenProduct/image/phoneIcon.png" class="phoneIcon" @tap="call">
         </div>
       </div>
    </div>
</template>

<script>
import { getByGroupId } from "../../../js_sdk/http";

export default {
  name: "index",
  data(){
    return{
      briefImg: [],
      form:{

      }
    }
  },
  mounted(){
    this.getById()
  },
  onLoad(options){

  },
  methods:{
    getById(){
      const data = {
        groupId : JSON.parse(uni.getStorageSync('selectGroup')).groupId
      }
      getByGroupId(data).then((res)=>{
        this.form = res
        this.briefImg = JSON.parse(res.briefImg)
        console.log('this.briefImg',this.briefImg)
      })
    },
    call(){
      uni.makePhoneCall({
        phoneNumber: this.form.attractPhone, // 电话号码
        success: function () {
          console.log('拨打电话成功');
        },
        fail: function () {
          console.log('拨打电话失败');
        }
      });
    }
  }
}
</script>

<style lang="scss">
    .aboutThePark{
      .whiteBoard{
        background: white;
        margin: 24rpx 0;
        padding: 24rpx;
        .testImg{
          width: 702rpx;
          height: 300rpx;
        }
        .info{
          color: #333333;
          font-size: 28rpx;
          line-height: 42rpx;
          margin: 24rpx 0;
          word-wrap: break-word;
        }
        .detailLi{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .liInfo{
            display: inline-block;
            text-align: right;
            max-width: 428rpx;
            color: rgba(102, 102, 102, 1);
            font-size: 32rpx;
            line-height: 38rpx;
            overflow: hidden;
            word-wrap: break-word;
          }
          .callNumber{
            color: rgba(24, 23, 42, 1);
            font-size: 36rpx;
            font-weight: 600;
          }
          .callName{
            color: rgba(102, 102, 102, 1);
            font-size: 28rpx;
          }
        .phoneIcon{
          width: 64rpx;
          height: 64rpx;
        }
        }
      }
    }
</style>