massage-front/components/product/productCard.vue

<template>
  <view class="card flex product" :class="[direction]">
    <view class="img" :class="[ data.isRecommend ? 'is-recommend' : '']">
      <image :src="data.imgUrl" mode="aspectFill"></image>
      <image v-if="data.isRecommend" class="mark" src="@/static/image/home/mark-recommend.png"></image>
    </view>
    <view class="flex flex-column info">
      <view class="title">{{ data.title }}</view>
      <view>{{ data.desc }}</view>
      <view class="flex price" :class="[role]">
        <view>
          <text class="price-unit">¥</text>
          <text>{{ data.price }}</text>
        </view>

        <view class="flex tag" v-if="role === 'member-personal'">
          <image class="icon" src="@/static/image/home/icon-member-personal.png"></image>
          <text>个人会员价</text>
        </view>
        <view class="flex tag" v-else-if="role === 'member-business'">
          <image class="icon" src="@/static/image/home/icon-member-business.png"></image>
          <text>企业会员价</text>
        </view>

      </view>
      <view class="flex sales">
        <image class="icon" src="@/static/image/home/icon-sales.png"></image>
        <text>{{ `已售出 ${data.sales}单` }}</text>
      </view>
    </view>
    <button class="btn">立即下单</button>
  </view>
</template>

<script>
  const TEST_DATA = {
    imgUrl: '../../static/image/home/temp-product.png',
    title: '60分钟肩颈推拿按摩',
    desc: '疏通经络 放松肌肉',
    price: 264,
    sales: 235,
    isRecommend: true,
  }

	export default {
    props: {
      data: {
        type: Object,
        default() {
          // todo: delete
          return TEST_DATA
        }
      },
      direction: {
        type: String,
        default: 'horizontal' // horizontal | vertical
      }
    },
		data() {
			return {
        role: 'member-business', // member-personal | member-business
      }
    }
  }
</script>

<style scoped lang="scss">
.product {
  margin-top: 20rpx;
  background-color: $uni-fg-color;
  color: #999999;
  font-size: 22rpx;

  .img {
    width: 164rpx;
    height: 164rpx;
    box-sizing: border-box;
    position: relative;

    image {
      width: 100%;
      height: 100%;
    }

    &.is-recommend {
      border: 3rpx solid $uni-color-light;

      .mark {
        position: absolute;
        top: 0;
        left: 0;
        width: 68rpx;
        height: 68rpx;
      }
    }
  }

  .info {
    flex: 1;
    align-items: flex-start;
    padding-left: 14rpx;
  }

  .title {
    color: #000000;
    font-size: 28rpx;
    font-weight: 700;
    margin-bottom: 7rpx;
  }

  .price {
    color: #FF2A2A;
    font-size: 30rpx;
    margin-top: 7rpx;
    align-items: flex-start;

    &-unit {
      font-size: 18rpx;
      margin-right: 3rpx;
    }

    .tag {
      font-size: 18rpx;
      font-weight: 700;
      padding: 9rpx 12rpx 9rpx 19rpx;
      margin-left: 4rpx;

      .icon {
        width: 27rpx;
        height: 19rpx;
        margin-right: 3rpx;
      }
    }

    &.member-personal {
      color: $uni-color-light;
      .tag {
        background-color: rgba($color: #D8FF8F, $alpha: 0.72);
      }
    }

    &.member-business {
      color: #FFB465;
      .tag {
        background-color: rgba($color: #FFFBC4, $alpha: 0.72);
      }
    }
  }

  .sales {
    justify-content: flex-start;
    margin-top: 8rpx;

    .icon {
      width: 19rpx;
      height: 23rpx;
      margin-right: 4rpx;
    }
  }

  .btn {
    border: none;
    background-color: $uni-color-light;
    color: $uni-text-color-inverse;
    font-size: 22rpx;
    line-height: 1;
    padding: 14rpx 28rpx;
    box-sizing: border-box;
    width: auto;
    height: auto;
    border-radius: 29rpx;
  }

  &.horizontal {
  }
}
</style>