studytour-front/pages_order/center/orderCard.vue

<template>
  <view class="flex card cols">
    <view class="flex flex-column col" v-for="item in list" :key="item.id" @click="jumpToOrderList(item.index)">
      <view class="icon">
        <image class="icon-img" :src="item.icon" mode="scaleToFill"></image>
        <view class="flex sup" v-if="item.value">{{ item.value }}</view>
      </view>
      <view class="label">{{ item.label }}</view>
    </view>

    <servicePopup ref="servicePopup"></servicePopup>
  </view>
</template>

<script>
	import { mapState } from 'vuex'

	import servicePopup from '@/components/base/servicePopup.vue'

  export default {
    components: {
      servicePopup,
    },
    data() {
      return {
      }
    },
    computed: {
			...mapState(['userCenterData']),
      list() {
        return [
          // 订单状态 0待支付 1已支付 2已完成
          { id: '001', label: '待支付', value: this.userCenterData.orderStatus0 || 0, index: 1, icon: '/pages_order/static/center/order-1.png' },
          { id: '002', label: '已支付', value: this.userCenterData.orderStatus1 || 0, index: 2, icon: '/pages_order/static/center/order-2.png' },
          { id: '003', label: '已完成', value: this.userCenterData.orderStatus2 || 0, index: 3, icon: '/pages_order/static/center/order-3.png' },
          { id: '004', label: '售后', index: 4, value: 0, icon: '/pages_order/static/center/order-4.png' },
          { id: '005', label: '全部', index: 0, icon: '/pages_order/static/center/order-5.png' },
        ]
      }
    },
    methods: {
      jumpToOrderList(index) {
        if (index === 4) { // 售后
          this.$refs.servicePopup.open()
          return
        }
        this.$utils.navigateTo(`/pages_order/order/orderList/index?index=${index}`)
      }
    },
  }
</script>

<style scoped lang="scss">
@import './styles/card.scss';

.card {
  padding: 32rpx;
  column-gap: 16rpx;
}

.icon {
  position: relative;
  width: 48rpx;
  height: 48rpx;

  &-img {
    width: 100%;
    height: 100%;
  }

  .sup {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    min-width: 32rpx;
    height: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    line-height: 1.3;
    color: #FFFFFF;
    background: #F53F3F;
    border-radius: 32rpx;
  }
}

.label {
  margin-top: 12rpx;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  line-height: 1;
  color: #252545;
}

</style>