jzhw_uni/pages/member/buyList/buyList.vue

<template>
    <view class="buy-list-page">
        <view class="buy-list" style="height: 100vh">
            <view :class="'buy-item ' + (item.memberStatus == '2' ? 'invalid-item' : '')" v-for="(item, index) in buyList" :key="index">
                <view class="buy-item-left">
                    <view>
                        <text class="item-title">鲸致生活</text>
                        ｜
                        <text class="item-title" v-if="item.memberType == '1'">超级鲸会员月卡</text>
                        <text class="item-title" v-if="item.memberType == '2'">超级鲸会员年卡</text>
                    </view>
                    <view class="item-content">
                        <text>有效期：{{ formatFuc.sliceStr(item.effectiveStartTime, 0, 10) }}-{{ formatFuc.sliceStr(item.effectiveEndTime, 0, 10) }}</text>
                        <!-- <text style="margin-left:30rpx">共{{item.days}}天</text> -->
                    </view>
                    <view class="item-date">{{ formatFuc.sliceStr(item.createTime, 0, 10) }} 支付成功</view>
                </view>

                <view class="buy-item-right">
                    <image src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/icon-member-valid.png" v-if="item.memberStatus == '1'" mode="aspectFit"></image>
                    <image
                        src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/icon-status-invalid.png"
                        v-if="item.memberStatus == '2'"
                        mode="aspectFit"
                        class="status-img"
                    ></image>
                    <image src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/icon-member-invalid.png" v-if="item.memberStatus == '2'" mode="aspectFit"></image>
                </view>
            </view>
        </view>
    </view>
</template>
<script module="formatFuc" lang="wxs" src="@/utils/formatFuc.wxs"></script>
<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api');
var user = require('../../../utils/user.js');
var app = getApp();
export default {
    data() {
        return {
            page: 1,
            limit: 10,
            totalPages: 1,
            buyList: [
                {
                    startDate: '2021.07.15',
                    endDate: '2022.07.15',
                    totalDay: '365',
                    date: '2021.07.17',
                    status: '1'
                },
                {
                    startDate: '2021.07.15',
                    endDate: '2022.07.15',
                    totalDay: '365',
                    date: '2021.07.17',
                    status: '0'
                }
            ]
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.getbuyList();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        // if (this.data.totalPages > this.data.page) {
        //   this.setData({
        //     page: this.data.page + 1
        // 	});
        //   this.getbuyList();
        // } else {
        //   wx.showToast({
        //     title: '没有更多了',
        //     icon: 'none',
        //     duration: 2000
        //   });
        //   return false;
        // }
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        getbuyList() {
            util.request(
                api.getMemberBuyRecord,
                {
                    userId: app.globalData.userInfo.id
                },
                'GET'
            ).then((res) => {
                console.info(res);
                if (res.errno === 0) {
                    this.setData({
                        buyList: res.data
                    });
                } else {
                    util.showErrorToast(res.errmsg);
                }
            });
        }
    }
};
</script>
<style>
.buy-list-page {
    background: #1f232d;
    padding: 28rpx 32rpx 0;
}
.buy-item {
    height: 180rpx;
    margin: 0 0 20rpx;
    width: 694rpx;
    border-radius: 10rpx;
    display: flex;
    padding: 30rpx 66rpx 30rpx 44rpx;
    justify-content: space-between;
    color: #663315;
    background: linear-gradient(-11deg, #ffe3b3, #feb73b);
    box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(111, 111, 111, 0.06);
    border-radius: 15rpx;
}
.buy-item.invalid-item {
    background: linear-gradient(-11deg, #ecf1ff, #cad1e7);
    color: #9c9c9c;
}
.item-title {
    font-size: 28rpx;
    font-weight: bold;
}
.item-content {
    margin: 8rpx 0 16rpx;
    font-size: 22rpx;
}
.item-date {
    font-size: 20rpx;
}
.buy-item-right image {
    width: 136rpx;
    height: 118rpx;
}
.buy-item-right image.status-img {
    width: 96rpx;
    height: 96rpx;
    margin-right: -46rpx;
    z-index: 99;
    position: relative;
    top: -10rpx;
}
</style>