health-front/pages_order/product/productCard.vue

<template>
  <view class="card product-card__view" :style="cardStyle" @click="jumpToProductDetail">
    <view class="card-img flex" :style="imgStyle">
      <image class="img" :src="data.url" mode="scaleToFill"></image>
    </view>
    <view class="card-detail">
      <view class="product-name">{{ data.name }}</view>
      <view class="product-sales" v-if="data.sales">{{ `已售出${data.sales}+单` }}</view>
      <view class="flex product-price">
        <view>
          <view class="product-price-val">
            <text>¥</text>
            <text class="highlight">{{ data.price }}</text>
            <text>/份</text>
          </view>
          <view class="product-price-bef">
            {{ `¥${data.originalPrice}/份` }}
          </view>
        </view>
        <button class="btn flex" @click.stop="onAddCart(data.id)">
          <image class="btn-img" src="@/pages_order/static/report/plus.png" mode="widthFix"></image>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        },
      },
      cardStyle: {
        type: String,
        default: '',
      },
      imgStyle: {
        type: String,
        default: '',
      }
    },
    methods: {
      onAddCart(id) {
				this.$store.commit('addCart', this.data)
      },
      jumpToProductDetail() {
        this.$utils.navigateTo(`/pages_order/product/productDetail?id=${this.data.id}`)
      },
    },
  }
</script>

<style scoped lang="scss">
.card {
  font-size: 0;
  height: 420rpx;
  background-image: linear-gradient(#FAFAFF, #F3F3F3);
  border: 2rpx solid #FFFFFF;
  border-radius: 32rpx;
  overflow: hidden;

  &-img {
    width: 100%;
    height: 220rpx;

    .img {
      width: 100%;
      height: 100%;
    }
  }

  &-detail {
    padding: 16rpx 24rpx 0 24rpx;

    .product {
      &-name {
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 28rpx;
        line-height: 1.4;
        color: #000000;
      }

      &-sales {
        margin-top: 8rpx;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        line-height: 1;
        color: #8B8B8B;
      }

      &-price {
        margin-top: 16rpx;
        justify-content: space-between;

        &-val {
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 24rpx;
          line-height: 1.4;
          color: $uni-color;

          .highlight {
            font-size: 32rpx;
            margin: 0 8rpx;
          }
        }

        &-bef {
          margin-top: 4rpx;
          text-decoration: line-through;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          line-height: 1;
          color: #8B8B8B;
        }

        .btn {
          width: 56rpx;
          height: 56rpx;
          border-radius: 50%;
          background: $uni-color;

          &-img {
            width: 20rpx;
            height: 20rpx;
          }
        }
      }
    }
  }
}
</style>