shangfutong-ui/jeepay-ui-uapp-cashier/pages/paySuccess/redSuccess.vue

<template>
 <view class="page-view" :style="{'background-image': `url(${vdata.sysBgUrl})`}" >
	 <view class="page-text-title" @click="goToPreviousPage()">
		 <view>  ＜返回 </view>
	 </view>
	<view class="page-view-weapper"  :style="{'background-image': `url(${vdata.sysBgUrl2})`}">
		  <view class="price-box">
		  		  <text class="price-ico">￥</text>
		  		  <text class="price-text">{{vdata.rewardAmt}}</text>
		  </view>		  
		  <view class="order-text">
		  		 <view class="order-text-box">
		  			  <text class="price-ico">订单金额</text>
		  			  <text class="price-text">￥{{vdata.transAmt}}</text>
		  		 </view>
				 <view class="order-text-box">
					  <text class="price-ico">红包抵扣</text>
					  <text class="price-text">￥{{vdata.changeAmt}}</text>
				 </view>
				 <view class="order-text-box order-text-box-price">
					  <text class="price-ico">实际支付</text>
					  <text class="price-text">￥{{vdata.findAmt}}</text>
				 </view>
		  </view>
	</view>
 </view>
</template>
<script setup>
	import { doubleToThousands } from '@/util/amount.js'
	import { onLoad,onUnload } from '@dcloudio/uni-app'
	import { reactive } from 'vue'
	import { $getAdvert,$getMarketingConfig,$getDiscountDetail } from '@/http/apiManager.js'
	import appConfig from '@/config/appConfig.js'
	import theme from '@/config/theme.js'
	
	const vdata = reactive({
		amount: '0', // 订单金额
		payOrderId: '', // 订单号
		doubleToThousands: doubleToThousands(),
		primaryColor: '',
		advertUrl: '',
		sysBgUrl:"",
		sysBgUrl2:"",
		rewardAmt:0,
		transAmt:0,
		changeAmt:0,
		findAmt:0,
	})
	
	onLoad((params) => {
		//获取平台红包功能
		// getMarketingConfig();
		// vdata.amount = params.amount
		vdata.primaryColor = theme.changeColors()
		// vdata.member = params.member
		console.log(params,'paramsparamsparams')
		
		if (params.payOrderId) {
			vdata.payOrderId = params.payOrderId
		}
		vdata.sysBgUrl = appConfig.marketingConfig.sysBgUrl
		vdata.sysBgUrl2 = appConfig.marketingConfig.sysBgUrl2
		
		$getDiscountDetail(vdata.payOrderId).then(({bizData}) => {
			
			//订单金额
			vdata.transAmt = (bizData.order.amount/100).toFixed(2)
			//红包抵扣
			vdata.changeAmt = (bizData.order.discountAmt/100).toFixed(2)
			//实际支付
			vdata.findAmt = (bizData.order.findAmt/100).toFixed(2)
			if(bizData.redPacketInfo){
				//红包奖励
			  vdata.rewardAmt = (bizData.redPacketInfo.rewardAmt/100).toFixed(2)
			}
		}).catch(err => {
		    console.log(err);
		})
	})
	function back() {
		uni.navigateBack()
	}
	function getMarketingConfig(){
		$getMarketingConfig('marketingConfig').then(({bizData}) => {
			 vdata.sysBgUrl = bizData.marketingConfig.sysBgUrl
			 // console.log(vdata.sysBgUrl,'vdata.sysBgUrl')
			 vdata.sysBgUrl2 = bizData.marketingConfig.sysBgUrl2
		})
	}
	// 点击按钮时触发的事件处理函数
	function goToPreviousPage() {
	    uni.navigateTo({
	    	url: '/pages/payway/index'
	    })
	}
	onUnload(()=>{
		console.log('页面卸载');
		uni.$emit('onRechargeSuccess',true)
	})
</script>
<style lang="scss">
	.page-text-title{
		position: absolute;
		color: #090909;
		font-family: 600;
		font-size: 36rpx;
		width: 100%;
		top: 5%;
		left: 5%;
	}
	//https://syb-jq-public.oss-cn-hangzhou.aliyuncs.com/oem/5999e9eb-6839-4608-869c-f6f39cef7bc1.png
 //	https://syb-jq-public.oss-cn-hangzhou.aliyuncs.com/oem/a86ccec4-ed2a-46bc-b5b5-bb42b9e8939d.png
//	https://syb-jq-public.oss-cn-hangzhou.aliyuncs.com/oem/eecc2da4-9e9e-4ee2-a206-900e38298224.png
.page-view{
    // background-image: url('https://syb-jq-public.oss-cn-hangzhou.aliyuncs.com/oem/a86ccec4-ed2a-46bc-b5b5-bb42b9e8939d.png') ;
    background-size: cover;
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	.page-view-weapper{	
		// background-image: url('https://syb-jq-public.oss-cn-hangzhou.aliyuncs.com/oem/eecc2da4-9e9e-4ee2-a206-900e38298224.png') ;
		// background-image: url('https://syb-jq-public.oss-cn-hangzhou.aliyuncs.com/oem/ae73fd83-89dc-4b47-838e-6d67b150f7ee.png') ;
		background-size: cover;
		height: 50vh;
		width: 50vh;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 9999;
		top: 30px;
	}
	.price-box{
		// margin-top: 10%;
		position: absolute;
		top: 10%;
		background: linear-gradient(to right, #FF7300, #FF312B); /* 设置线性渐变色 */
		-webkit-background-clip: text; /* 使用文本作为背景剪辑 */
		color: transparent; /* 隐藏实际文本颜色 */
		.price-ico{
			font-size: 100rpx;
			font-weight: 600;
		}
		.price-text{
			font-size: 140rpx;
			font-weight: 600;
		}
	}
	.order-text{
		margin-top: 8%;
		.order-text-box{
			font-size: 35rpx;
			color: #CD5E18;
			text{
				padding: 20rpx 100rpx;
			}
		}
		.order-text-box-price{
			color: #9F4A14;
		}
	}
}
</style>