c-chenxs1/points-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 首页优化

Browse Source
This commit is contained in:
c-chenxs1
2026-07-27 16:43:37 +08:00
parent f2c1cfcb15
commit eed5c3fe03
19 changed files with 718 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
supplied-h5/src/view/joyful-selection/profile/index.vue
+59 -3
View File
@@ -1,3 +1,59 @@
<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><section class="asset"><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><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></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><van-tabbar route><van-tabbar-item icon="wap-home-o" to="/joyful-selection">首页</van-tabbar-item><van-tabbar-item icon="apps-o" to="/joyful-selection/products">分类</van-tabbar-item><van-tabbar-item icon="cart-o" to="/joyful-selection/cart">购物车</van-tabbar-item><van-tabbar-item icon="user-o" to="/joyful-selection/profile">我的</van-tabbar-item></van-tabbar></main></template>
<script>export default{name:'JoyfulSelectionProfile'}</script>
<style scoped>.profile-page{min-height:100vh;padding-bottom:50px;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>
<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>
<section class="asset">
<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>
<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>
</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>
</main>
</template>
<script>
export default {
name: 'JoyfulSelectionProfile'
}
</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>