NurseStationPersonAppletUl/pages/learning/learning.vue

<template>
	<view class="app" v-if="infoslist">
		<view class="" style="background-color: #F4F5F7;height: 13rpx;width:100%"></view>
		<view class="topitem">
			<view class="toptitle">
				{{infoslist.trainingItemTitle}}
			</view>
			<view class="toptext">
				{{infoslist.trainingItemDetails?infoslist.trainingItemDetails:''}}
			</view>
		</view>
		<view class="" style="background-color: #F4F5F7;height: 17rpx;width:100%"></view>
		<u-tabs :list="tablist" :is-scroll="false" :current="tabcurrent" @change="tabchange" font-size='34'
			bar-height='7' bar-width='43' inactive-color='#A09F9F' active-color='#4271B9'>
		</u-tabs>
		<view class="content" v-if="tabcurrent==0">
			<!-- <view class="" v-html="infoslist.trainingItemContent"></view> -->
			<u-parse :html="infoslist.trainingItemContent"></u-parse>
		</view>
		<view class="directory" v-if="tabcurrent==1">
			<view class="imagetext" v-if="imgtextlist.length>0">
				<view class="topheader">
					图文学习
				</view>
				<view class="items">
					<view class="item" v-for="(item,index) in imgtextlist" :key='item.id' @tap='goImglearning(item)'>
						<image :src="baseurl+item.trainingItemCoverUrl" mode=""></image>
						<view class="title">
							{{item.trainingItemTitle}}
						</view>
						<view class="text">
							{{item.trainingItemDetails?item.trainingItemDetails:''}}
						</view>
					</view>
				</view>
			</view>
			<view class="video" v-if="videolist.length>0">
				<view class="topheader">
					视频学习
				</view>
				<view class="items">
					<view class="item" v-for="(item,index) in videolist" :key='item.id' @tap='goVideolearning(item)'>
						<image :src="baseurl+item.trainingItemCoverUrl" mode=""></image>
						<view class="title">
							{{item.trainingItemTitle}}
						</view>
						<view class="text">
							{{item.trainingItemDetails?item.trainingItemDetails:''}}
						</view>
					</view>
				</view>
			</view>
			<view v-if='videolist.length==0&&imgtextlist.length==0' class="" style="padding-top: 100rpx;">
				<u-empty text="暂无目录" mode="list" icon-size='240' font-size='32'></u-empty>
			</view>
		</view>
		<view class="bottomitem" v-if="infoslist.trainingOrderDetailsBuy=='NOT_BUY'">
			<view class="price">
				￥{{infoslist.trainingItemPrice?infoslist.trainingItemPrice:0}}
			</view>
			<view class="buy" @tap='buy'>
				购买
			</view>
		</view>
		<u-popup v-model="buyshow" mode='bottom' height='500' class='popup' safe-area-inset-bottom>
			<view class="popuptitle">请选择支付方式</view>
			<view class="buyselect">
				<image src="../../static/wechat.png" mode=""></image>
				<view class="text">
					微信支付
				</view>
			</view>
			<view class="buybtn" @tap='tobuy'>
				确认支付{{infoslist.trainingItemPrice?infoslist.trainingItemPrice:0}}元
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import {
		selectNurseAppletPersonTrainingItemList,
		selectNurseAppletPersonTrainingParent,
		trainingItemOrder,
		appletTrainingOrderPay
	} from '@/api/learning/index.js'
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				baseurl: undefined,
				videolist: [], //视频信息
				imgtextlist: [], //图文信息
				infoslist: undefined, //主信息
				tabcurrent: 0, //tabsindex
				tablist: [{ //tabs的list
					name: '课程介绍'
				}, {
					name: '课程目录'
				}],
				trainingParentId: undefined,
				nurseStationPersonId: undefined,
				buyshow: false, //购买弹框
			};
		},
		onShow() {
			const that = this
			const value = uni.getStorageSync('Refresh');
			const nursePersonId = uni.getStorageSync('nursePersonId');
			if (value) {
				uni.removeStorageSync('Refresh');
				that.nurseStationPersonId = nursePersonId
				that.infos();
				that.info();
			} else {}
		},
		onLoad(options) {
			const that = this
			this.baseurl = baseurl
			this.trainingParentId = options.trainingParentId
			const value = uni.getStorageSync('nursePersonId');
			if (value) {
				that.nurseStationPersonId = value
				that.infos();
				that.info();
			} else {}
		},
		methods: {
			//购买
			tobuy() {
				var that = this
				const nurseStationId = uni.getStorageSync('nurseStationId');
				if (nurseStationId) {
					var obj = {
						"trainingItemId": undefined,
						"nurseStationId": undefined,
						"nurseStationPersonId": undefined,
						"trainingOrderAmount": undefined,
						"nursePersonName": undefined,
					}
					obj.trainingItemId = this.infoslist.id
					obj.nurseStationId = uni.getStorageSync('nurseStationId');
					obj.nurseStationPersonId = this.nurseStationPersonId
					obj.nursePersonName = uni.getStorageSync('nursePersonName');
					obj.trainingOrderAmount = this.infoslist.trainingItemPrice
					trainingItemOrder(obj).then(res => {
						if (res.code == 200) {
							if (res.data.trainingOrderAmount > 0) {
								let objs = {
									"openid": uni.getStorageSync('openid'),
									"nurseStationPersonId": res.data.nurseStationPersonId,
									"orderNo": res.data.trainingOrderNo,
									"payType": "WECHAT_PAY",
									"orderChannel": "WECHAT_APPLET",
									"buySource": "TRAINING",
									"paymentPrice": res.data.trainingOrderAmount,
								}
								appletTrainingOrderPay(objs).then(response => {
									if (response.code == 200) {
										uni.requestPayment({
											timeStamp: response.data.timeStamp,
											nonceStr: response.data.nonceStr,
											package: response.data.prepayId,
											signType: response.data.signType,
											paySign: response.data.paySign,
											success: function(res) {
												that.buyshow = false
												that.infos();
												that.info();
												that.$refs.uToast.show({
													title: '支付成功',
													type: 'success',
													duration: 1500,
												})
											},
											fail: function(err) {
												that.$refs.uToast.show({
													title: '取消支付',
													type: 'error',
													duration: 1500,
													url: `/pages/Orderdetails/Orderdetails?trainingOrderNo=${res.data.trainingOrderNo}`
												})
												that.buyshow = false
											}
										});
									} else {
										this.buyshow = false
										this.$refs.uToast.show({
											title: response.msg,
											type: 'error',
											duration: 2000
										})
									}
								})
							} else {
								that.buyshow = false
								that.infos();
								that.info();
							}
						} else {
							this.buyshow = false
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error',
								duration: 2000
							})
						}
					})
				} else {
					that.$refs.uToast.show({
						title: '请您重新登录',
						type: 'error',
						duration: 1500,
						url: "/pages/login/login"
					})
				}
			},
			//打开购买弹框
			buy() {
				this.buyshow = true
			},
			//跳转图文学习
			goImglearning(item) {
				if (item.trainingOrderDetailsBuy == 'BUY') {
					uni.navigateTo({
						url: `/pages/Imglearning/Imglearning?trainingItemId=${item.id}`
					})
				} else {
					this.$refs.uToast.show({
						title: '您未购买',
						type: 'error',
						duration: '2000'
					})
				}
			},
			//跳转视频学习详情
			goVideolearning(item) {
				uni.navigateTo({
					url: `/pages/Videolearning/Videolearning?trainingItemId=${item.id}`
				})
			},
			info() {
				this.videolist = []
				this.imgtextlist = []
				selectNurseAppletPersonTrainingItemList(this.trainingParentId, this
					.nurseStationPersonId).then(
					res => {
						res.data.forEach(e => {
							if (e.trainingItemType == 'VIDEO_LEARNING') {
								this.videolist.push(e)
							} else if (e.trainingItemType == 'GRAPHIC_LEARNING') {
								this.imgtextlist.push(e)
							}
						})
					})
			},
			//主信息
			infos() {
				selectNurseAppletPersonTrainingParent(this.trainingParentId, this.nurseStationPersonId).then(res => {
					res.rows[0].trainingItemContent = res.rows[0].trainingItemContent.replace(/\<img/gi,
						"<br/> <img class='richPic'")
					res.rows[0].trainingItemContent = res.rows[0].trainingItemContent.replace(/\<p/gi,
						"<p class='ptext'")
					this.infoslist = res.rows[0]
				})
			},
			//点击tabs
			tabchange(index) {
				this.tabcurrent = index;
			},
		},
	}
</script>

<style lang="scss">
	@import "./learning.scss";
</style>