jp-education-student/pages/youth/course/confirmOrder.vue

<template>
	<view>
		<u-navbar title="确认订单"></u-navbar>
		<!-- 课程信息 -->
		<view v-for="(item,index) in coursesPayList" :key="index">
			<view class="class-infos">
				<view class="picture">
					<img v-if="item.posterUrl!=null" :src="item.posterUrl" alt="">
					<img v-else src="../../../assets/img/picture1.png" alt="">
				</view>
				<view class="infos">
					<view class="title">
						{{item.className}}
					</view>
					<view class="else">
						<text>{{item.packageName}}班</text>
						<text>{{item.courseAmount}}节课</text>
						<!-- <text>x1</text> -->
					</view>
					<view class="price">
						<view class="price-left">
							{{Math.round(item.unitPrice*item.courseAmount+item.waterElectricityAmount)}}元
						</view>
						<view class="order-amount">
							<!-- x1 -->
						</view>
					</view>
				</view>
			</view>
			<!-- 学员信息 -->
			<view class="student-infos">
				<view class="item">
					<view class="title">
						<text>学员信息</text>
					</view>
					<view class="value">
						<text>{{item.studentName}}</text>
						<!-- <text style="color: #999999;margin-left: 8rpx;">{{item.age}}岁</text> -->
						<text class="icon"><u-icon name="arrow-right" color="#c8c8c8"></u-icon></text>
					</view>
				</view>
				<view class="item">
					<view class="title">
						<text>学员手机号</text>
					</view>
					<view class="value">
						<text>{{item.phone}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 价格明细 -->
		<view class="amount" style="margin-top: 12px;">
			<view class="headline">
				价格明细
			</view>
			<view class="amount-payable">
				<view class="title">
					课程总价
				</view>
				<view class="value">
					<view class="price">
						{{payTotalMoney}}元
					</view>
					<!-- <view class="price-info">
						报名费{{entryFee.toFixed(2)}} 水电费{{weFee.toFixed(2)}}
					</view> -->
				</view>
			</view>
			<!-- <view class="discount-amount">
				<view class="title">
					优惠金额
				</view>
				<view class="value">
					0.00元
				</view>
			</view> -->
			<view class="amount-paid">
				<view class="title">
					合计
				</view>
				<view class="value">
					{{payTotalMoney}}元
				</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="payment">
			<view class="headline">
				支付方式
			</view>
			<view class="pay-radio">
				<view class="icon">
					<img src="../../../assets/img/riFill-wechat-pay-fill@1x.png" alt="">
				</view>
				<view class="text">
					微信支付
				</view>
				<view class="radio-box">
					<label class="radio" @click="radioClick('weixin')">
						<radio value="" :checked="payName == 'weixin'" /><text></text>
					</label>
				</view>
			</view>
			<!-- <view class="pay-radio">
				<view class="icon">
					<img src="../../../assets/img/yunPay.png" alt="">
				</view>
				<view class="text">
					云闪付
				</view>
				<view class="radio-box">
					<label class="radio" @click="radioClick('yushanfu')">
						<radio value="" :checked="payName == 'yushanfu'" /><text></text>
					</label>
				</view>
			</view> -->
		</view>
		<!-- 确认订单 -->
		<view class="confirm">
			<view class="money">
				<view class="title">合计: </view>
				<view class="value">
					{{payTotalMoney}}元
				</view>
			</view>
			<view class="pay">
				<button @click="topayResult">去支付</button>
			</view>
		</view>

	</view>
</template>

<script>
	import * as mineApi from '@/apis/youth/mine.js'
	import * as homePageApi from '@/apis/youth/homePage.js'
	import * as courseApi from '@/apis/youth/course.js'
	import * as weixinApi from '@/apis/weixin.js'
	import {
		wxPayJs
	} from '@/apis/utils/wxpay'

	export default {
		data() {
			return {
				shoppingCartList: [],
				coursesPayList: [],
				payTotalMoney: 0,
				selectIndex: 0,
				entryFee: 0,
				weFee: 0,
				submitForm: {},
				id: '',
				payName: 'weixin'
			}
		},
		onLoad(op) {
			if (op.id) {
				this.id = op.id;
			}
		},
		onReady() {
			if (this.carhelp.getShoppingCartList()) {
				this.shoppingCartList = this.carhelp.getShoppingCartList();
				this.getCoursesPayList();
			}
		},
		methods: {
			radioClick(value) {
				this.payName = value;
			},
			topayResult() {
				this.submitForm.amount = 0.01;
				if(this.payName == 'weixin') {
					// this.wxpy();
					this.getMobilePay();
				} else if (this.payName == 'yushanfu') {

				} else {
					uni.showToast({
						title: '请选择支付方式',
						icon: "none"
					})
				}
			},
			getMobilePay() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				courseApi.mobilePay({
					id: this.id
				}).then((response) => {
					if (response.result) {
						window.location.href = response.data;
					}
					uni.hideLoading()
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			wxpy() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				weixinApi.pay({
					id: this.id,
					openId: this.carhelp.getOpenId()
				}).then((response) => {
					if (!response.result) {
						uni.showToast({
							title: response.message
						})
						return
					}
					var data = response.data
					uni.hideLoading()
					//("Pay+"+new Date().getTime())		
					wxPayJs(data);
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			getCoursesPayList() {
				var list = this.shoppingCartList;
				this.coursesPayList = list;

				var money = 0;
				var money2 = 0;
				var money3 = 0;
				for (var j = 0; j < this.coursesPayList.length; j++) {
					money += Math.round(this.coursesPayList[j].courseAmount * this.coursesPayList[j].unitPrice + this.coursesPayList[
						j].waterElectricityAmount);
					money2 += this.coursesPayList[j].courseAmount * this.coursesPayList[j].unitPrice;
					money3 += this.coursesPayList[j].waterElectricityAmount;
				}
				this.payTotalMoney = money;
				this.entryFee = money2;
				this.weFee = money3;
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 课程信息
	.class-infos {
		padding: 24rpx 32rpx;
		background-color: #fff;
		display: flex;
		border-radius: 8px 8px 0 0;
		margin: 24rpx 24rpx 0;

		.picture {
			width: 160rpx;
			height: 160rpx;
			border-radius: 8rpx;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.infos {
			margin-left: 16rpx;
			flex: 1;

			.title {
				color: rgba(51, 51, 51, 1);
				font-size: 36rpx;
				font-weight: bold;
			}

			.else {
				margin-top: 8rpx;

				text {
					margin-right: 8rpx;
					color: #8c8c8c;
					font-size: 12px;
				}
			}

			.price {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 24rpx;

				.price-left {
					color: rgba(255, 61, 0, 1);
					font-size: 36rpx;
				}

				.order-amount {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
				}
			}
		}
	}

	// 金额
	.amount {
		background-color: #fff;
		padding: 20rpx 32rpx;
		border-top: 1px solid rgba(244, 244, 244, 1);
		border-radius: 8px;
		margin: 24rpx;

		.headline {
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
			margin-bottom: 32rpx;
			font-weight: bold;
		}

		.title {
			color: #333333;
			font-weight: bold;
		}

		.amount-payable,
		.discount-amount,
		.amount-paid {
			display: flex;
			justify-content: space-between;

			margin-bottom: 32rpx;

			.value {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
				text-align: right;

				.price-info {
					color: rgba(119, 119, 119, 1);
					font-size: 24rpx;
					margin-top: 8rpx;
					font-weight: normal;
				}
			}
		}



		.amount-paid {
			margin-bottom: 0;

			.value {
				color: #101010
			}
		}
	}


	.student-infos {
		padding: 0px 30rpx;
		background-color: #fff;
        margin: 0 24rpx;
		border-radius: 0 0 8px 8px;

		.item {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid rgba(244, 244, 244, 1);
			padding: 24rpx 0;

			.title {
				color: #333333;
				font-weight: bold;

				.asterisk {
					color: rgba(244, 68, 68, 1);
				}
			}

			.value {
				color: rgba(51, 51, 51, 1);
				font-weight: bold;
				display: flex;
				align-items: center;

				.icon {
					margin-left: 8rpx;
				}

				.add {
					color: #FF3D00;
				}

				.placeholder {
					color: #CCCCCC;
				}
			}
		}
	}

	::v-deepuni-input {
		width: 300rpx;
		text-align: right !important;

	}

	::v-deep.uni-input-placeholder {
		color: #cccccc !important;
		font-size: 28rpx;
	}


	// 支付方式
	.payment {
		background-color: #fff;
		padding: 40rpx 32rpx;
		border-radius: 8px;
		margin: 24rpx;

		.headline {
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
			margin-bottom: 32rpx;
			font-weight: bold;
		}

		.pay-radio {
			display: flex;
			align-items: center;
			margin-top: 28rpx;

			.icon {
				img {
					width: 48rpx;
					height: 48rpx;
					vertical-align: middle;
				}
			}

			.text {
				margin-left: 8rpx;
			}

			.radio-box {
				margin-left: auto;
			}

			::v-deep.uni-radio-input {
				width: 40rpx;
				height: 40rpx;
			}

			::v-deep.uni-radio-input-checked {
				background-color: #0DBAC7 !important;
			}
		}
	}

	// 确认订单
	.confirm {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 40rpx 32rpx;

		.money {
			display: flex;
			font-size: 18px;
			align-items: center;
			font-weight: bold;

			.title {
				color: #101010;
			}

			.value {
				color: #0DBAC7;
				margin-left: 8rpx;

			}
		}

		uni-button {
			width: 256rpx;
			height: 80rpx;
			border-radius: 50px;
			background-color: rgba(13, 186, 199, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 16px;
		}
	}
</style>