smartmeter-app/page_user/wxpay.vue

<template>
	<view class="paycont">
			<u-navbar title="支付订单" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
			height='36'></u-navbar>
			<view class="pay_info">
				<view class="info">
					订单编号:{{orderid}}
				</view>
				<view class="price">
					￥{{realprice}}
				</view>
			
			</view>
			
			<view class="pat_type">
				<view class="type_li">
					<view class="left">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uLRBM81zYsXyVbk9ImT1" mode="" class="payimg"></image>
						<view class="txt">
							微信支付
						</view>
					</view>
					<view class="right">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uaUP6IjcGUln23kZJJK3" mode=""></image>
					</view>
				</view>
			
				
			</view>
			<view class="patBtn" @click="payBtn()">
				确认支付
			</view>
	</view>
	
</template>

<script>
	export default{
		data(){
			return{
				bgc: {
					backgroundColor: "#F7FAFE",
				},
				orderid:'',
				realprice:0,
				payinfo:{}
			}
		},
		onLoad(options) {
			console.log(options);
			this.orderid=options.orderid
			this.realprice=options.price
			this.getpayinfo()
		},
		methods:{
			getpayinfo(){
				let id =this.orderid
				this.$u.get("/app/pay/wx/"+id).then((res) => {
					if (res.code == 200) {
						console.log(res,'resres');
						this.payinfo=res.data
					}
				});
			},
			payBtn() {
				let payinfo=this.payinfo
			   uni.requestPayment({
			           provider: 'wxpay',
			           timeStamp: payinfo.timeStamp,
			           nonceStr: payinfo.nonceStr,
			           package: payinfo.packageVal,
			           signType: payinfo.signType,
			           paySign: payinfo.paySign,
			           success(res) {
			               // 支付成功逻辑
			               uni.navigateBack({
			                              delta: 1 // 返回上级页面
			                          });
			           },
			           fail(err) {
			               // 支付失败逻辑
			               uni.showToast({
			                 title: '支付失败',
			                 icon: 'none',
			                 duration: 2000
			               });
			           }
			       });
			},
		
			
		}
	}
</script>

<style lang="scss" >
	page{
		background: #F7FAFE;
	}
	.paycont{
		// display: flex;
		// justify-content: center;
		// flex-wrap: wrap;
		.pay_info{
			margin-top: 100rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			.price{
				font-weight: 600;
				font-size: 72rpx;
				color: #3D3D3D;
				line-height: 72rpx;
			}
			.info{
				width: 100%;
				text-align: center;
				margin-bottom: 10rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #808080;
				line-height: 24rpx;
			}
		}
		.pat_type{
			display: flex;
			flex-wrap: wrap;
			
			margin: 80rpx auto;
			
			// margin-left: ;
			width: 654rpx;
			background: #FFFFFF;
			border-radius:20rpx;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
			.type_li{
				width: 100%;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;
				padding-left: 72rpx;
				padding-right: 46rpx;
				height: 110rpx;
				.left{
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					image{
						width: 40rpx;
						height: 34rpx;
					}
				}
				.right{
					margin-left: auto;
					image{
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}
		.patBtn{
			margin: 0 auto;
			display: flex;
			margin-top: 600rpx;
			align-items: center;
			justify-content: center;
			width: 590rpx;
			height: 84rpx;
			background: #2A82E4;
			border-radius: 50rpx;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF
		}
	}
</style>