<template>
	<view class="news-list">
		<view class="contain">
			<view class="banner">
				<ad-swipers  :pid="33" height="340rpx">
				</ad-swipers>
			</view>
			<view class="news-details">
				<view class="header">
				    <view class="title xxl m-b-20">{{ title }}</view>
				</view>
				<view class="main">
				    <u-parse :html="article_content" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getHelpDetail
	} from '@/api/store';
	export default {
		data() {
			return {
				showLoading: true,
				title: "",
				article_content: ""
			};
		},

	  /**
	   * 生命周期函数--监听页面加载
	   */
	  onLoad: function (options) {
		this.id = options.id;
		if (this.id == 'documents') {
		  this.title = '证件办理'
		  uni.setNavigationBarTitle({
		    title: '证件办理'
		  });
		}else if (this.id == 'train') {
		  this.title = '在线培训'
		  uni.setNavigationBarTitle({
		    title: '在线培训'
		  });
		}else{
		  this.title = '咨询我们'
		  uni.setNavigationBarTitle({
		    title: '咨询我们'
		  });
		}
		
		this.getArticleDetailFun();
		
	  },

	 
	  methods: {
		getArticleDetailFun() {
		  getHelpDetail({
			id: this.id
		  }).then(res => {
			if (res.code == 1) {
			  setTimeout(() => {
				this.article_content = res.data.content;
			  }, 200);
			  setTimeout(() => {
				  this.showLoading = false
			  }, 300);
			}
		  });
		}

	  }
		
	};
</script>
<style lang="scss">
	.news-details .header{
		text-align: center;
	    padding: 20rpx 15px;
	    border-bottom: $-solid-border;
	}
	.news-details .main {
	    padding: 40rpx 15px;
	}
	.news-list {
		.mainnav {
			padding: 16rpx 150rpx;
			background-color: $-color-white;
		    &--item {
		        width: 150rpx;
		        font-size: 32rpx;
		        font-weight: 500;
		        text-align: center;
		        color: #BBBBBB;
		        transition: all .2s linear;
			
		        .new {
		            width: 10rpx;
		            height: 10rpx;
		            border-radius: 50%;
		            display: inline-block;
		            margin-bottom: 24rpx;
		            background-color: $-color-primary;
		        }
		    }
			
		    .active {
		        color: #000000;
		    }
		}
		
		.main {
			.article-list {
				padding-top: 20rpx;

				.article-item {
					padding: 20rpx;
					align-items: flex-start;
					&:not(:last-of-type){
						border-bottom: $-solid-border;
					}
				}
			}
		}
	}
	page {
		padding: 0;
	}
	.index-bg {
		background-image: url('https://cdn.ahbcqz.com/uploads/images/202307051615359ddc37211.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
	
	.index {
		min-height: calc(100vh - var(--window-bottom));
		
		.u-navbar {
			::v-deep .u-search {
				padding: 0 30rpx;
			}
		}
		
		// 胶囊提示
		.capsule-tips {
			width: 584rpx;
			color: #FFFFFF;
			padding: 12rpx 18rpx;
			border-radius: 14rpx;
			background: rgba(0, 0, 0, 0.7);
			position: relative;
			position: absolute;
			z-index: 9999;
			bottom: -80rpx;
			right: -150rpx;
		}
		.capsule-tips::after {
			content: '';
			border-bottom: 14rpx solid rgba(0, 0, 0, 0.7);
			border-right: 14rpx solid transparent;
			border-left: 14rpx solid transparent;
			position: absolute;
			top: -14rpx;
			right: 88rpx;
		}
	
		.cate-btn {
			padding: 12rpx 16rpx 12rpx 20rpx;
			border-radius: 60rpx 0 0 60rpx;
			background-color: rgba(256, 256, 256, .4);
		}
	}
	.col-top {
		position: relative;
		.price {
				position: absolute;
				bottom:10rpx;
			}
	}
	
	.city {
		    position: absolute;
		    top: 20rpx;
		    z-index: 999;
		    color: #fff;
			padding: 10rpx 15rpx;
			background: rgba(0,0,0,.3);
			border-radius: 10rpx;
	}
</style>
