rebatedine-mini/src/components/activityCard.vue

<template>
  <view class="activity-card-main u-flex u-col-top"
        @click.stop="clickCard">
    <image class="card-image"
           lazy-load
           :src="value.imgs | imgFilter(2)"
           mode="aspectFill"></image>
    <view class="u-flex-1 u-m-l-16 u-p-t-4">
      <view class="card-title u-font-28 bold u-line-1">{{value.title}}</view>
      <view class="card-desc u-flex u-content-color u-m-t-4 u-m-b-12">
        <view>平台：{{value.plat_type | platFilter}}</view>
        <view class="u-font-22 line-32 u-flex-1">（{{value.start_time | timeFilter(this)}}---{{value.end_time | timeFilter(this)}}）</view>
        <view v-if="value.distance">{{(value.distance / 1000).toFixed(1)}}km</view>
        <view v-else>距离&gt;99km</view>
      </view>
      <view class="card-footer u-flex u-col-bottom">
        <view class="u-flex-1 u-col-bottom">
          <view class="u-content-color u-p-b-12">{{value.activity_type === 2 ? '门槛:' + (value.floor_price / 100).toFixed(2) + '元' : ''}}</view>
          <view class="u-flex u-flex-1 u-col-bottom">
            <view class="u-content-color line-34">返利</view>
            <block v-if="value.activity_type * 1 === 1">
              <view class="u-m-l-8 u-primary-color u-font-32 line-44 bold">实付全返</view>
            </block>
            <block v-if="value.activity_type * 1 === 2">
              <view class="u-m-l-8 u-flex u-col-bottom">
                <text class="u-primary-color u-font-24 line-34 bold">¥</text>
                <text class="u-primary-color u-font-36 line-44 bold">{{(value.rebate_amount / 100).toFixed(2)}}</text>
              </view>
            </block>
          </view>
        </view>
        <view>
          <block v-if="status * 1 === 1">
            <view class="u-primary-color u-text-center u-font-20 line-28">剩余{{value.join_count - value.join_number}}</view>
            <button class="join-btn u-m-t-2 u-font-22 line-32"
                    @click.stop="signUp">参与报名</button>
          </block>
          <block v-if="status * 1 === 2">
            <image class="already-img"
                   src="../static/common/icon_bq_ybm.png"
                   @click.stop="clickYBM"></image>
          </block>
          <block v-if="status * 1 === 3">
            <image class="already-img"
                   src="../static/common/icon_bq_yqg.png"
                   @click.stop="clickYQG"></image>
          </block>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    status () {
      if (this.value.join_status === 1 || this.value.join_status === 2 || this.value.join_status === 3 || this.value.join_status === 4) {
        return 2
      } else if (this.value.join_count === this.value.join_number) {
        return 3
      } else {
        return 1
      }
    }
  },
  methods: {
    clickCard () {
      this.$emit('click-card', this.value)
    },
    signUp () {
      this.$emit('sign-up', this.value)
    },
    clickYBM () {
      this.$emit('click-ybm', this.value)
    },
    clickYQG () {
      this.$emit('click-yqg', this.value)
    }
  },
  filters: {
    platFilter (e) {
      const platText = {
        8: '饿了么',
        9: '美团'
      }
      return platText[e]
    },
    timeFilter (time, el) {
      return el.$dayjs(`${el.$dayjs().format('YYYY-MM-DD')} ${time}`).format('HH:mm')
    }
  }
}
</script>

<style lang="scss" scoped>
.activity-card-main {
  .card-image {
    width: 180px;
    height: 180px;
    border-radius: 12px;
  }
  .card-title {
    max-width: 498px;
    @include lineHeight(20px);
  }
  .card-desc {
    @include lineHeight(17px);
  }
  .join-btn {
    box-sizing: border-box;
    padding: 10px 16px;
    width: 120px;
    height: 50px;
    border-radius: 26px;
    color: #fff;
    background-color: $u-type-primary;
  }
  .already-img {
    width: 76px;
    height: 76px;
    vertical-align: bottom;
  }
}
</style>