pco/app/pages/wx/pay.vue

<template>
	<view>
		<view class="box">
			<view class="top" style="padding-top: 50rpx;">
				<text class="title">支付</text>
			</view>
			<u-search placeholder="输入车牌号查询" 
			shape="square" v-model="p.carNo"
			 @search="searchFn()" @change="searchFn"
				:height="80" style="margin: 30rpx;">
			</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 class="card">
				<view class="title">
					停车费:
				</view>
				<view v-for="(tingcheItem,index) in cars" :key="index">
					<label class="c-item">
						<view class="c">{{tingcheItem.carNo}}</view>
						<view class="r">{{tingcheItem.price}}元</view>
					</label>
				</view>
			</view>

			<view class="card" v-if="item.itemsPrice">
				<view class="title">
					业务费:{{item.itemsPrice}}元
				</view>
				<view v-for="(yewuItem,index) in item.list" :key="index">
					<label class="c-item">
						<view class="c">{{yewuItem.name}}</view>
						<view class="r">{{yewuItem.price}}元</view>
					</label>
				</view>
			</view>
		</view>
	
		<view class="bottom bgc-f bottom-safety" v-if="total>0">
			<!-- <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> -->
			<view class="box">
				<view class="l">
					<text class="t1">金额：</text>
					<text class="t2">¥{{total}}元</text>
				</view>
				<view class="r">
					<view class="btn" @click="confirmPayFn()">立即支付</view>
				</view>
			</view>
		</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() {

					});
					jweixin.error(function(res) {
						console.log(res)
					});
				})
			},
			confirmPayFn() {
				let businessId = this.state == 'STATE' ? this.businessId : null;
				let carId = this.state == 'STATE' ? null : this.cars.map(obj => obj.id).join(',')
				let p = {
					businessId: businessId,
					carId: carId,
					money: this.total,
					tradeType: "JSAPI",
					openid: this.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('支付成功')
								that.cars=[];
								that.item.list=[];
								that.total=0
								// 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
					})
					if(data.total==0){
						this.$common.toast('您无需缴费');
						this.p.carNo=''
					}
				})
			},
			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;
	}

	.card {
		.title {
			padding: 30rpx;
			box-sizing: border-box;
			font-size: 34rpx;
			font-weight: bold;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		box-sizing: border-box;
		color: #999;
	}

	.c-item {
		display: flex;
		align-items: center;
		margin: 15rpx 30rpx;
		padding: 40rpx 30rpx;
		border-radius: 10rpx;
		background-color: #fff;
		border: 1rpx solid #f5f5f5;

		.l {}

		.c {
			font-size: 30rpx;
			color: #191919;
			font-weight: bold;
			margin-left: 20rpx;
		}

		.r {
			font-size: 30rpx;
			color: #ff4200;
			font-weight: bold;
			margin-left: auto;
		}
	}

	.bottom {
		min-height: 100rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;

		.box {
			display: flex;
			width: 100%;
			min-height: 100rpx;
			align-items: center;

			.l {
				padding-left: 30rpx;
				flex: 2;

				.t1 {
					color: #333;
				}

				.t2 {
					color: #ff4200;
					font-size: 38rpx;
					font-weight: bold;
				}
			}

			.r {
				flex: 1;

				.btn {
					background-color: #ff4200;
					min-height: 100rpx;
					display: flex;
					color: #fff;
					font-size: 30rpx;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

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