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

<template>
  <view class="list">
    <view class="merchant"
      ><image class="merchant-img" :src="goodsList.image" mode="scaleToFill" />
      <view class="merchant-name">{{ goodsList.merchant_name }}</view>
    </view>
    <view v-for="item in goodsList.order_goods" :key="item.id" class="detail">
      <image :src="item.sku_item.image" class="detail-img" mode=""></image>
      <view
        class=""
        style="
          flex-direction: column;
          justify-content: space-between;
          height: 184rpx;
          display: flex;
          flex: 1;
        "
      >
        <view class="">
          <text class="toptitle">{{ item.goods.name_cn }}</text>
          <view class="weight">{{ item.sku_item.item }} </view>
        </view>
        <view class="u-flex u-row-between">
          <view class="">
            <text class="money">¥</text>
            <text class="money" style="font-size: 34rpx">{{
              item.sku_item.price
            }}</text>
          </view>
          <view class=""> x {{ item.goods_num }}</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    //商品列表
    goodsList: {
      typeof: Array,
      default: () => {
        return [];
      },
    },
  },
};
</script>
<style scoped lang="scss">
.list {
  margin-top: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 28rpx 26rpx 36rpx 24rpx;
  .merchant {
    display: flex;
    justify-content: flex-start;
    .merchant-img {
      width: 38rpx;
      height: 38rpx;
      margin-right: 16rpx;
    }
    .merchant-name {
      font-size: 30rpx;
      color: #222;
    }
  }
  .detail {
    margin-top: 32rpx;
    display: flex;
    .detail-img {
      width: 184rpx;
      height: 184rpx;
      margin-right: 24rpx;
    }
  }
}
</style>