<template> <div class="full-page"> <div class="container"> <div class="p-title"> <span class="label">我的健康券</span> </div> <ul> <li v-for="(item, index) in voucherData" :key="index" @click="goToDetail(item.voucherId, item.makeId, item.voucherType)"> <CardItem :data="item"></CardItem> </li> </ul> <div class="pagination"> <ul class="nav-pills"> <li class="text-right"> <a @click="filter(2)" :class="params.states[0]==2?'active':''">查看已使用的券</a> </li> <li class="text-left"> <a @click="filter(4)" :class="params.states[0]==4?'active':''">查看已失效的券</a> </li> </ul> </div> </div> </div> </template> <script> import { getStore } from '@/util/store' import { getUserCard } from '@/api/apply/apply' import CardItem from '@/components/cardItem' export default { name: 'vouchers', data () { return { voucherData: [], size: 10, params: { states: [1], userId: getStore({ name: 'user_id' }) } } }, created () { this.getUserCardByIdFn() // 获取当前用户待使用健康券(每页显示10条) }, mounted: function () { }, computed: { }, components: { CardItem }, methods: { getUserCardByIdFn () { getUserCard(this.size, this.params).then(res => { if (res.code === 0) { this.voucherData = res.data } }).catch((error) => { this.$toast({ message: error.message, position: 'center', duration: 3000 }) }) }, filter (state) { console.log(state) if (state === this.params.states[0]) { this.params.states = [1] } else { this.params.states = [ state ] } this.getUserCardByIdFn() }, goToDetail (voucherId, makeId, voucherType) { this.$router.push({ path: '/voucherDetail', query: { voucherId: voucherId, makeId: makeId, voucherType: voucherType } }) } } } </script> <style scoped> .full-page { background-color: #f5f6f7; } .pagination { padding: 1em 0; width: 100%; } .pagination ul li { width: 50%; margin: 0; padding: 0 1em; } .pagination ul li + li { border-left:1px solid #949595; } .pagination ul li > a { color: #949595; } .pagination ul li > a.active { text-decoration:underline; } </style>