pco/app/pages/wx/pay.vue

<template>
	<view>
		<view class="box">
			<u-search placeholder="输入车牌号查询" shape="square" v-model="p.carNo" @search="searchFn()" @change="searchFn"
				:height="80">
			</u-search>
		</view>
		<view class="list" v-show="list.length>0">
			<u-radio-group placement="column" @change="groupChange">
				<u-radio :customStyle="{marginBottom: '6px',borderBottom: '1px solid #e5e5e5',paddingBottom:'5px'}"
					v-for="(item, index) in list" :key="index" :label="item.carNo" :name="item.businessId">
				</u-radio>
			</u-radio-group>
		</view>
		<view class="car-list" v-show="cars.length>0">
			<view>停车费：</view>
			<view class="item" v-for="item in cars" style="margin: 20rpx 0 0 40rpx;">
				<view class="l">{{item.carNo}}：{{item.price}}元</view>
			</view>
		</view>
		<view class="car-list" v-show="item.itemsPrice" style="margin-top:40rpx;">
			<view>业务费：{{item.itemsPrice}}元</view>
			<view class="item" v-for="item in item.list" style="margin: 20rpx 0 0 40rpx;">
				<view class="l">{{item.name}}：{{item.price}}元</view>
			</view>
		</view>
		<view class="item" v-if="total">
			<view>
				合计费用:{{total}}元
			</view>
			<u-radio-group style="margin: 50rpx 0 20rpx 30rpx;" v-model="form.payType" placement="column"
				@change="payTypeChange">
				<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in payTypeList" :key="index"
					:label="item.name" :name="item.value">
				</u-radio>
			</u-radio-group>
			<u-button type="primary" @click="confirmPayFn">立即支付</u-button>
		</view>
	</view>

</template>

<script>
	var jweixin = require('@/components/jweixin-module/index.js');
	export default {
		data() {
			return {
				p: {
					carNo: ''
				},
				code: '',
				selectNo: '',
				openid: '',
				businessId:'',
				state:'',
				list: [],
				cars: [],
				item: {
					itemsPrice: '',
					businessId: '',
					list: []
				},
				total:0,
				payTypeList: [{
					name: '微信支付',
					value: 3
				}],
				form: {
					partMoney: 0,
					payType: 3
				},
				
			}
		},
		onLoad(options) {
			this.code = options.code;
			this.state=options.state;
			this.getOpenidByCode();
		},
		created() {},
		mounted() {
			this.getWxConfig();
		},
		beforeDestroy() {
			this.$common.hidingLoading()
		},
		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)
					});
				})
			},
			confirmPayFn() {
				let p = {
					businessId: this.businessId,
					carId: this.cars.map(obj=>obj.id).join(','),
					money: this.total,
					tradeType: "JSAPI",
					openid: this.openid
				}
				this.$api.getPrePay(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();
							}
						}
					});
				})
			},
			payTypeChange(value) {

			},
			getOpenidByCode() {
				let storeOpenid = uni.getStorageSync('openid');
				this.$api.getOpenidByCode({
					code: this.code,
					openid: storeOpenid
				}).then(resp => {
					let openid = resp.data;
					this.openid = openid;
					if (openid) {
						uni.setStorageSync('openid', openid)
					}

				})
			},
			groupChange(value) {
				this.list = [];
				this.businessId=value;
				this.$api.getBusinessMoney({
					businessId: value,
					state:this.state
				}).then(resp => {
					let data = resp.data;
					this.cars = data.carList;
					this.total=data.total;
					Object.assign(this.item, {
						itemsPrice: data.itemsPrice,
						businessId: value,
						list: data.itemList
					})
				})
			},
			searchFn() {
				if (!this.p.carNo) {
					this.list = [];
				} else {
					this.$api.searchPartCar(this.p).then(resp => {
						this.list = resp.data;
					})
				}
			}

		}
	}
</script>

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

	.box {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 40rpx 0;
	}

	.list {
		margin-left: 120rpx;
		width: 380rpx;
		border-radius: 5rpx;
		//background-color: rgb(242, 242, 242);
		margin-top: -35rpx;
		padding: 20rpx;
	}
</style>