parking_h5/pages/payPage/payPage.vue

<template>
	<view class="wrap">
		<view class="order-info">
			<view class="order-info-top">
				<view class="addr u-flex">
					<u-icon name="map-fill" color="#fff" size="28"></u-icon>
					<view class="addr-text">{{orderInfo.roadName}}</view>
				</view>
				<view class="car u-flex">
					<view class="car-no">{{orderInfo.vehicleNo}}</view>
					<view class="car-type">临时车</view>
				</view>
				<view class="time in-time">进场时间：{{orderInfo.inTime}}</view>
				<view class="time out-time">进场时间：{{orderInfo.outTime}}</view>
				<view class="duration">已停放 {{orderInfo.duration}}</view>
				<view class="total-amount">¥{{orderInfo.totalAmount}}</view>
			</view>
			<view class="order-info-bottom">
				<u-cell-item 
				center 
				:border-bottom="false" 
				:value="orderInfo.preferentialAmount" 
				:title-style="{color:'#8A8A8A'}"
				:icon-style="{color:'#D8D8D8'}"
				title="已优惠"></u-cell-item>
				<view class="pay-amount u-flex u-row-between">
					<view class="title">应付金额</view>
					<view class="amount"><span class="rmb">¥</span>{{orderInfo.payAmount}}</view>
				</view>
				<view class="tip">停车费不超过30元，可先离场后在付费</view>
			</view>
		</view>
		<view class="bottom-btn static" @click="handlewxpay">去支付</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import getUrlParams from "../../utils/getUrlParams.js";
	export default{
		data(){
			return{
				orderId:null,
				orderInfo:[],
				
			}
		},
		onLoad(){
			let locationLocaturl = window.location.hash;
			this.orderId = getUrlParams(locationLocaturl,"orderId"); // 截取orderId
			console.log('this.orderId',this.orderId);
			this.handleGetOrderinfo(this.orderId);
			
		},
		methods:{
			handleGetOrderinfo(orderId){
				this.$u.api.getOrderinfo({id:orderId})
				.then(res=>{
					// this.$refs.uToast.show({
					// 	title: res.msg,
					// 	type: 'success',
					// });
					this.orderInfo = res.data;
					console.log('handleGetOrderinfo',JSON.parse(JSON.stringify(res)));
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
					console.log('handleGetOrderinfo ',err)
				});
				
			},
			getCode () {
				var local = window.location.href // 获取页面url
				let locationLocaturl = window.location.search;
				this.code = getUrlParams(locationLocaturl,"code"); // 截取code
				if (this.code == null || this.code === '') { // 如果没有code，则去请求
					window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.config.wxAppid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&#wechat_redirect`
				} else {
					this.handleGetWXInfo(this.code) //把code传给后台获取用户信息
				}
			},
			handleGetWXInfo (code) { // 通过code获取 openId等用户信息，/api/user/wechat/login 为后台接口
				let _this = this
				this.$u.api.getWXInfo(code).then((res) => {
					if (res.code === 200 ) {
						this.$u.vuex('vuex_wxinfo',res.data);
						// 继续支付
					}
				}).catch((err) => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
				})
			},			
			handlewxpay(){;
				if(!this.$store.state.vuex_wxinfo.openId){ // 如果微信openId，则需用code去后台获取
					this.$refs.uToast.show({
						title: '请登录后重试!',
						type: 'info',
						// url: '/pages/user/index'
					});
					this.getCode();
				} else {
					// 别的业务逻辑
					this.getWXPay();
				}
			},
			async getWXPay(id){
				let params = {
					orderId:this.orderId,
					openid:this.$store.state.vuex_wxinfo.openId,
					tradeType:"test"
				};
				await this.$wxApi.config();
				this.$pay.wxPay(params).then(res =>{
					console.log('wxPay',res.code);
					if(res.code == 0){
						// 成功
						this.$u.route({
							url:'pages/index/index',
							// params: {
							// 	keyword: this.keyword
							// }
						});
					}else if(res.code == 1){
						// 取消
						// uni.redirectTo({
						// 	url: '/pages/userCenter/myOrder/myOrder'
						// })
					}else if(res.code == 2){
						this.$refs.uToast.show({
							title: '支付失败，请检查!',
							type: 'error',
							// url: '/pages/user/index'
						});
					}
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	@import "./payPage.scss";
</style>