You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
3.3 KiB
130 lines
3.3 KiB
<!--
|
|
* @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>
|