123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- <template>
- <view class="entitlementCard">
- <view class="lable-box">
- <view @click.stop="activeLable = item.value"
- :class="['lable-item',activeLable === item.value ? 'active-lable-item' : '']" v-for="item in lableList">
- {{ item.lable }}
- </view>
- </view>
- <view class="entitlementCard-content">
- <template v-for="item in dataList[activeLable]">
- <card :styles="{'margin-bottom': '30rpx'}" :cardInfo="item" @onClickCard="onClickCard" />
- </template>
- <uni-load-more :status="loadingStatus" v-if="loadingStatus ==='loading' " />
- <view class="empty-data" v-if="loadingStatus=== 'noMore' && dataList[activeLable].length === 0 ">
- <EmptyDate />
- </view>
- </view>
- </view>
- </template>
- <script>
- import { getYimaCard } from "@/api/government.js"
- import card from "./card.vue"
- export default {
- components: { card },
- data() {
- return {
- activeLable: 'ACTIVED',
- lableList: [{
- value: 'ACTIVED',
- lable: '未使用'
- }, {
- value: 'FROZEN',
- lable: '已停用'
- }, {
- value: 'EXPIRED',
- lable: '已过期'
- }],
- dataList: {
- ACTIVED: [],
- FROZEN: [],
- EXPIRED: []
- },
- loadingStatus: 'noMore'
- }
- },
- created() {
- // this.init()
- },
- methods: {
- // 点击卡包
- onClickCard(e) {
- uni.navigateTo({
- url: `/pages/government/entitlementCard/cardDetails?cardNo=${e.cardNo}`
- })
- },
- init() {
- this.getCard();
- },
- getCard() {
- this.loadingStatus = 'loading'
- this.dataList = {
- ACTIVED: [],
- EXPIRED: [],
- FROZEN: []
- };
- getYimaCard().then(res => {
- if (res.code == 200) {
- // ACTIVED-正常
- // FROZEN-停用
- // EXPIRED-过期
- const { outAppCardVoList } = res.data || []
- outAppCardVoList.forEach(el => {
- const key = el.status;
- this.dataList[key].push(el);
- })
- }
- }).finally(() => {
- setTimeout(() => {
- this.loadingStatus = 'noMore'
- uni.stopPullDownRefresh();
- }, 150)
- })
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- .entitlementCard {
- .lable-box {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: stretch;
- padding: 0 92rpx;
- height: 103.5rpx;
- border-bottom: 1rpx solid #e6e6e6;
- .lable-item {
- display: flex;
- flex-direction: column;
- justify-content: center;
- font-size: 30rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- color: #1a1a1a;
- position: relative;
- &:before {
- content: '';
- position: absolute;
- left: 0;
- bottom: 0;
- height: 4rpx;
- width: 100%;
- background: transparent;
- border-radius: 2rpx;
- }
- }
- .active-lable-item {
- color: #3BB7CE;
- &:before {
- background: #3bb7ce;
- }
- }
- }
- .entitlementCard-content {
- width: 100%;
- padding: 50rpx 30rpx 0;
- }
- }
- </style>
|