jzmall_uni/pages/ucenter/couponSelect/couponSelect.vue

<template>
    <view class="container">
        <scroll-view class="coupon-list" :scroll-y="true" :scroll-top="scrollTop">
            <view class="unselect" @tap="unselectCoupon">不选择优惠券</view>
            <view class="my-coupon-list">
                <view class="my-coupon-item" @tap="selectCoupon" :data-id="item.id" :data-cid="item.cid" v-for="(item, index) in couponList" :key="index">
                    <view class="coupon-left">
                        <view style="color: #ab6f6f">
                            ¥
                            <text class="coupon-amount">{{ item.discount }}</text>
                        </view>
                        <view class="coupon-type">
                            <!-- {{item.name}} -->
                            <span v-if="item.voucherType == 1">立减券</span>
                            <span v-if="item.voucherType == 2 || item.voucherType == 4" style="font-size: 9px; color: #ab6f6f">满{{ item.min }}元可用</span>
                        </view>
                        <view class="coupon-btn active-btn" v-if="item.available" :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>
            </view>

            <!-- <view class="item" wx:for="{{couponList}}" wx:for-index="index" wx:for-item="item" wx:key="id" bindtap="selectCoupon" data-id="{{item.id}}" data-cid="{{item.cid}}">
      <view class="tag">{{item.tag}}</view>
      <view class="content">
        <view class="left">
          <view class="discount">{{item.discount}}元</view>
          <view class="min"> 满{{item.min}}元使用</view>
        </view>
        <view class="right">
          <view class="name">{{item.name}}</view>
          <view class="time"> 有效期：{{item.startTime}} - {{item.endTime}}</view>
        </view>
      </view>
      <view class="condition">
        <text class="txt">{{item.desc}}</text>
        <image src="{{item.pic}}" class="icon"></image>
      </view>
    </view> -->

            <view class="no-list" v-if="couponList == 0">暂无优惠券</view>
        </scroll-view>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
var app = getApp();
export default {
    data() {
        return {
            couponList: [],
            cartId: 0,
            couponId: 0,
            userCouponId: 0,
            goodsId: 0,
            scrollTop: 0,
            openId: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // 页面显示
        uni.showLoading({
            title: '加载中...'
        });
        try {
            var cartId = uni.getStorageSync('cartId');
            if (!cartId) {
                cartId = 0;
            }
            var couponId = uni.getStorageSync('couponId');
            if (!couponId) {
                couponId = 0;
            }
            var userCouponId = uni.getStorageSync('userCouponId');
            if (!userCouponId) {
                userCouponId = 0;
            }
            var goodsId = uni.getStorageSync('goodsId');
            if (!goodsId) {
                goodsId = 0;
            }
            var openId = uni.getStorageSync('openId');
            console.info(openId);
            if (!openId) {
                openId = '';
            }
            console.info(openId);
            this.setData({
                goodsId: goodsId,
                openId: openId
            });
        } catch (e) {
            console.log('CatchClause', e);
            console.log('CatchClause', e);
            // Do something when catch error
            console.log(e);
        }
        this.getCouponList();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        getCouponList: function () {
            let that = this;
            that.setData({
                couponList: []
            });
            // 页面渲染完成
            uni.showToast({
                title: '加载中...',
                icon: 'loading',
                duration: 2000
            });
            util.request(api.CouponSelectList, {
                openId: that.openId,
                goodsId: that.goodsId
            }).then(function (res) {
                if (res.errno === 0) {
                    let list = [];
                    for (var i = 0; i < res.data.list.length; i++) {
                        if (res.data.list[i].available) {
                            list.push(res.data.list[i]);
                        }
                    }
                    that.setData({
                        couponList: list
                    });
                }
                uni.hideToast();
            });
        },

        selectCoupon: function (e) {
            try {
                uni.setStorageSync('couponId', e.currentTarget.dataset.cid);
                uni.setStorageSync('userCouponId', e.currentTarget.dataset.id);
            } catch (error) {
                console.log('CatchClause', error);
                console.log('CatchClause', error);
            }
            uni.navigateBack();
        },

        unselectCoupon: function () {
            // 如果优惠券ID设置-1，则表示订单不使用优惠券
            try {
                uni.setStorageSync('couponId', -1);
                uni.setStorageSync('userCouponId', -1);
            } catch (error) {
                console.log('CatchClause', error);
                console.log('CatchClause', error);
            }
            uni.navigateBack();
        },

        goService() {
            console.log('占位：函数 goService 未声明');
        }
    }
};
</script>
<style>
page {
    background: #f4f4f4;
    min-height: 100%;
}

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

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

.unselect {
    height: 80rpx;
    line-height: 80rpx;
    border: none;
    width: 700rpx;
    /* background: #28b43b; */
    background: #09afff;
    border-radius: 80rpx;
    color: #fff;
    font-size: 30rpx;
    text-align: center;
    margin-bottom: 30rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
}

.item {
    position: relative;
    height: 290rpx;
    width: 700rpx;
    background: linear-gradient(to right, #cfa568, #e3bf79);
    margin-bottom: 30rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
    padding-top: 52rpx;
}

.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;
}

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

.content .left {
    flex: 1;
}

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

.min {
    color: #fff;
}

.content .right {
    width: 400rpx;
}

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

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

.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;
}

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

.condition .icon {
    margin-left: 30rpx;
    width: 24rpx;
    height: 24rpx;
}
.container .no-list {
    margin: 36rpx 0 0;
    text-align: center;
    color: #999;
    font-size: 28rpx;
}

.my-coupon-list {
    padding: 20rpx 24rpx;
    width: 750rpx;
    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 {
    background: rgba(9, 175, 255, 0.1);
    width: 230rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 190rpx;
    padding: 18rpx 0 30rpx;
}
.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: #09afff;
}
.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: 400rpx;
}
.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;
}
</style>