QianNiaoUser/pagesT/money/paySuccess.vue

<template>
	<view :class="['qn-page-' + theme]" class="content">
		<text class="success-icon ibonfont ibonxuanze_xuanzhong"></text>
		<text class="tit">支付成功</text>

		<view class="btn-group">
			<navigator url="/pagesT/order/order?state=0" open-type="redirect" class="mix-btn primary-btn">查看订单</navigator>
			<navigator url="/pages/index/index" open-type="switchTab" class="mix-btn hollow">返回首页</navigator>
		</view>
		<view class="coupon-view" v-if="get_coupon">
			<image class="coupon-bg" src="https://onlineimg.qianniao.vip/getcoupon-bg.png" mode="aspectFit"></image>
			<text class="close-icon ibonfont ibonguanbi1"></text>
			<view class="coupon-btn" @click="goPage('/pagesT/user/DiscountCoupon', 'redirectTo')">立即查看</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			get_coupon: false,
			price: 0
		};
	},
	onLoad(options) {
		this.price=options.price
		console.log(this.price)
		// this.price = 10;
		this.getData();
	},
	methods: {
		getData() {
			this.$u.api.couponList({
				grantType: '40',
				payAmount: this.price
			}).then(data=>{
				if (data.data && data.data.length) {
					this.get_coupon = true;
				}
			});
		}
	}
};
</script>

<style lang="scss">
.content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.success-icon {
	font-size: 160upx;
	color: #ff4724;
	margin-top: 100upx;
}
.tit {
	font-size: 38upx;
	color: #303133;
}
.btn-group {
	padding-top: 100upx;
}
.mix-btn {
	margin-top: 30upx;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 600upx;
	height: 80upx;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10upx;
	&.hollow {
		background: #fff;
		color: #303133;
		border: 1px solid #ccc;
	}
}
.coupon-view {
	position: fixed;
	top: 40%;
	left: 50%;
	width: 400upx;
	height: 452upx;
	transform: translate(-50%, -50%);
	.coupon-bg {
		width: 400upx;
		height: 452upx;
	}
	.coupon-btn {
		position: absolute;
		bottom: 12upx;
		left: 50%;
		width: 240upx;
		transform: translateX(-50%);
		height: 60upx;
		font-size: 26upx;
		color: #fff;
		background: linear-gradient(#ff7f00, #ff6500);
		border-radius: 60upx;
		text-align: center;
		line-height: 60upx;
	}
	.close-icon {
		position: absolute;
		top: 0upx;
		right: 0;
		font-size: 32rpx;
		display: block;
		width: 32rpx;
		height: 32rpx;
		color: #999999;
	}
}
</style>