rebatedine-mini/src/components/orderCard.vue

<template>
  <view class="order-card-main"
        @click.stop="clickCard">
    <view class="u-flex">
      <view class="icon-shop-wh icon-shop"></view>
      <view class="shop-name u-m-l-8 u-line-1 line-34">{{value.shop_name}}</view>
      <view class="u-flex-1 u-text-right u-primary-color line-34">{{value.join_status | statusFilter}}</view>
    </view>
    <view class="u-flex u-m-t-16 u-p-b-24">
      <image class="order-img"
             :src="value.imgs | imgFilter(3)"
             lazy-load
             mode="aspectFill"></image>
      <view class="u-flex-1 u-m-l-16">
        <view class="u-font-28 line-40 bold">{{value.title}}</view>
        <!-- <block v-if="value.activity_type * 1 === 1">
          <view class="u-font-28 line-40 bold">返利：实付全返</view>
        </block>
        <block v-if="value.activity_type * 1 === 2">
          <view class="u-font-28 line-40 bold">返利：¥{{(value.rebate_amount / 100).toFixed(2)}}</view>
        </block> -->
        <!-- <view class="u-font-22 u-m-t-8 line-32 u-content-color">平台：{{value.plat_type | platTypeFilter}}</view> -->
        <view class="u-font-22 u-m-t-8 line-32 u-content-color">报名时间：{{value.created_at}}</view>
        <block v-if="value.join_status * 1 === 4">
          <view class="reson-text u-m-t-8 u-font-22 line-32 u-other-color u-line-1">驳回原因：{{value.reject_reason}}</view>
        </block>
      </view>
    </view>
    <view class="u-border-top u-p-t-16 u-p-b-16"
          v-if="value.join_status * 1 === 1 || value.join_status * 1 === 4">
      <block v-if="value.join_status * 1 === 1">
        <view class="u-flex u-row-right">
          <button class="cancel-btn u-font-24"
                  @click.stop="cancelSignUp"
                  v-if="!isExpire()">取消报名</button>
          <button class="submit-btn u-font-24 u-m-l-24"
                  @click.stop="submitResult">提交订单</button>
        </view>
      </block>
      <block v-if="value.join_status * 1 === 4">
        <view class="u-flex u-row-right">
          <button class="cancel-btn u-font-24"
                  open-type="contact"
                  @click.stop>联系客服</button>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default: () => { }
    }
  },
  methods: {
    isExpire () {
      const nowTime = this.$dayjs()
      const now = nowTime.format('HH:mm:ss')
      console.log(this.value)
      if (this.value.end_time < now) {
        return true
      }
      return false
    },
    clickCard () {
      this.$emit('click-card', this.value)
    },
    cancelSignUp () {
      this.$emit('cancel-sign-up', this.value)
    },
    submitResult () {
      this.$emit('submit-result', this.value)
    }
  },
  filters: {
    statusFilter (e) {
      const statusText = {
        1: '已报名',
        2: '已提交',
        3: '已结算',
        4: '已驳回',
        5: '已取消',
        6: '已过期'
      }
      return statusText[e] || ''
    },
    platTypeFilter (e) {
      const playType = {
        8: '饿了么',
        9: '美团'
      }
      return playType[e]
    }
  }
}
</script>

<style lang="scss" scoped>
.order-card-main {
  padding: 24px 24px 0;
  border-radius: 12px;
  background-color: #fff;
  .icon-shop-wh {
    width: 30px;
    height: 30px;
  }
  .shop-name {
    max-width: 512px;
  }
  .order-img {
    width: 108px;
    height: 108px;
    border-radius: 4px;
  }
  .reson-text {
    max-width: 426rpx;
  }
  .cancel-btn,
  .submit-btn {
    margin: 0;
    padding: 0;
    line-height: 48rpx;
    width: 144rpx;
    text-align: center;
    align-content: center;
    height: 48rpx;
    border-radius: 24rpx;
    background-color: #fff;
  }
  .cancel-btn {
    color: $u-main-color;
    &::after {
      content: '';
      display: flex;
      align-items: center;
      width: 200%;
      height: 200%;
      border: 2px solid $u-light-color;
      border-radius: 48px;
      box-sizing: border-box;
      pointer-events: none;
      transform-origin: 0 0;
    }
  }
  .submit-btn {
    color: $u-type-primary;
    &::after {
      content: '';
      display: flex;
      align-items: center;
      width: 200%;
      height: 200%;
      border: 2px solid $u-type-primary;
      border-radius: 48px;
      box-sizing: border-box;
      pointer-events: none;
      transform-origin: 0 0;
    }
  }
}
</style>