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/cart/index.vue
+42 -3
View File
@@ -1,3 +1,42 @@
<template><main class="cart-page"><van-nav-bar title="购物车" right-text="编辑" @click-right="$router.push('/joyful-selection/cart/edit')"/><van-notice-bar text="满 199 元包邮，快去凑单吧～" left-icon="info-o"/><section class="cart-list"><van-card v-for="item in goods" :key="item.name" :title="item.name" :price="item.price" :thumb="teaImage"><template #tags><van-tag plain type="danger">精选</van-tag></template><template #footer><van-stepper v-model="item.count" theme="round" button-size="22"/></template></van-card></section><van-submit-bar :price="28790" button-text="去结算（3）" @submit="$router.push('/joyful-selection/checkout')"><van-checkbox v-model="checked">全选</van-checkbox></van-submit-bar><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>import teaImage from '@/assets/joyful-selection/products/tea-set.png';export default{name:'JoyfulSelectionCart',data:()=>({teaImage,checked:true,goods:[{name:'简约北欧风陶瓷餐具套装',price:'69.90',count:1},{name:'便携式榨汁机 家用小型',price:'89.00',count:1},{name:'智能声波电动牙刷',price:'129.00',count:1}]})}</script>
<style scoped lang="less">.cart-page{min-height:100vh;padding-bottom:106px;background:#f7f7f7}.cart-list{padding:0 12px}.cart-list .van-card{margin-top:10px;border-radius:10px;background:#fff}.cart-list ::v-deep .van-card__price{color:#ff5b20;font-weight:bold}.van-submit-bar{bottom:50px}</style>
<template>
<main class="cart-page">
<van-nav-bar title="购物车" right-text="编辑" @click-right="$router.push('/joyful-selection/cart/edit')" />
<van-notice-bar text="满 199 元包邮，快去凑单吧～" left-icon="info-o" />
<section class="cart-list">
<van-card
v-for="item in goods"
:key="item.id"
:title="item.name"
:desc="item.desc"
:price="item.price"
:thumb="item.image"
>
<template #tags><van-tag plain type="danger">{{ item.tag }}</van-tag></template>
<template #footer><van-stepper v-model="item.count" theme="round" button-size="22" /></template>
</van-card>
</section>
<van-submit-bar :price="29790" button-text="去结算（3）" @submit="$router.push('/joyful-selection/checkout')">
<van-checkbox v-model="checked">全选</van-checkbox>
</van-submit-bar>
</main>
</template>
<script>
import { joyfulProducts } from '../product-data'
export default {
name: 'JoyfulSelectionCart',
data: () => ({
checked: true,
goods: joyfulProducts.slice(0, 3).map(item => ({ ...item, count: 1 }))
})
}
</script>
<style scoped lang="less">
.cart-page { min-height: 100vh; padding-bottom: 106px; background: #f7f7f7; }
.cart-list { padding: 0 12px; }
.cart-list .van-card { margin-top: 10px; border-radius: 10px; background: #fff; }
.cart-list ::v-deep .van-card__price { color: #ff5b20; font-weight: bold; }
.van-submit-bar { bottom: 50px; }
</style>