uniapp-shop-templates/pages_order/components/commodity/commoditySelect.vue

<template>
  <view style="">
    <view v-for="item in commodityList" :key="item.title" class="address-item">
      <view class="itme1" @click="selectSp(item)">
        <view class="left">
          <img src="../../../static/image/center/1.png" alt="" style="width: 100%;height: 100%;">
        </view>
        <view class="center">
          <view>{{ item.title }}</view>
          <view>{{ item.smallTitle }}</view>
        </view>
        <view class="right">×{{item.total}}</view>
      </view>
      <uv-line></uv-line>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    commodityList: {
      default: [],
      type: Array,
    }
  },
  data() {
    return {
      selectAddress: 0,
    }
  },
  methods: {
    // 打开商品选择
    openCommodity() {
      this.$emit('openSpPopup')
    },
    // 选择了商品
    selectSp(e) {
      console.log(this.commodityList,"this.csss")
      console.log(e, '选择了商品')
      this.$emit('selectSp', e)
    }
  }
}
</script>

<style scoped lang="scss">
.itme1 {
  display: flex;
  height: 150rpx;
  width: 100vw;
  background-color: #ffffff;

  .left {
    padding: 40rpx;
    width: 20%;
    border-radius: 10rpx;
    background-color: #ffffff;
  }

  .center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20rpx;
    width: 70%;
    padding: 0rpx 0 0 20rpx;
    background-color: #ffffff;

    // 给第一个 view 设置样式
    > view:first-of-type {
      font-size: 36rpx;
      color: #333;
    }

    // 给第二个 view 设置样式
    > view:nth-of-type(2) {
      font-size: 28rpx;
      color: #666666;
    }
  }

  .right {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10%;
    color: #666666;
    background-color: #ffffff;
  }
}

</style>