uniapp折叠面板

实现效果如下图：

1649641125(1).png

<view class="collapse" v-for="(item,index) in itemList" :key="index">
                <view @click="changeContent(item,index)">
                    <view class="coll-header">
                        <view style="display: flex;align-items: center;">
                            <view class="image-radius">
                                <image :src="item.headimgurl" mode="widthFix" style="width: 72rpx;"></image>
                            </view>
                            <view class="head-txt">{{item.realname}}</view>
                        </view>
                        <view class="coll-right">
                            <view class="space">
                                {{item.level | level}}
                            </view>
                            <image :src="item.open?imageList[0]:imageList[1]" mode="widthFix" style="width: 24rpx;"></image>
                        </view>
                    </view>
                    <!-- 展开 -->
                    <view class="box">
                        <view class="box-cont" v-show="item.open==true">
                            <view class="flex">
                                <text>真实姓名<text style="color:#FB231F">*</text></text>
                                <text>{{item.realname}}</text>
                            </view>
                            <view class="flex">
                                <text>联系方式<text style="color:#FB231F">*</text></text>
                                <text>{{item.mobile}}</text>
                            </view>
                            <view class="flex">
                                <text>代理级别<text style="color:#FB231F">*</text></text>
                                <text>{{item.level | level}}</text>
                            </view>
                            <view class="flex">
                                <text>邀请人<text style="color:#FB231F">*</text></text>
                                <text>{{item.recom_user.nickname}}</text>
                            </view>
                            <view class="flex">
                                <text>上级代理<text style="color:#FB231F">*</text></text>
                                <text>{{item.recom_user.nickname}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

onShow() {
    this.request()
},
methods: {
          request(){
            uni.request({
                url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
                data: {
                    text: 'uni.request'
                },
                header: {
                    'custom-header': 'hello' //自定义请求头信息
                },
                success: (res) => {
                    if(res.data.list.length>0){
                        for(let i=0;i<res.data.list.length;i++){
                            res.data.list[i].open=false
                    }
                    this.itemList= res.data.list
                }
            })
       } ,
      changeContent(item,index) {
                 this.itemList.forEach(i => {
                    if (i.open !== this.itemList[index].open) {
                        i.open = false;
                    }
                })
                item.open = !item.open
     },
}