zc_saas_h5/pages2/bank/detail.vue

<template>
	<view>
		<nav-bar title="题库详情"></nav-bar>
		<view style="background-color: #FFFFFF;">
			<image :src="$method.splitImgHost(goodsData.coverUrl, true)" style="width: 100%;height: 400rpx;"></image>
			
			<view class="cou_title">
				<view class="title_name">
					<view class="titleTag">{{ goodsData.goodsName }}</view>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 13rpx;">
					<view class="prices">
						<!-- <text class="price_sym"></text> -->
						<text v-if="goodsData.standPrice" class="price_word">¥ {{ goodsData.standPrice }}</text>
						<text v-else class="price_word free">免费</text>
						<text v-if="goodsData.linePrice" class="sale"> ¥ </text>
						<text v-if="goodsData.linePrice" class="price_line"> {{ goodsData.linePrice }}</text>
						
					</view>
					<view class="noteTag">
						<!-- 共 <text class="blackFont">{{ goodsData.chapterNum }} 张卷 {{goodsData || '-'}}</text> 道题 -->
					</view>
				</view>
			</view>
		</view>

		<view class="contents">
			
			<!-- <view>
				<view><u-tabs :list="list" item-width="50%" font-size="30" bar-width="24" :current="current" @change="change" active-color="#007AFF"></u-tabs></view>
			</view> -->
			<view class="tabs">
				<view v-for="(item, index) in list" :key="index" class="tab_item"
					:class="[{nactive: current == index}]" @click="change(index)">{{ item.name }}</view>
			</view>

			<view class="intro" v-if="current == 0">
				<view v-if="goodsData.mobileDetailHtml" class="content" style="padding:10rpx;"><rich-text :nodes="goodsData.mobileDetailHtml"></rich-text></view>
			</view>
			<view class="title-list" v-if="current == 1">
				<view class="content">
					<view class="list" v-for="(item1, index1) in bankList" :key="index1">
						<template v-if="item1.type == 1">
							<view class="moduleItem" @click="clickModule(index1,item1.majorId)">
								<view class="courseName">{{ item1.name }}</view>
								<view>
									<image src="/static/icon/up.png" class="icon_up" v-if="!item1.showList"></image>
									<image src="/static/icon/down.png" class="icon_up" v-if="item1.showList"></image>
								</view>
							</view>

							<template v-if="item1.showList">
								<view v-for="(item2, index2) in item1.list" :key="index2">
									<view class="section" @click="changeItem(index1,index2,item2.chapterExamId,item1.type)">
										<!-- <image src="/static/icon/down1.png" class="icon_up" v-if="item2.showList"></image>
										<image src="/static/icon/up1.png" class="icon_up" v-if="!item2.showList"></image> -->
										<u-icon v-if="!item2.showList" name="arrow-right" color="#999" size="24"></u-icon>
										<u-icon v-if="item2.showList" name="arrow-down" color="#999" size="24"></u-icon>
										<text class="item_name">{{ item2.name }}</text>
									</view>
									<view class="article-list" v-if="item2.showList">
										<view class="article" :class="{ active: showTest(article.examId) }" v-for="(article, index3) in item2.list" :key="index3">
											<view class="flex_auto">{{ article.examName }}</view>
											<view class="btn" @click="goTest(item1.type,article)" v-if="showTest(article.examId)">试做</view>
										</view>
									</view>
									<u-line></u-line>
								</view>
							</template>
						</template>

						<template v-if="item1.type == 2">
							<view class="section" @click="changeItem(index1,'',item1.majorId,item1.type)" >
								<!-- <image src="/static/icon/down1.png" class="icon_up" v-if="item1.showList"></image>
								<image src="/static/icon/up1.png" class="icon_up" v-if="!item1.showList"></image> -->
								<u-icon v-if="!item1.showList" name="arrow-right" color="#999" size="24"></u-icon>
								<u-icon v-if="item1.showList" name="arrow-down" color="#999" size="24"></u-icon>
								<text class="item_name">{{ item1.name }}</text>
							</view>
							<view class="article-list" v-if="item1.showList" >
								<view class="article" :class="{active:showTest(article.examId)}"  :key="index2" v-for="(article,index2) in item1.list">
									<view class="flex_auto">{{article.examName}}</view>
									<view class="btn" @click="goTest(item1.type,article)"  v-if="showTest(article.examId)">试做</view>
								</view>
							</view>
						</template>

						<template v-if="item1.type == 3">
							<view class="article" :class="{ active: showTest(item1.majorId) }">
								<view class="flex_auto">{{ item1.name }}</view>
								<view class="btn" @click="goTest(item1.type,item1)" v-if="showTest(item1.majorId)">试做</view>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottomBox" v-if="!hideBuyState">
			<!-- <view class="priceTag">¥ {{ toFixed(goodsData.standPrice) }}</view> -->
			<view class="icons">
				
				<view class="icon_item ones">
					<image src="/static/index/share.png" class="share"></image>
					<button type="default" open-type="share" class="bt_share"></button>
					<view class="share_w">分享</view>
				</view>
				<view class="icon_item">
					<image src="/static/index/shopcar.png" class="shopcar" @click="toShopcar()"></image>
					<view class="share_w">购物车</view>
				</view>
				
			</view>
			<view style="display: flex;color: #FFFFFF;align-items: center;">
				<view class="btn1" @click="addCart">加购物车</view>
				<view class="btn2" @click="buy">立即购买</view>
			</view>
		</view>

		<!-- 已购买过课程的弹窗 -->
		<u-popup v-model="bugCourseModel" mode="center" border-radius="40">
			<view class="had_bugCourse">
				<image src="/pages2/static/hadBug.png" class="share"></image>
				<view class="tips">
					<view class="warns">温馨提示</view>
					<view class="words">您<text>已购买过</text>该商品课程</view>
					<view class="words">可立即前往学习</view>
				</view>
				<view class="tip_botton">
					<view class="cancel_btn" @click="changeKown()">知道了</view>
					<view class="confirm_btn" @click="toStudy()">去学习</view>
				</view>
			</view>
		</u-popup>

		<!-- 选择规格弹窗 -->
        <u-popup v-model="toggleSkuShow" mode="bottom" border-radius="40">
			<view class="popup_box">
                <view class="check_head">
                    <view class="headers">
                    	<view class="grade">选择规格</view>
                        <u-icon name="close" color="#9C9C9C" size="40" @click="closePop()"></u-icon>
                    </view>
                </view>
                <view v-if="Object.keys(skuItem).length" class="pop_prices">
                    <view class="lefts">
						<image :src="$method.splitImgHost(skuItem.coverUrl, true)" class="imgs"></image>
					</view>
					<view class="rights">
						<view class="goods_titles">{{ skuItem.goodsName }}</view>
						<view class="goods_price">￥{{ skuItem.standPrice }}</view>
					</view>
                </view>
				<view class="lines"></view>
                <view class="check_con">
					<view v-for="(item, index) in specList" :key="index" class="check_items">
						<view class="grades">{{ item.name }}</view>
						<view class="grade_names">
							<view class="course_items" v-for="(child, c_index) in item.specAttrList" :key="c_index" :class="{'nactive': child.check }"
							 @click="selectSku(child, index)">
								{{ child.name }}
							</view>
						</view>
					</view>
                </view>
                <view class="right_now" @click="rightNowBuy()">确 定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
// import { websocket } from '@/common/socket.js';
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			list: [
				{
					name: '详情'
				},
				{
					name: '大纲'
				}
			],
			current: 0,
			id: '',
			goodsData: {},
			bankList: [],
			goodsExamConfig: [],
			bugCourseModel: false, // 弹窗
			hadBuyCourse: {}, // 已购买课程信息
			toggleSkuShow: false,
			skuItem: {},
			isCarOrBuy: 1, // 1加入购物车 2立即购买
			specList: [], // 规格列表
		};
	},
	filters: {
		formatDate: function(value) {
			var date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var Y = date.getFullYear();
			return Y;
		}
	},
	onUnload() {},
	computed: { 
		...mapGetters(['userInfo','hideBuyState']),
		isCheckSku() {
			let checkCout = 0
			this.specList.forEach((item, index) => {
				if (item.specAttrList && item.specAttrList.length) {
					item.specAttrList.forEach((child, c_index) => {
						if (child.check) {
							checkCout++
						}
					})
				}
				
			})
			return checkCout
		},
	},
	onLoad(option) {
		this.id = option.id;
		this.getDetail();
		this.goodsBankList();
		this.getIsBuy() // 判断是否已经购买过该课程
		wx.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"]
		})
	},
	onShow() {},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: this.goodsData.goodsName,
			query: 'id=' + this.id,
			imageUrl: this.$method.splitImgHost(this.goodsData.coverUrl, true)
		}
	},
	onShareAppMessage() {
		return {
			title: this.goodsData.goodsName,
			path: `/pages2/bank/detail?id=` + this.id,
			imageUrl: this.$method.splitImgHost(this.goodsData.coverUrl, true)
		}
	},
	
	methods: {
		toFixed(number) {
			if(number) {
				return number.toFixed(2)
			} else {
				return '0.00'
			}
		},
		getDetail() {
			// '/app/common/goods/'+ data 获取商品详细信息
			this.$api.commonGoodsDetail(this.id).then(res => {
				if (res.data.data.mobileDetailHtml) {
					res.data.data.mobileDetailHtml = res.data.data.mobileDetailHtml.replace(/<img/gi, '<img style="max-width:100%;"');
				}
				this.goodsData = res.data.data;
				this.goodsExamConfig = JSON.parse(res.data.data.goodsExamConfig);
			});
		},
		goodsBankList() {
			this.$api
				.goodsBankList({
					goodsId: this.id
				})
				.then(res => {
					console.log(res);
					this.bankList = res.data.data;
					this.showAllCharpter();
				});
		},
		/**
		 * 展示第一个章下的节内容
		 */
		showAllCharpter() {
			for(let i = 0; i < this.bankList.length; i++) {
				if(this.bankList[i].type == 1) { //第一个是模块直接展开，再展开章下面的节
					this.$api
						.goodsChapterList({
							moduleExamId: this.bankList[i].majorId
						})
						.then(res => {
							this.$set(this.bankList[i], 'showList', true);
							this.$set(this.bankList[i], 'list', res.data.data);
							this.changeItem(i,0,this.bankList[i].list[0].chapterExamId,this.bankList[i].type)
						});
					break;
				} else if(this.bankList[i].type == 2) { //第一个章展开下面的节
					this.changeItem(i,'',this.bankList[i].majorId,this.bankList[i].type)
					break;
				}
			}
		},
		goodsChapterList(bank, id) {
			this.$api
				.goodsChapterList({
					moduleExamId: id
				})
				.then(res => {
					this.$set(bank, 'list', res.data.data);
				});
		},
		
		goTest(type,item) {
			
			if(type == 1) {
				uni.setStorageSync('testname',item.examName)
				uni.navigateTo({
					url:'/pages2/bank/questionBankTest?id=' + item.examId + '&num=' + this.showTest(item.examId).num
				})
			} else if(type == 2) {
				uni.setStorageSync('testname',item.examName)
				uni.navigateTo({
					url:'/pages2/bank/questionBankTest?id='+item.examId+'&num='+ this.showTest(item.examId).num
				})
			} else if(type == 3) {
				uni.setStorageSync('testname',item.name)
				uni.navigateTo({
					url:'/pages2/bank/questionBankTest?id=' + item.majorId + '&num=' + this.showTest(item.majorId).num
				})
			}
		},

		showTest(id) {
			return this.goodsExamConfig.find(item => item.examId == id);
		},
		clickModule(index,id) {

			if (this.bankList[index].list) {
				this.$set(this.bankList[index], 'showList', !this.bankList[index].showList);
				return;
			}

			this.$api
				.goodsChapterList({
					moduleExamId: id
				})
				.then(res => {
					this.$set(this.bankList[index], 'showList', true);
					this.$set(this.bankList[index], 'list', res.data.data);
				});
		},
		buy() {
			if (this.$method.isGoLogin()) {
				return;
			}
			// 判断有没有规格选择
			if (this.goodsData.specTemplateId) {
				this.isCarOrBuy = 2
				this.toggleSkuShow = true
				return
			}
			this.$navTo.togo('/pages2/order/confirm_list?id=' + this.id);
		},
		addCart() {
			// this.getSpecDetail()
			// return
			if (this.$method.isGoLogin()) {
				return;
			}
			// 判断有没有规格选择
			if (this.goodsData.specTemplateId) {
				this.isCarOrBuy = 1
				this.toggleSkuShow = true
				return
			}
			this.addShopCart()
		},
		addShopCart() {
			this.$api.addCart({ goodsId: this.id }).then(res => {
				if (res.data.code == 200) {
					uni.setStorageSync('updateCart', 1); //提醒刷新购物车
					uni.showToast({
						title: '添加成功'
					});
				} else {
					this.$u.toast(res.data.msg);
				}
			});
		},
		getSpecDetail() {
			this.$http({
				url: `/app/common/spec/${this.goodsData.specTemplateId}`,
				method: 'get',
				noToken: true
			}).then((res) => {
				if (res.data.code == 200) {
					this.toggleSkuShow = true
					let data = res.data.data
					if (data) {
						this.specList = data && (data.specList || [])
						this.specList.forEach((item, index) => {
							item.specAttrList.forEach((child, i_index) => {
								this.$set(this.specList[index].specAttrList[i_index], 'check', false)
							})
						})
					}
				} else {
					this.$u.toast('暂无数据')
				}
			})
		},
		change(index) {
			this.current = index;
		},
		changeItem(index1,index2,id,type) {
			if (type == 1) {
				console.log(1)
				if (this.bankList[index1].list[index2].list) {
					this.$set(this.bankList[index1].list[index2], 'showList', !this.bankList[index1].list[index2].showList);
					return;
				}

				this.$api
					.goodsExamList({
						chapterExamId: id
					})
					.then(res => {
						this.$set(this.bankList[index1].list[index2], 'showList', true);
						this.$set(this.bankList[index1].list[index2], 'list', res.data.data);
					});
			} else if (type == 2) {
				console.log(2)
				if (this.bankList[index1].list) {
					this.$set(this.bankList[index1], 'showList', !this.bankList[index1].showList);
					return;
				}

				this.$api
					.goodsExamList({
						chapterExamId: id
					})
					.then(res => {
						this.$set(this.bankList[index1], 'showList', true);
						this.$set(this.bankList[index1], 'list', res.data.data);
					});
			}
		},
		toShopcar() {
			uni.switchTab({
			    url: '/pages/shopping/shoppingCart'
			})
		},
		getIsBuy() {
			this.$http({
				url: '/order/buyGoodsNotExpired',
				method: 'get',
				data: { goodsId: this.id }
			}).then((res) => {
				if (res.data.code == 200) {
					if (res.data.data) { // 有data返回是已经购买过的课程
						this.hadBuyCourse = res.data.data
						this.bugCourseModel = true
					}
				}
			})
		},
		changeKown() {
			this.bugCourseModel = false
		},
		toStudy() {
			let sysTime = this.$method.timest()
			const { serviceStartTime, serviceEndTime, goodsId, orderGoodsId} = this.hadBuyCourse
			if (serviceStartTime && serviceEndTime && (sysTime <= serviceStartTime || sysTime >= serviceEndTime)) {
				uni.showToast({
					icon: 'none',
					title: '不在学习服务期，不能进入学习'
				})
				return;
			}
			uni.navigateTo({
				url:'/pages2/bank/question_detail?id='+goodsId+'&orderGoodsId='+orderGoodsId
			})
			this.bugCourseModel = false
		},
		closePop() {
            this.toggleSkuShow = false
			this.skuItem = {}
        },
		selectSku(item, index) {
            this.specList[index].specAttrList.forEach((i_item, i_index) => {
				if (item.specAttributeId == i_item.specAttributeId) {
					this.$set(this.specList[index].specAttrList[i_index], 'check', true)
				} else {
					this.$set(this.specList[index].specAttrList[i_index], 'check', false)
				}
			})
			// console.log('this.specList', this.specList, this.isCheckSku)
			if (this.specList.length == this.isCheckSku) {
				let specAttrIds = []
				this.specList.forEach((item) => {
					let result = item.specAttrList.find(e => e.check)
					if (result) {
						specAttrIds.push(result.specAttributeId)
					}
				})
				this.getGoodsInfos(specAttrIds)
			}
        },
		// 获取规格属性值对应的商品信息
		getGoodsInfos(specAttrIds) {
			this.$http({
				url: '/app/common/attr/goods',
				method: 'get',
				data: {
					specTemplateId: this.goodsData.specTemplateId,
					specAttrIds: specAttrIds.join(',')
				},
				noToken: true
			}).then((res) => {
				if (res.data.code == 200) {
					this.skuItem = res.data.data || {}
				}
			})
		},
        rightNowBuy() {
            if (this.specList.length != this.isCheckSku) {
				this.$u.toast('请先选择所有的规格')
				return
			}
            if (this.isCarOrBuy == 1) { // 加入购物车
				this.addShopCart()
			} else {
				this.$navTo.togo('/pages2/order/confirm_list?id='+this.id);
			}
			this.closePop()
        }
	}
};
</script>
<style>
page {
	background-color: #F2F2F2;
}
</style>
<style lang="scss" scope>
@import '../../pages3/course/index.scss';
.contents {
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	margin-top: 16rpx;
	overflow: hidden;
	
	// tab
	.tabs {
		// width: 100%;
		height: 78rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #F2F7FF;
		border-radius: 38rpx;
		margin: 24rpx;
		padding: 0rpx 5rpx;
		.tab_item {
			width: 345rpx;
			height: 65rpx;
			line-height: 65rpx;
			font-size: 28rpx;
			font-weight: bold;
			border-radius: 32rpx;
			text-align: center;
			color: #333;
			&.nactive {
				color: #fff;
				background-color: #3577E8;
			}
			// &.twoBtn {
			// 	width: 50%;
			// }
		}
	}
}
.cou_title {
	padding: 24rpx 32rpx 40rpx 32rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.prices {
	.price_word {
		font-size: 40rpx;
		font-weight: 800;
		color: #FC3F3F;
	}
	.sale {
		color: #999999;
		font-size: 28rpx;
		margin-left: 8rpx;
	}
	.price_line {
		color: #999999;
		font-size: 28rpx;
		text-decoration:line-through;
		font-weight: 400;
	}
	.free {
		font-size: 32rpx;
	}
}
.courseName {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.icon_up {
	width: 32rpx;
	height: 32rpx;
}
.intro {
	background: #fff;
	padding: 16rpx 16rpx 124rpx;

	.content {
		background: #fff;
		border-radius: 16rpx;
		.top {
			border-radius: 16rpx;
			padding: 32rpx 28rpx 16rpx;
			font-size: 30rpx;
			color: #333333;
		}

		.img {
			width: 100%;
		}
	}
}

.moduleItem {
	height: 80rpx;
	color: #333333;
	font-size: 32rpx;
	line-height: 80rpx;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
}
.title-list {
	background: #fff;
	padding: 16rpx 16rpx 124rpx;
	.content {
		.list {
			background: #fff;
			margin-bottom: 30rpx;
			overflow: hidden;
			border-radius: 16rpx;
			padding: 10rpx 16rpx;

			.module {
				font-size: 32rpx;
				color: #333333;

				.icon {
					margin-right: 10rpx;
				}
			}

			.section {
				font-size: 30rpx;
				color: #333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #eee;
			}
			.item_name {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-left: 8rpx;
			}
			// .article-list {
			// 	margin-top:20rpx;				
			// }
			
			.article {
				padding:10rpx 0;
				min-height: 80rpx;
				display: flex;
				align-items: center;
				margin-left: 35rpx;
				font-size: 30rpx;
				color: #666666;
				border-bottom: 1rpx solid #eeeeee;
				display: flex;
			
				.flex_auto {
					flex: 1;
					font-size: 30rpx;
    				color: #666666;
				}
			
				&:nth-last-of-type(1) {
					border: 0;
				}
			
				&.active {
					color: #007aff;
			
					.btn {
						width: 103rpx;
						height: 48rpx;
						line-height: 48rpx;
						text-align: center;
						color: #3577E8;
						font-size: 24rpx;
						border-radius: 24rpx;
						background: #fff;
						margin-left: 36rpx;
						border: 1rpx solid #3577E8;
					}
				}
			}

			
		}
	}
}
.btn2 {
	width: 187rpx;
	height: 79rpx;
	line-height: 79rpx;
	background: #FC3F3F;
	border-radius: 40rpx;
	text-align: center;
	font-size: 24rpx;
}
.btn1 {
	width: 187rpx;
	height: 79rpx;
	line-height: 79rpx;
	background: #FFB102;
	border-radius: 40rpx;
	text-align: center;
	margin-right: 11rpx;
	font-size: 24rpx;
}
.blackFont {
	color: #333333;
	margin: 0 4rpx;
}
.wk_icon {
	width: 24rpx;
	height: 24rpx;
	margin-right: 12rpx;
}
.noteTag {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
	align-items: center;
}
.priceTag {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ff2d55;
}
.titleTag {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
	// margin-left: 8rpx;
}
.yearTag {
	width: 80rpx;
	height: 32rpx;
	background: #ebf5ff;
	border: 2rpx solid #007aff;
	border-radius: 16rpx;
	font-size: 24rpx;
	color: #007aff;
	text-align: center;
	line-height: 32rpx;
}
.itemBox {
	background: #ffffff;
	box-shadow: 0rpx 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
	border-radius: 24rpx;
	width: 100%;
	padding: 20rpx;
	margin-bottom: 20rpx;
}
</style>