dtx_store/pages/user/my-card/my-card.vue

<template>
    <view class="my-card">
        <view class="select">
            {{listShowText}} <u-icon class='down' name="arrow-down-fill" size='11' color="#666" />
        </view>
        <block v-if="lists.length > 0">
            <view class="card-item" v-for="item in lists" :key='item.card_id' @click="goShop(item.shop.shop_id)">
                <image class="card-item-bg" :src="item.message.card_cover" mode="aspectFill" />
                <view class="card-item-top">
                    <image class="avatar" :src="item.message.cover" mode="aspectFill" />
                    <view class="info">
                        <view class="title"> {{item.shop.name}}</view>
                        <view class="des"> NO.{{item.number}} | {{item.ended_at}} 到期 </view>
                    </view>
                </view>
            </view>
        </block>
        <block v-else>
            <view class="vertical pages-empty" style="padding-top: 180rpx;">
                <u-empty icon="http://cdn.uviewui.com/uview/empty/list.png" textColor="#999" text="暂无卡包信息~" />
            </view>
        </block>
        <!--  筛选 -->
        <!-- <u-action-sheet :actions="typeList" @select="selectClick" :show="show" cancelText='取消' @close='show = false' /> -->
    </view>
</template>

<script>
    import {
        myCard
    } from '@/apis/interfaces/user.js'
    export default {
        data() {
            return {
                page: 1,
                has_more: true,
                lists: [],
                typeList: [{
                    name: '按照会员到期时间排序'
                }],
                show: false,
                listShowText: '按照会员到期时间排序',
            };
        },
        onLoad() {
            this.getList();
        },
        onReachBottom() {
            if (this.has_more) {
                this.page = this.page + 1;
                this.getList();
            }else{
                uni.showToast({
                    title:'没有更多~',
                    icon: "none",
                    mask: true
                })
            }
        },
        methods: {
            goShop(id) {
                uni.navigateTo({
                    url:'/pages/store/shop/shopDetail?ShopId=' + id
                })
            },
            getList() {
                if(this.page === 1){
                    this.lists = []
                }
                myCard({
                    page: this.page
                }).then(res => {
                    this.lists = this.lists.concat(res.data);
                    this.has_more = res.page.has_more;
                }).catch(err => {
                    uni.showToast({
                       title: err.message,
                       icon: "none",
                       mask: true
                    })
                })
            }
        }

    }
</script>

<style lang="scss">
    .my-card{
        padding-bottom: $padding;
    }
    .select {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        font-size: 28rpx;
        color: #666;
        padding: $padding;

        .down {
            padding-left: 10rpx;
        }
    }

    .card-item {
        height: 180rpx;
        background-color: pink;
        border-radius: 10rpx;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0 $margin;
        margin-bottom: $margin - 10;

        .card-item-bg {
            position: absolute;
            top: 1;
            width: 100%;
            z-index: 1;
        }

        .card-item-top {
            background-color: rgba($color: #000000, $alpha:0.6);
            width: 100%;
            height: 180rpx;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            box-sizing: border-box;
            padding: 0 $padding;

            .avatar {
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
                border: solid 4rpx rgba($color: #fff, $alpha: 0.8);
            }

            .info {
                flex: 1;
                padding-left: $padding;

                .title {
                    font-size: 34rpx;
                    font-weight: bold;
                    color: rgba($color: #fff, $alpha: 0.9);
                }

                .des {
                    padding-top: 6rpx;
                    font-size: 28rpx;
                    color: rgba($color: #fff, $alpha: 0.8);
                }
            }
        }
    }
</style>