caimei-applets-caimei/pages/user/coupon/coupon-exchange.vue

<template>
	<view class="container clearfix">
		<view class="coupon-content">
			<view class="coupon-input">
				<input class="input" type="text" v-model="params.redemptionCode" maxlength="16"  placeholder="请输入16位兑换码"/>
			</view>
			<view class="coupon-main">
				<view class="coupon-button" @click="exchangeConfirm">立即兑换</view>
				<view class="coupon-text">
					<view class="coupon-h1">注意事项：</view>
					<view class="coupon-h2">1. 兑换码获取：可通过采美线下发放或者销售顾问线上发放</view>
					<view class="coupon-h2 indet">获得优惠券兑换码，兑换码由16位数字和字母组成。</view>
					<view class="coupon-h2">2. 兑换码使用：在当前页面输入兑换码即可兑换相应优惠券</view>
					<view class="coupon-h2 indet">一个兑换码只能兑换一张优惠券，不可重复使用。</view>
					<view class="coupon-h2">3. 输入兑换码时请区分字母大小写。</view>
				</view>
			</view>
		</view>
		<view class="coupon-content-model" v-if="isCouponModel">
			<view class="coupon-alert-content">
				<view class="coupon">
					<view class="coupon-list">
						<view class="list-cell-tags">{{ coupon.couponType | TypeFormat }}</text></view>
						<view class="list-cell-le">
							<view class="coupon-maxMoney">
								<text class="small">￥</text>
								{{ coupon.couponAmount }}
							</view>
							<view class="coupon-minMoney">
								<text class="txt">满{{ coupon.touchPrice }}可用</text>
							</view>
						</view>
						<view class="list-cell-ri">
							<view class="list-cell-top">
								<text v-if="coupon.couponType == 0">
									{{ coupon.productType && coupon.productType == 1 ? '全商城商品通用' : '仅可购买指定商品'  }}
								</text>
								<text v-if="coupon.couponType == 1">
									{{ coupon.categoryType == 1 ? '仅限购买产品类商品' : '仅限购买仪器类商品' }}
								</text>
								<text v-if="coupon.couponType == 3">仅限购买店铺【{{ coupon.shopName }}】的商品</text>
								<text v-if="coupon.couponType == 4 || coupon.couponType == 2">全商城商品通用</text>
							</view>
							<view class="list-cell-time">有效期：{{ coupon.startDate }} - {{ coupon.endDate }}</view>
						</view>
					</view>
					<view class="coupon-btn" @click.stop="handleClickCancel">立即收下</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations} from 'vuex';
	export default {
		components:{
			
		},
		data() {
			return {
				params:{
					userId:0,
					redemptionCode:'',
					source:2,
				},
				coupon:{},
				isCouponModel:false
			}
		},
		onLoad() {
			
		},
		filters: {
			TypeFormat:function(value) {
				switch (value) {
					case 0:
						return  '活动券';
						break;
					case 1:
						return  '品类券';
						break;
					case 2:
						return  '用户专享券';
						break;
					case 3:
						return  '店铺券';
						break;
					case 4:
						return  '新用户券';
						break;
				}
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo','identity','isActivity'])
		},
		methods: {
			exchangeConfirm(){// 立即兑换
				if( this.params.redemptionCode == ''){
					this.$util.msg('请输入位兑换码',2000)
					return
				}
				this.ExchangeCoupon(this.params)
			},
			ExchangeCoupon(param){// 兑换优惠券
				this.ProductService.ExchangeCoupon(param).then(response =>{
					this.coupon = response.data
					this.isCouponModel = true
				})
				.catch(error =>{
					this.$util.msg(error.msg,2000);
				})
			},
			handleClickCancel(){// 关闭弹窗并跳转个人优惠券中心
				this.isCouponModel = false
				this.$api.navigateTo('/pages/user/coupon/coupon')
			}
		},
		onShow(){
			this.$api.getComStorage('userInfo').then((resolve) =>{
				this.params.userId = resolve.userId ? resolve.userId : 0;
			}).catch(error =>{
				console.log('暂无用户信息~')
			})
		}
	}
</script>

<style lang="scss">
	.container{
		width: 100%;
		height: auto;
		.coupon-content{
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 0 40rpx;
			padding-top: 60rpx;
			.coupon-input{
				width: 100%;
				height: auto;
				margin-bottom: 88rpx;
				.input{
					width: 100%;
					height: 66rpx;
					box-sizing: border-box;
					border: 1px solid #e2e2e2;
					line-height: 66rpx;
					padding: 0 20rpx;
					font-size: $font-size-26;
					color: #333333;
					border-radius: 2rpx;
				}
			}
			.coupon-main{
				width: 100%;
				height: auto;
				box-sizing: border-box;
				.coupon-button{
					width: 600rpx;
					height: 90rpx;
					margin: 0 auto;
					border-radius: 50rpx;
					line-height: 90rpx;
					text-align: center;
					background: $btn-confirm;
					color: #FFFFFF;
					font-size: $font-size-30;
				}
				.coupon-text{
					width: 100%;
					box-sizing: border-box;
					padding: 0 20rpx;
					margin-top: 40rpx;
					line-height: 44rpx;
					text-align: justify;
					font-size: $font-size-24;
					.coupon-h1{
						color: #333333;
					}
					.coupon-h2{
						color: #999999;
						&.indet{
							text-indent: 28rpx;
						}
					}
				}
			}
		}
	}
	.coupon-content-model{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 8888;
		transition: all 0.4s;
		.coupon-alert-content{
			width: 600rpx;
			height: 612rpx;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			box-sizing: border-box;
			padding-top: 92rpx;
			.coupon{
				width: 600rpx;
				height: 522rpx;
				background: url(https://static.caimei365.com/app/img/icon/icon-coupon-alertbg@2x.png);
				background-size: cover;
				box-sizing: border-box;
				padding: 230rpx 40rpx 0 40rpx;
				.coupon-list{
					width: 100%;
					height: 147rpx;
					margin-bottom: 32rpx;
					box-sizing: border-box;
					background: url(https://static.caimei365.com/app/img/icon/icon-coupon-bg@2x.png);
					background-size: cover;
					position: relative;
					.list-cell-tags{
						display: inline-block;
						padding: 0 10rpx;
						height: 32rpx;
						line-height: 32rpx;
						background-color: #f94b4b;
						color: #FFFFFF;
						font-size: 18rpx;
						border-radius: 16rpx 0 16rpx 0;
						text-align: center;
						position: absolute;
						top: 0;
						left: 0;
					}
					.list-cell-le{
						width: 154rpx;
						height: 100%;
						box-sizing: border-box;
						padding: 30rpx 0;
						float: left;
						.coupon-maxMoney{
							width: 100%;
							height: 54rpx;
							line-height: 54rpx;
							font-size: 42rpx;
							color: #f94b4b;
							text-align: center;
							margin-top: 10rpx;
							.small{
								font-size: $font-size-20;
							}
						}
						.coupon-minMoney{
							width: 100%;
							height: 28rpx;
							float: left;
							box-sizing: border-box;
							padding-left: 24rpx;
							.txt{
								display: block;
								height: 28rpx;
								line-height: 28rpx;
								font-size: 16rpx;
								color: #f94b4b;
								text-align: center;
								padding: 0 5rpx;
								background-color: #fff1eb;
								border-radius: 4rpx;
								float: left;
							}
						}
					}
					.list-cell-ri{
						width: 366rpx;
						height: 100%;
						box-sizing: border-box;
						padding:30rpx 20rpx;
						float: left;
						.list-cell-top{
							width: 100%;
							height: 64rpx;
							line-height: 64rpx;
							font-size: $font-size-26;
							color: #333333;
							float: left;
							text-overflow:ellipsis;
							display: -webkit-box;
							word-break: break-all;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}
						.list-cell-time{
							width: 100%;
							height: 28rpx;
							line-height: 28rpx;
							text-align: left;
							font-size: $font-size-20;
							color: #999999;
						}
					}
				}
				.coupon-btn{
					width: 100%;
					height: 78rpx;
					background: url(https://static.caimei365.com/app/img/icon/icon-coupon-alertbtnbg@2x.png);
					background-size: cover;
					line-height: 78rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: $font-size-36;
				}
			}
		}
	}
</style>