diancan_uni/pages/take-coupons/index.vue

<template>
    <view>
        <!-- index.wxml -->
        <view class="wrap">
            <view class="coupon_list">
                <view class="coupon_item" :style="'background-image: url(' + couponBg + ')'" v-for="(item, index) in dataList" :key="index">
                    <view class="item_l" v-if="item.coupon.type == 1">
                        <view class="price">
                            <text class="unit">¥</text>
                            {{ item.coupon.price }}
                        </view>
                        <view class="tips">满{{ item.coupon.base_price }}元可用</view>
                    </view>

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

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

                    <view class="item_r">
                        <view class="item_r_l">
                            <view class="quan_name">{{ item.coupon.title }}</view>
                            <!-- <view class="quan_time">有效期至2021-12-31</view> -->
                        </view>
                    </view>

                    <view class="item_status" @tap="onTakeCoupon" :data-id="item.id">领取</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> -->
    </view>
</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',
            loading: false,
            // 全局loading
            dataList: []
        };
    },
    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')
        });
    },
    onShow: function () {
        // Do something when page show.
        let that = this;
        that.getData();
    },
    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.
    },
    onPageScroll: function () {
        // Do something when page scroll
    },
    onResize: function () {
        // Do something when page resize
    },
    methods: {
        // 获取领券列表
        getData() {
            let that = this;
            myPro
                .wxRequest('user/v2/coupon/list', 'GET', {})
                .then((res) => {
                    let list = res.result; // 无数据

                    if (list.length == 0) {
                        uni.showToast({
                            title: '暂无更多数据',
                            icon: 'none'
                        });
                        that.setData({
                            dataList: []
                        });
                    } else {
                        that.setData({
                            dataList: list
                        });
                    }
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 领取优惠券
        onTakeCoupon(event) {
            let that = this;
            let id = event.currentTarget.dataset.id;
            let params = {
                coupon_rule_id: id
            };
            myPro
                .wxRequest('user/v2/coupon/receive', 'POST', params)
                .then((res) => {
					uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    });
                    that.getData();
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        }
    }
};
</script>
<style>
/**index.wxss**/
.wrap {
    min-height: 100vh;
    background: #f6f6f6;
}
.coupon_item {
    padding-right: 30rpx;
}
</style>