sz-kjsxy-wx-new/packages/mycourse/courseStatus.vue

<template>
	<view class="container">
		<image class="cbg" :src="base.imgHost('common_bg.png')"></image>
		<view class="wrap">
			<topBanner :banner_list="banner_list"></topBanner>
			<view class="wrap-status">
				<view v-if="info.status===0">
					<view class="wrap-status-name">{{userInfo.username}}:</view>
					<view class="wrap-status-content">{{info.reason?info.reason:wait_tip}}</view>
				</view>
				<view v-else-if="info.status===1">
					<view class="wrap-status-name">{{userInfo.username}}:</view>
					<view class="wrap-status-content">{{info.reason?info.reason:pass_tip}}</view>
					<!--  v-if="courseInfo.is_fee===1 && info.fee_status!=1" -->
					<view class="wrap-status-btn">
						<view @click="toPay" v-if="courseInfo.is_fee===1 && info.fee_status!=1">上传缴费信息</view>
						<view v-if="info.files && info.files.length>0" @click="openFiles(info.files)">查看录取通知书</view>
					</view>
				</view>
				<view v-else-if="info.status===2">
					<view class="wrap-status-name">{{userInfo.username}}:</view>
					<view class="wrap-status-content">{{info.reason?info.reason:fault_tip}}</view>
				</view>
				<view v-else-if="info.status===3">
					<view class="wrap-status-name">{{userInfo.username}}:</view>
					<view class="wrap-status-content">{{info.reason?info.reason:back_tip}}</view>
				</view>
			</view>
			<view class="wrap-img">
				<image :src="base.imgHost('mycourse-status.png')"></image>
			</view>

		</view>
	</view>
</template>

<script>
	import topBanner from '@/components/topBanner.vue'
	export default {
		components: {
			topBanner
		},
		data() {
			return {
				course_id: '',
				banner_list: [],
				info: {},
				userInfo: {},
				courseInfo: {},
				wait_tip: "我们将在1-3个工作日内审核并通知您报名结果….",
				pass_tip: "恭喜您，您已被录取",
				fault_tip: '很遗憾，您未通过审核。',
				back_tip: "很遗憾，您未通过审核。",
			}
		},
		onLoad(options) {
			this.course_id = options.id
			this.getCourseDetail(options.id)
			this.getBannerList()
		},
		methods: {
			async getCourseDetail(id) {

				const res = await this.$u.api.courseGetSign({
					course_id: id
				})
				this.info = res.detail
				this.userInfo = res.detail.user
				this.courseInfo = res.detail.course
				this.courseInfo_type_detail = this.courseInfo.type_detail
				this.wait_tip = this.courseInfo_type_detail.wait_tip ? this.courseInfo_type_detail.wait_tip :
					"我们将在1-3个工作日内审核并通知您报名结果…."
				this.pass_tip = this.courseInfo_type_detail.pass_tip ? this.courseInfo_type_detail.pass_tip :
					"恭喜您，您已被录取！"
				this.fault_tip = this.courseInfo_type_detail.fault_tip ? this.courseInfo_type_detail.fault_tip :
					'很遗憾，您未通过审核。'
				this.back_tip = this.courseInfo_type_detail.back_tip ? this.courseInfo_type_detail.back_tip :
					"很遗憾，您未通过审核。"
			},
			async getBannerList() {
				const res = await this.$u.api.otherBanner({
					position: 1,
				})
				this.banner_list = res
			},
			toPay() {
				uni.navigateTo({
					url: '/packages/mycourse/coursePay?id=' + this.course_id
				})
			},
			openFiles(files) {
				console.log("files", files)
				let that = this
				uni.downloadFile({
					url: files[0].url,
					success: function(res) {
						if (res.statusCode === 200) {
							console.log("临时路径", res.tempFilePath)
							let filePath = res.tempFilePath
							//调用uni.openDocument打开文件
							uni.openDocument({
								filePath: filePath,
								success: function(res) {
									console.log("打开文档成功");
								},
								fail: function(res) {
									console.log("uni.openDocument,fail");
									console.log(res)
								},
								complete: function(res) {
									console.log("uni.openDocument,complete");
									console.log(res)
								}
							});
						}
					},
					fail: function(err) {
						console.log('文件下载失败', err)
					}
				})
				// uni.openDocument({
				// 	filePath: files[0].url,
				// 	success: function(res) {
				// 		console.log('打开文档成功');
				// 	},
				// 	fail: function(err) {
				// 		that.base.toast("打开文档失败")
				// 		console.log('打开文档失败', err);
				// 	}
				// });

			}
		}

	}
</script>

<style scoped lang="scss">
	.container {
		padding: 30rpx;
		width: 100%;
		height: 100vh;

		.cbg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
		}

		.wrap {
			position: relative;
			height: 100%;

			&-status {
				margin: 120rpx 20rpx;

				&-name {
					color: #000;
					font-size: 32rpx;
					padding-bottom: 20rpx;
				}

				&-content {
					line-height: 2;
					text-indent: 2em;
				}

				&-btn {
					text-align: right;
					text-align: center;
					margin-top: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					&>view {
						width: 45%;
						display: inline-block;
						text-align: center;
						margin: 0 auto;
						color: #fff;
						background: linear-gradient(to right, #e4cdb4, #c69c6d);
						border-radius: 30rpx;
						padding: 10rpx 20rpx;
					}
				}
			}

			&-img {
				image {
					width: 260rpx;
					height: 314rpx;
					display: block;
					margin: 0 auto;
				}
			}

		}
	}
</style>