oil-station/pos-uni/pagesHome/PaymentResults/PaymentResults.vue

<template>
	<view class="content">
		<view class="container" v-if="oilOrder && type!=1">
			<headers :titles="titles"><u-icon name="arrow-left" color="#fff" size="22"></u-icon></headers>
			<view class="top_">
				<image src="../../static/imgs/zfcg.png" mode=""></image>
			</view>
			<view class="title_">支付成功</view>
			<!-- <view class="top_" v-if="oilOrder.orderStatus!='paid'">
				<image src="../../static/imgs/zfsb.png" mode=""></image>
			</view>
			<view class="title_" v-if="oilOrder.orderStatus!='paid'">支付失败</view> -->
			<view class="b-bs">
				<view class="h-size">应收金额</view>
				<view class="red-size">￥{{oilOrder.orderAmount}}</view>
			</view>
			<view class="b-bs">
				<view class="h-size">优惠金额</view>
				<view class="red-size">￥{{oilOrder.discountAmount}}</view>
			</view>
			<view class="b-bs">
				<view class="h-size">实收金额</view>
				<view class="red-size">￥{{oilOrder.payAmount}}</view>
			</view>
			<view class="b-bs">
				<view class="h-size">储值卡消费金额</view>
				<view class="red-size">￥{{oilOrder.balanceAmount}}</view>
			</view>
			<view class="b-bs">
				<view class="h-size">支付方式</view>
				<view class="h-size" v-if="oilOrder.payType=='ALIPAY'">支付宝支付</view>
				<view class="h-size" v-if="oilOrder.payType=='WECHAT'">微信支付</view>
				<view class="h-size" v-if="oilOrder.payType=='UNIONPAY'">银联二维码支付</view>
				<view class="h-size" v-if="oilOrder.payType=='CASH'">现金支付</view>
				<view class="h-size" v-if="oilOrder.payType=='APPLET_CODE'">小程序码支付</view>
			</view>
		</view>
		<view class="container" v-if="balanceOrder && type==1">
			<headers :titles="titles"><u-icon name="arrow-left" color="#fff" size="22"></u-icon></headers>
			<view class="top_">
				<image src="../../static/imgs/zfcg.png" mode=""></image>
			</view>
			<view class="title_">支付成功</view>
			<view class="b-bs">
				<view class="h-size">应收金额</view>
				<view class="red-size">￥{{balanceOrder.payAmount}}</view>
			</view>
			<view class="b-bs">
				<view class="h-size">优惠金额</view>
				<view class="red-size">￥{{balanceOrder.discount}}</view>
			</view>
			<view class="b-bs">
				<view class="h-size">实收金额</view>
				<view class="red-size">￥{{balanceOrder.payAmount}}</view>
			</view>
			<!-- <view class="b-bs">
				<view class="h-size">储值卡消费金额</view>
				<view class="red-size">￥{{balanceOrder.balanceAmount}}</view>
			</view> -->
			<view class="b-bs">
				<view class="h-size">支付方式</view>
				<view class="h-size" v-if="balanceOrder.payType=='ALIPAY'">支付宝支付</view>
				<view class="h-size" v-if="balanceOrder.payType=='WECHAT'">微信支付</view>
				<view class="h-size" v-if="balanceOrder.payType=='UNIONPAY'">银联二维码支付</view>
				<view class="h-size" v-if="balanceOrder.payType=='CASH'">现金支付</view>
				<view class="h-size" v-if="balanceOrder.payType=='APPLET_CODE'">小程序码支付</view>
			</view>
		</view>
		<view class="p-bottom">
			<view class="anniu" @click="goback()">
				返回
			</view>
		</view>
	</view>
</template>

<script>
	import request from "../../utils/request";
	import headers from '../../components/header/headers.vue'

	export default {
		data() {
			return {
				titles: "支付结果",
				orderNo: "",
				oilOrder: {},
				balanceOrder: {},
				type: "",
			}
		},
		onLoad(e) {
			if (e.type && e.type == 1) {
				this.type = e.type
				this.orderNo = e.orderNo
				this.getBalanceOrder()
			} else {
				this.orderNo = e.orderNo
				this.getOilOrder()
			}

		},
		onShow() {
			// this.actList = ["1", "1", "1", "1", "1", ]
			// this.status = "nomore" 底部刷新结束

		},
		onPullDownRefresh() {
			console.log("刷新");
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			// this.show = true
			setTimeout(() => {
				console.log("加载执行");
			}, 2000)
		},
		components: {
			headers
		},
		methods: {
			// 根据订单号查询订单信息
			getOilOrder() {
				request({
					url: '/business/oilOrder/orderNo',
					method: 'post',
					data: {
						orderNo: this.orderNo
					}
				}).then((res) => {
					this.oilOrder = res.data
				})
			},
			getBalanceOrder() {
				request({
					url: 'business/marketingActivity/activeExchange/cardValueOrders/getOneByOrderNo',
					method: 'post',
					data: {
						orderNo: this.orderNo
					}
				}).then((res) => {
					this.balanceOrder = res.data
				})
			},
			goback() {
				uni.navigateTo({
					url: "/pages/index/index"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #f4f5f6;
		// background: linear-gradient(180deg, #B2D2FC 0%, #B2D2FC 14%, rgba(255, 255, 255, 0.84) 24%, rgba(255, 255, 255, 0.84) 100%);
		height: 100vh;
	}

	.container {
		width: 100%;
		background: #f4f5f6;
		box-sizing: border-box;
		padding-top: 88px;
	}

	.top_ {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 65px;

		image {
			width: 100px;
			height: 100px;

		}
	}

	.title_ {
		width: 100%;
		margin: 15px auto;
		text-align: center;
		font-weight: 500;
		font-size: 22px;
		color: #333333;
		margin-bottom: 40px;
	}

	.p-bottom {
		width: 100%;
		height: 68px;
		background: #fff;
		position: fixed;
		bottom: 0px;
		left: 0px;
	}

	.anniu {
		height: 40px;
		background: #0864E9;
		width: 80%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		border-radius: 50px;
		margin: 5px auto;
	}

	.b-bs {
		width: 90%;
		margin: 15px auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.h-size {
		font-weight: bold;
		font-size: 20px;
		color: #333333;
	}

	.red-size {
		font-weight: bold;
		font-size: 20px;
		color: #FD504E;
	}
</style>