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.
shop-pc/pages/account/index/home/index.vue

187 lines
4.9 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"
@click="$router.push(item.path)"
class="account-home-content__item flex flex-column flex-middle"
>
<img :src="item.icon" />
<span>{{ item.label }}</span>
<div v-if="item.count > 0" class="account-home-content__item--count">
{{ item.count }}
</div>
</div>
</div>
</div>
<div class="account-home-content flex">
<LogisitcsInfo />
<Message />
</div>
</div>
</template>
<script>
import { mapState } from "vuex";
import { ORDER_STATUS } from "@/constants";
import {
ApiGetOrderStatistics,
ApiGetRefundStatistisc,
} from "@/plugins/api/order";
import LogisitcsInfo from "./module/LogisitcsInfo.vue";
import Message from "./module/Message.vue";
export default {
name: "AccountHome",
components: { LogisitcsInfo, Message },
data() {
function getOrderTypeIcon(path) {
return require(`~/assets/img/account/home/${path}.png`);
}
return {
userInfoBkg: require("~/assets/img/account/home/bkg-user-info.png"),
orderTypes: [
{
key: "unpaidCount",
label: "待付款",
icon: getOrderTypeIcon("icon-order1"),
path: `/account/order/list?type=${ORDER_STATUS.WAIT_PAY}`,
count: 0,
},
{
key: "waitDeliveryCount",
label: "待发货",
icon: getOrderTypeIcon("icon-order2"),
path: `/account/order/list?type=${ORDER_STATUS.WAIT_SEND}`,
count: 0,
},
{
key: "deliveredCount",
label: "待收货",
icon: getOrderTypeIcon("icon-order3"),
path: `/account/order/list?type=${ORDER_STATUS.WAIT_RECEIVE}`,
count: 0,
},
{
key: "progressCount",
label: "退款/售后",
icon: getOrderTypeIcon("icon-order4"),
path: "/account/order/saleAfter/list",
count: 0,
},
{
key: "",
label: "全部订单",
icon: getOrderTypeIcon("icon-order5"),
path: "/account/order/list",
},
],
};
},
computed: {
...mapState(["userInfo"]),
},
created() {
this.getOrderStatisticsData();
},
methods: {
// 获取订单统计数据
async getOrderStatisticsData() {
const [{ result }, { result: resultRefund }] = await Promise.all([
ApiGetOrderStatistics(),
ApiGetRefundStatistisc(),
]);
const resultData = Object.assign({}, result, resultRefund);
this.orderTypes.forEach((item) => {
if (resultData[item.key] > 0) {
Object.assign(item, { count: resultData[item.key] });
}
});
},
},
};
</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;
margin-right: 30px;
.home-head-info__avatar {
width: 65px;
height: 65px;
border-radius: 50%;
margin-right: 16px;
object-fit: cover;
}
.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);
cursor: pointer;
.account-home-content__item {
position: relative;
font-size: 14px;
color: #333333;
text-align: center;
.account-home-content__item--count {
position: absolute;
top: -3px;
right: -3px;
width: 24px;
height: 24px;
font-size: 14px;
background: #ff512b;
color: #ffffff;
border-radius: 14px 14px 14px 14px;
border: 2px solid #ffffff;
}
img {
width: 54px;
height: 54px;
}
}
}
}
}
</style>