newEdition/pages/index/learning.vue

<template>
	<view class="main">
		<!-- 头部导航 -->
		<view class="tab-box">
			<u-tabs class="tab-box-utabs" bar-width="120" bar-height="4" :list="tablist" :is-scroll="false"
				:current="activeClass" @change="clocktab"></u-tabs>
		</view>
		<!-- 内容部分 :style="[otherHeight]" -->
		<view class="container">
			<template v-if="activeClass==0">
				<view class="cented">
					<block v-for="(item,index) in alllist" :key="index">
						<view class="ceninfo" @click="quclick(item)">
							<view class="infoview">
								<view class="infozuo">
									<view class="infozuochiud2">顾</view>
									<view class="infozuochiud1">{{item.jbaName}}</view>
								</view>
								<view class="infoyou">
									<view class="infoyouchiud2">{{ item.studyStatus }}</view>
								</view>
							</view>
							<view class="footerinfo">
								<view class="footerinfozuo">
									<image src="../../static/images/img/time.png" mode=""></image>
									{{item.assignedTime}}
								</view>
								<view class="footerinfozuo">
									<image src="../../static/images/img/voice.png" mode=""></image>
									{{ item.duration | formatTime }}min
								</view>
								<view class="footerinfozuo" style="color: #2671E2;">
									<image src="../../static/images/img/percent.png" mode=""></image>
									{{ item.fraction || 0 }}%
								</view>
							</view>
							<!-- 底部按钮组 -->
							<view class="footicon">
								<view class="icon">
									<image class="Piabodata-img1" src="../../static/images/img/view.png" mode="">
									</image>
									<!-- 浏览量 -->
									{{ item.pageviews || 0 }}
								</view>
								<view class="icon">
									<image class="Piabodata-img1" src="../../static/images/img/message.png" mode="">
									</image>
									<!-- 热度 -->
									{{ item.commentCount || 0 }}
								</view>
								<view class="icon">
									<image class="Piabodata-img1" src="../../static/images/img/hand.png" mode="">
									</image>
									<!-- 点赞数 -->
									{{ item.likeCount || 0 }}
								</view>
							</view>
						</view>
					</block>
				</view>
			</template>

			<template v-if="activeClass==1">
				<view class="biaoqianview">
					<scroll-view scroll-y="true" class="boxintention">
						<block v-for="(item,index) in equinoctial" :key="index">
							<view class="boxcenten" :class="{act: index == leftIndex}"
								@click="routerclick(item, index)">
								<view class="boxcenteninfotext">{{item.name}}</view>
							</view>
						</block>
					</scroll-view>

					<scroll-view scroll-y="true" class="rside-scroll">
						<view class="rside-box">
							<block v-for="(item,index) in alllists" :key="index">
								<view class="ceninfo" @click="quclicks(item)">
									<view class="infoview">
										<view class="infozuo">
											<view class="infozuochiud2">顾</view>
											<view class="infozuochiud1">{{item.jbaName}}</view>
										</view>
										<view class="infoyou">
											<view class="infoyouchiud2">未学习</view>
										</view>
									</view>
									<view class="footerinfo">
										<view class="footerinfozuo">
											<image src="../../static/images/img/time.png" mode=""></image>
											{{item.assignedTime}}
										</view>
									</view>
									<!-- 底部按钮组 -->
									<view class="footicon">
										<view class="icon">
											<image class="Piabodata-img1" src="../../static/images/img/view.png"
												mode=""></image>
											<!-- 浏览量 -->
											{{item.pageviews || 0 }}
										</view>
										<view class="icon">
											<image class="Piabodata-img1" src="../../static/images/img/message.png"
												mode=""></image>
											<!-- 热度 -->
											{{item.commentCount || 0 }}
										</view>
										<view class="icon">
											<image class="Piabodata-img1" src="../../static/images/img/hand.png"
												mode=""></image>
											<!-- 点赞数 -->
											{{item.likeCount || 0 }}
										</view>
									</view>
								</view>
							</block>
						</view>
					</scroll-view>
				</view>
			</template>
		</view>

		<!-- 底部导航栏 -->
		<u-tabbar :isBtnTop="false" class="tabbar" :mid-button="true" activeColor="#1296db" inactiveColor="#999999"
			v-model="current" :list="tabbarList"></u-tabbar>
	</view>
</template>

<script>
	var config = require("../../config");
	var util = require("@/utils/util.js");
	import tabbarList from '@/utils/tabbar.js'
	export default {
		data() {
			return {
				// tabbar配置项
				current: 3,
				tabbarList: tabbarList,
				//--- end --- tabbar配置项
				tablist: [{
						name: "优秀案例"
					},
					{
						name: "维度精选"
					}
				],
				activeClass: 0,
				equinoctial: [],
				alllist: [], // 一级分类菜单
				buildingID: '',
				leftIndex: 0, // 左侧滚动区域选中下标
				alllists: [], // 二级分类菜单
			};
		},
		
		onPullDownRefresh() {
			var i = uni.getStorageSync('fendianindex')
			this.buildingID = uni.getStorageSync('buildingID').id;
			this.clocktab(i)
			this.leftIndex = 0
			this.infoinit()
			
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 3000)
		},
		
		onShow() {
			var i = uni.getStorageSync('fendianindex')
			this.buildingID = uni.getStorageSync('buildingID').id;
			this.clocktab(i)
			this.leftIndex = 0
			this.infoinit()
		},

		methods: {
			// 跳转部分学习
			quclicks(item) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});

				const parames = {
					pageNum: 1,
					pageSize: 100,
					query: {
						whetherFinish: 1,
						customerId: item.carId,
						id: item.startFile
					}
				}
				var cet = {
					bg: 0,
					customerId: item.id,
					id: ''
				}
				this.$u.post("/corpus/fendianFindByPage", parames).then(res => {
					var newobj = res[0];
					setTimeout(function() {
						uni.hideLoading();
					}, 2000);
					if (res[0].merge == 0) {
						uni.navigateTo({
							url: `/pages/learning/Equinoctial/index2?customerId=${newobj.customerId}&biaoqian=${this.equinoctial[this.leftIndex].name}&startTime=${item.startTime}&startFile=${item.startFile}`
						})
					} else {
						uni.navigateTo({
							url: `/pages/learning/Equinoctial/index?customerId=${newobj.customerId}&biaoqian=${this.equinoctial[this.leftIndex].name}&startTime=${item.startTime}&startFile=${item.startFile}`
						})
					}
				})
			},

			//全部学习跳转
			quclick(item) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				const parames = {
					pageNum: 1,
					pageSize: 100,
					query: {
						customerId: item.carId,
					}
				}
				var cet = {
					bg: 0,
					customerId: item.id,
					id: ''
				}
				this.$u.post("/corpus/findByPage", parames).then(res => {
					setTimeout(function() {
						uni.hideLoading();
					}, 2000);
					var newobj = res[0];
					if (res[0].merge == 0) {
						uni.navigateTo({
							url: `/pages/learning/Thefulltext/index2?customerId=${newobj.customerId}&status=${newobj.status}&itemobj=${JSON.stringify(cet)}&stateisshow=${"2"}`
						})
					} else {
						uni.navigateTo({
							url: `/pages/learning/Thefulltext/index?customerId=${newobj.customerId}`
						})
					}
				})
			},
			//分点学习点击事件
			routerclick(item, index) {
				if (this.leftIndex === index) return
				this.leftIndex = index
				this.getSecond(this.equinoctial[index].marketingId)
				// // return
				// uni.navigateTo({
				// 	url: "/pages/learning/Equinoctiallearning?id=" + item.marketingId + "&biaoqian=" + item.name
				// })
			},
			//  tab切换
			clocktab(index) {
				this.activeClass = index;
				if (this.activeClass == 0) {
					uni.setStorageSync("fendianindex", 0); //写入缓存
					this.ceninit()
				} else {
					uni.setStorageSync("fendianindex", 1); //写入缓存
					this.infoinit()
				}
			},

			ceninit() {
				let infoobj = {
					"pageNum": 1,
					"pageSize": 100,
					"query": {
						"status": 0,
						'itemId': this.buildingID,
					}
				}
				uni.request({
					url: config.service.findAllZATD,
					method: "POST",
					header: {
						'content-type': 'application/json',
						'Authorization': 'Bearer ' + uni.getStorageSync('weapp_session_login_data').token
					},
					data: infoobj,
					success: (data) => {
						if (data.data.code == 10000) {
							this.alllist = data.data.data.results
						} else {
							uni.showToast({
								title: data.data.message,
								duration: 2000
							});
						}
					}
				})
			},

			// 获取改学习分类下的数据
			getSecond(id) {
				let infoobj = {
					"pageNum": 1,
					"pageSize": 100,
					"query": {
						"status": 1,
						"marketingId": id,
						"itemId": this.buildingID
					}
				}
				uni.request({
					url: config.service.findAllZATD,
					method: "POST",
					header: {
						'content-type': 'application/json',
						'Authorization': 'Bearer ' + uni.getStorageSync('weapp_session_login_data').token
					},
					data: infoobj,
					success: (data) => {
						console.log(data.data.data.results,
							"qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq");
						if (data.data.code == 10000) {
							this.alllists = data.data.data.results
						} else {
							uni.showToast({
								title: data.data.message,
								duration: 2000
							});
						}
					}
				})
			},


			infoinit() {
				let obj = {
					itemId: this.buildingID
				}
				uni.request({
					url: config.service.findSelectedLabel,
					method: "POST",
					data: obj,
					header: {
						'content-type': 'application/json',
						'Authorization': 'Bearer ' + uni.getStorageSync('weapp_session_login_data').token
					},
					success: (data) => {
						if (data.data.code == 10000) {
							this.equinoctial = data.data.data
							this.getSecond(data.data.data[0].marketingId)
						} else {
							uni.showToast({
								title: data.data.message,
								duration: 2000
							});
						}
					}
				})
			}
		},

		filters: {
			//格式化时间
			formatTime(num) {
				if (!num) return 0 
				num = parseInt(num);
				//格式化时间格式
				num = num.toFixed(0);
				let second = num % 60;
				if (second < 10) second = "0" + second;
				let min = Math.floor(num / 60);
				if (min < 10) min = "0" + min;
				return min + ":" + second;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background: #F8F8F8;
		display: flex;
		flex-direction: column;
	}

	.tab-box {
		position: sticky;
		top: var(--window-top);
		z-index: 999;
		background: #fff;
		width: 100%;
		height: 80rpx;
	}

	.container {
		min-height: calc(100vh - 80rpx - 50px);

		.cented {
			width: 100%;
			display: flex;
			flex-direction: column;

			.ceninfo {
				position: relative;
				margin-top: 20rpx;
				width: 100%;
				background: #FFFFFF;

				.infoview {
					padding: 0 30rpx;
					width: 100%;
					height: 92rpx;
					display: flex;
					justify-content: space-between;
					border-bottom: 1rpx solid #E0E0E0;

					.infozuo {
						display: flex;
						align-items: center;

						.infozuochiud1 {
							font-size: 30rpx;
							font-weight: 600;
							color: #0C0C0C;
						}

						.infozuochiud2 {
							margin: 0 10rpx 0 0;
							padding: 5rpx 11rpx;
							border-radius: 50%;
							border: 1px solid #2671E2;
							font-size: 30rpx;
							font-weight: 400;
							color: #2671E2;
						}
					}

					.infoyou {
						height: 100%;
						display: flex;
						align-items: center;

						.infoyouchiud2 {
							font-size: 30rpx;
							color: #333;
						}
					}
				}

				.footerinfo {
					padding: 0 30rpx;
					width: 100%;
					height: 88rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #E0E0E0;

					.footerinfozuo {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #333;

						image {
							margin: 0 10rpx 0 0;
							width: 32rpx;
							height: 32rpx;
						}
					}
				}

				.footicon {
					padding: 0 80rpx;
					height: 88rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.icon {
						display: flex;
						align-items: center;
					}

					image {
						margin-right: 10rpx;
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

		}

		.biaoqianview {
			width: 100%;
			display: flex;
			height: calc(100vh - 80rpx - 50px);

			.boxintention {
				flex-shrink: 0;
				width: 160rpx;
				height: 100%;
				background: #F0F1F5;

				.boxcenten {
					width: 100%;
					height: 100rpx;
					background: #F0F1F5;
					display: flex;

					.boxcenteninfotext {
						width: 100%;
						height: 100%;
						text-indent: 20rpx;
						line-height: 100rpx;
						font-size: 30rpx;
						color: #0C0C0C;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					&.act {
						background: #fff;
					}
				}
			}

			.rside-scroll {
				flex-grow: 1;
				padding: 0 0 0 10rpx;

				.rside-box {
					display: flex;
					flex-direction: column;

					.ceninfo {
						position: relative;
						margin-top: 20rpx;
						width: 100%;
						background: #FFFFFF;

						.infoview {
							padding: 0 30rpx;
							width: 100%;
							height: 92rpx;
							display: flex;
							justify-content: space-between;
							border-bottom: 1rpx solid #E0E0E0;

							.infozuo {
								display: flex;
								align-items: center;

								.infozuochiud1 {
									font-size: 30rpx;
									font-weight: 600;
									color: #0C0C0C;
								}

								.infozuochiud2 {
									margin: 0 10rpx 0 0;
									padding: 5rpx 11rpx;
									border-radius: 50%;
									border: 1px solid #2671E2;
									font-size: 30rpx;
									font-weight: 400;
									color: #2671E2;
								}
							}

							.infoyou {
								height: 100%;
								display: flex;
								align-items: center;

								.infoyouchiud2 {
									font-size: 30rpx;
									color: #333;
								}
							}
						}

						.footerinfo {
							padding: 0 30rpx;
							width: 100%;
							height: 88rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							border-bottom: 1rpx solid #E0E0E0;

							.footerinfozuo {
								display: flex;
								align-items: center;
								font-size: 28rpx;
								color: #333;

								image {
									margin: 0 10rpx 0 0;
									width: 32rpx;
									height: 32rpx;
								}
							}
						}

						.footicon {
							padding: 0 80rpx;
							height: 88rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.icon {
								display: flex;
								align-items: center;
							}

							image {
								margin-right: 10rpx;
								width: 32rpx;
								height: 32rpx;
							}
						}
					}
				}
			}
		}

	}
</style>