272 lines
7.2 KiB
Vue
272 lines
7.2 KiB
Vue
<template>
|
||
<view class="specialtylist">
|
||
<view class="content">
|
||
<view class="xx-title" v-html="name">
|
||
</view>
|
||
<view class="introduce-wrap">
|
||
<view class="item">
|
||
<view class="title">
|
||
概述：
|
||
</view>
|
||
<view class="txt" v-html="summary"></view>
|
||
</view>
|
||
<view class="item video-wrap" v-if="videoUrl != '' && videoUrl != undefined">
|
||
<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="navDetails(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.TopIntroduction != ''" v-html="item.TopIntroduction"></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 "@/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.queryJobListByParentCode();
|
||
},
|
||
methods: {
|
||
showConfirmInfor(){
|
||
uni.showModal({
|
||
content:"观看完整内容,请先登录",
|
||
confirmText:"确认",
|
||
confirmColor:"#1677ff",
|
||
showCancel:false
|
||
})
|
||
},
|
||
navDetails(item,index){
|
||
if(this.isVisitor && index > 2){
|
||
this.showConfirmInfor();
|
||
//this.showLogin = true;
|
||
}else {
|
||
uni.navigateTo({
|
||
url: `/packageCa/job/details?id=${item.Id}&name=${item.Name}`
|
||
})
|
||
}
|
||
},
|
||
// 获取职业信息
|
||
queryJobListByParentCode(){
|
||
uni.showLoading({
|
||
title:"加载中"
|
||
})
|
||
let name = "";
|
||
if(!this.code){
|
||
name = this.name
|
||
}
|
||
api.queryJobListByParentCode(name,this.code).then((res) => {
|
||
uni.hideLoading();
|
||
if(res.Result == 1){
|
||
this.jobList = res.Data.List;
|
||
this.summary = res.Data.CategoryIntroduction;
|
||
this.videoUrl = res.Data.CategoryVideo;
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</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 {
|
||
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> |