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">
				<template v-if="alllist.length > 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>
				<view v-else class="empty">
					<view style="width: 100%;display: flex;
					flex-direction: column;justify-content: center;align-items: center;">
						<view style="width: 100%;text-align: center;">
							<image style="width: 220rpx;height: 200rpx;"
								src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
						</view>
						<view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
					</view>
				</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">
						<template v-if="alllists.length > 0">
							<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">{{item.studyStatus}}</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>
						</template>

						<view v-else class="empty">
							<view style="width: 100%;display: flex;
						flex-direction: column;justify-content: center;align-items: center;">
								<view style="width: 100%;text-align: center;">
									<image style="width: 220rpx;height: 200rpx;"
										src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode="">
									</image>
								</view>
								<view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据
								</view>
							</view>
						</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: [], // 二级分类菜单
			};
		},
		computed: {
			bgAudioMannager() {
				console.log(this.$store.state.bgAudioMannager)
			}
		},
		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() {
			this.getTabBarBadge()
			try {
				this.$store.commit('stopAduio')
			} catch (e) {
				console.log(e)
			}
			var i = uni.getStorageSync('fendianindex')
			this.buildingID = uni.getStorageSync('buildingID').id;
			this.clocktab(i)
			let left = uni.getStorageSync('left');
			if (left != undefined) {
				this.leftIndex = left.split(',')[0]
				this.getSecond(left.split(',')[1])
				this.infoinit(left.split(',')[1])
			} else {
				this.leftIndex = 0
				this.infoinit()
			}
			this.updateInit()
		},
		methods: {

			updateInit() {
				this.$u.get(config.service.notReadNum, {
					id: uni.getStorageSync('weapp_session_userInfo_data').accountId,
					projectId: uni.getStorageSync('buildingID').id
				}).then(res => {
					console.log(res)
					if (res > 0) {
						uni.setTabBarBadge({ //显示数字
							index: 4, //tabbar下标
							text: `${res}` //数字
						})
					} else {
						uni.removeTabBarBadge({
							index: 4
						})
					}
				}).catch(e => {
					uni.removeTabBarBadge({
						index: 4
					})
				})
			},
			// 跳转部分学习
			quclicks(item) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});

				const parames = {
					pageNum: 1,
					pageSize: 100,
					query: {
						whetherFinish: 1,
						customerId: item.carId,
						id: item.startFile
					}
				}
				this.$u.post("/corpus/fendianFindByPage", parames).then(res => {
					var newobj = res[0];
					setTimeout(function() {
						uni.hideLoading();
					}, 2000);
					console.log(res)
					if (!res[0]) {
						uni.showToast({
							title: '当前学习案例暂无数据',
							icon: 'none'
						})
						return
					}
					console.log(this.equinoctial)
					console.log(this.leftIndex)
					if (res[0].merge == 0) {
						uni.navigateTo({
							url: `/pages/learning/Equinoctial/index2?customerId=${newobj.customerId}&biaoqian=${this.equinoctial[this.leftIndex || 0].name}&marketingId=${this.equinoctial[this.leftIndex || 0].marketingId}&startTime=${item.startTime}&startFile=${item.startFile}`
						})
					} else {
						uni.navigateTo({
							url: `/pages/learning/Equinoctial/index?customerId=${newobj.customerId}&biaoqian=${this.equinoctial[this.leftIndex || 0].name}&marketingId=${this.equinoctial[this.leftIndex || 0].marketingId}&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
				uni.setStorageSync("left", index + ',' + item.marketingId); //写入缓存
				this.getSecond(item.marketingId)
			},
			//  tab切换
			clocktab(index) {
				this.activeClass = index;
				if (this.activeClass == 0) {
					uni.setStorageSync("fendianindex", 0); //写入缓存
					this.ceninit()
				} else {
					uni.setStorageSync("fendianindex", 1); //写入缓存
					this.leftIndex = uni.getStorageSync('left').split(',')[0]
					let mid = uni.getStorageSync('left').split(',')[1]
					if (mid != undefined) {
						this.getSecond(mid)
					} else {
						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) => {
						if (data.data.code == 10000) {
							this.alllists = data.data.data.results
						} else {
							uni.showToast({
								title: data.data.message,
								duration: 2000
							});
						}
					}
				})
			},


			infoinit(mid) {
				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) => {
						console.log(data.data.data, 'dsadjsakljdskaljdaskljdklsajdklasjkdlsa')
						if (data.data.code == 10000) {
							if (data.data.data) {
								this.equinoctial = data.data.data
								if (mid != undefined) {
									this.getSecond(mid)
								} else {
									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;
							}
						}
					}
				}
			}
		}


		.empty {
			height: 50vh;
			display: flex;
			align-items: center;
		}
	}
</style>