三种状态进行判断

通过type参数名，将input，output 返给后端

捕获.PNG

首先定义一个变量pay; v-if=pay==' ' 默认全部显示，v-if=pay=='input'点击只看收入;v-if=pay=='output'点击只看支出把

<div class="wallet_center_right">
                        <image v-if="pay=='input'" src="/static/icon/icon_xuanzhong1@2x.png" class="wallet_center_icon" @click="changeAll_input"></image>
                        <image v-else src="/static/icon/wei@2x.png" mode="" class="wallet_center_icon" @click="change_input"></image>
                        <div style="margin-right: 38rpx;">只看收入</div>
                    </div>
                    <div class="wallet_center_right">
                        <image v-if="pay=='output'" src="/static/icon/icon_xuanzhong1@2x.png" class="wallet_center_icon" @click="changeAll_input"></image>
                        <image v-else src="/static/icon/wei@2x.png" mode="" class="wallet_center_icon" @click="change_output"></image>
                        <div>只看支出</div>
                    </div>

<!-- 支出列表 -->
        <div class="wallet_list" v-for="(item,index) in recordList" :key="index">
            <!-- 默认显示全部 -->

            <div class="wallet_item" v-if="pay==''">
                <image src="/static/icon/zhuchu@2x.png" mode="" style="width: 50rpx;height: 50rpx;"></image>
                <div class="wallet_item_cen">
                    <div class="wallet_item_name">{{item.remark|nameFilter}}</div>
                    <div style="font-size: 24rpx;color: #999999;height:20rpx ;margin-top: 20rpx;"><span style="margin-right: 8rpx;">{{item.created_at}}
                        </span>
                    </div>
                </div>
                <div style="font-size: 32rpx;color: #333333;font-weight: 500;">
                    {{item.amount}}
                </div>
            </div>

            <!-- 支出列表 -->
            <div v-if="pay=='output'">
        
            </div>
            <!-- 收入表 -->
            <div v-if="pay=='input'">
            </div>
        </div>

type: this.pay + ' ' 将变量转化成字符串传给后端

  data(){
          return{    
                   pay: '', //默认为空查看全部，input时看支出，output看收入
            }
       },
methods:{
        getApiUserPortalEmsStaffPurseRecordGetListByCon() {
                this.$api.userPortal_emsStaffPurseRecord_getListByCon({
                    type: this.pay + ' ',
                }).then(res => {
                   this.recordList = res.data.data.data 
            })
        },
            // output支出
            change_output() {
                this.pay = 'output';
                console.log(" output支出")
            },
            // input收入
            change_input() {
                this.pay = 'input';
                console.log("input收入")
            },
            //继续查看全部
            changeAll_input() {
                this.pay = '';
            },
      }

捕获.PNG