oms/src/views/oms/order/components/deliveryPrice.vue

<template>
  <div class="send-box">
    <div class="title-label">预计配送和预计费用</div>
    <div class="send-type">
      <!-- <div class="send-item onSend">
        <div class="label-name">整车配送</div>
        <div class="send-info">
          <div class="s-time">7月23 12：23前</div>
          <div class="send-price">￥16.00起</div>
        </div>
      </div> -->
      <div class="send-item" v-for="(item,index) of data" :key="index" :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>
    </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;
  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;
    .send-item{
      width: 156px;
      box-sizing: border-box;
      border:solid 3px #999;
      border-radius: 6px;
      overflow: hidden;
      margin-right: 32px;
      cursor: pointer;
      .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>