4 lines
2.0 KiB
Vue
4 lines
2.0 KiB
Vue
<template><main class="points-page"><van-nav-bar title="我的积分" left-arrow @click-left="$router.back()"/><section class="score"><small>可用积分</small><b>2368</b><van-button size="small" round @click="$router.push('/joyful-selection/products')">积分说明</van-button></section><van-grid :column-num="4" :border="false"><van-grid-item icon="gift-o" text="积分商城"/><van-grid-item icon="gift-card-o" text="积分抽奖"/><van-grid-item icon="balance-list-o" text="积分兑换"/><van-grid-item icon="todo-list-o" text="积分签到"/></van-grid><section class="details"><h3>积分明细</h3><van-cell v-for="item in items" :key="item.title" :title="item.title" :label="item.time" :value="item.value" :value-class="item.value[0] === '+' ? 'income' : 'cost'"/><p>没有更多了～</p></section></main></template>
|
||
<script>export default{name:'JoyfulSelectionPoints',data:()=>({items:[{title:'签到奖励',time:'2024-05-18 09:30',value:'+10'},{title:'订单完成奖励',time:'2024-05-14 10:20',value:'+88'},{title:'积分兑换',time:'2024-05-08 15:11',value:'-200'},{title:'晒单奖励',time:'2024-05-02 08:30',value:'+20'},{title:'评价奖励',time:'2024-04-28 12:08',value:'+5'}]})}</script>
|
||
<style scoped>.points-page{min-height:100vh;padding-top:46px;background:#f7f7f7}.points-page ::v-deep .van-nav-bar{position:fixed;z-index:20;top:0;right:0;left:0;box-shadow:0 1px 0 rgba(0,0,0,.04)}.score{position:relative;margin:10px 12px;padding:16px 18px;border-radius:10px;background:linear-gradient(135deg,#ffe0ac,#ffc66e)}.score small,.score b{display:block}.score small{font-size:11px}.score b{margin-top:6px;font-size:22px}.score .van-button{position:absolute;right:14px;top:24px;background:rgba(255,255,255,.6)}.points-page>.van-grid{margin:0 12px;border-radius:10px;background:#fff}.details{margin:10px 12px;padding:2px 0;border-radius:10px;background:#fff}.details h3{margin:14px;font-size:14px}.details p{text-align:center;color:#aaa;font-size:11px}.income{color:#14a44d}.cost{color:#f15b45}</style>
|