jzhw_uni/pages/checkout/payResult/payResult.vue

<template>
	<view class="container">

		 <view class="pay-result-top">
            <image src="/static/images/new/icon-success.png" alt="" class="pay-success"></image>

            <view class="result-text" v-if="type == '2'">预约成功</view>
            <view class="result-text" v-else>支付成功</view>
            <view class="result-tip" v-if="type == '2'">专属管家将尽快与您联系</view>
            <view class="result-tip" v-else>支付：¥{{ payAmount }}</view>
        </view>
		<!-- 商品图片 -->
		<view class="pay-img-wrapper">
			<image :src="imgUrl"></image>
		</view>
		<view class="service-tips sub-color" v-if="appType == 1">已完成预约，如有特殊情况需调整服务日期，我们客服团队将第一时间与您联系。</view>
		<view class="service-tips sub-color" v-if="appType == 0">已付款，请尽快完成预约！</view>
		<view class="common-btn-wrapper">
			<van-button block round @tap.native="goOrder" color="#d77958" v-if="appType ==1">查看订单</van-button>
			<van-button block round @tap.native="goAppoint" color="#d77958" v-if="appType ==0">立即预约</van-button>
			<van-button block round @tap.native="goIndex" color="#f6f5f5" custom-style class="fanhui">返回首页</van-button>
		</view>
	</view>
</template>

<script>
	var util = require('../../../utils/util.js');
	var api = require('../../../config/api.js');
	var app = getApp();
	export default {
		data() {
			return {
				imgUrl: '',
				type: '',
				status: false,
				orderId: 0,
				payAmount: '',
				appointShow: false,
				appType: null
			};
		},
		onLoad: function(options) {
			// 页面初始化 options为页面跳转所带来的参数
			this.setData({
				orderId: options.orderId,
				payAmount: options.actualPrice,
				type: app.globalData.infoGoods.type,
				appType: uni.getStorageSync('appType'),
				imgUrl: app.globalData.infoGoods.type == '2' ?
					'https://jzmall.lifejingzhi.com/file/jzmall/weixin/new/icon-jpjzs.png' : app.globalData
					.infoGoods.picUrl
			});
		},
		onReady: function() {},
		onShow: function() {
			// 页面显示
		},
		onHide: function() {
			// 页面隐藏
		},
		onUnload: function() {
			// 页面关闭
		},
		methods: {
			goIndex() {
				uni.navigateTo({
					url: '/pages/index/index'
				});
			},

			goOrder() {
				uni.redirectTo({
					url: '/pages/ucenter/order/order'
				});
			},

			payOrder() {
				let that = this;
				util.request(
					api.OrderPrepay, {
						orderId: that.orderId
					},
					'POST'
				).then(function(res) {
					if (res.errno === 0) {
						const payParam = res.data;
						console.log('支付过程开始');
						uni.requestPayment({
							timeStamp: payParam.timeStamp,
							nonceStr: payParam.nonceStr,
							package: payParam.packageValue,
							signType: payParam.signType,
							paySign: payParam.paySign,
							success: function(res) {
								console.log('支付过程成功');
								that.setData({
									status: true
								});
							},
							fail: function(res) {
								console.log('支付过程失败');
								util.showErrorToast('支付失败');
							},
							complete: function(res) {
								console.log('支付过程结束');
							}
						});
					}
				});
			},
			goAppoint() {
				uni.navigateTo({
					url: '/pages/ucenter/appointOrder/appointOrder?orderId=' + this.orderId
				});

			}
		}
	};
</script>
<style>
	page {
		min-height: 100%;
		width: 100%;
	}

	.container {
		height: 100%;
	}

	.pay-result-top {
		background: url('https://mall.zhaijieshi.cc/file/wx-huawang/bj2.png') no-repeat center;
		background-size: 100% 100%;
		width: 750rpx;
		height: 516rpx;
		padding: 32rpx 0 0;
		display: flex;
		flex-direction: column;
		justify-content: top;
		align-items: center;
		color: #fff;
	}

	.pay-img-wrapper {
		width: 324rpx;
		height: 324rpx;
		border-radius: 324rpx;
		padding: 10rpx;
		margin: 0 auto;
		margin-top: -158rpx;
		margin-bottom: 50rpx;
		background: #f5f5f5;
	}

	.pay-img-wrapper image {
		width: 304rpx;
		height: 304rpx;
		border-radius: 304rpx;
	}

	.pay-result .msg {
		text-align: center;
		margin: 100rpx auto;
		color: #2bab25;
		font-size: 36rpx;
	}

	.pay-result .btns {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pay-result .btn {
		text-align: center;
		height: 80rpx;
		margin: 0 20rpx;
		width: 200rpx;
		line-height: 78rpx;
		border: 1px solid #868686;
		color: #000;
		border-radius: 5rpx;
	}

	.pay-result .error .msg {
		color: #b4282d;
		margin-bottom: 60rpx;
	}

	.pay-result .error .tips {
		color: #7f7f7f;
		margin-bottom: 70rpx;
	}

	.pay-result .error .tips .p {
		font-size: 24rpx;
		line-height: 42rpx;
		text-align: center;
	}

	.pay-result .error .tips .p {
		line-height: 42rpx;
		text-align: center;
	}

	.pay-result-top image {
		width: 110rpx;
		height: 110rpx;
	}

	.result-text {
		margin: 50rpx 0 20rpx;
		font-size: 34rpx;
		font-weight: bold;
	}

	.service-tips {
		font-size: 22rpx;
		padding: 0 30rpx 0;
		text-align: center;
	}

	.common-btn-wrapper {
		margin-top: 300rpx;
	}

	.appoint-wrapper {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.appoint-block {
		background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/appoint-dia.png') no-repeat center;
		background-size: 100% 100%;
		width: 576rpx;
		height: 524rpx;
		padding-top: 248rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.appoint-block .pay-title {
		height: 30rpx;
		font-size: 30rpx;
		line-height: 30rpx;
		color: #333;
	}

	.appoint-block .appoint-tips {
		height: 26rpx;
		font-size: 26rpx;
		line-height: 26rpx;
		margin: 32rpx 0 70rpx;
	}

	.appoint-btn {
		width: 458rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		text-align: center;
		color: #fff;
		background: #d77958;
	}

	.fanhui .van-button__text {
		color: #999 !important;
	}
</style>