diancan_uni/pages/user/coupons/index.vue

<template>
    <!-- index.wxml -->
    <view class="wrap">
        <view class="cate_list">
            <van-tabs :active="status" line-width="59rpx" line-height="4rpx" title-active-color="#D54C43" title-inactive-color="#333333" @change="onChange">
                <van-tab title="全部" :name="-1"></van-tab>
                <van-tab title="可使用" :name="1"></van-tab>
                <van-tab title="已使用" :name="2"></van-tab>
                <van-tab title="已失效" :name="0"></van-tab>
            </van-tabs>
        </view>
        <view class="coupon_list">
            <view
                :class="item.status == 1 ? 'coupon_item' : 'coupon_item unable'"
                :style="'background-image: url(' + (item.status == 1 ? couponBg : couponUnBg) + ')'"
                v-for="(item, index) in dataList"
                :key="index"
            >
                <view class="item_l" v-if="item.type == 1">
                    <view class="price">
                        <text class="unit">¥</text>
                        {{ item.price }}
                    </view>
                    <view class="tips">满{{ item.base_price }}元可用</view>
                </view>

                <view class="item_l" v-if="item.type == 2">
                    <view class="price">
                        <text class="unit">¥</text>
                        {{ item.price }}
                    </view>
                    <view class="tips">无门槛</view>
                </view>

                <view class="item_l" v-if="item.type == 3">
                    <view class="price">{{ item.discount }}折</view>
                    <!-- <view class="tips">折扣{{ item.discount }}</view> -->
                </view>

                <view class="item_r">
                    <view class="item_r_l">
                        <view class="quan_name">{{ item.type == 3 ? '折扣优惠券' : item.type == 2 ? '金额优惠券' : '满减券' }}</view>
                        <view class="quan_time">有效期至{{ item.due_time }}</view>
                    </view>
                </view>

                <view class="item_status" v-if="item.status == 1" @tap="goGoodsIndex">去使用</view>

                <view class="item_status" v-if="item.status == 2">已使用</view>

                <view class="item_status" v-if="item.status == 0">已失效</view>
            </view>
            <!-- <view class="coupon_item unable" style="background-image: url({{ couponBg }})">
			<view class="item_l">
				<view class="price"><text class="unit">¥</text>15</view>
				<view class="tips">无门槛</view>
			</view>
			<view class="item_r">
				<view class="item_r_l">
					<view class="quan_name">新意商城代金券</view>
					<view class="quan_time">有效期至2021-12-31</view>
				</view>
			</view>
			<view class="item_status">已使用</view>
		</view>-->
        </view>
    </view>
    <!-- loading -->
    <!-- <van-overlay show="{{ loading }}" z-index="100">
	<van-loading custom-class="custom_loading" />
</van-overlay> -->
</template>

<script>
// index.js
let myPro = require('../../../utils/wxRequest.js');

let util = require('../../../utils/util.js');

export default {
    data() {
        return {
            couponBg: '/static/statics/img/quan_bg_tu.png',
            couponUnBg: '/static/statics/img/quan_un_bg_tu.png',
            status: -1,
            page: 1,
            size: 10,
            dataList: [],
            finished: false,
            loading: false
        };
    },
    onLoad: function (options) {
        // Do some initialize when page load.
        let that = this;
        that.setData({
            couponBg: 'data:image/png;base64,' + uni.getFileSystemManager().readFileSync(that.couponBg, 'base64'),
            couponUnBg: 'data:image/png;base64,' + uni.getFileSystemManager().readFileSync(that.couponUnBg, 'base64')
        }); // 获取列表

        that.getDataList();
    },
    onShow: function () {
        // Do something when page show.
        let that = this;
    },
    onReady: function () {
        // Do something when page ready.
    },
    onHide: function () {
        // Do something when page hide.
    },
    onUnload: function () {
        // Do something when page close.
    },
    onPullDownRefresh: function () {
        // Do something when pull down.
    },
    onReachBottom: function () {
        // Do something when page reach bottom.
        let that = this;

        if (!that.finished) {
            that.getDataList();
        }
    },
    onPageScroll: function () {
        // Do something when page scroll
    },
    onResize: function () {
        // Do something when page resize
    },
    methods: {
        // 切换tab
        onChange(event) {
            let that = this;
            that.setData({
                status: event.detail.name,
                page: 1,
                dataList: [],
                finished: false
            });
            that.getDataList();
        },

        // 获取列表
        getDataList() {
            let that = this;
            let data = {
                status: that.status,
                page: that.page,
                size: that.size
            };
            myPro
                .wxRequest('user/v2/usercoupon/list', 'GET', data)
                .then((res) => {
                    let list = res.result; // 无数据

                    if (list.length == 0) {
                        uni.showToast({
                            title: '暂无更多数据',
                            icon: 'none'
                        });
                        that.setData({
                            finished: true
                        });
                    } else {
                        // 判断可用状态的券是否过期(在争取后台返回,尚未同意)
                        for (let i in list) {
                            if (list[i].status == 1) {
                                let due_time = list[i].due_time;

                                if (new Date().getTime() > new Date(due_time.replace(/-/g, '/') + ' 24:00:00').getTime()) {
                                    list[i].status = 0;
                                }
                            }
                        }

                        that.setData({
                            dataList: that.dataList.concat(list),
                            page: that.page + 1
                        });
                    }
                })
                .catch((err) => {
                    console.log('错误信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 去买商品
        goGoodsIndex() {
            let that = this;
            uni.reLaunch({
                url: '/pages/goods/index'
            });
        }
    }
};
</script>
<style>
/**index.wxss**/
.wrap {
    min-height: 100vh;
    background: #f6f6f6;
}
.coupon_list {
    margin-top: 100rpx;
}
.coupon_item {
    padding-right: 30rpx;
}
</style>