ks-app-employment-service/packageCa/job/midList.vue

<template>
	<view class="specialtylist">
		<view class="content">
			<view class="xx-title" v-html="name">
			</view>
			<view class="introduce-wrap" v-if="summary != '' && videoUrl != ''">
				<view class="item" v-if="summary != ''">
					<view class="title">
						概述：
					</view>
					<view class="txt" v-html="summary"></view>
				</view>
				<view class="item video-wrap" v-if="videoUrl != ''">
					<view class="title">
						介绍视频：
					</view>
					<view class="mask" v-if="isVisitor" @click="showConfirmInfor">请先登录</view>
					<video :src="videoUrl" style="width: 100%;"></video>
				</view>
			</view>
			<view class="link-wrap">
				<view  class="link" :class="(isVisitor && index >2)?'visitor':''" @click="navSmallList(item,index)" v-for="(item, index) in jobList" :key="index">
				  <view class="head">
						<view class="title">{{item.Name}}
							<text class="label" v-if="item.HasVideo">视频</text>
							<text class="label" v-if="item.ExistPower">职业能力</text> 
						</view>
				  </view>
				  <view class="desc" v-if="item.Introduction != ''" v-html="item.Introduction"></view>
				</view>
			</view>
		</view>
		<view class="fiexd-visitor" v-if="isVisitor">
			<navigator class="btn" url="/pagesUserInfo/binding/binding?routeType=6">请先登录</navigator>
		</view>
		<!-- <u-modal :show="showLogin" content='观看完整内容,请先登录' width='500rpx' @confirm="showLogin=false"></u-modal> -->
	</view> 
</template>

<script>
	import api from "@/packageCa/apiCa/job.js"
	export default {
		data() {
			return {
				showLogin: false,
				isVisitor: false, //游客
				user: uni.getStorageSync("CAuserInfo").user,
				name: "",
				code: "",
				jobList: [],
				summary: "",
				videoUrl: "",
			}
		}, 
		onLoad(e) {
			if(this.user == undefined || this.user == null){
				this.isVisitor = true;
			}else {
				this.isVisitor = false;
			}
			this.name =e.name;
			this.code = e.code;
			this.queryJobDictionaryListByParentCode();
		 },
		methods: {
			showConfirmInfor(){
				uni.showModal({
					content:"观看完整内容,请先登录",
					confirmText:"确认",
					confirmColor:"#1677ff",
					showCancel:false
				})		
			},
			navSmallList(item,index){
				if(this.vipType==0&&index>0){
					this.showVIP = true;
				}else{
					if(this.isVisitor && index > 2){
						this.showConfirmInfor();
						//this.showLogin = true;
					}else {
						uni.navigateTo({
							url: `/packageCa/job/smallList?code=${item.Code}&name=${item.Name}`
						})
					}
				} 
			},
			// 获取职业信息
			queryJobDictionaryListByParentCode(){
				uni.showLoading({
					title:"加载中"
				})
				api.queryJobDictionaryListByParentCode(this.code).then((res) => {
					uni.hideLoading();
					if(res.Result == 1){
						this.summary = res.Data.CategoryIntroduction;
						this.videoUrl = res.Data.CategoryVideo;
						this.jobList = res.Data.List;
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tip-layer {
		.title {
			font-size: 36rpx;
			color: #000000;
			text-align: center;
			font-weight: 600;
			margin-bottom: 30rpx;
		}
		.desc {
			font-size: 28rpx;
			color: #666666;
			margin-bottom: 20rpx;
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	.specialtylist {
		background-color: #f6f6f6;
		.content {
		    background: #fff;
			padding-bottom: 150rpx;
		    .xx-title {
		      background: #1676FF;
		      color: #fff;
		      padding: 20rpx 30rpx;
			  font-size: 32rpx;
		    }
			.introduce-wrap {
				padding: 10rpx 30rpx 0;
				.item {
					position: relative;
					padding-top: 20rpx;
					padding-bottom: 30rpx;
					border-bottom: 2rpx solid #ebedf0;
					.title {
						font-size: 32rpx;
						color: #333;
						font-weight: 600;
						margin-bottom: 20rpx;
					}
					.txt {
						font-size: 28rpx;
						line-height: 40rpx;
						color: #999 !important;
						text-indent: 2em;
					}
					&.video-wrap {
						position: relative;
						.mask {
							position: absolute;
							left: 0;
							top: 84rpx;
							width: 690rpx;
							height: 450rpx;
							background: rgba(0, 0, 0, 0.6);
							z-index: 9;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 36rpx;
							color: #fff;
						}
					}
				}
			}
		    .link-wrap {
		      padding: 0 30rpx 50rpx;
		      .link {
		        padding: 36rpx 0;
		        display: flex;
		        flex-direction: column;
		        border-bottom: 1rpx solid #f2f2f2;
		        &:visited,
		        &:link,
		        &:active {
		          color: #333;
		        }
				&.visitor {
					position: relative;
					&::after {
						position: absolute;
						left: 0;
						top: 0;
						content: "";
						display: block;
						width: 100%;
						height: calc(100% + 2rpx);
						z-index: 9;
						background: rgba(0, 0, 0, 0.6);
					}
				}
				 .head {
				   display: flex;
				   align-items: center;
					.title {
					   display: flex;
					   flex-wrap: wrap;
					   font-size: 32rpx;
					   color: #323232;
					   font-weight: 600;
					  .label {
						  display: inline-block;
						  color: #20b664;
						  font-size: 24rpx;
						  line-height: 38rpx;
						  padding: 0 8rpx;
						  border: 2rpx solid #20b664;
						  margin-left: 20rpx;
					  }
						.vip-container {
						  width: 54rpx; 
						  height: 40rpx;
						  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAA8CAMAAAApO6aAAAAAOVBMVEUAAAD6UDr8UDz4UDz8UDv8UDv9UDz7UDv3UDj6UD3/UED8UDz8UDz9UD36UDr/UDj7UDz7UD38UDx6NEBaAAAAEnRSTlMAYL9A359/cCBQEK/vjzAgz4+7n+EJAAAB9UlEQVRYw+1W25aDIAxckIsoatv//9g9gnaADLXn7D46T4JJOmQm2J8bN27c+AqD2jGyV2N6NeyPIT8lTKpGGNYqzb92LKyiTa/s/pie9MHhJaHV9E4LaWdmFHPwuNPKP4sMCaPOvC2vSUWVfwu0PE7F4M7EmJakokkvAmiFvL+8OhiOxEdabVKygrwvM+ZeRVP1P3R08QWtCRTKNk2rMhVJj0yqyw5ddia+dUdRI6WzbUV/bIPW48hm8cO5CbEfXJdB0lohLDCdhkV4bAoG9Bp2LOgoRkB/EntGHmgJ3YFYzolFCNFF2lEQwCmggTiGQ6e5Hal5XdWyhesiaWk2tep9Cog9iwCkzR07AhZN2lGnw9EKy8Jf1L4GJXDEqdUlpp1rO6LtDeWVXLXtlHA7Tk84I8O1QQYBHTv64UTwS8wFn60ODmuMlKTlunfZ0SSIbZku39+Opvr41XfF2GrvhB0l9Ci1j0IXakdD6ynqz03qQqakLRaN9rkh0k6h1eXSjhwo4mtdAExp853lwA8vUhdJS0F3CX6nW7i1b8dV1qCDLnWRtCzugI+Y33GqbBqhpWG0LnClLs45A9m5HdGfa7EB6AJaUvdrsQHV/XBucMUFYjv0f7Bj859QTsRW7gXofgU16wO2iV/T7jmiaTH+3Lhx43/wC+JRSzKfwZ9vAAAAAElFTkSuQmCC');
						  background-repeat: no-repeat;
						  background-size: 100%; 
						  margin-left: 20rpx;
						} 
					 }
				 }
		        .desc {
		          margin-top: 8rpx;
		          font-size: 28rpx;
		          color: #969799;
		          // overflow: hidden;
		          // display: -webkit-box;
		          // -webkit-line-clamp: 2;
		          // /*! autoprefixer: ignore next */
		          // -webkit-box-orient: vertical;
		          text {
		            margin-bottom: 10rpx;
		            line-height: 40rpx;
		          }
		        }
		       
		      }
		    }
		  }
		  .fiexd-visitor {
		  	position: fixed;
		  	bottom: 0;
		  	left: 0;
		  	display: flex;
		  	align-items: center;
		  	justify-content: center;
		  	width: 100%;
		  	height: 150rpx;
		  	background: rgba(255, 255, 255, 0.9);
		  	z-index: 99;
			border-top: 1px solid #eee;
		  	.btn {
		  		width: 300rpx;
		  		height: 80rpx;
		  		border-radius: 40rpx;
		  		line-height: 80rpx;
		  		background: #1677ff;
		  		font-size: 28rpx;
		  		text-align: center;
		  		color: #fff;
		  	}
		}
	}
	
 </style>
 <style>
 	page {
 		overflow-y: scroll;
 	}	
 </style>