1.0yangche/pages/packageOne/user/help/help.vue

<template>
	<view class="wrap">
		<view class="header">
			<scroll-view scroll-x style="white-space:nowrap;padding-left:32rpx;box-sizing:border-box;">
				<view :class="['header_item', active === index?'active':'']" @tap="changeActive(item,index)" v-for="item,index in header" :key="index">{{item.title}}
					<view class="line"></view>
				</view>
			</scroll-view>
		</view>
		<view class="help_list">
		    <view class="list_item" v-for="item,index in info" :key="index">
				<view class="list_item_quest clear" @tap="changeSelect(index)">
					<view class="quest_lf clear">
						<view class="answer_img" style="margin:34rpx 10rpx 0 0;"> <image src="https://wx.fujinyangche.com/nvrnetwork/images/quest_img.png"></image></view>
						<view class="quest_lf_text">{{item.infotitle}}</view>
					</view>
					<view :class="['iconfont',item.select == 1?'top':'more']"></view>
				</view>
				<view :class="['answer', item.select ===1?'show':'','clear']">
					<view class="answer_img"> <image src="https://wx.fujinyangche.com/nvrnetwork/images/answer_img.png"></image></view>
					<view class="answer_text" v-html="item.infodetail"></view>
				</view>
		    </view>
		</view>
	</view>
</template>

<script>
	import api from "../../../../api.js";
	let app = getApp();
	export default {
		data() {
			return {
				header:'',//头部
				info:'',//下方列表
				active:0,//导航栏选中
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			//加载数据
			getData(){
				api.getUserHelp().then((res)=>{
					console.log(res);
					let type = res.data.data.type;
					let info = res.data.data.info;
					for (let i = 0; i < info.length;i++){
						info[i].select = 0;
					}
					type.unshift({id:0,title:'全部'});
					this.header = type;
					this.info = info;
				})
			},
			//点击展开
			changeSelect(index){
				if(this.info[index].select == 0){
					this.info[index].select = 1;
				}else{
					this.info[index].select = 0;
				}
			},
			changeActive(item,index){
				this.active = index;
				let data = {
					type:item.id
				}
				api.getUserHelpHeader(data).then((res)=>{
					// console.log(res);
					let info = res.data.data;
					for (let i = 0; i < info.length;i++){
						info[i].select = 0;
					}
					this.info = info;
				})
			}
		}
	}
</script>

<style>
	.clear:after{
		content: "";
		display: block;
		clear: both;
	}
	page{
	  width:100%;
	  height:100%;
	  background-color:#F9F9F9;
	}
	.header{
	  height:86rpx;
	  line-height: 86rpx;
	  border-top:1px solid #f2f2f2;
	  box-sizing: border-box;
	  background-color: #ffffff;
	}
	.header_item{
	  text-align: center;
	  font-size:30rpx;
	  color:#222222;
	  margin-right: 50rpx;
	  display: inline-block;
	  position: relative;
	}
	.line{
	  width:38rpx;
	  height:4rpx;
	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
	  position: absolute;
	  bottom:0rpx;
	  left:50%;
	  transform: translateX(-50%);
	  display: none;
	}
	.active{
	  font-size:34rpx;
	  font-weight:600;
	  background:linear-gradient(270deg, rgba(254,107,21,1) 0%, rgba(254,163,48,1) 100%);
	  -webkit-background-clip:text;
	  -webkit-text-fill-color:transparent;
	}
	.active .line{
	  display: block;
	}
	.help_list{
	  width:100%;
	  margin-top:20rpx;
	}
	.list_item{
	  width:100%;
	  margin-bottom:20rpx;
	  padding:0 30rpx;
	  box-sizing: border-box;
	  background-color: #ffffff;
	}
	.list_item_quest{
	  height:108rpx;
	  line-height: 108rpx;
	}
	.quest_lf{
	  float:left;
	}
	.quest_lf_text{
	  width:600rpx;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  overflow: hidden;
	  font-size: 30rpx;
	  color:#222222;
	  float:left;
	}
	.more{
	  font-size: 26rpx;
	  color:#999999;
	  float:right;
	}
	.top{
	  font-size: 26rpx;
	  color:#999999;
	  float:right;
	}
	.answer{
	  border-top:1px dashed #E5E5E5;
	  padding:32rpx 0 34rpx 0;
	  box-sizing: border-box;
	  display: none;
	}
	.show{
	  display: block;
	}
	.answer_img{
	  width:38rpx;
	  height:38rpx;
	  float:left;
	}
	.answer_img image{
	  display: block;
	  width:100%;
	  height:100%;
	  margin-top:2rpx;
	  float:left;
	}
	.answer_text{
	  width:calc(100% - 48rpx);
	  font-size: 26rpx;
	  color:#666666;
	  line-height: 40rpx;
	  float:left;
	  margin-left: 10rpx;
	}
</style>