nsgk_mobile/src/views/agriculturalTrusteeship/insurance/insuranceProjectDetail.vue

<template>
  <div class="home_wrapper">
    <!--  头部开始  -->
    <div class="header">
      <div class="header_left" @click="onClickLeft">
        <img src="../../../../static/images/agriculturalTrusteeship/return.png">
      </div>
      <div class="header_right" @click="onClickLeft">
        <img src="../../../../static/images/agriculturalTrusteeship/share.png">
      </div>
    </div>
    <!--  头部结束  -->

    <!--  内容开始  -->
    <div class="main">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in product.mainImgList" :key="index"><img :src="item"></van-swipe-item>
      </van-swipe>

      <div class="main_content">
        <p class="tt">{{product.productName}}</p>
        <p class="name">{{product.financialName}}</p>
      </div>

      <div class="main_box">
        <van-cell title="产品类型" :border="false" :value="product.productType" />
        <van-cell title="联系人" :border="false" :value="product.financialService.linker" />
        <van-cell title="联系方式" :border="false" :value="product.financialService.phone" />
        <van-cell title="产品描述" :border="false" :value="product.productLink" />
        <van-cell title="发布日期" :border="false" :value="product.releaseDate" />
      </div>
    </div>
    <!--  内容结束  -->

  </div>
</template>
<script>
  import Cookies from "js-cookie";
  import {productGet} from "@/api/agriculturalTrusteeship";
  export default {
    name: "agriculturalTrusteeshipInsuranceDetail",
    data() {
      return {
        activeKey: 0,
        active: 0,
        loading: false,
        finished: false,
        product:{
          financialService:{
            linker:''
          }
        }
      };
    },
    created() {

      this.getDetail();
    },
    methods: {
      getDetail(){
        productGet(this.$route.query.id).then(response => {
          if (response.data.mainImg){
            response.data.mainImgList = [];
            var attachement = response.data.mainImg.split( "," );
            attachement.forEach(responseAttach=>{
              response.data.mainImgList.push({
                url:'/api' + responseAttach,
                isImage: true
              });
            })
          }
          var that = this ;
          that.product = response.data;
        });
      },
    },
  }
</script>
<style scoped lang="scss">
.home_wrapper{

}
  /*头部*/
  .header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2vh 4% 2vh;
    position: absolute;
    top: 0;
    z-index: 99999999;
    width: 100%;
    .header_left{
      display: flex;
      align-items: center;
      p{
        font-size: .4rem;
        color: #ffffff;
        line-height: 1;
        margin-left: 10PX;
      }
    }
    .header_right{

    }
  }

  /* 内容 */
  .main{
    .my-swipe{
      height: 250PX;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      text-align: center;
    }
    .main_content{
      background: #ffffff;
      padding: 2vh 4%;
      width: 92%;
      margin: 0 auto;
      border-radius: 10PX;
      margin-top: 2vh;
      box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
      .tt{
        font-size: .4rem;
        margin-bottom: 10PX;
      }
      .name{
        color: #4E7FFF;
        background: url("../../../../static/images/agriculturalTrusteeship/index/name_icon.png") no-repeat left center;
        padding-left: 18PX;
      }
    }
    .main_box{
      width: 92%;
      margin: 0 auto;
      margin-top: 2vh;
      border-radius: 10PX;
      box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
      overflow: hidden;
      background-color: #FFF;
      padding: 2vh 4%;
      /deep/ .van-cell{
        padding: 0;
        margin-bottom: 10PX;
        &:last-child{
          margin-bottom: 0;
        }
      }
    }
  }
</style>