massage-front/components/product/productCard.vue

<template>
  <view class="card flex product product-card__view" :class="[direction, size]" @click="$emit('click')">
    <view class="img" :class="[ isRecommend ? 'is-recommend' : '']">
      <image :src="data.image" mode="aspectFill"></image>
      <image v-if="isRecommend" class="mark" src="@/static/image/home/mark-recommend.png"></image>
    </view>
    <view class="flex right">
      <view class="flex flex-column info">
        <view class="title">{{ data.title }}</view>
        <!-- todo: check -->
        <view class="text-ellipsis">{{ getDesc(data.details) }}</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>
      <template v-if="!readonly">
        <button plain class="btn" @click="goToPlaceOrder(data.id)">立即下单</button>
      </template>
    </view>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'

	export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      },
      direction: {
        type: String,
        default: 'horizontal' // horizontal | vertical
      },
      size: {
        type: String,
        default: 'small' // small | medium
      },
      readonly: {
        type: Boolean,
        default: false,
      },
    },
		data() {
			return {
      }
    },
    computed: {
			...mapGetters(['role']),
      isRecommend() {
        return this.data.isHot === '1'
      }
    },
    methods: {
      goToPlaceOrder(id) {
        this.$utils.navigateTo(`/pages_order/product/productDetail?id=${id}`)
      },
			getDesc(str) {
				if (!str) {
					return ''
				}

				return str.replace(/<.*?>/g, '')
			},
    },
  }
</script>

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

  .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;
    display: inline-flex;
    align-items: flex-start;
    box-sizing: border-box;
  }

  .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 {
    white-space: nowrap;
    display: inline-block;
    margin: 0 0 0 10rpx;
    border: none !important;
    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;
  }

  .right {
    flex: 1;
    padding-left: 14rpx;
  }

  &.vertical {
    padding: 23rpx 22rpx;

    .right {
      width: calc(100% - 212rpx);
      flex-direction: column; 
      align-items: flex-start;     
      padding-left: 23rpx;

      .text-ellipsis {
        width: 100%;
      }
    }

    .info {
      width: 100%;
    }

    .img {
      width: 212rpx;
      height: 212rpx;
      border-radius: 15rpx;
      overflow: hidden;
    }

    .price {
      .tag {
        margin-left: 15rpx;
      }
    }

    .btn {
      margin-top: 4rpx;
      background-image: linear-gradient(#84A73F, #D8FF8F);
      padding: 12rpx 28rpx;
      border-radius: 10rpx;
    }
  }

  &.medium {
    padding: 27rpx 25rpx;
    width: 100%;
    box-sizing: border-box;
    
    .img {
      width: 184rpx;
      height: 184rpx;
    }

    .title {
      margin-bottom: 14rpx;
    }

    .price {
      margin-top: 15rpx;
    }

    .sales {
      margin-top: 15rpx;
    }
  }
}
</style>