caimei-applets-hehe/pages/order/error.vue

<template>
	<view class="container cashier">
		<view class="container-cash clearfix">
			<view class="container-wrapper">
				<view class="cash-icon"><image :src="StaticUrl + 'icon-pay-fail.png'" mode=""></image></view>
				<view class="cash-text">
					<text>{{ successText }}</text>
				</view>
			</view>
			<view class="container-money">
				<view class="label">支付金额</view>
				<view class="money">￥{{ orderInfo.payableAmount | NumFormat }}</view>
			</view>
			<view class="container-button">
				<view class="btn btn-pay" @click="miniWxPayFor(orderInfo)">重新支付</view>
				<view class="btn btn-open" @click="searchOrder">查看订单</view>
			</view>
		</view>
		<cm-loading :visible="isSubLoading" :text="loadingText"></cm-loading>
	</view>
</template>

<script>
import authorize from '@/common/authorize.js'
import CmLoading from '@/components/cm-module/cm-loading/cm-loading.vue'
import wechatPay from './mixins/wechatPay.js'
import { mapGetters } from 'vuex'
export default {
	components: {
		CmLoading
	},
	// 混入支付
	mixins: [wechatPay],
	data() {
		return {
			StaticUrl: this.$Static,
			orderId: '',
			successText: '订单支付失败',
			orderInfo: {}
		}
	},
	onLoad() {
		this.initOrderInfo()
	},
	filters: {
		NumFormat(value) {
			//处理金额
			return Number(value).toFixed(2)
		}
	},
	computed: {
		...mapGetters(['isIphoneX']),
		hanldOrder() {
			return {
				order: this.orderInfo
			}
		}
	},
	methods: {
		initOrderInfo() {
			this.orderInfo = uni.getStorageSync('orderInfo')
			uni.removeStorageSync('orderInfo')
		},
		// 查看订单
		searchOrder() {
			this.$api.redirectTo('/pages/order/order-detail?type=confim&orderId=' + this.orderInfo.orderId)
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #f7f7f7;
	height: auto !important;
}
.container-cash {
	width: 100%;
	.container-wrapper {
		width: 100%;
		margin: 0 auto;
		margin-top: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
		.cash-icon {
			width: 210rpx;
			height: 210rpx;
			margin-top: 112rpx;
			image {
				width: 210rpx;
				height: 210rpx;
			}
		}
		.cash-text {
			font-size: $font-size-28;
			color: #666666;
			line-height: 104rpx;
			font-weight: bold;
		}
	}
	.container-money {
		width: 100%;
		height: 90rpx;
		float: left;
		line-height: 90rpx;
		font-size: $font-size-28;
		box-sizing: border-box;
		padding: 0 24rpx;
		margin-top: 20rpx;
		background-color: #ffffff;
		.label {
			float: left;
			color: #333333;
		}
		.money {
			float: right;
			color: #666666;
		}
	}
	.container-button {
		width: 100%;
		height: auto;
		float: left;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 160rpx;
		.btn {
			width: 600rpx;
			height: 90rpx;
			border-radius: 45rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: $font-size-26;
			color: #ffffff;
			box-sizing: border-box;
			border: 1px solid $color-system;
			margin-bottom: 24rpx;
			&.btn-open {
				color: $color-system;
			}
			&.btn-pay {
				border-color: $color-system;
				background: $btn-confirm;
			}
		}
	}
}
</style>