shuquAi/pages/index/scoreDetail/index.vue

<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<view style="color: #fff;">
			<tn-nav-bar backgroundColor="#26B3A0" :bottomShadow="false" @rightClick="jumpScoreRed">课程详情
			</tn-nav-bar>
			<view :style="{ height: tobheight + 'px' }"></view>
		</view>
		<!-- #endif -->


		<view class="content">
			<view class="pic">
				<image class="bigImg" :src="detail.cover_image==''?'../../../static/posImg.png':detail.cover_image"
					mode=""></image>
			</view>

			<view class="center">
				<view class="scoreTitle">
					<!-- Chat GPT应用场景学习 -->
					{{detail.name}}
				</view>
				<view class="selOutBox">
					<view class="price">
						￥{{detail.price}}
					</view>
					<view class="sellOut" style="font-size: 26rpx;color: #999;">
						已售出：{{detail.orders_count+2376}}份
					</view>
				</view>

			</view>
			<view class="bottom">
				<view class="title">
					课程介绍
				</view>
				<view class="desBox">
					<u-parse selectable :content="detail.description"></u-parse>
					<!-- <image src="../../../static/posImg.png" mode=""></image> -->
				</view>
			</view>
		</view>
		<view class="pos">

		</view>
		<view class="kefuAndBtn">
			<view class="iconBox" @click="jumpToKefu">
				<u-icon class="icon" name="server-fill" color="#26B3A0" size="22"></u-icon>
			</view>
			<view class="btn" @click="pay(detail.id)">
				立即学习
			</view>
		</view>

		<!-- <u-modal :show="payVisiable" title="请确认支付是否已完成" content='' confirmText="查询支付结果" confirmColor="#26b3a0"
			@confirm="isPaySuc"></u-modal> -->
	</view>
</template>

<script>
	import {
		courseDetail,
		shopCourse
	} from '@/api/score/index.js'
	import {
		wxPayPamars,
		wxConfigPamars,
	} from '@/api/public/index.js'
	import {
		myScoreOrder,
		myScoreOrderDetail
	} from '@/api/my/index.js'

	import ShoproPay from '@/common/pay';
	import wxsdk from '@/common/wechat/sdk'


	// 判断是否为微信环境
	const isWechat = () => {
		return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
	}
	export default {
		components: {},
		data() {
			return {
				tobheight: 45,

				detail: {},
				course_id: '',
				scoreOrderList: [],
				currPayOrderList: [],
				from: '',
				currOrder: {},

				// payVisiable: false
			};
		},
		computed: {

		},
		watch: {

		},
		async onLoad(o) {
			// this.from = o.from
			this.course_id = o.id
			let res = await courseDetail({
				course_id: o.id
			})
			if (res.code == 0) {
				this.detail = res.data
			}
			console.log('课程详情返回值', res);

			window.addEventListener('beforeunload', this.handleRefresh)

		},
		onReady() {

		},
		async onShow() {

		},
		onUnload() {
			window.removeEventListener('beforeunload', this.handleRefresh)
		},
		destroyed() {

		},
		beforeDestroy() {

		},
		methods: {
			pay(course_id) {
				if (isWechat()) {
					this.goStudy(course_id)
				} else {
					this.goStudy2(course_id)
				}
			},

			handleRefresh() {
				uni.setStorageSync('from', 'index')
			},
			async hasWaitingPayOrder() {
				let resss = await myScoreOrder()
				if (resss.code == 0) {
					this.scoreOrderList = resss.data

					this.currPayOrderList = this.scoreOrderList.filter((item, index) => {
						return item.course_id == this.course_id
					})
				}
			},

			jumpToKefu() {
				window.open('https://work.weixin.qq.com/kfid/kfc807229b723286051')
			},

			// 微信H5支付
			async goStudy2(course_id) {
				// 判断是否存在待支付的订单
				let resss = await myScoreOrder()
				if (resss.code == 0) {
					this.scoreOrderList = resss.data

					console.log('课程详情页-订单列表', this.scoreOrderList);
					this.currOrder = resss.data.find((item, index) => {
						return item.course_id == this.course_id
					})

					console.log('判断支付状态的那一项订单', this.currOrder);
					// return
				}
				if (this.currOrder) {
					if (this.currOrder.status) {
						uni.showToast({
							title: '你已购买过该课程，请勿重复购买！',
							icon: 'none',
							duration: 1500
						})
					} else {
						let res2 = await wxPayPamars({
							order_id: this.currOrder.id,
							type: 'h5'
						})
						console.log('res2-1', res2);

						if (res2.code == 0) {
							uni.setStorageSync('course_id', this.course_id)
							let addRedirectUrl = res2.data + '&redirect_url=' +
								encodeURIComponent(
									'https://www.ai5566.cn/h5/pages/index/scorePayMiddle/index?id=' + this.course_id
								)
							location.href = addRedirectUrl
						} else {
							uni.showToast({
								title: res2.msg,
								icon: 'none',
								duration: 1500
							})
						}
					}
				} else {
					let res1 = await shopCourse({
						course_id
					})
					if (res1.code == 0) {
						let res2 = await wxPayPamars({
							order_id: res1.data.id,
							type: 'h5'
						})
						console.log('res2-2', res2);
						if (res2.code == 0) {
							uni.setStorageSync('course_id', this.course_id)
							let addRedirectUrl = res2.data + '&redirect_url=' +
								encodeURIComponent(
									'https://www.ai5566.cn/h5/pages/index/scorePayMiddle/index?id=' + this.course_id
								)
							location.href = addRedirectUrl
						} else {
							uni.showToast({
								title: res2.msg,
								icon: 'none',
								duration: 1500
							})
						}
					} else {
						uni.showToast({
							title: res1.msg,
							icon: 'none',
							duration: 1500
						})
					}
				}
			},


			// 微信公众号内部支付
			async goStudy(course_id) {

				// 判断是否存在待支付的订单
				let resss = await myScoreOrder()
				if (resss.code == 0) {
					this.scoreOrderList = resss.data
					console.log('课程详情页-订单列表2', this.scoreOrderList);
					this.currOrder = resss.data.find((item, index) => {
						return item.course_id == this.course_id
					})

					console.log('判断支付状态的那一项订单2', this.currOrder);
				}
				if (this.currOrder) {
					// console.log('当前购买课程的待支付订单列表', this.currPayOrderList, resss);
					if (this.currOrder.status) {
						uni.showToast({
							title: '你已购买过该课程，请勿重复购买！',
							icon: 'none',
							duration: 1500
						})
					} else {
						let res2 = await wxPayPamars({
							order_id: this.currOrder.id
						})
						let url = window.location.href.split('#')[0]
						let res3 = await wxConfigPamars({
							url: url
						})
						if (res2.code == 0 && res3.code == 0) {
							wxsdk.wxpay(res3.data, res2.data, (res) => {
								if (res.errMsg == "chooseWXPay:ok") {
									setTimeout(() => {
										uni.setStorageSync('course_id', this.course_id)
										uni.navigateTo({
											url: '/pages/index/scorePaySuc/index?id=' + this
												.course_id
										})
									}, 1500)
								} else {
									uni.showToast({
										title: '支付失败,请稍后重试！',
										icon: 'error',
										duration: 1500
									})
								}
							});
						} else {
							if (res2.code != 0) {
								uni.showToast({
									title: res2.msg,
									icon: 'none',
									duration: 1500
								})
							} else if (res3.code != 0) {
								uni.showToast({
									title: res3.msg,
									icon: 'none',
									duration: 1500
								})
							}
						}

					}
				} else {
					let res1 = await shopCourse({
						course_id
					})
					console.log('立即学习(下单)返回值', res1);
					if (res1.code == 0) {
						let res2 = await wxPayPamars({
							order_id: res1.data.id
						})
						let url = window.location.href.split('#')[0]
						let res3 = await wxConfigPamars({
							url: url
						})
						if (res2.code == 0 && res3.code == 0) {
							wxsdk.wxpay(res3.data, res2.data, (res) => {
								if (res.errMsg == "chooseWXPay:ok") {
									// uni.showToast({
									// 	title: '付款成功',
									// 	icon: 'success',
									// 	duration: 1500
									// })
									setTimeout(() => {
										uni.setStorageSync('course_id', this.course_id)
										uni.navigateTo({
											url: '/pages/index/scorePaySuc/index?id=' + this
												.course_id
										})
									}, 1500)
								} else {
									uni.showToast({
										title: '支付失败,请稍后重试！',
										icon: 'error',
										duration: 1500
									})
								}
							});
						} else {
							if (res2.code != 0) {
								uni.showToast({
									title: res2.msg,
									icon: 'none',
									duration: 1500
								})
							} else if (res3.code != 0) {
								uni.showToast({
									title: res3.msg,
									icon: 'none',
									duration: 1500
								})
							}
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>