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/orders/index.vue
+48 -3
View File
@@ -1,3 +1,48 @@
<template><main class="orders-page"><van-nav-bar title="我的订单" left-arrow @click-left="$router.back()"/><van-tabs v-model="active"><van-tab v-for="tab in tabs" :key="tab" :title="tab"/></van-tabs><section><article v-for="order in orders" :key="order.id"><header><span>订单号：{{ order.id }}</span><b :class="order.status">{{ order.status }}</b></header><van-card title="简约北欧风陶瓷餐具套装" desc="共 3 件商品" price="287.90" :thumb="teaImage"/><footer><span>合计：<b>¥287.90</b></span><van-button size="small" round plain type="danger">查看详情</van-button></footer></article></section></main></template>
<script>import teaImage from '@/assets/joyful-selection/products/tea-set.png';export default{name:'JoyfulSelectionOrders',data:()=>({teaImage,active:0,tabs:['全部','待付款','待发货','待收货','已完成','售后'],orders:[{id:'YX2024051812345678',status:'待发货'},{id:'YX2024051509876543',status:'待收货'},{id:'YX2024051211223344',status:'已完成'}]})}</script>
<style scoped>.orders-page{min-height:100vh;background:#f7f7f7}.orders-page section{padding:0 12px}.orders-page article{margin-top:10px;border-radius:10px;background:#fff}.orders-page header,.orders-page footer{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;color:#999;font-size:11px}.orders-page header b{color:#ff5b20}.orders-page .已完成{color:#27ae60}.orders-page footer b{color:#222}.orders-page .van-card{background:#fff}</style>
<template>
<main class="orders-page">
<van-nav-bar title="我的订单" left-arrow @click-left="$router.back()" />
<van-tabs v-model="active">
<van-tab v-for="tab in tabs" :key="tab" :title="tab" />
</van-tabs>
<section>
<article v-for="order in orders" :key="order.id">
<header><span>订单号：{{ order.id }}</span><b :class="order.status">{{ order.status }}</b></header>
<van-card
:title="order.product.name"
desc="共 3 件商品"
price="297.90"
:thumb="order.product.image"
/>
<footer><span>合计：<b>¥297.90</b></span><van-button size="small" round plain type="danger">查看详情</van-button></footer>
</article>
</section>
</main>
</template>
<script>
import { joyfulProducts } from '../../product-data'
export default {
name: 'JoyfulSelectionOrders',
data: () => ({
active: 0,
tabs: ['全部', '待付款', '待发货', '待收货', '已完成', '售后'],
orders: [
{ id: 'YX2024051812345678', status: '待发货', product: joyfulProducts[0] },
{ id: 'YX2024051509876543', status: '待收货', product: joyfulProducts[1] },
{ id: 'YX2024051211223344', status: '已完成', product: joyfulProducts[2] }
]
})
}
</script>
<style scoped>
.orders-page { min-height: 100vh; background: #f7f7f7; }
.orders-page section { padding: 0 12px; }
.orders-page article { margin-top: 10px; border-radius: 10px; background: #fff; }
.orders-page header, .orders-page footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; color: #999; font-size: 11px; }
.orders-page header b { color: #ff5b20; }
.orders-page .已完成 { color: #27ae60; }
.orders-page footer b { color: #222; }
.orders-page .van-card { background: #fff; }
</style>