digitalMen/pages/user/public/paymentdetail.vue

<template>
	<view>
		<tn-nav-bar :bottomShadow="false" :isBack="false">支付结果</tn-nav-bar>
		<view :style="{height: tobheight+'px'}"></view>
		<view class="pay_icon">
			
				<u-icon name="checkmark-circle-fill" color="#00CA88" size="88"></u-icon>
			
			<view class="pay_result">支付成功</view>
			<view class="pay_money">￥{{info.pay_price?info.pay_price:0}}</view>
		</view>
		<view class="pay_detail">
			<view class="">支付状态：<view class="">已支付</view></view>
			<view class="">支付方式：<view class="">微信支付</view></view>
			<view class="">支付时间：<view class="">{{info.create_time?info.create_time:''}}</view></view>
			<view class="">支付单号：<view class="">{{info.order_number?info.order_number:''}}</view></view>
			<!-- <text>支付状态：已支付</text>
			<text>支付方式：微信支付</text>
			<text>支付时间：2022-04-07 18:09:06</text>
			<text>支付单号：58797654306318049122</text> -->
		</view>
		<view class="pay_operation">
			<!-- <view class="pay_back">
				<u-button type="primary" shape="circle" text="订单详情" size="large" plain="true" color="#00CA88"></u-button>
			</view> -->
			<view class="pay_back"> 
				<u-button @click="fanhui" type="primary" shape="circle" text="返回" size="large"   color="#00CA88"></u-button>
			</view>
			<!-- <view class="pay_back">
				<u-button @click="fanhuidttt" type="primary" shape="circle" text="回到首页" size="large"   color="#00CA88"></u-button>
			</view> -->
		</view>
		<wike-loading-page :isLoading="isLoading"></wike-loading-page>
	</view>
</template>

<script>
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	export default {
		data() {
			return {
				orderid:'',
				type:'',
				info:{},
				tobheight:45,
				platform: this.$platform.get(),
				isLoading:true,
				orderType:0
			}
		},
		computed: {
			...mapGetters(['appInfo'])
		},
		onLoad(e) {
			var that = this;
			if(e&&e.orderId){
			// console.log(e.orderId)
			that.orderid = e.orderId
			that.orderType = e.orderType
			if(e.orderType == 1){
				that.getorders()
			}else{
				that.getorder()
			}
			
			}
			if(this.platform == 'wxMiniProgram'){
			var menumtop = uni.getMenuButtonBoundingClientRect().top - uni.getSystemInfoSync().statusBarHeight
			var paddingtop = uni.getSystemInfoSync().statusBarHeight + menumtop
			this.tobheight = (menumtop+paddingtop+uni.getMenuButtonBoundingClientRect().height)
			}
			
		},
		methods: {
			getorder(){
			var that = this;
			that.$http('order.detail',{id: that.orderid}).then( res => {
				// console.log(res);
				if(res.code == 0){
					uni.setNavigationBarTitle({
						title: this.appInfo.site_name
					});
					that.info = res.data
					this.isLoading = false
					// console.log(that.info);
				}
			}
			
			 )},
			 getorders(){
				 var that = this;
				 that.$http('order.detailSettle',{id: that.orderid}).then( res => {
				 	// console.log(res);
				 	if(res.code == 0){
				 		uni.setNavigationBarTitle({
				 			title: this.appInfo.site_name
				 		});
				 		that.info = res.data
				 		this.isLoading = false
				 		// console.log(that.info);
				 	}
				 }
				 
				  )
			 },
			fanhui(){
				if(this.orderType == 0){
					// uni.navigateBack()
					uni.redirectTo({
						url:'/pages/user/member/member'
					})
					
					return;
				}
				if(this.orderType == 2){
					// uni.navigateBack()
					uni.switchTab({
						url:'/pages/signin/signin'
					})
					
					return;
				}
				uni.redirectTo({
					url:'/pages/user/commission/index'
				})
			},
			fanhuidttt(){
				this.$store.commit('subscribeMessage', 'order');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay_icon{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 80rpx;
		.pay_result{
			margin-top: 48rpx;
			font-weight: 700;
		}
		.pay_money{
			font-size: 53rpx;
			font-weight: bold;
			margin-top: 26rpx;
		}
	}
	.pay_detail{
		display: flex;
		flex-direction: column;
		font-size: 30rpx;
		margin-left: 15%;
		margin-top: 80rpx;
		view{
			display: flex;
			align-items: center;
			color: #909090;
			margin-top: 28rpx;
			view{
				color: #000000;
				margin-top: 0;
				margin-left: 15rpx;
			}
		}
	}
	.pay_operation{
		position: absolute;bottom: 180rpx;width: 100%;
		.pay_back{
			padding: 36rpx 100rpx 0rpx;
		}
	}
</style>