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.couponCode" 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>
</template>

<script>
	import { mapState,mapMutations} from 'vuex';
	export default {
		components:{
			
		},
		data() {
			return {
				params:{
					couponCode:'',
				},
				userName:'',
				userIdentity:0
			}
		},
		onLoad() {
			
		},
		computed: {
			...mapState(['hasLogin','userInfo','identity','isActivity'])
		},
		methods: {
			exchangeConfirm(){
				if( this.params.couponCode == ''){
					this.$util.msg('请输入位兑换码',2000)
					return
				}
			}
		},
		onShow(){
			this.$api.getComStorage('userInfo').then((resolve) =>{
				this.userName = resolve.name;
				this.userIdentity = resolve.userIdentity
			}).catch(error =>{
				
			})
		}
	}
</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: #b2b2b2;
					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;
						}
					}
				}
			}
		}
	}
</style>