NewZkgj/pages/index/learning.vue

<template>
  <view class="main">
		<view class="tab-box">
			<view class="tab-item-wrap">
				<view v-for="(item, index) in tablist" :key="index" 
					  :class="activeClass == index ? 'bottom' : ''" @tap="clocktab(index, item.id)">
					{{ item.name }}
					<view class="bottomLine" v-if="activeClass == index"></view>
				</view>
			</view>
		</view>
		<view class="cented" v-if="activeClass==0">
			<view class="ceninfo" v-for="(item,index) in alllist" :key="index">
				<view class="infoview">
					<view class="infozuo">
						<view class="infozuochiud1">{{item.jbaName}}</view>
						<view class="infozuochiud2">置业顾问</view>
					</view>
					<view class="infoyou">
						<view class="infoyouchiud2" @click="quclick(item)">去学习</view>
					</view>
				</view>
				<view class="footerinfo">
					<view class="footerinfozuo">{{item.assignedTime}}</view>
					<view class="footerinfoyou"></view>
				</view>
				<view class="footicon">
					<view class="icon">
						<image class="Piabodata-img1" src="../../static/images/studyhot.png" mode=""></image>
						<!-- 浏览量 -->
						{{item.pageviews}}
					</view>
					<view class="icon">
						<image class="Piabodata-img1" src="../../static/images/viewstudy.png" mode=""></image>
						<!-- 热度 -->
						{{item.heat}}
					</view>
					
				</view>
			</view>
		</view>
		<view class="biaoqianview" v-if="activeClass==1">
			<view class="boxintention">
				<view class="title">分点标签列表</view>
				<view class="boxcenten" v-for="(item,index) in equinoctial" :key="index" @click="routerclick(item)">
					<view class="boxcenteninfotext">{{item.name}}</view>
					<view class="boxcenteninfoimg"><u-icon size="20px" name="arrow-right"></u-icon></view>
				</view>
			</view>
		</view>
  </view>
</template>

<script>
  var config = require("../../config");
  var util = require("@/utils/util.js");
  export default {
    data() {
      return {
		tablist:[
			{name:"全文"},
			{name:"分点"}
		],
		activeClass:0,
		equinoctial:[],
		alllist:[],
		buildingID:''
		
      };
    },
    onShow(){
			var i=uni.getStorageSync('fendianindex') 
			this.buildingID=uni.getStorageSync('buildingID').id;
			this.clocktab(i)
    },
    methods: {
		//全部学习跳转
		quclick(item){
			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 => {
				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){
			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',
			        'Access-Token': 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
			 			});
			 		}	
			 	}
			 })
		 },
		 
		 
		 infoinit(){
			 let obj={
				 itemId:this.buildingID
			 }
			 uni.request({
			     url: config.service.findSelectedLabel,
			 	method:"POST",
				data:obj,
			     header: {
			        'content-type': 'application/json',
			        'Access-Token': uni.getStorageSync('weapp_session_login_data').token
			     },
			 	success: (data) => {
			 		if(data.data.code==10000){
						this.equinoctial=data.data.data
			 		}else{
			 			uni.showToast({
			 			    title: data.data.message,
			 			    duration: 2000
			 			});
			 		}	
			 	}
			 })
		 }
    },
  }
</script>

<style lang="scss" scoped>
.main {
	background: #F1F1F1;;
	min-height: 100vh;
}
.tab-box {
	height: auto;
	overflow: auto;
	width: 100%;
	.tab-item-wrap {
		height: 100rpx;
		width: 80%;
		margin: 0 auto;
		line-height: 100rpx;
		display: flex;
		justify-content: space-around;
		font-size: 36rpx;
		color: #959dad;
	}
}
.bottom {
	color: #008EF2;
	position: relative;
}
.bottomLine {
	position: absolute;
	width: 96rpx;
	height: 6rpx;
	top: 80rpx;
	background-color: #298dff;
	border-radius: 8rpx 8rpx 0rpx 0rpx;
	left: -13rpx;
}
.cented{
	width: 100%;
	padding-top: 14rpx;
	.ceninfo{
		width: 690rpx;
		// height: 160rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding-top: 23rpx;
		position: relative;
		.infoview{
			width: 100%;
			height: 64rpx;
			display: flex;
			.infozuo{
				width: 454rpx;
				height: 100%;
				display: flex;
				align-items: center;
				.infozuochiud1{
					font-size: 36rpx;
					font-weight: 600;
					color: #0C0C0C;
					text-indent: 28rpx;
				}
				.infozuochiud2{
					width: 113rpx;
					height: 42rpx;
					border-radius: 5rpx;
					margin-left: 19rpx;
					border: 1px solid #008EF2;
					font-size: 24rpx;
					font-weight: 400;
					color: #008EF2;
					line-height: 42rpx;
					text-align: center;
				}
			}
			.infoyou{
				width:236rpx;
				height: 100%;
				display: flex;
				align-items: center;
				.infoyouchiud1{
					display: block;
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
				}
				.infoyouchiud2{
					width: 133rpx;
					height: 56rpx;
					background: #008EF2;
					border-radius: 8rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 30rpx;
					line-height: 56rpx;
					margin-left: 80rpx;
				}
			}
		}
		.footerinfo{
			width: 100%;
			height: 42rpx;
			display: flex;
			margin-top: 14rpx;
			.footerinfozuo{
				width: 454rpx;
				font-size: 30rpx;
				color: #0C0C0C;
				line-height: 42rpx;
				margin-left: 26rpx;
			}
			.footerinfoyou{
				width: 236rpx;
				font-size: 24rpx;
				color: #999999;
				line-height: 42rpx;
				text-indent: 42rpx;
			}
		}
		.dingwei{
			width: 100%;
			height: 60rpx;
			border: 1px solid red;
			position: absolute;
			top: 160rpx;
			left: 0rpx;
		}
	}
}
.biaoqianview{
	width: 100%;
	.boxintention {
		width: 690rpx;
		margin: 0 auto;
		.title {
			font-size: 36upx;
			color: #333333;
			position: relative;
			display: flex;
			align-items: center;
			padding-left: 19upx;
	
			&:before {
				content: '';
				position: absolute;
				left: 0;
				height: 30upx;
				width: 9upx;
				background: #008ef2;
				border-radius: 5rpx;
			}
		}
		.boxcenten{
			width: 100%;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin-top: 22rpx;
			display: flex;
			.boxcenteninfotext{
				width: 90%;
				height: 100%;
				text-indent: 20rpx;
				line-height: 100rpx;
				font-size: 30rpx;
				color: #0C0C0C;
			}
			.boxcenteninfoimg{
				width: 10%;
				height: 100%;
				line-height: 100rpx;
			}
		}
	}
}
.footicon{
	display: flex;
	align-items: center;
	margin-top: 30rpx;
	padding:20rpx;
	flex-direction: row-reverse;
	.icon{
		margin-left: 20rpx;
	}
	image{
		width: 36rpx;
		height: 36rpx;
		margin-right: 20rpx;
		vertical-align: -7rpx;
	}
}
</style>



<!-- <template>
	<view class="cented-box">
		<view class="search-box">
			<view class="search">
				<view class="search-img">
					<image class="search-img1" src="../../static/images/search.png" mode=""></image>
				</view>
				<view class="search-text">输入话术关键字</view>
			</view>
		</view>
		
		<view class="caseid-box">
			<view class="caseid">
				<image class="caseid-img1" src="../../static/images/good.png" mode=""></image>
				<view class="caseid-text">优秀案例</view>
			</view>
			<view class="caseid">
				<image class="caseid-img1" src="../../static/images/problem.png" mode=""></image>
				<view class="caseid-text">问题库</view>
			</view>
			<view class="caseid">
				<image class="caseid-img1" src="../../static/images/reverse.png" mode=""></image>
				<view class="caseid-text">反面案例</view>
			</view>
		</view>
		<view class="Pinspeak">销讲话术</view>
		<view class="chented">
			<view class="title">
				<view class="title1"></view>
				<view class="titletext">逼单话术</view>
				<view class="titleimg">
					<image class="titleimg1" src="../../static/images/arrow.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="chented">
			<view class="title" style="border: none;">
				<view class="title1"></view>
				<view class="titletext">品牌介绍</view>
			</view>
			<view class="chented-for">
				<view class="chented-che">2021销售额</view>
				<view class="chented-che">2021销售额</view>
				<view class="chented-che">2021销售额</view>
				<view class="chented-che">2021销售额</view>
			</view>
		</view>
		<view class="chented">
			<view class="title" style="border: none;">
				<view class="title1"></view>
				<view class="titletext">品牌介绍</view>
			</view>
			<view class="chented-for">
				<view class="chented-che">2021销售额</view>
				<view class="chented-che">2021销售额</view>
				<view class="chented-che">2021销售额</view>
				<view class="chented-che">2021销售额</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		components: {},
		onLoad() {},
		onShow() {},
		methods: {
	
		},
	
	};
</script>

<style lang="scss" scoped>
.cented-box{
	background: #F8F8F8;
	width: 100%;
	height: 100%;
}
.search-box{
	width: 100%;
	height: 102rpx;
	background: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	.search{
		width: 690rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		background: #F8F8F8;
		border-radius: 33rpx;
		.search-img{
			width: 26rpx;
			height: 30rpx;
			margin-left: 20rpx;
			.search-img1{
				width: 100%;
				height: 100%;
				margin-top: 2rpx;
			}	
		}
		.search-text{
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			margin-left:10rpx;
		}
	}
}
.caseid-box{
	width: 100%;
	height: 204rpx;
	margin-top: 10rpx;
	background: #FFFFFF;
	display: flex;
	.caseid{
		flex: 1;
		height: 100%;
		text-align: center;
		margin-top: 13rpx;
		.caseid-img1{
			width: 134rpx;
			height: 134rpx;
		}
		.caseid-text{
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
		}
	}
}
.Pinspeak{
	width: 100%;
	height: 92rpx;
	border-bottom: 1rpx solid #E0E0E0;
	font-size: 32rpx;
	font-weight: 600;
	color: #333333;
	text-indent: 30rpx;
	line-height: 92rpx;
	background: #FFFFFF;
	margin-top: 20rpx;
}
.chented{
	width: 100%;
	padding-left: 30rpx;
	padding-right: 30rpx;
	background-color: #FFFFFF;
	.title{
		width: 100%;
		height: 90rpx;
		border-bottom: 1rpx solid #E0E0E0;
		display: flex;
		align-items: center;
		.title1{
			width: 6rpx;
			height: 30rpx;
			background: #2671E2;
		}
		.titletext{
			width: 90%;
			height: 30rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: #333333;
			line-height: 30rpx;
			text-indent: 10rpx;
		}
		.titleimg{
			width: 8%;
			text-align: right;
			.titleimg1{
				width: 14rpx;
				height: 30rpx;		
			}
		}
	}
	.chented-for{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-top: -20rpx;
		border-bottom: 1rpx solid #E0E0E0;
		padding-bottom: 30rpx;
		.chented-che{
			width: 210rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
			border: 1px solid #C9C9C9;
			text-align: center;
			line-height: 60rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #333333;
			margin-right: 20rpx;
			margin-top: 20rpx;
		}
	}
}
</style>
 -->