<!-- 支付结果页 -->
<template>
	<view class="success-page">

			<view class="success-box u-flex-col u-row-center u-col-center">
				<view><image class="pay-img" :src="payImg[payState]" mode=""></image></view>
				<view><text class="notice">{{ payText[payState] }}</text></view>
				<view><text class="pay-money" v-if="payState === 'success' && orderDetail.total_fee">￥{{ orderDetail.total_fee }}</text></view>
				<view class="btn-box u-flex u-row-between" v-if="showModal == 'app'">
					<button class="u-reset-button base-btn" open-type="launchApp" app-parameter="wechat" binderror="launchAppError" >返回APP </button>
				</view>
				
				<view class="btn-box u-flex u-row-between" v-if="showModal == 'xcx'">
					<button class="u-reset-button base-btn" @click="getLos()" >返回 </button>
				</view>
			</view> 
	</view>
</template>

<script>
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	let payTimer = null;
	const payCount = 5;
	export default {
		components: {},
		data() {
			return {
				showModal: 'h5',
				messageType: '',
				templateIds: [],
				wxOpenTags: '',
				orderDetail: {}, //订单详情
				orderType: '', //订单类型
				payText: {
					fail: '支付失败',
					success: '支付成功',
					paying: '查询中...'
				},
				payImg: {
					fail:  '/static/syb/order_pay_fail.gif',
					success:  '/static/syb/order_pay_success.gif',
					paying:'/static/syb/order_paying.gif'
				},
				payState: '' //支付状态
			};
		},
		computed: {
			...mapGetters(['subscribeMessageIdsMap'])
		},
		onLoad(opt) {
		  var that = this;
		  that.payState = opt.pay_state
		  that.showModal = opt.show_modal		  
		  console.log(that.showModal,'that.showModal')
		},
		methods: {
			...mapActions(['getCartList']),
              getLos(){
				  wx.navigateBackMiniProgram({
				    extraData: {
				      name: '半屏小程序返回',
				      status: this.payState
				    },
				    success(res) {
				      // 返回成功
				    }
				  })
			  }
		}
	};
</script>

<style lang="scss" scopeds>
	.success-box {
		text-align: center;
		background: #fff;
		width: 750rpx;
		padding: 40rpx 0;

		.pay-img {
			width: 130rpx;
			height: 130rpx;
		}

		.notice {
			font-size: 30rpx;

			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			line-height: 30rpx;
			margin-top: 30rpx;
		}

		.pay-money {
			font-size: 36rpx;
			color: #ff3000;
			font-weight: 600;
			margin-top: 20rpx;
		}

		.btn-box {
			margin-top: 30rpx;
			// width: 660rpx;

			.base-btn {
				width: 320rpx;
				line-height: 70rpx;
				background: rgba(255, 255, 255, 1);
				border: 1rpx solid rgba(223, 223, 223, 0.5);
				border-radius: 35rpx;
				font-size: 28rpx;

				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				padding: 0;
			}

			.again-pay {
				width: 320rpx;
				line-height: 70rpx;
				background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				border-radius: 35rpx;
				font-size: 28rpx;

				font-weight: 400;
				color: rgba(255, 255, 255, 0.8);
				padding: 0;
			}
		}
	}

	.hot-box {
		background: #fff;
		padding: 20rpx;
		margin-top: 20rpx;

		.hot-title {
			font-size: 30rpx;

			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			height: 80rpx;
		}
	}
</style>
