zsw-farm-bxg/pages/user/Problem/index.vue

<template>
	<view>
		<view class="header">
			<cu-custom :isBack="true" :isCenter="true">
				<block slot="backText">
					<view class="backImg">
						<image src="@/static/images/back-btn.png" mode=""></image>
					</view>
				</block>
				<block slot="content">
					<view class="tab-title">常见问题</view>
				</block>
			</cu-custom>
		</view>
		<view class="problem-box" v-for="(item,index) in problemList" :key="index">
			<view class="problem-item acea-row row-between row-middle" @click="tapSwitch(index)">
				<view class="text-box line2">
					{{item.problem}}
				</view>
				<image class="img" :src="`../../../static/images/picker-${number==index?'up':'down'}.png`" mode="">
				</image>
			</view>

			<view class="problem-list" v-if="index==number">
				<view class="item">
					{{item.answer}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	
	import {
		getProblem
	} from '@/api/user.js'
	export default {
		
		data() {
			return {
				number: -1,
				problemList:[]
			
			};
		},
		onLoad() {
			this.getMenu()
		},

		methods: {
			getMenu() {
				uni.showLoading({
				  title: '加载中',
				  mask: true,
				})
				getProblem().then(res => {
					uni.hideLoading()
					this.problemList=res.data.routine_problem
					// console.log(this.problemList, '======');
				})
			},
			tapSwitch(index) {
				if (this.number === index) {
					this.number = -1
					return
				}
				this.number = index
			}
		}
	}
</script>

<style lang="less" scoped>
	.header {
		.tab-title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #2DB5AE;
			line-height: 42rpx;
		}

		.backImg {
			width: 88rpx;
			height: 62rpx;
			padding-left: 26rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.problem-box {
		margin: 30rpx;
		padding: 30rpx 30rpx 0 30rpx;
		background-color: white;
		border-radius: 16rpx;

		.problem-item {
			flex-wrap: nowrap;

			.text-box {
				width: 75%;
				font-size: 30rpx;
			}

			padding-bottom: 30rpx;

			.img {
				width: 30rpx;
				height: 20rpx;
			}


		}

		.problem-list {
			border-top: 1rpx solid rgb(240, 240, 240);

			.item {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #999;
			}
		}

		.problem-list:last-child {
			padding-bottom: 30rpx;
		}
	}
</style>