DX-xcx/pages/order/index.vue

<template>
  <div class="mianBox">
    <van-row class="contentBox" v-if="loading">
		<van-row>
			<van-col span="24" class="logo"><van-image width="75" height="75" :src="require('../img/logo.png')" /></van-col>
			<van-col span="24" class="introduce">中国东信智慧园区平台</van-col>
			<van-col span="24" class="money">{{data.money}}</van-col>
			<van-col span="24" class="order_money">订单金额(元)</van-col>
		</van-row>
		<div class="pay_wrap">
			<van-button class="pay"  color="#F22E3C" @tap="pay">支付</van-button>
			<button class="pay" open-type="launchApp" app-parameter="appData"   bindlaunchapp="launchAppSuccess" binderror="launchAppError" v-if="data.userId">返回APP</button>
			<button class="pay" @click="fanhui" v-if="!data.userId">返回首页</button>
			<!-- <button class="pay" open-type="launchApp" app-parameter="appData"  @error="launchAppError" >返回APP<navigator open-type="exit" target="miniProgram" style="margin:30px 0;display: block;">退出程序</navigator></button> -->
		</div>
		<van-toast id="van-toast" />
		<!-- <van-overlay :show="show" @click="show = false" /> -->
	</van-row>
  </div>
</template>
<script>
	import Toast from '../../wxcomponents/vant/weapp/dist/toast/toast';
	import { requestPost, requestGet } from '@/utils/user.js';
	export default {
		data() {
			return {
				loading:false,
				data:{
					money:undefined,
					openid:null,
					app:false,
				},
				appData:{
					errCode:0,
					errStr:null,
					extMsg:"未支付",
					extraData:"1",
					openId:null,
					st:0,
					transaction:null,
					type:"WXLaunchMiniProgramReq.Resp"
				},
			}
		},
		onLoad(options) {
			//console.log(options)
			let _this = this
			const data = JSON.parse(options.params)
			_this.data = data
			uni.getStorage({
				key: 'openid',
				success: function (res) {
					_this.appData.openId = _this.data.openid
					_this.appData.st = 0
					if(data.scene){
						if(data.scene == "3"){
							//console.log("app进入 -->支付页")
							_this.data={
								money:Number(data.money).toFixed(2),
								channelId:data.channelId,
								userId:data.userId,
								scene:data.scene,
								openid:res.data,
								app:false,
							}
						}
					}else{
						//console.log("微信小程序历史记录进入 -->支付页")
						_this.data={
							money:data.money,
							scene:'2',
							channelId:'',
							userId:null,
							openid:data.openid,
							app:false,
						}
					}
					_this.loading = true
					_this.data.app = false
					_this.pay()
					
				},
				fail: function (res) {
					_this.loading = true
				},
			});
			
		},
		methods: {
			fanhui(){
				uni.navigateTo({
					url: `../index/index`
				});
			},
			launchAppError(e) {
				Toast(e.detail.errMsg)
			},
			// 关闭小程序
			launchAppSuccess(){
				
				wx.exitMiniProgram({success: (res) => {}})
			},
			pay(){
				let _this = this
				if(_this.data.openid && _this.data.openid != 'null'  ){
					if(_this.data.userId){//app用户充值
						//console.log("app用户充值")
						requestGet("dxtop/staff/one",
							{
								"id":_this.data.userId,
							},
						).then(res =>{
							if(res[1].data.data){
								requestPost("dxtop/order/callUnifiedPay",
									{
										"money": Number(_this.data.money).toFixed(2), 
										"topPayType": "W06", 
										"payType": "2", 
										"channelId":_this.data.channelId,
										"userId":res[1].data.data.sid,
										"scene":_this.data.scene,
										"openId":_this.data.openid,
									}
								).then(res2 => {
									if(res2[1].data?.status == "ERROR"){
										if(res2[1].data?.code == 500){
											if(res2[1].data.msg == "acct参数错误"){
												Toast("华为、Android10系统，需要开启微信的“浮窗”和“允许在其他上层应用上打开”这两个权限")
											}else{
												Toast(res2[1].data.msg)
											}
										}else{
											Toast(res2[1].data.msg)
										}
										
									}else{
										if(res2[1].data){
											let data = JSON.parse(res2[1].data.data)
											uni.requestPayment({
												timeStamp: data.timeStamp,
												nonceStr: data.nonceStr,
												package: data.package,
												signType: data.signType,
												paySign: data.paySign,
												success: function (res3) {
													//console.log('success:' + JSON.stringify(res));
													uni.redirectTo({
														url: `../over/index`
													});
												},
												fail: function (err) {
													//console.log('fail:' + JSON.stringify(err));
													
												}
											});
										}
									}
									
								}).catch(err =>{
								})
							}else{
								Toast("该用户未暂未录入充值系统...")
							}
						})
					}else{
						Toast("请使用'中国东信'APP途径进行充值")
						
					}
					
				}else{
					//console.log("去授权页",JSON.stringify(_this.data))
					uni.redirectTo({
					    url: `../login/index?params=${JSON.stringify(this.data)}`
					});
				}
				
			}
		},
		onShow(options){
		}
	}
</script>
<style lang="scss" scoped>
.mianBox{
    height: 100%;
    width: 100%;
    color: #000;
    box-sizing: border-box;
	background-color: #F2F6FC;
	position: fixed;
    .contentBox{
		width: 100%;
		height: auto;
		padding: 15px 20px;
		box-sizing: border-box;
		overflow: hidden;
		.logo{
			/deep/ .van-image{
				margin:0 auto;
				display: block;
			}
		}
		.introduce{
			text-align: center;
			color: #000;
			display: block;
			/deep/ .van-col{
				font-size: 20;
				margin-top:20px;
				letter-spacing: 2px;
			}
		}
		.money{
			text-align: center;
			color: #000;
			/deep/ .van-col{
				font-size: 30px;
				margin-top: 10px;
				font-weight: 700;
			}
		}
		.order_money{
			text-align: center;
			color: #ccc;
			display: block;
			/deep/ .van-col{
				font-size: 20;
				margin-top:10px;
				letter-spacing: 2px;
			}
		}
		/deep/ .van-button{
			border-radius: 6px;
			width: 100% !important;
			margin-top:25px;
			letter-spacing: 2px;
			font-size: 18px;
			height: 50px;
		}
		.order_wrap{
			width:95%;
			padding:10px 20px 20px 20px;
			box-sizing: border-box;
			width:95%;
			margin:20px 2.5%;
			background-color: #fff;
			border-radius: 6px;
			box-shadow: 0 2px 12px 0 #ccc;
			display: block;
			/deep/ .van-col{
				font-size: 16px;
				color:#ccc;
				margin-top:10px;
				display: block;
			}
			/deep/ .left{
				text-align: left;
			}
			/deep/ .right{
				text-align: right;
			}
		}
		.pay_wrap{
			width:95%;
			margin:70px 2.5% 0;
			.pay{
				height: 50px;
				line-height: 50px;
				font-size: 18px;
				border-radius: 10px;
				margin-top:40px;
			}
		}
		
    }
}
.pay{
	background:#F22E3C;
	color:#fff;
}
</style>