oms/src/views/audit/store/components/deliveryPrice.vue

<template>
  <div class="send-box">
    <div class="title-label">预计配送和预计费用</div>
    <div class="send-type">
      <el-popover
        v-for="(item,index) of data" :key="index"
        placement="top-start"
        width="200"
        trigger="hover">
        <div class="price-info">
          <div class="price-title">预估费用明细：</div>
          <div class="price-row freight">
            <span class="p-label">运费：</span>
            <span class="p-value">￥{{item.estimateFreight}}</span>
          </div>
          <div class="price-row">
            <span class="p-label">单价：</span>
            <span class="p-value">￥{{item.unitprice}}</span>
          </div>
          <div class="price-row">
            <span class="p-label">重量：</span>
            <span class="p-value">{{item.weight}}</span>
          </div>
          <div class="price-row">
            <span class="p-label">体积：</span>
            <span class="p-value">{{item.volume}}</span>
          </div>
          <div class="price-row">
            <span class="p-label">单位：</span>
            <span class="p-value">{{item.unit}}</span>
          </div>
        </div>
        <div slot="reference" class="send-item" :title="item.ruleName" :class="{'onSend':currentValue.id == item.id}" @click="priceHandle(index)" >
          <div class="label-name">{{item.ruleName}}</div>
          <div class="send-info">
            <div class="s-time">{{item.endTime}}前</div>
            <div class="send-price">￥{{item.estimateFreight}}</div>
          </div>
        </div>
      </el-popover>
      
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component({components:{}})
export default class DeliveryPrice extends Vue {
  @Prop()
  data?:Array<any>;

  @Prop()
  currentValue?:any;

  onIndex:any=null;
  mounted(){
   
  }
  priceHandle(index:number){
    // this.onIndex = item.id;
    this.$emit('prichChange',index)
  }

}
</script>
<style lang="scss" scoped>
.send-box{
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  padding-bottom: 0;
  background-color: rgba(255, 226, 160, 0.3);
  .title-label{
    font-size: 14px;
    padding-bottom: 8px;
  }
  .send-type{
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap:wrap;
    .send-item{
      width: 165px;
      box-sizing: border-box;
      border:solid 3px #999;
      border-radius: 6px;
      overflow: hidden;
      margin-right: 32px;
      cursor: pointer;
      margin-bottom: 16px;
      .label-name{
        background-color: #999;
        color: #FFF;
        font-size: 16px;
        font-weight: 700;
        padding: 2px 0 4px;
        text-align: center;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .send-info{
        padding: 8px 0;
        text-align: center;
        background-color: #FFF;
        .s-time{
          font-size: 14px;
          color: #1684FC;
          font-weight: 700;
        }
        .send-price{
          font-size: 20px;
          padding-top: 4px;
        }
      }
    }
    .send-item:hover,.onSend{
      border:solid 3px #1684FC;
      .label-name{
        background-color: #1684FC;
      }
    }
  }
}
</style>

<style lang="scss">
.price-info{
  width: 100%;
  color: #000;
  .price-title{
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 4px;
  }
  .price-row{
    width: 100%;
    display: flex;
    font-size: 12px;
    padding: 3px;
    // display: flex;
    // justify-content: space-between;
  }
  .freight{
    font-size: 14px;
    font-weight: 700;
  }
}
</style>