wx-qhb/pageD/newBulitOrder/component/goodsInformation.vue

<template>
  <view class="list">
    <!-- 商品相关 -->
    <view class="abount" style="margin-top: 20rpx">
      <view class="u-flex u-row-between" style="margin-bottom: 40rpx">
        <view class="name">{{ i18n.Commodityamount }}</view>
        <view class="money"> ¥{{ specificationsPrice }} </view>
      </view>
      <view class="u-flex u-row-between" v-if="containname">
        <view class="name">{{ i18n.Grosscommodityweight }}</view>
        <view class="money">{{ goodsWeight }}kg</view>
      </view>
<!--      <view class="back u-flex" v-if="containname">
        <image
          src="../../../static/images/warning.png"
          style="width: 32rpx; height: 32rpx"
          mode=""
        ></image>
        <text style="margin-left: 12rpx; font-size: 24rpx"
          >{{ i18n.buy }}{{ countGoodsInformation.max_weight }}kg{{
            i18n.price
          }}¥{{ countGoodsInformation.unit_fee }}，{{
            i18n.morefavorable
          }}</text
        >
      </view> -->
      <view
        class="u-flex u-row-between"
        style="margin-bottom: 40rpx; margin-top: 20rpx"
      >
        <view class="name">{{ i18n.Costperkilogram }}</view>
        <view class="money">{{
          containname ? countGoodsInformation.unit_price : i18n.shippingmethod
        }}</view>
      </view>
      <view class="u-flex u-row-between">
        <view class="name">{{ i18n.freight }}</view>
        <!-- 基础运费乘以公斤数，得出订单运费，最外层Number().toFixed(2)的作用，保留小数点后两位 -->
        <view class="money">{{  
          containname
            ? Number(countGoodsInformation.sum).toFixed(2)
            : i18n.shippingmethod
        }}</view>
      </view>
      <view class="zong u-flex u-row-right" v-if="false">
        <view class="">
          <text class="small">{{ i18n.subtotal }}</text>
          <text class="mon">¥</text>
          <text class="mon" style="font-size: 40rpx">{{
            specificationsPrice
          }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    goodinfo: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
    sku_info: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
    //货柜名称，用来判断是否已经选择货柜，显示选择货柜之后的内容
    containname: {
      typeof: String,
      default: "",
    },
    //商品价格
    goodsPrice: {
      typeof: String,
      default: "",
    },
    //选完货柜之后的商品信息
    countGoodsInformation: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
    //商品数量
    goodsValue: {
      typeof: Number,
      default: 0,
    },
    //商品重量
    goodsWeight: {
      typeof: Number,
      default: 0,
    },
    specificationsPrice: {
      typeof: Number,
      default: 0,
    },
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
};
</script>
<style scoped lang="scss">
.list {
  //商品相关
  .abount {
    padding: 28rpx 24rpx;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 16rpx;
    width: 702rpx;

    .zong {
      width: 654rpx;
      padding: 22rpx 0 0 0;
      border-top: 2rpx solid rgba(151, 151, 151, 0.1);
      margin-top: 32rpx;

      .small {
        font-family: PingFangTC, PingFangTC;
        font-weight: 400;
        font-size: 24rpx;
        color: #444444;
        line-height: 34rpx;
        text-align: left;
        font-style: normal;
      }

      .mon {
        font-family: HarmonyOS_Sans_Medium;
        font-size: 28rpx;
        color: #f83224;
        line-height: 38rpx;
        text-align: left;
        font-style: normal;
        margin-left: 12rpx;
        font-weight: bold;
      }
    }

    .back {
      background: rgba(244, 244, 244, 1);
      padding: 22rpx 16rpx;
      box-sizing: border-box;
      margin-top: 10rpx;
      // margin-bottom: 20rpx;
    }

    .name {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
    }

    .money {
      font-family: HarmonyOS_Sans_Medium;
      font-size: 28rpx;
      color: #222222;
      line-height: 38rpx;
      text-align: left;
      font-style: normal;
      font-weight: 600;
    }
  }
}
</style>