feat: 1.0
This commit is contained in:
@@ -1,59 +1,215 @@
|
||||
<template>
|
||||
<main class="profile-page">
|
||||
<section class="profile-top">
|
||||
<van-image round width="48" height="48" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
|
||||
<div><b>张三</b><p>欢迎来到悦享优选</p></div>
|
||||
<van-icon name="ellipsis" />
|
||||
<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">
|
||||
|
||||
<section class="asset-card">
|
||||
<div><small>我的积分</small><b>2368</b></div>
|
||||
<div><small>成长值</small><b>3680</b></div>
|
||||
<div><small>优惠券</small><b>5</b></div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<div class="panel-title">我的订单 <span @click="$router.push('/joyful-selection/orders')">全部订单 ›</span></div>
|
||||
<div class="panel-title">
|
||||
<b>我的订单</b>
|
||||
<span @click="$router.push('/joyful-selection/orders')">全部订单 <van-icon name="arrow" /></span>
|
||||
</div>
|
||||
<van-grid :column-num="5" :border="false">
|
||||
<van-grid-item icon="balance-pay" text="待付款" />
|
||||
<van-grid-item icon="logistics" text="待发货" />
|
||||
<van-grid-item icon="send-gift-o" text="待收货" />
|
||||
<van-grid-item icon="todo-list-o" text="已完成" />
|
||||
<van-grid-item icon="after-sale" text="售后" />
|
||||
<van-grid-item v-for="item in orderItems" :key="item.text" :icon="item.icon" :text="item.text" />
|
||||
</van-grid>
|
||||
</section>
|
||||
<section class="panel">
|
||||
<div class="panel-title">我的服务</div>
|
||||
<van-grid :column-num="4" :border="false">
|
||||
<van-grid-item icon="star-o" text="我的收藏" />
|
||||
<van-grid-item icon="clock-o" text="浏览记录" />
|
||||
<van-grid-item icon="location-o" text="收货地址" />
|
||||
<van-grid-item icon="coupon-o" text="优惠券" />
|
||||
<van-grid-item icon="gift-o" text="积分商城" @click="$router.push('/joyful-selection/points')" />
|
||||
<van-grid-item icon="service-o" text="客户服务" />
|
||||
<van-grid-item icon="edit" text="意见反馈" />
|
||||
<van-grid-item icon="setting-o" text="设置" />
|
||||
</van-grid>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JoyfulSelectionProfile'
|
||||
name: 'JoyfulSelectionProfile',
|
||||
data: () => ({
|
||||
orderItems: [
|
||||
{ icon: 'balance-pay', text: '待付款' },
|
||||
{ icon: 'logistics', text: '待发货' },
|
||||
{ icon: 'send-gift-o', text: '待收货' },
|
||||
{ icon: 'todo-list-o', text: '已完成' },
|
||||
{ icon: 'after-sale', text: '售后' }
|
||||
],
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-page { min-height: 100vh; padding-bottom: 70px; background: #f7f7f7; }
|
||||
.profile-top { display: flex; align-items: center; gap: 12px; padding: 24px 20px; background: linear-gradient(135deg, #dcd8ff, #f9f8ff); }
|
||||
.profile-top div { flex: 1; }
|
||||
.profile-top b { font-size: 17px; }
|
||||
.profile-top p { margin: 4px 0 0; color: #777; font-size: 11px; }
|
||||
.asset { display: flex; margin: -3px 12px 12px; padding: 14px; border-radius: 10px; background: #fff; }
|
||||
.asset div { display: grid; flex: 1; gap: 6px; text-align: center; }
|
||||
.asset small { color: #777; font-size: 11px; }
|
||||
.asset b { color: #ff5b20; }
|
||||
.panel { margin: 10px 12px; border-radius: 10px; background: #fff; }
|
||||
.panel-title { padding: 13px; font-size: 13px; font-weight: bold; }
|
||||
.panel-title span { float: right; color: #999; font-size: 11px; font-weight: normal; }
|
||||
.panel ::v-deep .van-grid-item__text { font-size: 10px; }
|
||||
<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;
|
||||
margin: -40px 10px 16px;
|
||||
padding: 20px 0 18px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 16px rgba(61, 68, 92, .06);
|
||||
}
|
||||
|
||||
.asset-card div {
|
||||
display: grid;
|
||||
flex: 1;
|
||||
gap: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.asset-card small {
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.asset-card b {
|
||||
color: #ff5b20;
|
||||
font-size: 16px;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user