init

common/httpList/bank.js

@@ -10,6 +10,15 @@ export default {
 			noToken:true
 		})
 	},
+	//题库推荐列表
+	banklistrecommendList(data) {
+		return myRequest({
+			url: '/app/common/bank/recommendList',
+			method: 'get',
+			data: data,
+			noToken:true
+		})
+	},
 	bankInfo(data) {
 		return myRequest({
 			url: '/app/common/bank/' + data,
@@ -17,4 +26,35 @@ export default {
 			noToken: true
 		})
 	},
+	//查询题库大章列表
+	banklistchapterlist(data) {
+		return myRequest({
+			url: '/app/common/bank/chapter/list',
+			method: 'get',
+			data: data,
+			noToken:true
+		})
+	},
+	//获取题库大章详细信息
+	bankInfochapter(data) {
+		return myRequest({
+			url: '/app/common/bank/chapter/' + data,
+			method: 'get',
+		})
+	},
+	//查询题库小节列表
+	banklistsectionlist(data) {
+		return myRequest({
+			url:'/bank/section/list',
+			method: 'get',
+			data: data,
+		})
+	},
+	//获取题库小节详细信息
+	bankInfosection(data) {
+		return myRequest({
+			url: '/bank/section/' + data,
+			method: 'get',
+		})
+	},
 }

components/home.vue

@@ -68,47 +68,45 @@
 					</u-row>
 				</view>
 				<!-- 课程列表-->
-				<view v-if="current==0">
+				<view v-if="current == 0">
 					<view @click="jumpDetail(item)" class="list_box" v-for="(item, index) in list1" :key="index">
 						<image :src="$method.splitImgHost(item.coverUrl)" class="list_img"></image>
 						<view class="list_content">
 							<view style="margin-left: 280rpx;margin-top: 10rpx;">
-								<view class="list_title">{{item.courseName}}</view>
-								<view class="old_price">原价：¥{{item.price}}</view>
-								<view class="price">现价：¥{{item.price}}</view>
+								<view class="list_title">{{ item.courseName }}</view>
+								<view class="old_price">原价：¥{{ item.price }}</view>
+								<view class="price">现价：¥{{ item.price }}</view>
 							</view>
 						</view>
 					</view>
 				</view>
 				<!-- 题库列表-->
-				<view v-if="current==1">
+				<view v-if="current == 1">
 					<view @click="jumpDetail(item)" class="list_box" v-for="(item, index) in list2" :key="index">
 						<image :src="$method.splitImgHost(item.coverUrl)" class="list_img"></image>
 						<view class="list_content">
 							<view style="margin-left: 280rpx;margin-top: 10rpx;">
-								<view class="list_title">{{item.bankName}}</view>
-								<view class="old_price">原价：¥{{item.price}}</view>
-								<view class="price">现价：¥{{item.price}}</view>
+								<view class="list_title">{{ item.bankName }}</view>
+								<view class="old_price">原价：¥{{ item.price }}</view>
+								<view class="price">现价：¥{{ item.price }}</view>
 							</view>
 						</view>
 					</view>
 				</view>
 				<!-- 重点列表-->
-				<view v-if="current==2"> 
+				<view v-if="current == 2">
 					<view @click="jumpDetail(item)" class="list_box" v-for="(item, index) in list3" :key="index">
 						<image :src="$method.splitImgHost(item.coverUrl)" class="list_img"></image>
 						<view class="list_content">
 							<view style="margin-left: 280rpx;margin-top: 10rpx;">
-								<view class="list_title">{{item.name}}</view>
-								<view class="old_price">原价：¥{{item.price}}</view>
-								<view class="price">现价：¥{{item.price}}</view>
+								<view class="list_title">{{ item.name }}</view>
+								<view class="old_price">原价：¥{{ item.price }}</view>
+								<view class="price">现价：¥{{ item.price }}</view>
 							</view>
 						</view>
 					</view>
 				</view>
-				<view v-if="paramList[current].showStatus" style="text-align: center;margin-top: 24rpx;">
-					到底啦~
-				</view>
+				<view v-if="paramList[current].showStatus" style="text-align: center;margin-top: 24rpx;">到底啦~</view>
 				<u-popup v-model="show">
 					<view style="width: 600rpx"><view class="popup_t1">选择你需要的</view></view>
 				</u-popup>
@@ -118,7 +116,6 @@
 </template>
 
 <script>
-
 export default {
 	name: 'home',
 	data() {
@@ -147,24 +144,24 @@ export default {
 					image: 'https://cdn.uviewui.com/uview/swiper/3.jpg'
 				}
 			],
-			paramList:[
+			paramList: [
 				{
-					pageNum:1,
+					pageNum: 1,
 					pageSize: 10,
-					total:0,
-					showStatus:0
+					total: 0,
+					showStatus: 0
 				},
 				{
-					pageNum:1,
+					pageNum: 1,
 					pageSize: 10,
-					total:0,
-					showStatus:0
+					total: 0,
+					showStatus: 0
 				},
 				{
-					pageNum:1,
+					pageNum: 1,
 					pageSize: 10,
-					total:0,
-					showStatus:0
+					total: 0,
+					showStatus: 0
 				}
 			],
 			date: ['日', '一', '二', '三', '四', '五', '六'],
@@ -172,38 +169,38 @@ export default {
 			list1: [],
 			list2: [],
 			list3: [],
-			windowHeight: 0,
+			windowHeight: 0
 		};
 	},
-	onLoad(){},
+	onLoad() {},
 	mounted() {
 		this.windowHeight = uni.getSystemInfoSync().windowHeight;
-		this.initList()
+		this.initList();
 	},
 	methods: {
-		initList(){
-			this.courseList()
-			this.bankList()
-			this.noteList()
+		initList() {
+			this.courseList();
+			this.bankList();
+			this.noteList();
 		},
 		scroll(e) {},
-		scrollTolower(){
-			if(this.current==0){
-				if(this.list1.length<this.paramList[0].total){
-					this.paramList[0].pageNum++
-					this.courseList()
+		scrollTolower() {
+			if (this.current == 0) {
+				if (this.list1.length < this.paramList[0].total) {
+					this.paramList[0].pageNum++;
+					this.courseList();
 				}
 			}
-			if(this.current==1){
-				if(this.list1.length<this.paramList[1].total){
-					this.paramList[1].pageNum++
-					this.bankList()
+			if (this.current == 1) {
+				if (this.list1.length < this.paramList[1].total) {
+					this.paramList[1].pageNum++;
+					this.bankList();
 				}
 			}
-			if(this.current==2){
-				if(this.list1.length<this.paramList[2].total){
-					this.paramList[2].pageNum++
-					this.noteList()
+			if (this.current == 2) {
+				if (this.list1.length < this.paramList[2].total) {
+					this.paramList[2].pageNum++;
+					this.noteList();
 				}
 			}
 		},
@@ -211,53 +208,57 @@ export default {
 			this.current = index;
 		},
 		//课程
-		courseList(){
-			var self = this
-			var param = this.paramList[0]
+		courseList() {
+			var self = this;
+			var param = this.paramList[0];
 			this.$api.courselist(param).then(res => {
-				self.paramList[0].total = res.data.total
-				self.list1.push.apply(self.list1,res.data.rows)
-				if(self.list1.length === res.data.total){
-					self.paramList[0].showStatus = true
+				self.paramList[0].total = res.data.total;
+				self.list1.push.apply(self.list1, res.data.rows);
+				if (self.list1.length === res.data.total) {
+					self.paramList[0].showStatus = true;
 				}
-			})
+			});
 		},
 		//题库
-		bankList(){
-			var self = this
-			var param = this.paramList[1]
+		bankList() {
+			var self = this;
+			var param = this.paramList[1];
 			this.$api.banklist(param).then(res => {
-				self.paramList[1].total = res.data.total
-				self.list2.push.apply(self.list2,res.data.rows)
-				if(self.list2.length === res.data.total){
-					self.paramList[1].showStatus = true
+				self.paramList[1].total = res.data.total;
+				self.list2.push.apply(self.list2, res.data.rows);
+				if (self.list2.length === res.data.total) {
+					self.paramList[1].showStatus = true;
 				}
-			})
+			});
 		},
 		//考试重点
-		noteList(){
-			var self = this
-			var param = this.paramList[2]
+		noteList() {
+			var self = this;
+			var param = this.paramList[2];
 			this.$api.notelist(param).then(res => {
-				self.paramList[2].total = res.data.total
-				self.list3.push.apply(self.list3,res.data.rows)
-				if(self.list3.length === res.data.total){
-					self.paramList[2].showStatus = true
+				self.paramList[2].total = res.data.total;
+				self.list3.push.apply(self.list3, res.data.rows);
+				if (self.list3.length === res.data.total) {
+					self.paramList[2].showStatus = true;
 				}
-			})
+			});
 		},
 		jumpDetail(item) {
 			if (this.current == 0) {
-				this.$navTo.togo('/pages2/course/detail', item);
+				this.$navTo.togo('/pages2/course/detail', {
+					id: item.courseId
+				});
 				return;
 			}
 			if (this.current == 1) {
-				this.$navTo.togo('/pages2/bank/detail', {});
+					this.$navTo.togo('/pages2/bank/detail', {
+						id: item.bankId
+					});
 				return;
 			}
 			if (this.current == 2) {
 				this.$navTo.togo('/pages2/course/keynote', {
-					id:item.fileId
+					id: item.fileId
 				});
 				return;
 			}

pages2/bank/detail.vue

@@ -1,29 +1,27 @@
 <template>
-	<view >
+	<view>
 		<view class="detail_body">
 			<view style="width: 100%;padding: 20rpx 0;">
-				<view class="title">
-					二级造价工程师2020二级造价工程师习题练习
-				</view>
+				<view class="title">二级造价工程师2020二级造价工程师习题练习</view>
 				<view style="width: 686rpx;height: 180rpx;display: flex;margin: 20rpx auto;">
 					<view class="box1">
 						<view>
 							<u-row gutter="16">
 								<u-col span="7">
 									<view style="text-align: center;display: flex;height: 180rpx;flex-direction: column;justify-content: center;">
-										 <view class="container">
-										     <view class='progress_box'>
-										        <canvas class="progress_bg"   canvas-id="canvasProgressbg">  </canvas> 
-										        <canvas class="progress_canvas"   canvas-id="canvasProgress">  </canvas> 
-										        <view class="progress_text">
-										            <view class="u-progress-dot">68</view> 
-										            <text class='u-progress-info'> %</text>
-										        </view>     
-										    </view>
+										<view class="container">
+											<view class="progress_box">
+												<canvas class="progress_bg" canvas-id="canvasProgressbg"></canvas>
+												<canvas class="progress_canvas" canvas-id="canvasProgress"></canvas>
+												<view class="progress_text">
+													<view class="u-progress-dot">68</view>
+													<text class="u-progress-info">%</text>
+												</view>
+											</view>
 										</view>
 									</view>
 								</u-col>
-								<u-col span="5" >
+								<u-col span="5">
 									<view style="margin-top: 20rpx;">
 										<view class="t1">总题数</view>
 										<view class="t3">300</view>
@@ -33,14 +31,14 @@
 								</u-col>
 							</u-row>
 						</view>
-						
 					</view>
 					<view class="box2">
 						<view style="height: 100%;display: flex;flex-direction: column;justify-content: center;">
 							<view style="text-align: center;" @click="jumpQuestion">
 								<view class="big_num">35</view>
 								<view class="t4">
-									错题集<u-icon name="arrow-right"  size="28"></u-icon>
+									错题集
+									<u-icon name="arrow-right" size="28"></u-icon>
 								</view>
 							</view>
 						</view>
@@ -50,7 +48,8 @@
 							<view style="text-align: center;">
 								<view class="big_num">126</view>
 								<view class="t4">
-									收藏集<u-icon name="arrow-right"  size="28"></u-icon>
+									收藏集
+									<u-icon name="arrow-right" size="28"></u-icon>
 								</view>
 							</view>
 						</view>
@@ -58,35 +57,27 @@
 				</view>
 			</view>
 			<view>
-				<u-row >
-					<u-col span="11" >
-						<view class="video_t1">
-							2020年二级建造师教育选修
-						</view>
-					</u-col>
+				<u-row>
+					<u-col span="11"><view class="video_t1">2020年二级建造师教育选修</view></u-col>
 				</u-row>
 			</view>
-			<view>
-				<u-tabs :list="list" font-size="24" bar-width="100" :current="current" @change="change" active-color="#32467B"></u-tabs>
-			</view>
+			<view><u-tabs :list="pageData.typeId === 1 ? list : list1" font-size="24" bar-width="100" :current="current" @change="change" active-color="#32467B"></u-tabs></view>
 			<u-line color="#D6D6DB" />
-			<view v-if="current==0">
+			<view v-if="current == 0 && pageData.typeId === 1">
 				<!-- 题库目录-->
 				<view style="margin-top: 15rpx;">
-					<u-row >
-						<u-col span="9" >
+					<u-row>
+						<u-col span="9">
 							<view class="video_t2" style="display: flex;align-items: center;">
 								<view class="top_line"></view>
 								题库目录
 							</view>
 						</u-col>
-						<u-col span="3" text-align="right">
-							<view class="video_t2">
-								<u-icon name="arrow-right"  size="28"></u-icon>
-							</view>
+						<u-col span="3" text-align="right" @click="activeStatus = !activeStatus">
+							<view class="video_t2"><u-icon name="arrow-right" size="28" style="transition: all 0.2s" :class="activeStatus ? 'rotoct' : ''"></u-icon></view>
 						</u-col>
 					</u-row>
-					<view class="scroll_box">
+					<!-- <view class="scroll_box">
 						<scroll-view class="r_sliper" scroll-x="true" >
 							<view v-for="(item,index) in list" :key="index" style="margin-right: 20rpx;display:inline-block">
 								<view class="r_t2">
@@ -94,46 +85,53 @@
 								</view>
 							</view>
 						</scroll-view>
+					</view> -->
+					<view class="catalogBox" :class="activeStatus ? 'changeCatalogBox' : ''">
+						<view
+							class="catalogA"
+							v-for="(item, index) in chapterList"
+							:key="index"
+							:class="activeStatusCata === item.bankChapterId ? 'activesq' : ''"
+							@click="activeList(item, index)"
+						>
+							{{ item.name }}
+						</view>
 					</view>
 				</view>
 				<u-line color="#D6D6DB" />
 			</view>
-			<view v-if="current<=1">
+			<view v-if="current <= 1">
 				<!-- 题库介绍-->
 				<view style="margin-top: 15rpx;">
-					<u-row >
-						<u-col span="9" >
+					<u-row>
+						<u-col span="9">
 							<view class="video_t2" style="display: flex;align-items: center;">
 								<view class="top_line"></view>
 								题库介绍
 							</view>
 						</u-col>
 					</u-row>
-					<view class="text_box">
-						这是一段课程介绍文本，课程介绍内容可在后台设置编辑，以富
-						文本形式呈现，常见的由图片和文本组成。
-					</view>
+					<view class="text_box" v-html="pageData.introduction"></view>
 				</view>
 				<u-line color="#D6D6DB" />
 			</view>
 			<!-- 出题名师-->
-			<view v-if="current<=2">
+			<view v-if="current <= 2">
 				<view style="margin: 15rpx 0;">
-					<u-row >
-						<u-col span="8" >
+					<u-row>
+						<u-col span="8">
 							<view class="video_t2" style="display: flex;align-items: center;">
 								<view class="top_line"></view>
 								出题名师
 							</view>
 						</u-col>
 					</u-row>
-					<u-row >
-						<view style="margin: 25rpx;display: flex;">
-							<view >
-								<image src="/static/avatar1.png" class="teacher_img"></image>
-							</view>
+					<u-row>
+						<view style="margin: 25rpx;display: flex;" v-for="(item, index) in teachersList" :key="index">
+							<view><image :src="$method.splitImgHost(item.avatar)" class="teacher_img"></image></view>
 							<view class="teacher_t">
-								建工学院名誉院长，建造师建筑资深导师，北京工业大学教授，建造师考试大纲编委会编委。参与过国家一级注册建造师考试大纲、考试辅导书、习题集等书的编写。
+								<view>{{ item.teacherName }}</view>
+								<view>{{ item.introduce }}</view>
 							</view>
 						</view>
 					</u-row>
@@ -142,8 +140,8 @@
 			</view>
 			<!-- 相关推荐-->
 			<view style="margin: 15rpx 0;">
-				<u-row >
-					<u-col span="8" >
+				<u-row>
+					<u-col span="8">
 						<view class="video_t2" style="display: flex;align-items: center;">
 							<view class="top_line"></view>
 							相关推荐
@@ -151,340 +149,479 @@
 					</u-col>
 				</u-row>
 				<view style="margin: 10rpx;">
-					<view class="tj_box" v-for="(item,index) in list" :key="index">
-						<image src="/static/banner.png"   style="width: 320rpx;height: 160rpx;"></image>
-						<view style="font-size: 24rpx;color: #666666;d">
-							2020年二级建造师继续教...
-						</view>
+					<view class="tj_box" v-for="(item, index) in recommendListS" :key="index">
+						<image :src="$method.splitImgHost(item.coverUrl)" style="width: 320rpx;height: 160rpx;"></image>
+						<view style="font-size: 24rpx;color: #666666;">{{ item.bankName }}</view>
 						<view>
-							<u-row >
-								<u-col span="6" >
+							<u-row>
+								<u-col span="6">
 									<view style="margin-left: 20rpx;">
-										<image src="/static/people.png"   style="width: 20rpx;height: 20rpx;"></image>
+										<image src="/static/people.png" style="width: 20rpx;height: 20rpx;"></image>
 										<text style="color: #999999;font-size: 20rpx;margin-left: 10rpx;">2023</text>
 									</view>
 								</u-col>
 								<u-col span="6" text-align="right">
-									<text style="color: #E91313;font-size: 16rpx;margin-left: 8rpx;">
-										活动价 
-									</text>
-									<text style="color: #E91313;font-size: 24rpx;font-weight: bold;">
-										￥499
-									</text>
+									<text style="color: #E91313;font-size: 16rpx;margin-left: 8rpx;">活动价</text>
+									<text style="color: #E91313;font-size: 24rpx;font-weight: bold;">￥{{ item.price }}</text>
 								</u-col>
 							</u-row>
 						</view>
-						
 					</view>
 				</view>
 			</view>
 		</view>
-		<view  class="footer_tab">
+		<view class="footer_tab">
 			<u-line color="#D6D6DB" />
 			<view style="height: 100%;display: flex;align-items: center;position: relative;">
 				<view style="text-align: center;margin-left: 30rpx;">
 					<image src="/static/sc.png" class="sc"></image>
 					<view class="sc_t">收藏</view>
 				</view>
-				
-				<view class="buy" @click="jumpExam">
-					模拟考试
-				</view>
+
+				<view class="buy" @click="jumpExam">模拟考试</view>
 			</view>
 		</view>
-
+		<u-popup v-model="showBox" mode="bottom" border-radius="14">
+			<view class="content">
+				<scroll-view scroll-y="true" style="height: 300rpx;">
+					<view v-if="boxList.length > 0">
+						<view
+							v-for="(item, index) in boxList"
+							:key="index"
+							style="height: 60rpx;line-height: 60rpx;border-bottom: 1rpx solid #eee;display: flex;align-items: center;justify-content: space-between;"
+							:style="infoData.bankSectionId === item.bankSectionId ? 'color:#1677ff;' : ''"
+							@click="getsec(item)"
+						>
+							<view>{{ item.name }}</view>
+							<u-icon v-if="infoData.bankSectionId === item.bankSectionId" name="checkbox-mark"></u-icon>
+						</view>
+					</view>
+					<view v-else>暂无内容</view>
+				</scroll-view>
+				<view class="confrim-btn" style="margin-top: 10rpx;"><u-button @click="showBox = false">取消</u-button></view>
+			</view>
+		</u-popup>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				list: [{
+export default {
+	data() {
+		return {
+			list: [
+				{
 					name: '题库目录'
-				}, {
+				},
+				{
+					name: '题库介绍'
+				},
+				{
+					name: '出题名师'
+				},
+				{
+					name: '相关推荐'
+				}
+			],
+			list1: [
+				{
 					name: '题库介绍'
-				}, {
-					name: '出题名师',
-				}, {
-					name: '相关推荐',
-				}],
-				current: 0
+				},
+				{
+					name: '出题名师'
+				},
+				{
+					name: '相关推荐'
+				}
+			],
+			current: 0,
+			activeStatus: false, //课程目录下拉样式变化是否开启
+			activeStatusCata: 0, //当前选中章节
+			chapterList: [], //章列表
+			showBox: false, //弹窗状态
+			boxList: [], //弹窗列表
+			infoData: [], //当前页面章节数据
+			pageData: [], //传入数据
+			teachersList: [], //教师数据
+			recommendListS: [] //推荐列表
+		};
+	},
+	onLoad(option) {
+		this.drawProgressbg();
+		this.drawCircle(1.3); // 0-2
+		var options = {};
+		this.$api.bankInfo(option.id).then(res => {
+			options = res.data.data;
+			this.pageData = options;
+			if (res.data.data.typeId === 1) {
+				this.getBankDList(options);
 			}
+			this.teacherS(options.teacherIds);
+			this.recommendList(options);
+		});
+	},
+	onShow() {},
+	methods: {
+		getBankDList(options) {
+			var data = {
+				bankId: options.bankId
+			};
+			this.$api.banklistchapterlist(data).then(res => {
+				var chaList = res.data.rows;
+				if (chaList.length === 0) {
+					uni.showToast({
+						title: '暂无相关章节内容',
+						icon: 'none',
+						duration: 2000
+					});
+					return;
+				}
+				var dataset = {
+					bankChapterId: res.data.rows[0].bankChapterId
+				};
+				this.$api.banklistsectionlist(dataset).then(result => {
+					this.getsec(result.data.rows[0]);
+				});
+				this.chapterList = chaList;
+			});
 		},
-		onLoad(option) {
-			this.drawProgressbg()
-			this.drawCircle(1.3) // 0-2
+		activeList(item, index) {
+			var self = this;
+			var dataset = {
+				bankChapterId: item.bankChapterId
+			};
+			this.$api.banklistsectionlist(dataset).then(result => {
+				self.boxList = result.data.rows;
+			});
+			this.showBox = true;
 		},
-		onShow(){
+		getsec(item) {
+			this.infoData = item;
+			this.activeStatusCata = item.bankChapterId;
+			this.showBox = false;
 		},
-		methods: {
-			jumpQuestion(){
-				this.$navTo.togo('/pages2/bank/question', {
-					type:2
-				})
-			},
-			change(index) {
-				this.current = index;
-			},
-			jumpExam(){
-				this.$navTo.togo('/pages2/bank/question', {
-					type:1
-				})
-			},
-			drawProgressbg(){
-			    // 使用 wx.createContext 获取绘图上下文 context
-			    var ctx = wx.createCanvasContext('canvasProgressbg',this)
-			    ctx.setLineWidth(6);// 设置圆环的宽度
-			    ctx.setStrokeStyle('#ececec'); // 设置圆环的颜色
-			    ctx.setLineCap('round') // 设置圆环端点的形状
-			    ctx.beginPath();//开始一个新的路径
-			    ctx.arc(30, 30, 25, 0, 2 * Math.PI, false);
-			    //设置一个原点(110,110)，半径为100的圆的路径到当前路径
-			    ctx.stroke();//对当前路径进行描边
-			    ctx.draw();
-			  },
-			  drawCircle(step){  
-			      var context = wx.createCanvasContext('canvasProgress',this);
-			        // 设置渐变
-			        var gradient = context.createLinearGradient(50, 25, 25, 50);
-			        gradient.addColorStop("0", "#32467B");
-			        gradient.addColorStop("1.0", "#4FACFE");
-			        context.setLineWidth(6);
-			        context.setStrokeStyle(gradient);
-			        context.setLineCap('round')
-			        context.beginPath(); 
-			        // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
-			        context.arc(30, 30, 25, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
-			        context.stroke(); 
-			        context.draw() 
-			    },
-		
+		teacherS(v) {
+			var data = {
+				teacherIds: v
+			};
+			this.$api.teacherList(data).then(res => {
+				console.log(res);
+				this.teachersList = res.data.rows;
+			});
 		},
-		
-	}
+		jumpQuestion() {
+			this.$navTo.togo('/pages2/bank/question', {
+				type: 2
+			});
+		},
+		recommendList(options) {
+			var data = {
+				bankId: options.bankId
+			};
+			this.$api.banklistrecommendList(data).then(res => {
+				this.recommendListS = res.data.data;
+			});
+		},
+		change(index) {
+			this.current = index;
+		},
+		jumpExam() {
+			this.$navTo.togo('/pages2/bank/question', {
+				type: 1
+			});
+		},
+		drawProgressbg() {
+			// 使用 wx.createContext 获取绘图上下文 context
+			var ctx = wx.createCanvasContext('canvasProgressbg', this);
+			ctx.setLineWidth(6); // 设置圆环的宽度
+			ctx.setStrokeStyle('#ececec'); // 设置圆环的颜色
+			ctx.setLineCap('round'); // 设置圆环端点的形状
+			ctx.beginPath(); //开始一个新的路径
+			ctx.arc(30, 30, 25, 0, 2 * Math.PI, false);
+			//设置一个原点(110,110)，半径为100的圆的路径到当前路径
+			ctx.stroke(); //对当前路径进行描边
+			ctx.draw();
+		},
+		drawCircle(step) {
+			var context = wx.createCanvasContext('canvasProgress', this);
+			// 设置渐变
+			var gradient = context.createLinearGradient(50, 25, 25, 50);
+			gradient.addColorStop('0', '#32467B');
+			gradient.addColorStop('1.0', '#4FACFE');
+			context.setLineWidth(6);
+			context.setStrokeStyle(gradient);
+			context.setLineCap('round');
+			context.beginPath();
+			// 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
+			context.arc(30, 30, 25, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
+			context.stroke();
+			context.draw();
+		}
+	}
+};
 </script>
 <style>
-	::-webkit-scrollbar{
-		width: 0;
-		height: 0;
-		color: transparent;
-	}
+::-webkit-scrollbar {
+	width: 0;
+	height: 0;
+	color: transparent;
+}
 </style>
 <style scope>
-	.t4{
-		font-size: 24rpx;
-		color: #999999;
-	}
-	.big_num{
-		font-size: 64rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: #32467B;
-	}
-	.t1{
-		font-size: 20rpx;
-		color: #999999;
-	}
-	.t3{
-		font-size: 30rpx;
-		color: #32467B;
-		font-weight: bold;
-		
-	}
-	.progress_box{
-	  position: relative;
-	  width:121rpx;
-	  height: 121rpx;  
-	  display: flex;  
-	  align-items: center;
-	  justify-content: center;
-	}
-	.progress_bg{
-	  position: absolute;
-	    width:121rpx;
-	  height: 121rpx; 
-	}
-	.progress_canvas{ 
-	  width:121rpx;
-	  height: 121rpx; 
-	} 
-	.progress_text{ 
-	  position: absolute; 
-	  display: flex;  
-	  align-items: center;
-	  justify-content: center
-	}
-	.u-progress-info{
-		font-size: 18rpx;
-		margin-top: 22rpx;
-		color: #32467B;
-	}
-	.u-progress-dot{
-		font-size: 40rpx;
-		font-weight: bold;
-		color: #32467B;
-	}
-	.box2{
-		width: 28%;
-		height: 180rpx;
-		background: #FFFFFF;
-		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
-		border-radius: 32rpx;
-		margin-left: 3%;
-	}
-	.box1{
-		width: 38%;
-		height: 180rpx;
-		background: #FFFFFF;
-		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
-		border-radius: 32rpx;
-	}
-	.title{
-		height: 64rpx;
-		background: #FFFFFF;
-		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
-		border-radius: 24rpx;
-		line-height: 64rpx;
-		font-size: 30rpx;
-		font-weight: bold;
-		color: #0C141F;
-		text-align: center;
-		margin: 0 auto;
-		width: 686rpx;
-	}
-	.text_box{
-		font-size: 24rpx;
-		font-family: PingFang SC;
-		font-weight: 400;
-		color: #666666;
-		line-height: 36rpx;
-		padding: 20rpx;
-	}
-	.price_num{
-		font-size: 24rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: #E91313;
-	}
-	.price_t2{
-		font-size: 18rpx;
-		font-family: PingFang SC;
-		font-weight: 500;
-		text-decoration: line-through;
-		color: #999999;
-	}
-	.price_t1{
-		font-size: 33rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: #E91313;
-	}
-	.sc_t{
-		font-size: 22rpx;
-		color: #000000;
-	}
-	.sc{
-		width: 29rpx ;
-		height: 29rpx;
-	}
-	.buy{
-		width: 138rpx;
-		height: 48rpx;
-		line-height: 48rpx;
-		background: #32467B;
-		border-radius: 10rpx;
-		color: #FFFFFF;
-		font-size: 28rpx;
-		text-align: center;
-		vertical-align: middle;
-		position: absolute;
-		right: 30rpx;
-	}
-	.detail_body{
-		padding-bottom: 96rpx;
-	}
-	.footer_tab{
-		position:fixed;
-		bottom:0;
-		height: 96rpx;
-		width: 100%;
-		background-color: #FFFFFF;
-	}
-	.tj_box{
-		width: 50%;
-		display: inline-block;
-		text-align: center;
-		margin: 10rpx 0;
-	}
-	.teacher_t{
-		font-size: 24rpx;
-		font-family: PingFang SC;
-		font-weight: 400;
-		color: #666666;
-		line-height: 36rpx;
-		margin-left: 15rpx;
-	}
-	.teacher_img{
-		width: 87rpx;
-		height: 129rpx;
-	}
-	.t2{
-		font-size: 24rpx;
-		font-family: PingFang SC;
-		color: #666666;
-		line-height: 36rpx;
-		margin: 15rpx;
-	}
-	.r_t2{
-		width: 201rpx;
-		height: 49rpx;
-		background: rgba(22, 119, 255, 0.05);
-		border: 1rpx solid #32467B;
-		border-radius: 16rpx;
-		color: #666666;
-		font-size: 23rpx;
-		text-align: center;
-		display: flex;
-		align-items: center;
-		padding: 5rpx;
-		
-	}
-	.scroll_box{
-		width: 100%;
-		height: 60rpx;
-		background: #FFFFFF;
-		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
-		white-space:nowrap;
-		overflow: hidden;
-		margin: 15rpx 0;
-	}
-	.r_sliper{
-		padding: 0 20rpx;
-	}
-	.top_line{
-		width: 6rpx;
-		height: 22rpx;
-		background: #32467B;
-		margin-right: 10rpx;
-	}
-	.video_t2{
-		font-size: 24rpx;
-		font-family: PingFang SC;
-		font-weight: 500;
-		color: #666666;
-	}
-	.video_t1{
-		font-size: 28rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: #333333;
-		margin-left: 20rpx;
-	}
-
-
-	
+.content {
+	padding: 24rpx;
+	text-align: left;
+}
+.catalogBox {
+	display: flex;
+	align-items: center;
+	flex-wrap: nowrap;
+	overflow-x: auto;
+	padding-left: 38rpx;
+	max-height: 305rpx;
+	overflow-y: auto;
+	transition: all 0.4s;
+}
+.catalogBox > .catalogA {
+	min-width: 200rpx;
+	height: 48rpx;
+	line-height: 48rpx;
+	// text-align: center;
+	border: 2rpx solid transparent;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	word-break: break-all;
+	border-radius: 10rpx;
+	background: rgba(22, 119, 255, 0.05);
+	padding-left: 19rpx;
+	box-sizing: border-box;
+	padding-right: 15rpx;
+	margin-right: 16rpx;
+	margin-bottom: 20rpx;
+	margin-top: 15rpx;
+	font-size: 24rpx;
+	color: #666;
+}
+.catalogBox > .activesq {
+	border-color: #1677ff;
+}
+.changeCatalogBox {
+	display: block;
+}
+.catalogBox::-webkit-scrollbar {
+	display: none; /* Chrome Safari */
+}
+.t4 {
+	font-size: 24rpx;
+	color: #999999;
+}
+.big_num {
+	font-size: 64rpx;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #32467b;
+}
+.t1 {
+	font-size: 20rpx;
+	color: #999999;
+}
+.t3 {
+	font-size: 30rpx;
+	color: #32467b;
+	font-weight: bold;
+}
+.progress_box {
+	position: relative;
+	width: 121rpx;
+	height: 121rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.progress_bg {
+	position: absolute;
+	width: 121rpx;
+	height: 121rpx;
+}
+.progress_canvas {
+	width: 121rpx;
+	height: 121rpx;
+}
+.progress_text {
+	position: absolute;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.u-progress-info {
+	font-size: 18rpx;
+	margin-top: 22rpx;
+	color: #32467b;
+}
+.u-progress-dot {
+	font-size: 40rpx;
+	font-weight: bold;
+	color: #32467b;
+}
+.box2 {
+	width: 28%;
+	height: 180rpx;
+	background: #ffffff;
+	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
+	border-radius: 32rpx;
+	margin-left: 3%;
+}
+.box1 {
+	width: 38%;
+	height: 180rpx;
+	background: #ffffff;
+	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
+	border-radius: 32rpx;
+}
+.title {
+	height: 64rpx;
+	background: #ffffff;
+	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
+	border-radius: 24rpx;
+	line-height: 64rpx;
+	font-size: 30rpx;
+	font-weight: bold;
+	color: #0c141f;
+	text-align: center;
+	margin: 0 auto;
+	width: 686rpx;
+}
+.text_box {
+	font-size: 24rpx;
+	font-family: PingFang SC;
+	font-weight: 400;
+	color: #666666;
+	line-height: 36rpx;
+	padding: 20rpx;
+}
+.price_num {
+	font-size: 24rpx;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #e91313;
+}
+.price_t2 {
+	font-size: 18rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	text-decoration: line-through;
+	color: #999999;
+}
+.price_t1 {
+	font-size: 33rpx;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #e91313;
+}
+.sc_t {
+	font-size: 22rpx;
+	color: #000000;
+}
+.sc {
+	width: 29rpx;
+	height: 29rpx;
+}
+.buy {
+	width: 138rpx;
+	height: 48rpx;
+	line-height: 48rpx;
+	background: #32467b;
+	border-radius: 10rpx;
+	color: #ffffff;
+	font-size: 28rpx;
+	text-align: center;
+	vertical-align: middle;
+	position: absolute;
+	right: 30rpx;
+}
+.detail_body {
+	padding-bottom: 96rpx;
+}
+.footer_tab {
+	position: fixed;
+	bottom: 0;
+	height: 96rpx;
+	width: 100%;
+	background-color: #ffffff;
+}
+.tj_box {
+	width: 50%;
+	display: inline-block;
+	text-align: center;
+	margin: 10rpx 0;
+}
+.teacher_t {
+	font-size: 24rpx;
+	font-family: PingFang SC;
+	font-weight: 400;
+	color: #666666;
+	line-height: 36rpx;
+	margin-left: 15rpx;
+}
+.teacher_img {
+	width: 87rpx;
+	height: 129rpx;
+}
+.t2 {
+	font-size: 24rpx;
+	font-family: PingFang SC;
+	color: #666666;
+	line-height: 36rpx;
+	margin: 15rpx;
+}
+.r_t2 {
+	width: 201rpx;
+	height: 49rpx;
+	background: rgba(22, 119, 255, 0.05);
+	border: 1rpx solid #32467b;
+	border-radius: 16rpx;
+	color: #666666;
+	font-size: 23rpx;
+	text-align: center;
+	display: flex;
+	align-items: center;
+	padding: 5rpx;
+}
+.scroll_box {
+	width: 100%;
+	height: 60rpx;
+	background: #ffffff;
+	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
+	white-space: nowrap;
+	overflow: hidden;
+	margin: 15rpx 0;
+}
+.r_sliper {
+	padding: 0 20rpx;
+}
+.top_line {
+	width: 6rpx;
+	height: 22rpx;
+	background: #32467b;
+	margin-right: 10rpx;
+}
+.video_t2 {
+	font-size: 24rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	color: #666666;
+}
+.video_t1 {
+	font-size: 28rpx;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #333333;
+	margin-left: 20rpx;
+}
+.rotoct {
+	transform: rotate(90deg);
+}
 page {
-		background: #FFFFFF;
-	}
+	background: #ffffff;
+}
 </style>

pages2/course/detail.vue

@@ -120,7 +120,7 @@
 					</u-col>
 				</u-row>
 				<view style="margin: 10rpx;">
-					<view class="tj_box" v-for="(item, index) in commendList" :key="index">
+					<view class="tj_box" v-for="(item, index) in commendList" :key="index" @click="getNavTo(item)">
 						<image :src="$method.splitImgHost(item.coverUrl)" style="width: 320rpx;height: 160rpx;"></image>
 						<view style="font-size: 24rpx;color: #666666;d">{{ item.courseName }}</view>
 						<view>
@@ -145,7 +145,7 @@
 			<u-line color="#D6D6DB" />
 			<view style="height: 100%;display: flex;align-items: center;position: relative;">
 				<view style="text-align: center;margin-left: 30rpx;" @click="favorites">
-					<image :src="collecStatus ? '/static/star.png':'/static/sc.png'" class="sc"></image>
+					<image :src="collecStatus ? '/static/star.png' : '/static/sc.png'" class="sc"></image>
 					<view class="sc_t">收藏</view>
 				</view>
 				<view style="text-align: center;margin-left: 30rpx;">
@@ -220,26 +220,31 @@ export default {
 			queryData: {}, //页面跳转内容
 			pageData: {},
 			infoData: {},
-			chapterList: [],
+			chapterList: [], //章列表
 			teacherInfo: {},
 			faceGetState: true, //模拟今天是否人脸识别
 			showBox: false,
 			boxList: [], //章节弹窗列表
 			payStatus: true, //是否购买该课程
 			commendList: [], //推荐课程列表
-			collecStatus: false,//收藏状态
+			collecStatus: false //收藏状态
 		};
 	},
-	onLoad(options) {
+	onLoad(option) {
 		const Verify = require('@/wxcomponents/verify_mpsdk/main.js');
 		Verify.init();
-		this.queryData = options;
-		this.getCourseInfo();
-		this.getChapter(options.courseId);
-		this.getcommendList(options.courseId);
-		this.favoritesStatus();
+		this.$api.courseInfo(option.id).then(res => {
+			this.queryData = res.data.data;
+			this.getCourseInfo();
+			this.getChapter(res.data.data.courseId);
+			this.getcommendList(res.data.data.courseId);
+		});
 	},
 	onShow() {
+		if (!uni.getStorageSync('union_id') && this.$store.state.token === '') {
+		} else {
+			this.favoritesStatus();
+		}
 		let that = this;
 		const query = uni.createSelectorQuery().in(this);
 		query
@@ -327,14 +332,14 @@ export default {
 							self.favoritesStatus();
 						});
 					});
-				}else{
-				var data = {
-					userId: this.$store.state.userInfo.userId,
-					courseId: this.queryData.courseId
-				};
-				this.$api.coursecollect(data).then(res => {
-					self.favoritesStatus()
-				});
+				} else {
+					var data = {
+						userId: this.$store.state.userInfo.userId,
+						courseId: this.queryData.courseId
+					};
+					this.$api.coursecollect(data).then(res => {
+						self.favoritesStatus();
+					});
 				}
 			}
 		},
@@ -352,10 +357,6 @@ export default {
 				chapterId: item.chapterId
 			};
 			this.$api.coursesectionlist(dataset).then(result => {
-				result.data.rows.forEach((items, indexs) => {
-					items.value = items.sectionId;
-					items.label = items.name;
-				});
 				self.boxList = result.data.rows;
 			});
 			this.showBox = true;
@@ -371,7 +372,6 @@ export default {
 		getCourseInfo() {
 			var self = this;
 			this.$api.courseInfo(this.queryData.courseId).then(res => {
-				console.log(res.data.data);
 				if (res.data.code === 200) {
 					self.pageData = res.data.data;
 					self.getTeacher(res.data.data.teacherIds);
@@ -381,10 +381,18 @@ export default {
 		getChapter(v) {
 			var self = this;
 			var data = {
-				courseId: v
+				courseId: v 
 			};
 			this.$api.coursechapterlist(data).then(res => {
 				var chaList = res.data.rows;
+				if (chaList.length === 0) {
+					uni.showToast({
+						title: '暂无相关章节内容',
+						icon: 'none',
+						duration: 2000
+					});
+					return;
+				}
 				var dataset = {
 					chapterId: res.data.rows[0].chapterId
 				};
@@ -492,6 +500,11 @@ export default {
 			this.hh3 = this.h1 + this.h2 + this.h3;
 			this.hh4 = this.h1 + this.h2 + this.h3 + this.h4;
 		},
+		getNavTo(item) {
+			this.$navTo.togo('/pages2/course/detail', {
+				id:item.courseId
+			});
+		},
 		change(index) {
 			this.current = index;
 			let that = this;