JP-ChargeTeam51/pages/user/receiveCoupon.vue

<template>
	<view id="nononoElderModeClass">
		<ujp-navbar title="优惠券" :is-back="false"  title-size='44' ></ujp-navbar>
		<view class="main" >
			<view class="content">
				<view class="img">
					<img src="../../assets/img/coupons.png" alt="">
				</view>
				
				<view v-html="userMessage.content">
					
				</view>
			</view>
			<!-- 专享优惠券 -->
			<view class="exclusive">
				<p>专享优惠券</p>
				<view class="img" v-for="(item,i) in  userCouponList" :key="i" >
					<img src="../../assets/img/Frame915.png" alt="">
					
						<view class="num">
							{{item.value}}
						</view>
						<view class="unit">元</view>
					<view class="ticket-info">
						<view class="ticket-name" v-if="item.classify==4||item.classify==5">
							月卡优惠券
							
						</view>
						<view class="ticket-name" v-else>
							{{item.threshold == 0 ? '无门槛充电优惠券' : '满'+selectObj.threshold.toFixed(2)+'元可用'}}
							
						</view>
						<view class="condition">
							限{{item.useScopeText}}使用
						</view>
					</view>
				</view>
				
				
			</view>
			
		</view>
		<button class="btn"  @click="btnCk()" >{{status=='3'?'领取优惠券':'查看'}}</button>
		
	</view>
</template>

<script>
	import * as userApi from '@/apis/user.js'
	
	export default {
		data() {
			return {
				id:"",
				userMessage:{},
				userCouponList:[],
				status:-1,
			}
		},onLoad(op) {
			this.id=op.id
			this.getInfo()
			
		},
		methods: {
			getInfo(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				userApi.giveCouponDetail({
					messageId:this.id
				}).then(response => {
					uni.hideLoading()
						this.userMessage=response.data.userMessage	
					this.userCouponList=response.data.userCouponList
					for(var i in this.userCouponList){
							var obj=this.userCouponList[i]
							this.status=obj.status;
					}
					// var list_u_title = document.getElementsByClassName("u-title")
					// list_u_title.style="line-height: 20px;color: rgb(96, 98, 102);  font-size: 20px;    overflow: unset;"
					// console.log(this.userMessage)
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
					
				})
			},
			btnCk(){
				if(this.status==3){
					this.submit()
				}else{
					uni.navigateTo({
						url:'/pages/user/coupon/myCoupon'
					})
				}
			},
			submit(){
				
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				userApi.receiveGiveCoupon({
					messageId:this.id
				}).then(response => {
					uni.hideLoading()
					uni.showModal({
						title:"提示",
						content:"领取成功",
						confirmText:"前往查看",
						showCancel:true,
						success(res) {
							if (res.confirm) {
										uni.navigateTo({
											url:'/pages/user/coupon/myCoupon'
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
						}
					})
					console.log(this.userMessage)
					this.getInfo()
				}).catch(error => {
					uni.showToast({
						title: error
					})
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #FF4A2D;
		padding-bottom: 90px;
	}
	.main{
		width: 87.2%;
		margin: 100px auto 0;
		position: relative;
		.content{
			padding: 24px;
			padding-top: 50px;
			background-color: #fff;
			box-shadow: 0px 0px 0px 1px rgba(254, 229, 147, 100);
			border: 2px solid rgba(253, 217, 141, 100);
			border-radius: 8px;
			.img{
				width: 44vw;
				height: 134px;
				position: absolute;
				top: -88px;
				right: 0px;
				img{
					width: 100%;
					height: 100%;
				}
			}
          .title{
			  font-size: 16px;
			  color: rgba(84, 45, 45, 100);
			  margin-bottom: 13px;
		  }			
		  .text{
			  line-height: 24px;
			  color: rgba(84, 45, 45, 100);
			  font-size: 16px;
			  text-align: justify;
			  text-decoration:underline;
			   text-decoration-color:#ECE3BA;
			   text-indent: 32px;
		  }
		  .sign{
			  text-align: right;
			  margin-top: 8px;
			  font-size: 16px;
		  }
		}
		
		// 专享优惠券
		.exclusive{
			background-color: #fff;
			margin-top: 20px;
			padding: 16px 24px 24px 24px ;
			box-shadow: 0px 0px 0px 1px rgba(254, 229, 147, 100);
			border: 2px solid rgba(253, 217, 141, 100);
			border-radius: 8px;
			p{
				width: 100%;
				text-align: center;
				color: rgba(255, 73, 75, 100);
				font-size: 20px;
			}
			.img{
				width: 74.4vw;
				height: 84px;
				margin-top: 16px;
				position: relative;
				img{
					width: 100%;
					height: 100%;
					
				}
			}
			
				
				
				
				.num{
					font-size:40px;
					color: rgba(252, 237, 179, 100);
					position: absolute;
					top:12px;
					left: 2vw;
					font-weight: 600;
				}
				.unit{
					
					font-size: 20px;
					color: rgba(252, 237, 179, 100);
					position: absolute;
					top: 29px;
					left: 18vw;
				}
				.ticket-info{
					width: 40vw;
					text-align: center;
					position: absolute;
					top: 18px;
					right: 18px;
					.ticket-name{
						line-height: 25px;
						color: rgba(16, 16, 16, 100);
						font-size: 14px;
						
					}
					.condition{
						line-height: 22px;
						color: #8a6f6f;
						font-size: 12px;
					}
					
				}
			
		}
	}
	.btn{
		width: 87.4%;
		margin-top: 20px;
		
		background-image: linear-gradient(#ffff00,#ff9600);
		color: rgba(82, 30, 0, 100);
		font-size: 20px;
		border-radius: 50px;
	}

</style>