java-mall-app/activity/coupon/member.vue

<template>
	<view class="page">
		<scroll-view class="m-scrollBox" scroll-y="true">
			<block v-if="(UserCoupon.length>0)">
				<view class="m-coupon-item" @click="changecoupon" :data-id="(item.user_voucher_id)" :data-item_id="(item.item_id)" v-for="(item, index) in UserCoupon" :key="index">
					<image lazy-load :src="((item.voucher_state_id==1501 && item.voucher_subtotal<=amount)?'https://static.lancerdt.com/xcxfile/appicon/images/coupon_red.png':'https://static.lancerdt.com/xcxfile/appicon/images/coupon_gray.png')" class="item-bg"></image>

					<view class="coupon-item-left">
						<view class="item-left-top">{{__('￥')}}<label style="font-size:64rpx">{{item.voucher_price}}</label></view>
						<view class="item-left-bottom">{{sprintf(__('满(%s)可用'), item.voucher_subtotal)}}</view>
					</view>
					<view class="coupon-item-right">
						<view class="item-title item-title-black">{{item.activity_name}}</view>
						<view class="item-middle">{{sprintf(__('满 %s 减 %s'), item.voucher_subtotal, item.voucher_price)}}</view>
						<view class="item-middle">
							<label class="item-time">{{item.voucher_start_date}}~{{item.voucher_end_date}}</label>
						</view>

						<view class="item-desc"></view>
					</view>
					<image lazy-load src="/static/images/checked.png" class="image-checked" v-if="(item.user_voucher_id == id_checked)" />
				</view>

				<button class="u-btn u-btn-default" style="margin-top:30rpx;" @click="uesnothing">{{__('不使用优惠券')}}</button>
			</block>
			<view class="m-nullcontent" v-else>
				<view class="m-nullpage-middle">
					<label class="iconfont icon-meiyougengduo"></label>
					<view class="m-null-tip">
						<text>{{__('亲~什么都没有')}}</text>
						<text>{{__('赶快去领券中心吧')}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import $ from "../../helpers/util";
	import {
		mapState,
		mapMutations
	} from 'vuex'


	export default {
		data() {
			return {
				options: {},
				CartSelect: [],
				amount: 0,
				UserCoupon: [],
				id_checked: 0,
				IsUseCoupon: 1
			};
		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		onLoad: function(options) {
			uni.setNavigationBarTitle({
				title: this.__('使用优惠券')
			});

			var voucher_items = $.parseJSON(options.val);
			this.setData({
				UserCoupon: voucher_items,
				id_checked: options.user_voucher_id,
				amount: options.amount,
				options: options,
			})

			if (options.ifcart) {
				this.getselect()
			}

		},
		methods: {
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),

			getselect: function() {
				var that = this;
				var params = {};
				that.$.request({
					url: this.Config.URL.cart.getselect,
					data: params,
					success: function(data, status, msg, code) {
						var isSelect = false;
						if (status == 200) {
							if (data['items'].length > 0) {
								that.setData({
									CartSelect: data['items']
								})
							}
						} else {
							//that.$.confirm(msg);
						}
					}
				})
			},
			changecoupon: function(e) {
				var that = this;
				var item_id = parseInt(e.currentTarget.dataset.item_id);

				this.setData({
					IsUseCoupon: 0,
					id_checked: parseInt(e.currentTarget.dataset.id)
				});

				that.goback();
			},
			uesnothing: function() {
				var that = this;

				this.setData({
					IsUseCoupon: 0,
					id_checked: 0
				});

				this.goback();
			},
			goback: function() {
				var that = this;
				$.navigateBack(1, function() {
					var params = that.options;

					params.user_voucher_id = that.id_checked;
					that.notice.postNotificationName("RefreshCoupon", params)
				})
			}
		}
	}
</script>



<style lang="scss">
	@import "../../styles/_variables";

	.m-scrollBox {
		padding: 10rpx 10rpx 0rpx;
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
	}

	.m-coupon-item {
		margin: 10rpx 10rpx 20rpx;
		position: relative;
		width: 100%;
		height: 190rpx;
	}

	.m-coupon-item .item-bg {
		width: 710rpx;
		height: 190rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.coupon-item-left {
		position: absolute;
		color: white;
		text-align: center;
		width: 250rpx;
		padding: 25rpx 0rpx;
	}

	.item-left-top {
		line-height: 100rpx;
		font-weight: bold;
	}

	.item-left-top label {
		font-size: 90rpx;
	}

	.item-left-bottom {
		font-size: 24rpx;
	}

	.coupon-item-right {
		position: absolute;
		left: 250rpx;
		top: 0;
		width: 420rpx;
		height: 170rpx;
		padding: 10rpx 20rpx;
		font-size: 22rpx;
		color: gray;
	}

	.item-title {
		line-height: 40rpx;
		font-size: 28rpx;
		height: 80rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.item-title-black {
		color: #333;
	}

	.item-middle {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
	}

	.item-usenow {
		font-size: 24rpx;
		border: 1px solid $default-skin-bg;
		float: right;
		color: $default-skin-bg;
		border-radius: 40rpx;
		padding: 0 15rpx;
		position: relative;
		top: -8rpx;
		line-height: 40rpx;
	}

	.item-desc {
		height: 50rpx;
		line-height: 50rpx;
		margin-top: 5rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.image-checked {
		position: absolute;
		right: 20rpx;
		bottom: 0;
		width: 50rpx;
		height: 50rpx;
	}
</style>