You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
2.2 KiB
135 lines
2.2 KiB
<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>
|
|
|