jzhw_uni/pages/ucenter/couponList/couponList.vue

<template>
    <view class="container">

        <van-tabs :active="status" color="#d77958" @change="onTabChange">
            <van-tab title="未使用" name="0"></van-tab>
            <van-tab title="已使用" name="1"></van-tab>
            <van-tab title="已过期" name="2"></van-tab>
        </van-tabs>

        <view class="b">
            <view class="coupon-form" v-if="status == 0">
                <view class="input-box">
                    <input class="coupon-sn" placeholder="请输入优惠码" :value="code" @input="bindExchange" />
                    <van-icon name="close" class="clear-icon" v-if="code.length > 0" @tap.native.stop.prevent="clearExchange" />
                </view>
                <view class="add-btn" @tap="goExchange">兑换</view>
            </view>
            <view v-if="status == 0" class="coupon-switch-block">
                <view
                    :data-type="item.type"
                    :class="'type-switch ' + (item.type === currentType ? 'active-switch' : '')"
                    @tap="switchType"
                    v-for="(item, index) in typeList"
                    :key="index"
                >
                    {{ item.name }}
                </view>
            </view>

            <scroll-view :scroll-y="true" :scroll-top="scrollTop" class="my-coupon-list">
                <!-- 未使用 -->
                <view class="my-coupon-item-valid" v-if="status == 0" v-for="(item, index) in couponList" :key="index">
                    <view v-if="item.type == 4" class="marker">会员专享</view>

                    <view class="coupon-top">
                        <view class="coupon-top-left">
                            <view class="coupon-value">
                                <text v-if="item.voucherType == 1" :class="item.type == 4 ? 'coupon-flag-member' : 'coupon-flag'">¥</text>
                                <text :class="item.type == 4 ? 'coupon-value-member' : 'coupon-value-num'" v-if="item.voucherType == 1">{{ item.discount }}</text>
                                <text :class="item.type == 4 ? 'coupon-value-member' : 'coupon-value-num'" v-if="item.voucherType == 2">{{ item.discount / 10 }}</text>
                                <text v-if="item.voucherType == 2" :class="item.type == 4 ? 'coupon-unit-member' : 'coupon-unit'">折</text>
                            </view>
                            <view class="coupon-type">
                                <text v-if="item.voucherType == 1" style="color: #d77958">满{{ item.min }}可用</text>
                                <text v-if="item.voucherType == 2" style="color: #d77958">满{{ item.min }}可用</text>
                            </view>
                        </view>
                        <view class="coupon-top-content">
                            <view class="coupon-valid-name">{{ item.name }}</view>
                            <view>有效期至：{{ item.endTime }}</view>
                        </view>
                    </view>

                    <view class="coupon-bottom">
                        <text v-if="item.desc && item.name != item.desc">{{ item.desc }}</text>
                        <text v-else-if=""></text>
                        <view :class="item.type == 4 ? 'coupon-top-member' : 'coupon-top-right'" :data-id="item.couponId" :data-goodsvalue="item.goodsValue" @tap="goService">
                            立即使用
                        </view>
                    </view>
                </view>
                <!-- 已使用 已过期 -->
                <view class="my-coupon-item" v-if="status != 0" v-for="(item, index) in couponList" :key="index">
                    <view class="coupon-left">
                        <view v-if="item.voucherType == 1">
                            ¥
                            <text class="coupon-amount">{{ item.discount }}</text>
                        </view>
                        <view v-if="item.voucherType == 2">
                            <text class="coupon-amount">{{ item.discount / 10 }}</text>
                            折
                        </view>
                        <view class="coupon-type">
                            <!-- {{item.name}} -->
                            <span v-if="item.voucherType == 2">折扣券</span>
                            <span v-if="item.voucherType == 1">抵用券</span>
                        </view>
                        <view
                            v-if="status == 0"
                            :class="'coupon-btn ' + (item.status === 0 ? 'active-btn' : '')"
                            :data-id="item.couponId"
                            :data-goodsvalue="item.goodsValue"
                            @tap="goService"
                        >
                            立即使用
                        </view>
                    </view>

                    <view class="coupon-content">
                        <view class="coupon-name">{{ item.name }}</view>
                        <view class="coupon-date">有效期开始:{{ item.startTime }}</view>
                        <view class="coupon-date">有效期结束:{{ item.endTime }}</view>
                    </view>

                    <view class="coupon-right">
                        <image class="coupon-status" mode="aspectFit" v-if="item.status == 1" src="/static/images/coupon-used.png"></image>
                        <image class="coupon-status" mode="aspectFit" v-if="item.status == 2" src="/static/images/coupon-invalid.png"></image>
                    </view>
                </view>

                <view class="page" v-if="showPage">
                    <view :class="'prev ' + (page <= 1 ? 'disabled' : '')" @tap="prevPage">上一页</view>
                    <view :class="'next ' + (count / size < page ? 'disabled' : '')" @tap="nextPage">下一页</view>
                </view>
            </scroll-view>
            <view class="no-list" v-if="couponList == 0">没有更多了</view>
        </view>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
var app = getApp();
export default {
    data() {
        return {
            couponList: [],
            code: '',
            codeChannelType: '',

            //2是抖音 其他小商城
            status: 0,

            page: 1,
            limit: 20,
            count: 0,
            scrollTop: 0,
            showPage: false,
            currentType: 0,

            typeList: [
                {
                    name: '全部',
                    type: 0
                },
                // {
                //   name: "会员专享",
                //   type: 3
                // },
                {
                    name: '立减券',
                    type: 1
                },
                {
                    name: '折扣券',
                    type: 2
                }
            ],

            totalList: [],

            //页面参数
            options: '',

            size: 0
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        if (this.options == '') {
            this.setData({
                options: options
            });
        }
        console.info(options);
        let scene = options.scene;
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        if (app.globalData.hasLogin == false) {
            uni.navigateTo({
                url: '/pages/auth/login/login'
            });
            return;
        }
        setTimeout(() => {
            this.exchange(this.options);
            this.setData({
                options: ''
            });
        }, 500);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        uni.showNavigationBarLoading(); //在标题栏中显示加载
        this.getCouponList();
        uni.hideNavigationBarLoading(); //完成停止加载
        uni.stopPullDownRefresh(); //停止下拉刷新
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        exchange(options) {
            let that = this;
            if (options.scene) {
                let scene = decodeURIComponent(options.scene);
                var couponId;
                var fraId;
                if (scene && scene.indexOf('fraId') >= 0) {
                    //fraId,加盟商id:优惠券id    加盟商发的优惠券
                    var paras = scene.split(',')[1];
                    fraId = paras.split(':')[0];
                    couponId = paras.split(':')[1];
                } else {
                    // id,12;type,0
                    var paras = scene.split(';');
                    console.info(paras);
                    var couponId = paras[0].replace('id,', '');
                    console.info(couponId);
                }
                //开始领取优惠券
                util.request(
                    api.CouponReceive,
                    {
                        couponId: couponId,
                        fraId: fraId
                    },
                    'POST'
                ).then((res) => {
                    if (res.errno == 0) {
                        uni.showToast({
                            title: '领取成功',
                            icon: 'none',
                            duration: 3000
                        });
                    } else {
                        util.showErrorToast(res.errmsg);
                    }
                    this.getCouponList();
                });
            } else if (options.q) {
                //扫码url二维码过来的
                let url = decodeURIComponent(options.q);
                console.info(url);
                if (url.indexOf('?coupon=') >= 0) {
                    let coupon = url.substring(url.indexOf('?coupon=') + 8);
                    console.info('兑换码：' + coupon);
                    that.setData({
                        code: coupon
                    });
                    //判断是否登录
                    if (app.globalData.hasLogin) {
                        that.goExchange();
                    } else {
                        uni.navigateTo({
                            url: '/pages/auth/login/login'
                        });
                    }
                }
            } else if (options.type) {
                //2抖音 1其他
                that.setData({
                    code: options.coupon,
                    codeChannelType: options.type
                });
                if (app.globalData.hasLogin) {
                    if (options.type == 2) {
                        that.goDouyinExchange();
                    } else {
                        that.goExchange();
                    }
                } else {
                    uni.navigateTo({
                        url: '/pages/auth/login/login'
                    });
                }
                //util.showErrorToast(options.coupon);
            } else {
                that.getCouponList();
            }
        },

        goExchange: function () {
            if (!this.code || this.code.length === 0) {
                util.showErrorToast('请输入兑换码');
                return;
            }
            let that = this;
            uni.showModal({
                title: '提示',
				confirmColor: '#d77958',
                content: '确定要兑换吗？兑换后将无法撤回',
                success: (res) => {
                    if (res.confirm) {
                        util.request(
                            api.CouponExchange,
                            {
                                code: this.code
                            },
                            'POST'
                        ).then(function (res) {
                            if (res.errno === 0) {
                                that.getCouponList();
                                that.clearExchange();
                                uni.showToast({
                                    title: '领取成功',
                                    duration: 2000
                                });
                            } else {
                                util.showErrorToast(res.errmsg);
                            }
                        });
                    }
                }
            });
        },

        goService(e) {
            let goodsvalue = e.currentTarget.dataset.goodsvalue;
            let id = e.currentTarget.dataset.id;
            console.log(goodsvalue);
            if (goodsvalue.length >= 1) {
                uni.navigateTo({
                    url: '/pages/ucenter/couponGoods/couponGoods?id=' + id
                });
            } else {
                uni.navigateTo({
                    url: '/pages/index/index'
                });
            }
        },

        getCouponList: function () {
            let that = this;
            that.setData({
                scrollTop: 0,
                showPage: false,
                couponList: []
            });
            util.request(api.CouponMyList, {
                status: that.status,
                page: that.page,
                limit: that.limit
            }).then(function (res) {
                if (res.errno === 0) {
                    that.setData({
                        scrollTop: 0,
                        couponList: res.data.list,
                        showPage: res.data.total > that.limit,
                        count: res.data.total
                    });
                    if (that.status == 0) {
						console.log("优惠券列表",res.data.list);
                        that.setData({
                            totalList: res.data.list
                        });
                    }
                }
            });
        },

        bindExchange: function (e) {
            this.setData({
                code: e.detail.value
            });
        },

        clearExchange: function () {
            this.setData({
                code: ''
            });
        },

        goDouyinExchange: function () {
            if (this.code.length === 0) {
                util.showErrorToast('请输入兑换码');
                return;
            }
            let that = this;
            uni.showModal({
                title: '提示',
                content: '确定要兑换抖音券吗？兑换后将无法撤回',
				confirmColor: '#d77958',
                success: (res) => {
                    if (res.confirm) {
                        util.request(
                            api.CouponDouyinExchange,
                            {
                                code: this.code
                            },
                            'POST'
                        ).then(function (res) {
                            if (res.errno === 0) {
                                that.getCouponList();
                                that.clearExchange();
                                uni.showToast({
                                    title: '领取成功',
                                    duration: 2000
                                });
                            } else {
                                util.showErrorToast(res.errmsg);
                            }
                        });
                    }
                }
            });
        },

        nextPage: function (event) {
            var that = this;
            if (this.page > that.count / that.limit) {
                return true;
            }
            that.setData({
                page: that.page + 1,
                currentType: 0
            });
            this.getCouponList();
        },

        prevPage: function (event) {
            if (this.page <= 1) {
                return false;
            }
            var that = this;
            that.setData({
                page: that.page - 1,
                currentType: 0
            });
            this.getCouponList();
        },

        switchTab: function (e) {
            this.setData({
                couponList: [],
                status: e.currentTarget.dataset.index,
                page: 1,
                limit: 20,
                count: 0,
                scrollTop: 0,
                showPage: false
            });
            this.getCouponList();
        },

        switchType(e) {
            let type = e.currentTarget.dataset.type;
            let currentList = [];
            if (type == 0) {
                currentList = this.totalList;
            } else if (type == 3) {
                //会员券
                currentList = this.totalList.filter((item) => {
                    return item.type == 4;
                });
            } else {
                currentList = this.totalList.filter((item) => {
                    return item.voucherType == type;
                });
            }
            this.setData({
                currentType: type,
                couponList: currentList
            });
        },

        onTabChange(e) {
            let status = e.detail.name;
            this.setData({
                couponList: [],
                status: status,
                page: 1,
                limit: 20,
                count: 0,
                scrollTop: 0,
                showPage: false
            });
            this.getCouponList();
        }
    }
};
</script>
<style>
page {
    background: #f4f4f4;
    min-height: 100%;
}

.container {
    background: #f4f4f4;
    min-height: 100%;
    /* padding-top: 30rpx; */
}

.container .h {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
    display: flex;
    background: #fff;
    height: 84rpx;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.container .h .item {
    display: inline-block;
    height: 82rpx;
    width: 50%;
    padding: 0 15rpx;
    text-align: center;
}

.container .h .item .txt {
    display: inline-block;
    height: 82rpx;
    padding: 0 20rpx;
    line-height: 82rpx;
    color: #333;
    font-size: 30rpx;
    width: 170rpx;
}

.container .h .item.active .txt {
    color: #ab2b2b;
    border-bottom: 4rpx solid #ab2b2b;
}

.container .b {
    padding-top: 12rpx;
    height: auto;
    border-top: 1rpx solid #ddd;
}

.container .b .coupon-form {
    height: 110rpx;
    width: 100%;
    background: #fff;
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-top: 20rpx;
    display: flex;
}

.container .b .input-box {
    flex: 1;
    height: 70rpx;
    color: #333;
    font-size: 24rpx;
    background: #fff;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 35rpx;
    margin-right: 30rpx;
}

.container .b .input-box .coupon-sn {
    position: absolute;
    top: 10rpx;
    left: 30rpx;
    height: 50rpx;
    width: 100%;
    color: #000;
    line-height: 50rpx;
    font-size: 24rpx;
}

.container .b .clear-icon {
    position: absolute;
    top: 20rpx;
    right: 18rpx;
    z-index: 2;
    display: block;
    background: #fff;
}

.container .b .add-btn {
    height: 70rpx;
    border: none;
    width: 168rpx;
    background: #D8D8D8;
    border-radius: 35rpx;
    line-height: 70rpx;
    color: #fff;
    font-size: 28rpx;
    text-align: center;
}

.container .b .add-btn.disabled {
    background: #D8D8D8;
}

.container .b .help {
    height: 72rpx;
    line-height: 72rpx;
    text-align: right;
    padding-right: 30rpx;
    background-size: 28rpx;
    color: #999;
    font-size: 24rpx;
}

.container .b .coupon-list {
    width: 750rpx;
    height: 100%;
    overflow: hidden;
}

.container .b .item {
    position: relative;
    height: 290rpx;
    background: #ccc7c7;
    margin-bottom: 30rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
    padding-top: 52rpx;
}

.container .b .item.active {
    background: linear-gradient(to right, #cfa568, #e3bf79);
}

.container .b .tag {
    height: 32rpx;
    background: #a48143;
    padding-left: 16rpx;
    padding-right: 16rpx;
    position: absolute;
    left: 20rpx;
    color: #fff;
    top: 20rpx;
    font-size: 20rpx;
    text-align: center;
    line-height: 32rpx;
}

.container .b .content {
    margin-top: 24rpx;
    margin-left: 40rpx;
    display: flex;
    margin-right: 40rpx;
    flex-direction: row;
}

.container .b .content .left {
    flex: 1;
}

.container .b .discount {
    font-size: 50rpx;
    color: #b4282d;
}

.container .b .min {
    color: #fff;
}

.container .b .content .right {
    width: 400rpx;
}

.container .b .name {
    font-size: 44rpx;
    color: #fff;
    margin-bottom: 14rpx;
}

.container .b .time {
    font-size: 24rpx;
    color: #fff;
    line-height: 30rpx;
}

.container .b .condition {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    height: 78rpx;
    background: rgba(0, 0, 0, 0.08);
    padding: 24rpx 40rpx;
    display: flex;
    flex-direction: row;
}

.container .b .condition .txt {
    display: block;
    height: 30rpx;
    flex: 1;
    overflow: hidden;
    font-size: 24rpx;
    line-height: 30rpx;
    color: #fff;
}

.container .b .condition .icon {
    margin-left: 30rpx;
    width: 24rpx;
    height: 24rpx;
}

.container .b .page {
    width: 750rpx;
    height: 108rpx;
    background: #fff;
    margin-bottom: 20rpx;
}

.container .b .page view {
    height: 108rpx;
    width: 50%;
    float: left;
    font-size: 29rpx;
    color: #333;
    text-align: center;
    line-height: 108rpx;
}

.container .b .page .prev {
    border-right: 1px solid #d9d9d9;
}

.container .b .page .disabled {
    color: #ccc;
}
.b .no-list {
    margin: 16rpx 0 0;
    text-align: center;
    color: #999;
    font-size: 28rpx;
}
.my-coupon-list {
    padding: 20rpx 24rpx;
    width: auto;
    height: 100%;
    overflow: hidden;
}
.my-coupon-item {
    border-radius: 18rpx;
    background: #fff;
    height: 190rpx;
    margin: 0 0 20rpx;
    display: flex;
    justify-content: space-between;
    padding: 0 20rpx 0 0;
    width: 706rpx;
}
.coupon-left {
    width: 230rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    height: 190rpx;
    padding: 18rpx 0 30rpx;
	color: #d77958;
}
.coupon-left .coupon-amount {
    font-size: 48rpx;
    font-weight: bold;
}
.coupon-left .coupon-type {
    font-size: 24rpx;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 220rpx;
    text-align: center;
}
.coupon-left .coupon-btn {
    background: #999999;
    color: #fff;
    width: 120rpx;
    height: 32rpx;
    line-height: 32rpx;
    font-size: 22rpx;
    margin-top: 10rpx;
    border-radius: 30rpx;
    text-align: center;
}
.coupon-left .coupon-btn.active-btn {
    background: #d77958;
}
.coupon-content {
    margin: 0 20rpx 0 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40rpx 0;
    flex: 1;
}
.coupon-content view.coupon-name {
    color: #999;
    font-size: 30rpx;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 330rpx;
}
.coupon-content view.coupon-date {
    color: #999;
    font-size: 20rpx;
}
.coupon-right {
    width: 84rpx;
    height: 114rpx;
    padding-top: 30rpx;
}
.coupon-status {
    width: 84rpx;
    height: 84rpx;
}
.my-coupon-item-valid {
    background: #fff;
    box-shadow: 0rpx 6rpx 14rpx 0px rgba(142, 142, 142, 0.03);
    border-radius: 20rpx;
    width: 696rpx;
    margin-bottom: 24rpx;
    padding: 0 30rpx;
}
.my-coupon-item-valid .marker {
    position: absolute;
    right: 10rpx;
    float: right;
    padding: 5rpx;
    width: 136rpx;
    background: #f5da9e;
    color: #c8965a;
    text-align: center;
    border-bottom-left-radius: 20rpx;
    border-top-right-radius: 15rpx;
}
.coupon-top {
    display: flex;
    height: 152rpx;
    align-items: center;
    justify-content: space-between;
    padding: 0rpx 8rpx 0 0;
}
.coupon-top-left {
    width: 150rpx;
    color: #d77958;
    font-size: 22rpx;
    padding: 8rpx 0 0 4rpx;
}
.coupon-top-left .coupon-value {
    display: flex;
    align-items: flex-end;
    height: 54rpx;
    margin-bottom: 10rpx;
    font-size: 24rpx;
    font-weight: bold;
}
.coupon-top-left .coupon-value .coupon-value-num {
    font-size: 44rpx;
    line-height: 44rpx;
	font-weight: normal;
}
.coupon-top-left .coupon-value .coupon-unit {
    color: #d77958;
    margin-left: 4rpx;
}
.coupon-top-left .coupon-value .coupon-unit-member {
    color: #e9b06b;
    margin-left: 4rpx;
}

.coupon-top-left .coupon-value .coupon-flag {
    color: #d77958;
    margin-right: 4rpx;
}

.coupon-top-left .coupon-value .coupon-flag-member {
    color: #e9b06b;
    margin-right: 4rpx;
}

.coupon-top-left .coupon-value .coupon-value-member {
    font-size: 70rpx;
    line-height: 54rpx;
    color: #e9b06b;
}

.coupon-top-content {
    flex: 1;
    margin: 30rpx 30rpx 0 60rpx;
    color: #b4b4b4;
    font-size: 22rpx;
    font-weight: normal;
}
.coupon-valid-name {
    font-weight: bold;
    color: #555555;
    font-size: 32rpx;
    margin-bottom: 25rpx;
    width: 380rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.coupon-top-right {
    width: 142rpx;
    height: 41rpx;
    background: #d77958;
    border-radius: 42rpx;
    text-align: center;
    color: #ffffff;
    line-height: 41rpx;
    font-size: 20rpx;
    letter-spacing: 3rpx;
}
.coupon-top-member {
    width: 142rpx;
    height: 56rpx;
    background: #e9b06b;
    border-radius: 42rpx;
    text-align: center;
    color: #ffffff;
    line-height: 56rpx;
    font-size: 20rpx;
    letter-spacing: 3rpx;
}

.coupon-bottom {
    padding: 2rpx 4rpx 23rpx;
    color: #757575;
    font-size: 20rpx;
    line-height: 36rpx;
    letter-spacing: 2rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.coupon-switch-block {
    height: 104rpx;
    padding: 0 27rpx;
    display: flex;
    align-items: center;
    margin-bottom: -20rpx;
    justify-content: center;
}

.van-tab--active.van-tab > view.van-ellipsis {
    color: #999 !important;
    letter-spacing: 2rpx;
}

.type-switch {
    width: 132rpx;
    height: 46rpx;
    line-height: 42rpx;
    border: 2rpx solid #d77958;
    border-radius: 46rpx;
    text-align: center;
    color: #d77958;
    font-size: 24rpx;
    margin: 10rpx;
}
.type-switch.active-switch {
    background: #d77958;
    color: #fff;
}
</style>