店铺会员制Vip功能增加

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

@@ -0,0 +1,164 @@
+<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>