jzhw_uni/pages/ucenter/couponSelect/couponSelect.vue

<template>
	<view class="container">
		<scroll-view class="coupon-list" :scroll-y="true" :scroll-top="scrollTop">

			<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" v-if="couponList.length>0">
					<view class="coupon-left">
						<view v-if="item.voucherType == 1" style="color: #d77958;">
							¥
							<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 == 1">立减券</span>
							<span v-if="item.voucherType == 2">折扣券</span>
						</view>
						<view class="coupon-btn active-btn" :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 class="no-list" v-if="couponList == 0">暂无优惠券</view>
			</view>

			

		</scroll-view>
		<view class="unselect" @tap="unselectCoupon">不选择优惠券</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,
				grouponLinkId: 0,
				scrollTop: 0,
				grouponRulesId: ''
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		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 grouponRulesId = uni.getStorageSync('grouponRulesId');
				if (!grouponRulesId) {
					grouponRulesId = 0;
				}
				this.setData({
					cartId: cartId,
					couponId: couponId,
					userCouponId: userCouponId,
					grouponRulesId: grouponRulesId
				});
			} 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, {
					cartId: that.cartId,
					grouponRulesId: that.grouponRulesId
				}).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;
		height: 100vh;
	}

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

	.unselect {
		height: 82rpx;
		line-height: 82rpx;
		border: 2px solid #d77858;
		width: 704rpx;
		border-radius: 80rpx;
		color: #d77858;
		font-size: 30rpx;
		text-align: center;
		margin-bottom: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		position: absolute;
		bottom: 60rpx;
	}

	.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: #FEEBD7;
		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;
		color: #D77958;
	}

	.coupon-left .coupon-type {
		font-size: 24rpx;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 220rpx;
		text-align: center;
		color: #D77958;
	}

	.coupon-left .coupon-btn {
		background: #D77958;
		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: #333;
		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>