nsgk_mobile/src/views/agriculturalTrusteeship/socialization/projectDetail.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 supplyDemand.supplyMasterMapList" :key="index"><img :src="item"></van-swipe-item>
      </van-swipe>

      <div class="main_content">
        <div class="tab">
          <p>￥<span>{{supplyDemand.unitPrice}}</span>/{{supplyDemand.unit}}</p>
          <p><span>销 {{supplyDemand.orderNum}}</span><span>分 {{supplyDemand.orderScore}}</span></p>
        </div>
        <p class="tt">{{supplyDemand.supplyDemandName}}</p>
        <p class="name" @click="$router.push({name:'agriculturalTrusteeshipSocietyProjectList',query:{id:supplyDemand.entityId,entityName:supplyDemand.entityName}})">{{supplyDemand.entityName}}<span>{{supplyDemand.createTime}}</span></p>
      </div>

      <div class="main_box">
        <van-cell title="产品类型" :border="false" :value="supplyDemand.productType" />
        <van-cell title="产品规格" :border="false" :value="supplyDemand.specification" />
        <van-cell title="产品数量" :border="false" :value="supplyDemand.number" />
        <van-cell title="服务区域" :border="false" :value="supplyDemand.serviceDeptName" />
        <van-cell title="产品简介" :border="false" :value="supplyDemand.introduction" />
        <van-cell title="公司地址" :border="false" :value="supplyDemand.address" />
      </div>

      <div class="main_box">
        <van-cell title="联系人" :border="false" :value="supplyDemand.linker" />
        <van-cell title="联系方式" :border="false" :value="supplyDemand.supplyDemandTal" />
      </div>

      <div class="main_box" style="padding: 0;">
        <baidu-map :center="center" panBy="[50,50]" :zoom="zoom" :scroll-wheel-zoom="true" :pinch-to-zoom="true" map-type="BMAP_NORMAL_MAP" style="height:25vh" >
          <!-- 必须给容器指高度，不然地图将显示在一个高度为0的容器中，看不到 -->
          <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
          <bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" :icon="{url: '../../../../static/images/lawEnforcement/new/address.gif', size: {width: 50, height: 50}}"></bm-marker>
        </baidu-map>
      </div>
    </div>
    <!--  内容结束  -->

    <!--  底部提交按钮  -->
<!--    <div class="footer">-->
<!--      <p>温馨提示：下单前请先与商家沟通联系</p>-->
<!--      <img src="../../../../static/images/agriculturalTrusteeship/insurance/submit_shop_btn.png">-->
<!--    </div>-->
  </div>
</template>
<script>
  import Cookies from "js-cookie";
  import {productTypes, supplyDemandGet} from "@/api/agriculturalTrusteeship";
  export default {
    name: "agriculturalTrusteeshipInsuranceDetail",
    data() {
      return {
        activeKey: 0,
        active: 0,
        loading: false,
        finished: false,
        center: { lng: 122.089726, lat: 37.540728 }, //经纬度
        zoom: 15, //地图展示级别
        supplyDemand:{},
        projectTypeOptions:[],
        productList:[],
        productList1:[],
        demandTypeOptions:[],
        productTypeOptions:[],
        supplyMasterMapArr:[],
        bodyTypeOptions:[],
      };
    },
    created() {
      let query = {
        parentId : null,
        tree:true
      }
      let query1 = {
        parentId : null,
        tree : false
      }
      productTypes(query).then(response => {
        this.productList = response.data;
      });
      productTypes(query1).then(response => {
        this.productList1 = response.data;
      });
      this.getDicts("newBusinessEntity_statistics_project").then(response => {
        for (var i = 0; i < response.data.length; i++) {
          this.projectTypeOptions.push({text: response.data[i].dictLabel, value: response.data[i].dictValue});
        }
        this.bodyTypeOptions = response.data;
      });
      this.getDetail();
    },
    methods: {
      getDetail(){
        supplyDemandGet(this.$route.query.id).then(response => {
          response.data.bodyType = this.selectDictLabel(this.bodyTypeOptions, response.data.bodyType);
          response.data.productType = this.productList1.filter(function (e) { return e.id == response.data.productType; })[0].dictName;
          response.data.createTime = response.data.createTime.substr(0,10)
          if (response.data.supplyMasterMap){
            response.data.supplyMasterMapList = [];
            var attachement = response.data.supplyMasterMap.split( "," );
            this.supplyMasterMapArr = response.data.supplyMasterMap.split( "," );
            attachement.forEach(responseAttach=>{
              response.data.supplyMasterMapList.push('/api' + responseAttach);
            })
          }
          this.supplyDemand = response.data;
        });
      },
    },
  }
</script>
<style scoped lang="scss">
.home_wrapper{
  padding-bottom: 15vh;
}
  /*头部*/
  .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;
        display: flex;
        span{
          color: #334281;
          margin-left: auto;
          padding:0 0 0 18PX;
          background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_clock.png") no-repeat left center
        }
      }
      .tab{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10PX;
        p{
          &:nth-child(1){
            flex: 1;
            color: #FF5E00;
            span{
              font-size: .45rem;
            }
          }
          &:nth-child(2){
            span{
              display: inline-block;
              text-align: center;
              padding: 2PX 10PX;
              &:nth-child(1){
                color: #497CE8;
                background: #E2E9FD;
                border-top-left-radius: 10PX;
              }
              &:nth-child(2){
                color: #ffffff;
                background-image: linear-gradient(to right , #5D87FA , #5FD5F5);
                border-bottom-right-radius: 10PX;
              }
            }
          }
        }
      }
    }
    .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;
        }
      }
    }
  }

  .footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    padding: 1vh 4%;
    width: 100%;
    p{
      color: #989898;
      background: #F2F2F2;
      padding: 5PX 10PX;
      text-align: center;
      border-radius: 8PX;
    }
  }
</style>