wx-qhb/pages/mine/component/mallOrderForm.vue

<template>
  <!-- 商城订单 -->
  <view class="mall">
    <view class="mall-top">
      <text class="mall-title">{{ i18n.mallOrders }}</text>
      <view class="all" @click="toOrderFrom('')">
        <text>{{ i18n.whole }}</text>
        <image
          class="right"
          src="../../../static/mine/right.png"
          mode=""
        ></image>
      </view>
    </view>
    <view class="order-form">
      <view class="icon-center" @click="toOrderFrom('unpaid')">
        <image
          class="form-icon"
          src="../../../static/mine/310.png"
          mode=""
        ></image>
        <view class="characters">{{ i18n.pendingPayment }}</view>
      </view>
      <view class="icon-center" @click="toOrderFrom('unreview')">
        <image
          class="form-icon"
          src="../../../static/mine/311.png"
          mode=""
        ></image>
        <view class="characters">{{ i18n.joiningGroups }}</view>
      </view>
      <view class="icon-center" @click="toOrderFrom('undelivered')">
        <image
          class="form-icon"
          src="../../../static/mine/312.png"
          mode=""
        ></image>
        <view class="characters">{{ i18n.toBeShipped }}</view>
      </view>
      <view class="icon-center" @click="toOrderFrom('delivered')">
        <image
          class="form-icon"
          src="../../../static/mine/313.png"
          mode=""
        ></image>
        <view class="characters">{{ i18n.toBeReceived }}</view>
      </view>
      <view class="icon-center" @click="toOrderFrom('refund')">
        <image
          class="form-icon"
          src="../../../static/mine/314.png"
          mode=""
        ></image>
        <view class="characters">{{ i18n.refund }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  methods: {
    toOrderFrom(num) {
      uni.navigateTo({
        url: `/pageC/orderForm/orderForm?followId=${num}`,
      });
    },
  },
};
</script>

<style lang="scss">
.mall {
  // height: 100px;
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  padding: 14px 0 ;
  margin-top: 10px;
  box-sizing: border-box;
  .mall-top {
    display: flex;
    justify-content: space-between;
    margin: 0 10px;
    .mall-title {
      font-size: 14px;
      color: #222;
      font-weight: 600;
    }
    .all {
      color: #333;
      font-size: 12px;
      display: flex;
      align-items: center;
      .right {
        width: 10px;
        height: 10px;
      }
    }
  }
  .order-form {
    display: flex;
    justify-content: space-between;  
    margin-top: 18px;
	padding: 0 30rpx;
	box-sizing: border-box;
    .icon-center {
      // width: 15%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      flex-direction: column;
      align-items: center;
	  flex: 1;
    }
    .form-icon {
      width: 24px;
      height: 22px;
    }
    .characters {
      color: #202020;
      font-size: 12px;
      margin-top: 10px;
	  text-align: center;
    }
  }
}
</style>