pco/app/pages/wx/payOrder.vue

<template>
	<view>
		<view class="box">
			<view class="item">
				<view class="l">订单号：</view>
				<view class="r">
					{{form.no}}
				</view>
			</view>
			<view class="item-line">
				业务项
			</view>
			<view class="item" v-for="item in form.items" :key="item.id">
				<view class="l" style="flex: 7;">{{item.itemTypeName}}：</view>
				<view class="r">
					{{item.itemName}}({{item.itemPrice}}x{{item.num}}={{item.total}}元)
				</view>
			</view>
			<view class="item">
				<view class="l" style="flex: 7;">业务费：</view>
				<view class="r">
					{{form.itemPrice}}
					<text>(元)</text>
				</view>
			</view>
			<view class="item">
				<view class="l" style="flex: 7;">境外车停车费：</view>
				<view class="r">
					{{form.partMoney}}
					<text>(元)</text>
				</view>
			</view>
			<view class="item">
				<view class="l" style="flex: 7;">中国车停车费：</view>
				<view class="r">
					{{form.chinaPartMoney}}
					<text>(元)</text>
				</view>
			</view>
			<view class="item">
				<view class="l" style="flex: 7;">合计费用：</view>
				<view class="r">
					{{form.totalMoney}}元
				</view>
			</view>
		</view>
		<u-button type="primary" v-if="form.payStatus==1" @click="confirmFn">确认并支付</u-button>
		<u-button type="info" v-if="form.payStatus==3">已支付</u-button>
	</view>
</template>

<script>
	var jweixin = require('@/components/jweixin-module/index.js');
	export default {
		data() {
			return {
				wx: {
					id: '',
					code: '',
					openid: ''
				},
				form: {
					partMoney: 0
				},
			}
		},
		onBackPress() {
			this.$common.to('/pages/business-order/business-order')
			return false;
		},
		onLoad(options) {
			this.wx.id = options.state;
			this.wx.code = options.code;
			this.getOpenidByCode();
			this.getWxConfig();
		},
		onShow() {
			this.getBusinessById();
		},
		methods: {
			getWxConfig() {
				let url = window.location.href;
				this.$api.getWxConfig({
					url: url
				}).then(resp => {
					jweixin.config({
						//debug: true,
						appId: resp.data.appId,
						timestamp: resp.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: resp.data.noncestr, // 必填，生成签名的随机串
						signature: resp.data.sign, // 必填，签名
						jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
					});
					jweixin.ready(function() {
						console.log('111')

					});
					jweixin.error(function(res) {
						console.log(res)
					});
				})
			},
			getOpenidByCode() {
				let storeOpenid = uni.getStorageSync('openid');
				this.$api.getOpenidByCode({
					code: this.wx.code,
					openid: storeOpenid
				}).then(resp => {
					let openid = resp.data;
					this.wx.openid = openid;
					if (openid) {
						uni.setStorageSync('openid', openid)
					}

				})
			},
			getBusinessById() {
				this.$api.getBusinessById({
					id: this.wx.id
				}).then(resp => {
					this.form = resp.data;
				})
			},
			confirmFn() {
				let p = {
					b: this.wx.id,
					c:JSON.stringify(this.form.cars.map(obj=>{return {id:obj.id,p:obj.basePartMoney}})),
					money: this.form.totalMoney,
					tradeType: "JSAPI",
					openid: this.wx.openid
				}
				this.$api.getPrePay(this.$common.removeNull(p)).then(resp => {
					let data = resp.data;
					let that = this;
					jweixin.chooseWXPay({
						timestamp: data
							.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
						package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
						signType: data.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
						paySign: data.paySign, // 支付签名
						success: function(res) {
							if (res.errMsg === "chooseWXPay:ok") {
								that.$common.toast('支付成功')
								// wx.closeWindow();
							}
						}
					});
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.item-line {
		color: #a2a2a2;
		padding: 5px 0 10px 29px;
		border-bottom: 1px solid #E5E5E5;
	}

	@import '@/common/common.scss'
</style>