high-mini/pages/classify/order/paymentResult.vue

<template>
	<view class="pay-suc ">
		<view class="top-con font18">
			<view class="colorgr icon-ymt zhenque font22"></view>
			<view class="mart5">支付成功</view>
			<view class="mart5">¥<text class="fontwig6 font24">{{recinfo.payablePrice}}</text></view>
			<view class="mart5 font16 color999">{{ recinfo.payType | filtersType}}支付</view>
		</view>
		<!-- <view class="min-con color999 font18">
			<view class="">
				订单签收后奖励
			</view>
			<view class="">
				26积分
			</view>
		</view> -->
		<view class="bottom-con">
			<view class="btn1 btn" @click="orderDetail">
				查看订单
			</view>
			<view class="btn2 btn" @click="yaoqin">
				邀请有礼
			</view>
		</view>
	</view>
</template>

<script>
	import { getDetailByOrderNo } from '@/Utils/Api.js'
	export default {
		data(){
			return{
				orderId:'',
				recinfo:{},
				
			}
			
		},
		
		onLoad(option){
			this.orderId=option.id
			console.log(option)
		},
		onShow(){
			this.getDetailByOrderNo()
		},
		filters:{
			filtersType(v){
				if(v == 1){
					return "支付宝"
				}
				if(v == 2){
					return "微信"
				}
				if(v == 3){
					return "金币"
				}
				if(v == 4){
					return "汇联通工会卡"
				}
				if(v == 5){
					return "银联"
				}
				
				return ''
			}
		},
		methods:{
			//查询订单详情
			getDetailByOrderNo() {
				uni.showLoading({
					title: '加载中...'
				})
				let params = {
					orderNo: this.orderId,
				}
				getDetailByOrderNo(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.recinfo = res.return_data;
						
					}
				})
			},
			orderDetail(){
				uni.reLaunch({
					url:"/pages/user/order_list/order_list"
				})
			},
			yaoqin(){
				uni.navigateTo({
					url:"/pages/user/generatePoster/generatePoster"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.pay-suc{
	height: 100vh;
	// background: url('@/static/img/bgimg.jpg') no-repeat ;
	background-color: rgba(40, 116, 204, 0.8);
	
	.top-con{
		text-align: center;
		height: 25vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.colorgr{
		color: #5C9D41 !important;
	}
	
	.min-con{
		padding: 10px;
		width: 80%;
		margin: 0 auto;
		border-top:1px solid #f6f6f6;
		border-bottom:1px solid #f6f6f6;
		display: flex;
		justify-content: space-between;
	}
	
	.bottom-con{
		padding: 10px;
		width: 60%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		margin-top:20px;
		.btn{
			width: 45%;
			height: 40px;
			line-height: 40px;
			border-radius: 20px;
			text-align: center;
		}
		.btn1{
			border:1px solid #666666;
		}
		.btn2{
			border:1px solid #CD2C3C;
			color:#CD2C3C ;
		}
	}
}
</style>