shop-pc/pages/account/index/home/index.vue

<!--
 * @Author: ch
 * @Date: 2022-05-04 17:27:37
 * @LastEditors: ch
 * @LastEditTime: 2022-05-04 17:27:39
 * @Description: file content
-->

<template>
  <div class="account-home">
    <div class="account-home-head flex">
      <div
        class="account-home-head__info flex"
        :style="{ backgroundImage: `url(${userInfoBkg})` }"
      >
        <img class="home-head-info__avatar" :src="userInfo.avatar" />
        <div class="home-head-info__wrap">
          <span class="head-info-wrap__title">{{ userInfo.nickname }}</span>
          <span>第一个青春是上帝给的...</span>
        </div>
      </div>
      <div class="account-home-head__order flex flex-middle flex-between">
        <div
          v-for="(item, index) in orderTypes"
          :key="index"
          class="account-home-content__item flex flex-column flex-middle"
        >
          <img :src="item.icon" />
          <span>{{ item.label }}</span>
        </div>
      </div>
    </div>
    <div class="account-home-content"></div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { ORDER_STATUS } from "@/constants";

export default {
  name: "AccountHome",
  data() {
    function getOrderTypeIcon(path) {
      return require(`~/assets/img/account/home/${path}.png`);
    }
    return {
      userInfoBkg: require("~/assets/img/account/home/bkg-user-info.png"),
      orderTypes: [
        {
          label: "待付款",
          icon: getOrderTypeIcon("icon-order1"),
          path: `/account/order/list?type=${ORDER_STATUS.WAIT_PAY}`,
        },
        {
          label: "待发货",
          icon: getOrderTypeIcon("icon-order2"),
          path: `/account/order/list?type=${ORDER_STATUS.WAIT_SEND}`,
        },
        {
          label: "待收货",
          icon: getOrderTypeIcon("icon-order3"),
          path: `/account/order/list?type=${ORDER_STATUS.WAIT_RECEIVE}`,
        },
        {
          label: "退款/售后",
          icon: getOrderTypeIcon("icon-order4"),
          path: "/account/order/saleAfter",
        },
        {
          label: "全部订单",
          icon: getOrderTypeIcon("icon-order5"),
          path: "/account/order/list",
        },
      ],
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
};
</script>
<style lang="scss" scoped>
.account-home {
  .account-home-head {
    margin-bottom: 30px;
    .account-home-head__info {
      width: 338px;
      height: 164px;
      background-size: 100% 100%;
      padding: 49px 26px;
      .home-head-info__avatar {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        margin-right: 16px;
      }
      .home-head-info__wrap {
        color: #666666;
        font-size: 14px;
        .head-info-wrap__title {
          font-size: 20px;
          color: #333333;
          margin-bottom: 14px;
        }
        span {
          display: block;
        }
      }
    }
    .account-home-head__order {
      width: 630px;
      height: 164px;
      padding: 0 58px;
      background: #ffffff;
      border-radius: 4px;
      box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1);
      .account-home-content__item {
        font-size: 14px;
        color: #333333;
        text-align: center;
        img {
          width: 54px;
          height: 54px;
        }
      }
    }
  }
}
</style>