wenhuayun_index/src/components/page/AssetDetails.vue

<template>
  <div>
    <div class="asset">
      <div class="asset_banner">
        <el-carousel trigger="click" height="425px" ref="carousel">
          <el-carousel-item v-for="(item,index) in listingList.serial_img" :key="index">
            <img :src="item" alt="" class="asset_banner_img">
          </el-carousel-item>
        </el-carousel>
        <div class="asset_banner1">
          <img :src="item" alt="" v-for="(item,index) in listingList.serial_img" :key="index" @click="setActiveItem(index)">
        </div>
      </div>

      <div class="asset_info">
        <p class="asset_info_title">{{listingList.serial_name}}</p>
        <p class="asset_info_p">
          <span>评估价格：</span>
          <span class="asset_info_span">¥ {{listingList.cartellino_type==1 ? listingList.price: listingList.start_auction_money}}</span>
        </p>
        <p class="asset_info_p">
          <span>资产类型：</span>
          <span class="asset_info_span1">{{listingList.asset_name}}</span>
        </p>
        <p class="asset_info_p">
          <span>所在地：</span>
          <span class="asset_info_span1">{{listingList.address_name}}</span>
        </p>
        <p class="asset_info_p">
          <span>交易方式：</span>
          <span class="asset_info_span1">{{listingList.buy_mode==1 ? '线下交易' : '线上交易'}}（{{listingList.goods_mode==1? '现场交付' :'物流配送'}}）</span>
        </p>
        <p class="asset_info_p">
          <span>有效日期：</span>
          <span class="asset_info_span1">{{listingList.endtime}} 前</span>
        </p>
        <p class="asset_info_p">
          <span>数量：</span>
          <el-input v-model="listingList.pay_count" placeholder="请输入标的所在地" class="seach_input" ></el-input>
          <span class="asset_info_span2">{{listingList.asset_unit}}（可购数量{{listingList.surplus_count}}{{listingList.asset_unit}}）</span>
        </p>
        <p class="asset_info_p1">浏览记录 {{listingList.views}}次</p>
        <div class="asset_info_button">
          <button class="purchase" @click="checkBuy">立即购买</button>
          <button class="collection">放入收藏</button>
        </div>
      </div>
    </div>

    <div class="asset1">
      <div class="asset1_title">
        <div class="asset1_title_item">标的物介绍</div>
        <div class="asset1_title_item">资产评估报告</div>
        <div class="asset1_title_item">购买须知</div>
        <div class="asset1_title_item">历史评价</div>
      </div>
      <div class="asset1_content">{{listingList.serial_content}}</div>
    </div>
  </div>
</template>
<script>
import {assetInfo,checkBuy} from '../../api/index'
export default {
  data(){
    return{
      number:1,
      query:{
        id:'',
        count:''
      },
      listingList:{}
    }
  },
  created(){
    this.query.id=this.$route.query.id
    this.getData()
  },
  methods:{
    checkBuy(){
      this.query.count=this.listingList.pay_count
      checkBuy(this.query).then(res => {
        console.info(res)
        if(res.code==100){
          this.$router.push({path:'/order/confirmOrder',query:{step:0}})
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    getData(){
      assetInfo(this.query).then(res => {
        console.info(res)
        if(res.code==100){
          this.listingList=res.data;
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    setActiveItem(index){
      this.$refs.carousel.setActiveItem(index)
    }
  }
}
</script>
<style scoped>
  .asset{
    width: 100%;
    border: 1px solid #CCCCCC;
    height: 585px;
    margin-top: 20px;
    padding: 10px;
    display: flex;
  }
  .asset1{
    width: 100%;
    border: 1px solid #CCCCCC;
    padding-bottom: 15px;
    margin-top: 20px;
  }
  .asset_banner{
    width: 624px;
    height: 425px;
  }
  .asset_banner_img{
    width: 100%;
    height: 100%;
  }
  .asset_banner1{
    width: 624px;
    height: 108px;
    margin-top: 20px;
    display: flex;
    /* justify-content: space-between; */
  }
  .asset_banner1 img{
    width: 147px;
    height: 100%;
    margin-right: 20px;
  }
  .asset_info{
    margin-left: 20px;
    padding-top: 15px;
  }
  .asset_info_title{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 60px;
  }
  .asset_info_p{
    font-size: 18px;
    color: #7F7F7F;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
  }
  .asset_info_span{
    font-size: 36px;
    color: #C94C4C;
  }
  .asset_info_span1{
    color: #333333;
    font-weight: bold;
  }
  .asset_info_span2{
    color: #333333;
  }
  .seach_input{
    width: 180px;
    height: 40px;
    border: 1px solid #CCCCCC;
    margin-left: 15px;
    margin-right: 5px;
  }
  .seach_input>>>.el-input__inner{
    border: none;
    padding-left: 5px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
  }
  .asset_info_p1{
    font-size: 14px;
    color: #7F7F7F;
  }
  .asset_info_button{
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 53px;
  }
  .asset_info_button button{
    width: 240px;
    height: 100%;
    border-radius: 2px;
    font-size: 16px;
  }
  .purchase{
    color: white;
    background-color: rgba(201, 76, 76, 1);
    border: none;
  }
  .collection{
    background-color: rgba(233, 173, 133, 1);
    border: 1px solid rgba(201, 76, 76, 1);
    color: rgba(201, 76, 76, 1);
  }
  .asset1_title{
    height: 70px;
    border-bottom: 1px solid #ADADAD;
    display: flex;
  }
  .asset1_title_item{
    height: 100%;
    width: 160px;
    font-size: 22px;
    color: #C94C4C;
    border-right: 1px solid #ADADAD;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
  }
  .asset1_content{
    padding: 20px ;
  }
</style>