jp-education-student/pages/parents/course/paymentDetail.vue

<template>
	<view>
		<u-navbar title="缴费详情"></u-navbar>
		<view class="success">
			缴费成功
		</view>
		<!-- 课程信息 -->
		<view class="class-infos">
			<view class="picture">
				<img v-if="detail.posterUrl != null" :src="detail.posterUrl" alt="">
				<img v-else src="../../../assets/img/picture1.png" alt="">
			</view>
			<view class="infos">
				<view class="title">
					{{detail.className}}
				</view>
				<view class="else">
					<text>{{detail.packageName}}</text>
					<!-- <text>36课时</text>
					<text>x1</text> -->
				</view>
			</view>

		</view>
		<!-- 金额 -->
		<view class="amount">
			<!-- <view class="amount-payable">
				<view class="title">
					应付金额
				</view>
				<view class="value">
					{{detail.shouldPay!=null ? detail.shouldPay.toFixed(2) : '0.00'}}元
				</view>
			</view>
			<view class="amount-payable">
				<view class="title">
					水电费
				</view>
				<view class="value">
					{{detail.waterElectricityAmount!=null ? detail.waterElectricityAmount.toFixed(2) : '0.00'}}元
				</view>
			</view>
			<view class="discount-amount">
				<view class="title">
					抵扣金额
				</view>
				<view class="value">
					-{{detail.deductionAmount!=null ? detail.deductionAmount.toFixed(2) : '0.00'}}元
				</view>
			</view>
			<view class="discount-amount">
				<view class="title">
					减免金额
				</view>
				<view class="value">
					-{{detail.discountAmount!=null ? detail.discountAmount.toFixed(2) : '0.00'}}元
				</view>
			</view> -->
			<view class="amount-paid">
				<view class="title">
					实付金额
				</view>
				<view class="value">
					{{detail.realPay!=null ? detail.realPay.toFixed(2) : '0.00'}}元
				</view>
			</view>

		</view>
		<!-- 订单记录 -->
		<view class="order-infos">
			<view class="title">
				订单记录
			</view>
			<view class="infos">
				<view class="item">
					<view class="name">
						姓名：
					</view>
					<view class="value">
						{{detail.studentName}}
					</view>
				</view>
				<view class="item">
					<view class="name">
						联系方式：

					</view>
					<view class="value">
						{{detail.buyerPhone}}

					</view>
				</view>
				<view class="item">
					<view class="name">
						订单编号：
					</view>
					<view class="value">
						{{detail.billNum}}

					</view>
				</view>
				<view class="item">
					<view class="name">
						创建时间：
					</view>
					<view class="value">
						{{detail.createTime}}

					</view>
				</view>
				<view class="item">
					<view class="name">
						支付时间：
					</view>
					<view class="value">
						{{detail.buyTime}}
					</view>
				</view>
			</view>
		</view>

		<!-- 时间轴 -->
		<view class="time-line">
			<view class="title">
				订单记录
			</view>
			<u-time-line>
				
				<u-time-line-item node-top="10">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<view v-if="detail.printTime != null">
							<view class="u-node" style="background: #0DBAC7;">
								<!-- 此处为uView的icon组件 -->
								<u-icon name="checkmark" color="#fff" :size="24"></u-icon>
							</view>
						</view>
					</template>
				
					<template v-slot:content>
						<view>
							<view class="u-order-desc"
								:class="detail.printTime != null ? 'checked' : ''">打印票据</view>
							<view class="u-order-time">{{detail.printTime}}</view>
						</view>
					</template>
				</u-time-line-item>
				
				<u-time-line-item node-top="10">
					<template v-slot:node >
						<view class="" v-if="detail.invoiceCreateTime!=null && detail.printTime==null">
							<view class="u-node" style="background: #0DBAC7;">
								<!-- 此处为uView的icon组件 -->
								<u-icon name="checkmark" color="#fff" :size="24"></u-icon>
							</view>
						</view>
					</template>
					
					<template v-slot:content>
						<view>
							<view class="u-order-desc"
								:class="detail.invoiceCreateTime!=null && detail.printTime==null ? 'checked' : ''">
								生成票据</view>
							<view class="u-order-time">{{detail.invoiceCreateTime}}</view>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item node-top="10">
					<template v-slot:node>
						<view v-if="detail.buyTime!=null && detail.invoiceCreateTime==null">
							<view class="u-node" style="background: #0DBAC7;" >
								<!-- 此处为uView的icon组件 -->
								<u-icon name="checkmark" color="#fff" :size="24"></u-icon>
							</view>
						</view>
					</template>
					
					<template v-slot:content>
						<view>
							<view class="u-order-desc"
								:class="detail.buyTime!=null && detail.invoiceCreateTime==null ? 'checked' : ''">
								确认收款</view>
							<view class="u-order-time">{{detail.buyTime}}</view>
						</view>
					</template>
				</u-time-line-item>
				<!-- <u-time-line-item node-top="10">

					<template v-slot:content>
						<view>
							<view class="u-order-desc">已支付</view>
							<view class="u-order-time">2019-12-06 22:30</view>
						</view>
					</template>
				</u-time-line-item> -->
				<u-time-line-item node-top="10">
					<template v-slot:node >
						<view class="" v-if="detail.createTime!=null && detail.buyTime==null">
							<view class="u-node" style="background: #0DBAC7;">
								<!-- 此处为uView的icon组件 -->
								<u-icon name="checkmark" color="#fff" :size="24"></u-icon>
							</view>
						</view>
					</template>
					
					<template v-slot:content>
						<view>
							<view class="u-order-desc"
								:class="detail.createTime!=null && detail.buyTime==null ? 'checked' : ''">
								创建订单</view>
							<view class="u-order-time">{{detail.createTime}}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
		<!-- 底部 -->
		<view class="check-bill">
			<button @click="toViewBill">查看票据</button>
		</view>
	</view>
</template>

<script>
	import * as courseApi from '@/apis/parents/course.js'
	
	export default {
		data() {
			return {
				billNum: '',
				detail: {},
				studentId: '',
			}
		},
		onLoad(op) {
			if(op.id) {
				this.billNum = op.id;
			}
			// if (this.carhelp.getStudentId()) {
			// 	this.studentId = this.carhelp.getStudentId().studentId;
			// 	this.getLoadMyBuyLog();
			// }
			this.getLoadMyBuyLog();
		},
		methods: {
			toViewBill() {
				uni.navigateTo({
					url: '/pages/parents/course/viewBill?id=' + this.detail.buyId
				})
			},
			getLoadMyBuyLog() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				courseApi.loadMyBuyLog({
					studentId: this.studentId,
					year: '',
					courseId: '',
					pageNum: 1,
					pageSize: 10000
				}).then((res) => {
					uni.hideLoading();
					var list = res.data.data;
					for (var i = 0; i < list.length; i++) {
						if(this.billNum == list[i].billNum) {
							this.detail = list[i];
						}
					}
					console.log(this.detail)
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 260rpx;
	}

	.success {
		background-color: rgba(13, 186, 199, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 24px;
		text-align: center;
		height: 152rpx;
		line-height: 152rpx;
	}

	// 课程信息
	.class-infos {
		padding: 24rpx 32rpx;
		background-color: #fff;
		display: flex;

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

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

		.infos {
			margin-left: 16rpx;

			.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;
				}
			}
		}
	}

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

		.title {
			color: #777777;
		}

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

			.value {
				color: rgba(119, 119, 119, 1);
			}
		}

		.discount-amount {
			.value {
				color: #E60012;
			}
		}

		.amount-paid {
			margin-bottom: 0;

			.value {
				color: #101010
			}
		}
	}

	// 订单记录
	.order-infos {
		background-color: #fff;
		padding: 0 24rpx;
		margin-top: 24rpx;

		.title {
			color: rgba(16, 16, 16, 1);
			line-height: 88rpx;
			border-bottom: 1px solid rgba(244, 244, 244, 1);
		}

		.infos {
			padding: 24rpx 0;

			.item {
				display: flex;
				font-size: 32rpx;
				margin-bottom: 24rpx;

				.name {
					color: rgba(119, 119, 119, 1);
					width: 160rpx;
				}

				.value {
					color: rgba(51, 51, 51, 1);
				}

			}

			.item:last-of-type {
				margin-bottom: 0;
			}
		}
	}

	// 时间轴
	.time-line {
		background-color: #fff;
		padding: 0 24rpx;
		margin-top: 24rpx;

		.title {
			color: rgba(16, 16, 16, 1);
			line-height: 88rpx;
			border-bottom: 1px solid rgba(244, 244, 244, 1);
		}
	}

	.u-time-axis {
		padding: 18rpx 40rpx;
	}

	.u-node {
		width: 32rpx;
		height: 32rpx;
		border-radius: 100rpx !important;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: #333333;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 12rpx;
	}

	.u-order-time {
		color: #777777;
		font-size: 28rpx;


	}

	.checked {
		color: rgba(13, 186, 199, 1);
	}

	// 底部
	.check-bill {
		background-color: #fff;
		width: 100%;
		padding: 20rpx 32rpx;
		position: fixed;
		bottom: 0;
		left: 0;
         z-index: 999;
		uni-button {
			border-radius: 50px;
			background-color: rgba(13, 186, 199, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 16px;
			height: 80rpx;
		}
	}
</style>