JP-ChargeTeam51/pages/user/help.vue

<template>
	<view>
		<ujp-navbar title="操作指南"></ujp-navbar>
		<view class="collapse">
			<!-- -->
			<u-collapse :activeStyle='activeStyle'  :itemStyle="itemStyle"  :headStyle="headerStyle" :bodyStyle="bodyStyle"  v-if="itemList.length" >
				<u-collapse-item :title="item.title"  v-for="(item, index) in itemList" :key="index">
<!-- 					<textarea maxlength="-1" :auto-height="true" v-model="item.content" readonly ></textarea>
 -->					<view v-html="item.content"></view> 
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/user.js'
	
	export default {
		data() {
			return {
				elderMode:false,
				activeStyle:{
					'font-size':'24rpx'
				},
				headerStyle:{
					'font-size':'30rpx'
				},
				bodyStyle:{
					'font-size':'24rpx'
				},
				itemStyle:{
					'font-size':'24rpx'
				},
				
				itemList: [],
			}
		},
		onReady() {
			this.elderMode = this.carhelp.get('getElderModeClass')  == '长辈模式';
			if(this.elderMode)
				this.theme('elder')
			else
				this.theme('standard')
				
			this.getHomePage()
		},
		methods: {
			theme(type) {
				
			  if(type == 'elder')	
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				 let activeStyle = {
				 	'font-size':'28rpx'
				 };
				 let headerStyle ={
				 	'font-size':'34rpx'
				 };
				 let bodyStyle ={
				 	'font-size':'28rpx'
				 } ;
				 let itemStyle = {
				 	'font-size':'28rpx'
				 };
				 this.activeStyle = activeStyle;
				 this.headerStyle = headerStyle;
				 this.bodyStyle = bodyStyle;
				 this.itemStyle = itemStyle;
				 
			  }
			  else
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				 let activeStyle = {
				 	'font-size':'24rpx'
				 };
				 let headerStyle ={
				 	'font-size':'30rpx'
				 };
				 let bodyStyle ={
				 	'font-size':'24rpx'
				 } ;
				 let itemStyle = {
				 	'font-size':'24rpx'
				 };
				 this.activeStyle = activeStyle;
				 this.headerStyle = headerStyle;
				 this.bodyStyle = bodyStyle;
				 this.itemStyle = itemStyle;
				 
				  
			  } 
			},
			getHomePage(){
						uni.showLoading({
							title: "加载中",
							mask: true,
						})
						API.helpList({
							category:2
						}).then((res) => {
							this.itemList = res.data.helpList
						
						
							uni.hideLoading()
							
						}).catch(error => {
							uni.showToast({
								title: error
							})
						})
					}
		}
	}
</script>
<style>
	page{
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	@import "@/_theme.scss";
	.collapse{
		background-color: #fff;
		padding:10px;
	}
</style>