WenWuGuanJia/pages/schedule/detail.vue

<template>
	<view class="wrap">
		<u-navbar :autoBack="true" title="培训详情" bgColor="rgba(255,255,255,255)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view class="main" v-if="hasLoad">
			<view class="b-photos">
				<swiper indicator-dots circular="true" duration="400">
					<swiper-item class="swiper-item" v-for="(item, index) in state.photo_list" :key="index">
						<view class="image-wrapper" @click="onPreviewPhoto(index)">
							<image :src="item.url" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="b-slide">
				<view class="b-item" :class="{ 'f-active': showContent === 'detail' }" @click="onContentSwitch('detail')">介绍</view>
				<view class="b-item" :class="{ 'f-active': showContent === 'course' }" @click="onContentSwitch('course')">课程</view>
				<view class="b-item" :class="{ 'f-active': showContent === 'examine' }" @click="onContentSwitch('examine')" v-if="state.has_examine">考核</view>
			</view>
			<view class="content-list" v-show="showContent === 'course'">
				<view class="course-item" v-for="(item, index) in state.course_list" :key="index" :class="{ 'f-active': courseIndex == index }">
					<view class="b-main">
						<view class="b-name too-long">第{{ index + 1 }}课 {{ item.name }}</view>
						<view class="b-percent">
							<view class="b-line" v-if="state.auth_state == 3">
								<view class="s-num" :style="'width:' + item.learn_percent + '%'"></view>
							</view>
							<view class="b-info">
								<view class="s-time">{{ item.need_length }}课时</view>
								<view class="s-percent" v-if="state.auth_state == 3">已学{{ item.learn_percent }}%</view>
							</view>
						</view>
					</view>
					<view class="b-play" @click="onJumpCourse(item.id)">
						<view class="iconfont icon-video"></view>
						<view class="b-state" v-if="state.auth_state != 3">查看详情</view>
						<view class="b-state" v-else>{{ item.learn_percent > 0 ? '继续学习' : '开始学习' }}</view>
					</view>
				</view>
			</view>
			<view class="course-detail" v-show="showContent === 'detail'">
				<view class="info">
					<view class="b-title">{{ state.name }}</view>
					<view class="b-main">
						<view class="b-price">
							<view class="s-payment" :class="{ 'f-small': textCost }">{{ goodsPrice(state.price) }}</view>
							<!-- <view class="s-vip-price" v-if="state.card_price > 0 && !iphonePlatform">会员价 ¥{{ state.card_price }}</view>
							<view class="s-vip-free" v-if="state.vip_free">会员免费</view> -->
						</view>
						<view class="b-opt">
							<view class="s-btn f-like" @click="onHandleLike()">
								<view class="f-yes iconfont icon-like-yes" v-if="state.is_like"></view>
								<view class="f-no iconfont icon-like-no" v-else></view>
							</view>
							<button class="s-btn f-shar open-data-btn" open-type="share">
								<view class="iconfont icon-share"></view>
							</button>
							<!-- <view class="s-btn f-share">
								<view class="iconfont icon-share"></view>
							</view> -->
						</view>
					</view>
					<view class="b-info">
						<view class="s-worth">{{ state.category_name }}</view>
						<view class="s-count">
							<view class="s-left">{{ state.count_user }}人参加</view>
							<view class="s-gain">{{ state.count_like }}人收藏</view>
						</view>
					</view>
				</view>
				<view class="content">
					<view class="b-title">
						<view class="xiant"></view>
						<view class="s-tit">培训详情</view>
						<view class="xiant"></view>
					</view>
					<view class="b-rich">
						<rich-text :nodes="state.content"></rich-text>
					</view>
				</view>
			</view>
			<view class="course-examine" v-show="showContent === 'examine'">
				<view class="examine-list" v-if="examineList.length > 0">
					<examine-item v-for="(item, index) in examineList" :key="index" :item="item"></examine-item>
				</view>
			</view>
			<view class="navbar" v-if="state.auth_state != 3">
				<view class="b-main">
					<view class="b-amount">
						<!-- <view class="s-tit"></view> -->
						<view class="s-num" :class="{ 'f-small': textCost }">{{ goodsPrice(state.price) }}</view>
					</view>
				</view>
				<view class="b-action" v-if="state.auth_state == 0">
					<view class="b-btn f-mute" v-if="iphonePlatform">根据相关规定，iOS不支持购买</view>
					<template v-else>
						<view class="b-btn f-cart" @click="onAddCart()">加入购物车</view>
						<view class="b-btn f-order" @click="onPreviewOrder()">立即购买</view>
					</template>
				</view>
				<view class="b-action" v-else-if="state.auth_state == 1">
					<view class="b-btn f-learn" @click="onStartLearn()">开始学习</view>
				</view>
				<view class="b-action" v-else-if="state.auth_state == 2">
					<view class="b-btn f-learn" @click="onStartLearn()">VIP免费</view>
				</view>
			</view>
		</view>
		<!-- 加载中 -->
		<load-more :loadingType="loadingType" :loadingText="loadingText" :top="300"></load-more>
		<!-- 快捷购物车 -->
		<quick-cart :show="showCart" @close="onCloseCart()"></quick-cart>
		<!-- 首页 -->
		<app-home></app-home>
	</view>
</template>

<script>
// import { startLearn, handleLike, getScheduleDetail, getScheduleExamine } from '@/service/api/schedule.js';
// import { addCart } from '@/service/api/order.js';
import mixinsGoods from '@/mixins/goods.js';
import mixinsCommon from '@/mixins/common.js';
let that;
export default {
	mixins: [mixinsCommon, mixinsGoods],
	data() {
		return {
			state: null,
			examineList: [],
			courseIndex: -1,
			showContent: 'detail',
			showCart: false,
			hasLoad: false,
			loadingType: 1,
			loadingText: ''
		};
	},
	onLoad(options) {
		that = this;
		this.scheduleId = options.sid;
		this.loadDetail();
	},
	computed: {
		orderPayment() {
			return this.state.card_auth && this.state.card_price ? this.state.card_price : this.state.price;
		}
	},
	onShareAppMessage(res) {
		console.log('onShareAppMessage', res);
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: this.state.name,
			path: '/pages/schedule/detail?cid=' + this.scheduleId,
			imageUrl: this.state.photo_list[0]['url']
		};
	},
	methods: {
		// 培训课程详情
		loadDetail() {
			this.$api.getScheduleDetail({ id: this.scheduleId }, function (res) {
				console.log('5656', res);
				if (res.code == 1) {
					if (!that.hasLoad) {
						if (res.data.auth_state == 3) {
							that.showContent = 'course';
						}
					}
					that.hasLoad = true;
					that.loadingType = -1;
					that.state = res.data;
					if (res.data.has_examine) {
						that.loadExamine();
					}
					uni.setNavigationBarTitle({
						title: res.data.name
					});
				} else {
					that.loadingType = 3;
					that.loadingText = '加载失败';
				}
			});
			// getScheduleDetail(this.scheduleId).then(([err, res]) => {
			// 	console.log('getScheduleDetail', err, res);
			// 	if (!err) {
			// 		if (!this.hasLoad) {
			// 			if (res.auth_state == 3) {
			// 				this.showContent = 'course';
			// 			}
			// 		}
			// 		this.hasLoad = true;
			// 		this.loadingType = -1;
			// 		this.state = res;
			// 		if (res.has_examine) {
			// 			this.loadExamine();
			// 		}
			// 		uni.setNavigationBarTitle({
			// 			title: res.name
			// 		});
			// 	} else {
			// 		this.loadingType = 3;
			// 		this.loadingText = err.data.msg || '加载失败';
			// 	}
			// });
		},
		loadExamine() {
			getScheduleExamine(this.scheduleId).then(([err, res]) => {
				console.log('getScheduleExamine', err, res);
				if (!err) {
					this.examineList = res;
				}
			});
		},
		onContentSwitch(type) {
			this.showContent = type;
		},
		onPreviewPhoto(index) {
			let photos = [];
			for (let i = 0; i < this.state.photo_list.length; i++) {
				photos.push(this.state.photo_list[i].url);
			}
			uni.previewImage({
				current: index,
				urls: photos
			});
		},
		onJumpHome() {
			uni.switchTab({
				url: '/pages/home/index'
			});
		},
		onJumpCourse(id) {
			uni.navigateTo({
				url: '/pages/course/detail?cid=' + id
			});
		},
		onHandleLike() {
			if (!this.checkLogin()) {
				return;
			}
			var action = this.state.is_like ? 'no' : 'yes';
			handleLike(this.scheduleId, action).then(([err, res]) => {
				console.log('handleLike', err, res);
				if (!err) {
					if (action === 'yes') {
						this.state.is_like = 1;
					} else {
						this.state.is_like = 0;
					}
					this.$logic.showToast('操作成功');
				}
			});
		},
		onCloseCart() {
			this.showCart = false;
		},
		onAddCart() {
			// if (!this.checkLogin()) {
			// 	return;
			// }
			addCart('schedule', this.scheduleId).then(([err, res]) => {
				console.log('addCart', err, res);
				if (!err) {
					this.$store.commit('addCartItem', {
						goods_id: this.scheduleId,
						goods_type: 'schedule',
						goods_name: this.state.name,
						goods_cover: this.state.cover_url,
						goods_price: this.state.price
					});
					this.showCart = true;
					setTimeout(() => {
						this.showCart = false;
					}, 5000);
				}
			});
		},
		onPreviewOrder() {
			if (!this.checkLogin()) {
				return;
			}
			let goodsData = [
				{
					goods_type: 'schedule',
					goods_id: this.scheduleId
				}
			];
			uni.navigateTo({
				url: '/pages/order/preview?goods_data=' + JSON.stringify(goodsData)
			});
		},
		onStartLearn() {
			// if (!this.checkLogin()) {
			// 	return;
			// }
			this.$api.scheduleStartLearn({ id: this.scheduleId }, function (res) {
				console.log('startLearn', res);
				if (res.code == 1) {
					that.$logic.showToast('开通成功，可以开始学习了');
					that.loadDetail();
				}
			});
			// startLearn(this.scheduleId).then(([err, res]) => {
			// 	console.log('startLearn', err, res);
			// 	if (!err) {
			// 		this.$logic.showToast('开通成功，可以开始学习了');
			// 		this.loadDetail();
			// 	}
			// });
		},
		onContinueLearn() {
			this.showContent = 'course';
			if (this.state.recent_data) {
				for (let i = 0; i < this.state.course_list.length; i++) {
					if (this.state.course_list[i].id == this.state.recent_data.course_id) {
						this.courseIndex = i;
						break;
					}
				}
				if (this.courseIndex == -1) {
					this.courseIndex = 0;
				}
			} else {
				this.courseIndex = 0;
			}
		}
	}
};
</script>

<style>
.xiant {
	width: 60rpx;
	height: 3rpx;
	background-color: #dddedd;
}
.wrap {
	padding-bottom: 150upx;
}

.b-photos {
	position: relative;
	width: 750upx;
	height: 500upx;
}

.b-photos swiper {
	height: 100%;
}

.b-photos .swiper-item {
	display: flex;
	justify-content: center;
	align-content: center;
	height: 320upx;
	overflow: hidden;
}

.b-photos .swiper-item image {
	width: 100%;
	height: 100%;
}

.b-photos .image-wrapper {
	width: 100%;
	height: 100%;
}

.b-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-bottom: 2upx solid #eee;
}

.b-slide .b-item {
	flex: 1;
	height: 80upx;
	line-height: 80upx;
	font-size: 28upx;
	text-align: center;
}

.b-slide .b-item.f-active {
	height: 76upx;
	line-height: 80upx;
	font-weight: bold;
	border-bottom: 4upx solid #da5650;
}

.info {
	padding: 30upx;
	background: #fff;
}

.info .b-title {
	font-size: 30upx;
	color: #333;
}

.info .b-main {
	margin-top: 20upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.info .b-main .b-price {
	display: flex;
	align-items: center;
}

.info .b-main .b-price .s-payment {
	margin-right: 20upx;
	font-size: 36upx;
	font-weight: bold;
	color: #dd524d;
}

.info .b-main .b-price .s-payment.f-small {
	font-size: 28upx;
}

.info .b-main .b-price .s-vip-price {
	margin-right: 20upx;
	font-size: 26upx;
	color: #f0ad4e;
}

.info .b-main .b-price .s-vip-free {
	margin-right: 20upx;
	padding: 6upx 10upx;
	font-size: 24upx;
	color: #555;
	background: #f0ad4e;
	border-radius: 5upx;
}

.info .b-main .b-opt {
	display: flex;
	align-items: center;
}

.info .b-main .b-opt .s-btn {
	margin-left: 20upx;
	font-size: 50upx;
}

.info .b-main .b-opt .s-btn.f-like .f-yes.iconfont {
	color: #da5650;
}

.info .b-main .b-opt .iconfont {
	font-size: 40upx;
	color: #999;
}

.info .b-info {
	margin-top: 20upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.info .b-info .s-worth {
	color: #999;
	font-size: 24upx;
}

.info .b-info .s-count {
	color: #999;
	font-size: 24upx;
	display: flex;
	align-items: center;
}

.info .b-info .s-count .s-gain {
	margin-left: 40upx;
}

.content {
	margin-top: 30upx;
}

.content .b-title {
	display: flex;
	align-items: center;
	justify-content: center;
}

.content .b-title .iconfont {
	color: #ccc;
}

.content .b-title .s-tit {
	margin: 0 20upx;
	font-size: 24upx;
	color: #666;
}

.content .b-rich {
	margin-top: 30upx;
	padding: 30upx 0;
	background: #fff;
	font-size: 28upx;
}

.content-list {
	padding: 20upx 30upx;
	background: #fff;
}

.content-list .course-item {
	padding: 30upx 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2upx solid #eee;
}

.content-list .course-item:last-child {
	border-bottom: none;
}

.content-list .course-item.f-active {
	font-weight: bold;
}

.content-list .course-item .b-main {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.content-list .course-item .b-main .b-name {
	font-size: 28upx;
	color: #333;
	font-weight: bold;
	width: 498upx;
	display: inline-block;
}

.content-list .course-item .b-main .b-percent {
	margin-top: 20upx;
	display: flex;
	flex-direction: column;
}

.content-list .course-item .b-main .b-percent .b-line {
	position: relative;
	width: 100%;
	height: 20upx;
	background: #eee;
}

.content-list .course-item .b-main .b-percent .b-line .s-num {
	position: absolute;
	top: 0;
	left: 0;
	height: 20upx;
	background: rgba(218, 86, 80, 0.8);
}

.content-list .course-item .b-main .b-percent .b-info {
	margin-top: 10upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.content-list .course-item .b-main .b-percent .b-info .s-time {
	font-size: 28upx;
	color: #666;
}

.content-list .course-item .b-main .b-percent .b-info .s-percent {
	font-size: 26upx;
	color: #999;
}

.content-list .course-item .b-play {
	margin-left: 30upx;
	border-left: 2upx solid #eee;
	width: 160upx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.content-list .course-item .b-play .iconfont {
	font-size: 40upx;
	color: #999;
}

.content-list .course-item .b-play .b-state {
	margin-top: 20upx;
	font-size: 24upx;
	color: #666;
}

.navbar {
	padding: 10upx 0;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100upx;
	background: #fff;
	border-top: 1upx solid #f6f6f6;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.navbar .b-main {
	margin-left: 30upx;
	flex: 1;
	display: flex;
	align-items: center;
}

.navbar .b-main .b-amount {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.navbar .b-main .b-amount .s-tit {
	margin-right: 10upx;
	font-size: 28upx;
	color: #333;
}

.navbar .b-main .b-amount .s-num {
	font-size: 40upx;
	color: #da5650;
}

.navbar .b-main .b-amount .s-num.f-small {
	font-size: 32upx;
}

.navbar .b-action {
	margin-right: 30upx;
	width: 450upx;
	display: flex;
	align-items: center;
}

.navbar .b-action .b-btn {
	height: 80upx;
	line-height: 80upx;
	font-size: 28upx;
	color: #fff;
	text-align: center;
	letter-spacing: 2upx;
}

.navbar .b-action .f-cart {
	flex: 1;
	background: #ec9c4e;
	font-size: 26upx;
	border-radius: 40upx 0 0 40upx;
}

.navbar .b-action .f-cart.f-disable {
	background: rgba(218, 86, 80, 0.8);
}

.navbar .b-action .f-order {
	flex: 1;
	background: #da5650;
	font-size: 26upx;
	border-radius: 0 40upx 40upx 0;
}

.navbar .b-action .f-order.f-disable {
	background: rgba(218, 86, 80, 0.8);
}

.navbar .b-action .f-learn {
	flex: 1;
	letter-spacing: 4upx;
	background: #da5650;
	border-radius: 40upx;
}

.navbar .b-action .f-mute {
	flex: 1;
	color: #666;
	font-size: 26upx;
	background: #eee;
	border-radius: 40upx;
}
</style>