四十三（有bug） 前端 搜索的商品内容：按价格升序 降序 或 按折扣升序 降序

bug： 首次点击升降序是不生效的，不知道为啥

完整代码：

<template>
        <view class="shop-list ">
                <view class="shop-title f-color">
                        <view class="shop-item" v-for="(item,index) in shopList.data" :key="index" @tap="changeTab(index)">
                                <view :class="shopList.currentIndex == index ? 'f-active-color' : ''">
                                        {{item.name}}
                                </view>
                                <view class='shop-iocn'>
                                        <view class="iconfont icon-xialajiantou1 up" :class="item.status == 1 ? 'f-active-color' : ''">
                                        </view>
                                        <view class="iconfont icon-xiajiantou down" :class="item.status == 2 ? 'f-active-color' : ''">
                                        </view>
                                </view>
                        </view>
                </view>
                <Lines />
                <commodity :dataList="commodityList "></commodity>
        </view>
</template>

<script>
        import Lines from "@/components/common/lines.vue"
        import commodity from './commodity.vue'
        import $http from '@/common/api/request.js'
        export default {
                props: {
                        keyword: String
                },
                data() {
                        return {
                                shopList: {
                                        "currentIndex": 0,
                                        "data": [{
                                                        name: '价格',
                                                        status: 1,
                                                        key: 'pprice'
                                                },
                                                {
                                                        name: '折扣',
                                                        status: 0,
                                                        key: 'discount'
                                                },
                                                {
                                                        name: '品牌',
                                                        status: 0
                                                }
                                        ]
                                },
                                commodityList: []
                        }
                },
                components: {
                        Lines,
                        commodity
                },
                // 请求接口-搜索商品数据
                mounted() {
                        this.getSearchList();
                },
                // 计算属性
                computed: {
                        orderBy() {
                                //拿到点击的当前对象是哪个
                                let obj = this.shopList.data[this.shopList.currentIndex];
                                //获取到对中的值:来判断是升序还是降序
                                let val = obj.status === 1 ? 'desc' : 'asc';
                                return {
                                        [obj.key]: val
                                }
                        }
                },
                methods: {
                        // 搜索的商品数据请求
                        getSearchList() {
                                $http.request({
                                        url: '/goods/search',
                                        data: {
                                                name: this.keyword,
                                                // pprice:'asc'
                                                ...this.orderBy
                                                // 动态传递是按价格 或 折扣 进行升序还是降序
                                        }
                                }).then((res) => {
                                        this.commodityList = res;
                                        // console.log(JSON.stringify(res));
                                }).catch(() => {
                                        uni.showTabBar({
                                                title: '请求失败',
                                                icon: 'none'
                                        })
                                })
                        },
                        changeTab(index) {
                                // 点击排序
                                this.getSearchList();
                                console.log(111);
                                // 获取索引
                                let idx = this.shopList.currentIndex
                                // 点击了具体哪一个对象
                                let item = this.shopList.data[idx]
                                if (idx == index) {
                                        return item.status = item.status == 1 ? 2 : 1
                                }
                                let newItem = this.shopList.data[index];
                                item.status = 0;
                                this.shopList.currentIndex = index;
                                newItem.status = 1;
                        },

                }
        }
</script>

<style scoped>
        .shop-title {
                display: flex;
        }

        .shop-item {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 80rpx;
        }

        .shop-iocn {
                position: relative;
                margin-left: 10rpx;
        }

        .iconfont {
                width: 16rpx;
                height: 8rpx;
                position: absolute;
                left: 0;
        }

        .up {
                top: -24rpx;
        }

        .down {
                top: -4rpx
        }
</style>