caimei-applets-hehe/pages/user/order/success.vue

<template>
	<view class="container cashier">
		<custom :systeminfo='systeminfo' 
				:navbar-data='nvabarData' 
				:headerBtnPosi ="headerBtnPosi" 
				:isBackType="true" 
				:path="'/pages/user/cart/cart'">
		</custom>
		<view class="container-cash clearfix" :style="{marginTop:CustomBar+'px'}">
			<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="this.$api.redirectTo('/pages/user/order/order-details?type=confim&orderId='+orderId)">查看订单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import custom from '@/components/cm-custom/pay-custom' //自定义导航
	import authorize from '@/common/config/authorize.js'
	export default{
		components:{
			custom
		},
		data(){
			return{
				StaticUrl:this.$Static,
				orderId:'',
				nvabarData: {		//顶部自定义导航
					haveBack:false,
					showCapsule:1, // 是否显示左上角图标  1表示显示  0表示不显示,
					showSearch: 0,
					title: '支付结果',  // 导航栏 中间的标题
					textLeft:this.$store.state.isIphone
				},
				headerBtnPosi:this.setHeaderBtnPosi(),//获取设备顶部胶囊高度
				systeminfo:this.setSysteminfo(),		 //获取设备信息
				isIphoneX:this.$store.state.isIphoneX,
				CustomBar:this.CustomBar,// 顶部导航栏高度
				successText:'订单支付失败',
				orderInfo:{},
			}
		},
		onLoad(option) {
			console.log(option)
			let data = JSON.parse(option.data);
			this.orderInfo = data.data
			console.log(this.orderInfo)
		},
		filters:{
			NumFormat(value) {//处理金额
				return Number(value).toFixed(2);
			},
		},	
		methods:{
			setHeaderBtnPosi(){
				// 获得胶囊按钮位置信息
				let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
				return headerBtnPosi
			},
			setSysteminfo(){
				let systeminfo;
				uni.getSystemInfo({ // 获取设备信息
					success: (res) => {
						systeminfo = res
					},
				})
				return systeminfo
			},
			async MiniWxPayFor(data){
				const wechatCode = await authorize.getCode('weixin')
				this.PayService.WeChatMiniWxPay(
					{
						payAmount:data.payableAmount*100,
						payWay:"WEIXIN",
						code:wechatCode,
						orderId:data.orderId
					}
				)
				.then(response =>{
					let PayInfo = JSON.parse(response.data.data.payInfo);
					this.WxRequestPayment(PayInfo)
				})
				.catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			WxRequestPayment(data){
				let self = this
				wx.requestPayment({
					'timeStamp': data.timeStamp,
					'nonceStr': data.nonceStr,
					'package': data.package,
					'signType': data.signType,
					'paySign': data.paySign,
					'success':function(res){
						wx.reLaunch({url: '/pages/tabBar/index/index'});
					},
					'fail':function(res){
						console.log(res)
						self.$api.redirectTo(`/pages/user/order/success?data=${JSON.stringify({data:self.orderInfo})}`)
					},
					'complete':function(res){
			
					}
				})
			},
			initData(option){
				console.log(option)
				this.orderId = option.orderId
			}
		},
		onShow() {
			
		}
	}
</script>

<style lang="scss">
	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>