346 lines
7.2 KiB
Vue
346 lines
7.2 KiB
Vue
<template>
|
|
<div>
|
|
<joyful-selection-profile-skeleton v-if="loading" />
|
|
<main v-else class="profile-page">
|
|
<section class="profile-hero">
|
|
<div class="profile-actions">
|
|
<van-icon name="setting-o" />
|
|
<van-icon name="ellipsis" />
|
|
</div>
|
|
<div class="user-row">
|
|
<van-image
|
|
round
|
|
width="52"
|
|
height="52"
|
|
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
|
|
/>
|
|
<div>
|
|
<b>张三</b>
|
|
<p>欢迎来到悦享优选</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="asset-card">
|
|
<van-image
|
|
width="64"
|
|
height="64"
|
|
fit="contain"
|
|
:src="require('@/assets/joyful-selection/profile/coins.png')"
|
|
/>
|
|
<div class="asset-info">
|
|
<small>我的积分</small>
|
|
<b>{{ formattedPoints }}</b>
|
|
</div>
|
|
<button class="points-link" type="button" @click="$router.push('/joyful-selection/points')">
|
|
<van-image
|
|
width="18"
|
|
height="18"
|
|
fit="contain"
|
|
:src="require('@/assets/joyful-selection/profile/gift.png')"
|
|
/>
|
|
<span>积分明细</span>
|
|
<van-icon name="arrow" />
|
|
</button>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<div class="panel-title">
|
|
<b>我的订单</b>
|
|
<span @click="$router.push('/joyful-selection/orders')">全部订单 <van-icon name="arrow" /></span>
|
|
</div>
|
|
<van-grid :column-num="4" :border="false">
|
|
<van-grid-item
|
|
v-for="item in orderItems"
|
|
:key="item.text"
|
|
:icon="item.icon"
|
|
:text="item.text"
|
|
:badge="orderBadge(item)"
|
|
@click="goOrders(item)"
|
|
/>
|
|
</van-grid>
|
|
</section>
|
|
|
|
<section class="panel service-panel">
|
|
<div class="panel-title"><b>我的服务</b></div>
|
|
<div class="coming-soon">
|
|
<van-image
|
|
width="104"
|
|
height="80"
|
|
fit="contain"
|
|
src="https://img.yzcdn.cn/vant/empty-image-default.png"
|
|
/>
|
|
<p>敬请期待</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapState } from 'pinia'
|
|
import { useUserStore } from '@/store/user'
|
|
import { postFunction } from '@/api/supplied-service'
|
|
import JoyfulSelectionProfileSkeleton from '@/skeleton-view/joyful-selection/profile/index.vue'
|
|
|
|
export default {
|
|
name: 'JoyfulSelectionProfile',
|
|
components: {
|
|
JoyfulSelectionProfileSkeleton
|
|
},
|
|
data: () => ({
|
|
loading: true,
|
|
orderItems: [
|
|
{ icon: 'balance-pay', text: '待付款', tab: 'pending-pay', badgeKey: 'pendingPay' },
|
|
{ icon: 'logistics', text: '待发货', tab: 'pending-ship' },
|
|
{ icon: 'send-gift-o', text: '待收货', tab: 'pending-receive', badgeKey: 'pendingReceive' },
|
|
{ icon: 'after-sale', text: '退款/售后', path: '/joyful-selection/after-sale', badgeKey: 'afterSale' }
|
|
],
|
|
orderCounts: {
|
|
pendingPay: 0,
|
|
pendingReceive: 0,
|
|
afterSale: 0
|
|
}
|
|
}),
|
|
computed: {
|
|
...mapState(useUserStore, ['pointsBalance', 'supplierId', 'userId']),
|
|
formattedPoints() {
|
|
return Number(this.pointsBalance || 0).toLocaleString('zh-CN', {
|
|
maximumFractionDigits: 2
|
|
})
|
|
},
|
|
orderBadgeCounts() {
|
|
return this.orderCounts
|
|
}
|
|
},
|
|
created() {
|
|
this.loading = true
|
|
this.fetchProfileData().catch(error => {
|
|
console.warn('查询用户积分失败', error)
|
|
this.$toast(error.message || '查询用户积分失败')
|
|
}).finally(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
methods: {
|
|
...mapActions(useUserStore, ['fetchUserPoints']),
|
|
async fetchProfileData() {
|
|
await this.fetchUserPoints()
|
|
|
|
if (!this.supplierId || !this.userId) {
|
|
this.orderCounts = {
|
|
pendingPay: 0,
|
|
pendingReceive: 0,
|
|
afterSale: 0
|
|
}
|
|
return
|
|
}
|
|
|
|
const data = await postFunction('order-count', {
|
|
supplierId: this.supplierId,
|
|
userId: this.userId
|
|
})
|
|
|
|
this.orderCounts = {
|
|
pendingPay: Number(data?.pendingPay || 0),
|
|
pendingReceive: Number(data?.pendingReceive || 0),
|
|
afterSale: Number(data?.afterSale || 0)
|
|
}
|
|
},
|
|
orderBadge(item) {
|
|
const count = item.badgeKey ? this.orderBadgeCounts[item.badgeKey] : 0
|
|
|
|
return count > 0 ? count : undefined
|
|
},
|
|
goOrders(item) {
|
|
if (item.path) {
|
|
this.$router.push(item.path)
|
|
return
|
|
}
|
|
|
|
this.$router.push({
|
|
path: '/joyful-selection/orders',
|
|
query: item.tab ? { tab: item.tab } : {}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.profile-page {
|
|
min-height: 100vh;
|
|
padding-bottom: 92px;
|
|
background: #f7f7f7;
|
|
}
|
|
|
|
.profile-hero {
|
|
position: relative;
|
|
z-index: 0;
|
|
min-height: 182px;
|
|
padding: 26px 18px 56px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.profile-hero::before {
|
|
position: absolute;
|
|
z-index: -1;
|
|
inset: 0;
|
|
background-image: url('~@/assets/joyful-selection/profile-bg.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
content: '';
|
|
opacity: .72;
|
|
}
|
|
|
|
.profile-actions {
|
|
position: absolute;
|
|
top: 18px;
|
|
right: 16px;
|
|
display: flex;
|
|
gap: 13px;
|
|
color: #333;
|
|
}
|
|
|
|
.profile-actions .van-icon {
|
|
font-size: 19px;
|
|
}
|
|
|
|
.user-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding-top: 44px;
|
|
}
|
|
|
|
.user-row ::v-deep .van-image {
|
|
border: 2px solid rgba(255, 255, 255, .72);
|
|
}
|
|
|
|
.user-row b {
|
|
color: #222;
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.user-row p {
|
|
margin: 6px 0 0;
|
|
color: #666;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.asset-card {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
min-height: 92px;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin: -40px 10px 16px;
|
|
padding: 14px 16px;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
box-shadow: 0 4px 16px rgba(61, 68, 92, .06);
|
|
}
|
|
|
|
.asset-info {
|
|
display: grid;
|
|
flex: 1;
|
|
gap: 5px;
|
|
}
|
|
|
|
.asset-card small {
|
|
color: #333;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.asset-card b {
|
|
color: #ff5b20;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.points-link {
|
|
display: inline-flex;
|
|
height: 44px;
|
|
min-width: 118px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: #fff0ec;
|
|
color: #ff5b20;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.panel {
|
|
margin: 16px 10px 0;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
}
|
|
|
|
.panel-title {
|
|
display: flex;
|
|
height: 42px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.panel-title b {
|
|
color: #222;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.panel-title span {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #999;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.panel-title span .van-icon {
|
|
margin-left: 2px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.panel ::v-deep .van-grid-item__content {
|
|
padding: 11px 0 16px;
|
|
}
|
|
|
|
.panel ::v-deep .van-grid-item__icon {
|
|
color: #333;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.panel ::v-deep .van-grid-item__text {
|
|
margin-top: 6px;
|
|
color: #333;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.service-panel {
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.coming-soon {
|
|
display: flex;
|
|
min-height: 196px;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px 0 32px;
|
|
}
|
|
|
|
.coming-soon p {
|
|
margin: 12px 0 0;
|
|
color: #999;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|