增加更多按钮

qingyiay

2023-04-17 f91f1a3d5dd5a1fa2da8793849ea39c82ffd04fd

增加更多按钮

 pages/customer-page/customer-my/faYunstatistics/faYunstatistics.vue

@@ -15,7 +15,17 @@
                            <view class="condition-name">煤种：</view>
                            <view class="filter-name">
                                <view class="filter-button" v-for="(item, index) in coalList" :key="index" @click="filterCondition(0, index, item.condition)">
                                    <u-button shape="circle" :text="item.condition" :type="item.active ? 'success' : ''" size="small"></u-button>
                                    <u-button shape="circle" :text="item.condition" :type="item.active ? 'success' : ''" size="small" v-if="index < coalShow"></u-button>
                                </view>
                                <view class="toggle-button">
                                    <u-button
                                        shape="circle"
                                        :text="coalShow < coalTotal ? '查看更多' : '收起'"
                                        type="primary"
                                        size="small"
                                        @click="toggle(0)"
                                        v-if="coalTotal > 3"
                                    ></u-button>
                                </view>
                            </view>
                        </view>
@@ -25,6 +35,16 @@
                                <view class="filter-button" v-for="(item, index) in typeList" :key="index" @click="filterCondition(1, index, item.condition)">
                                    <u-button shape="circle" :text="item.condition" :type="item.active ? 'success' : ''" size="small"></u-button>
                                </view>
                                <view class="toggle-button">
                                    <u-button
                                        shape="circle"
                                        :text="typeShow < typeTotal ? '查看更多' : '收起'"
                                        type="primary"
                                        size="small"
                                        @click="toggle(1)"
                                        v-if="typeTotal > 3"
                                    ></u-button>
                                </view>
                            </view>
                        </view>
                        <view class="filter-body">
@@ -32,6 +52,16 @@
                            <view class="filter-name">
                                <view class="filter-button" v-for="(item, index) in customerList" :key="index" @click="filterCondition(2, index, item.condition)">
                                    <u-button shape="circle" :text="item.condition" :type="item.active ? 'success' : ''" size="small"></u-button>
                                </view>
                                <view class="toggle-button">
                                    <u-button
                                        shape="circle"
                                        :text="customerShow < customerTotal ? '查看更多' : '收起'"
                                        type="primary"
                                        size="small"
                                        @click="toggle(2)"
                                        v-if="customerTotal > 3"
                                    ></u-button>
                                </view>
                            </view>
                        </view>
@@ -41,6 +71,16 @@
                                <view class="filter-button" v-for="(item, index) in forwarderList" :key="index" @click="filterCondition(3, index, item.condition)">
                                    <u-button shape="circle" :text="item.condition" :type="item.active ? 'success' : ''" size="small"></u-button>
                                </view>
                                <view class="toggle-button">
                                    <u-button
                                        shape="circle"
                                        :text="forwarderShow < forwarderTotal ? '查看更多' : '收起'"
                                        type="primary"
                                        size="small"
                                        @click="toggle(3)"
                                        v-if="forwarderTotal > 3"
                                    ></u-button>
                                </view>
                            </view>
                        </view>
                        <view class="filter-body" v-if="roleType != 3">
@@ -49,6 +89,16 @@
                                <view class="filter-button" v-for="(item, index) in fleetList" :key="index" @click="filterCondition(4, index, item.condition)">
                                    <u-button shape="circle" :text="item.condition" :type="item.active ? 'success' : ''" size="small"></u-button>
                                </view>
                                <view class="toggle-button">
                                    <u-button
                                        shape="circle"
                                        :text="fleetShow < fleetTotal ? '查看更多' : '收起'"
                                        type="primary"
                                        size="small"
                                        @click="toggle(4)"
                                        v-if="fleetTotal > 3"
                                    ></u-button>
                                </view>
                            </view>
                        </view>
                        <view class="filter-body" v-if="roleType != 1">
@@ -56,6 +106,16 @@
                            <view class="filter-name">
                                <view class="filter-button" v-for="(item, index) in filedList" :key="index" @click="filterCondition(5, index, item.condition)">
                                    <u-button shape="circle" :text="item.condition" :type="item.active ? 'success' : ''" size="small"></u-button>
                                </view>
                                <view class="toggle-button">
                                    <u-button
                                        shape="circle"
                                        :text="filedShow < filedTotal ? '查看更多' : '收起'"
                                        type="primary"
                                        size="small"
                                        @click="toggle(5)"
                                        v-if="filedTotal > 3"
                                    ></u-button>
                                </view>
                            </view>
                        </view>
@@ -133,7 +193,20 @@
            taskList: [],
            filterList: [],
            totalLength: 0,
            totalTon: 0
            totalTon: 0,
            // 超过两行自动隐藏
            coalShow: 3,
            typeShow: 3,
            customerShow: 3,
            forwarderShow: 3,
            fleetShow: 3,
            filedShow: 3,
            coalToggeleState: false,
            typeToggeleState: false,
            customerToggeleState: false,
            forwarderToggeleState: false,
            fleetToggeleState: false,
            filedToggeleState: false
        };
    },
    onShow() {
@@ -308,6 +381,65 @@
        },
        opencalendar() {
            this.$refs.calendar.open();
        },
        // 点击查看更多
        toggle(value) {
            switch (value) {
                case 0:
                    if (!this.coalToggeleState) {
                        this.coalShow = this.coalTotal;
                        this.coalToggeleState = true;
                    } else {
                        this.coalShow = 3;
                        this.coalToggeleState = false;
                    }
                    break;
                case 1:
                    if (!this.typeToggeleState) {
                        this.typeShow = this.typeTotal;
                        this.typeToggeleState = true;
                    } else {
                        this.typeShow = 3;
                        this.typeToggeleState = false;
                    }
                    break;
                case 2:
                    if (!this.customerToggeleState) {
                        this.customerShow = this.customerTotal;
                        this.customerToggeleState = true;
                    } else {
                        this.customerShow = 3;
                        this.customerToggeleState = false;
                    }
                    break;
                case 3:
                    if (!this.forwarderToggeleState) {
                        this.forwarderShow = this.forwarderTotal;
                        this.forwarderToggeleState = true;
                    } else {
                        this.forwarderShow = 3;
                        this.forwarderToggeleState = false;
                    }
                    break;
                case 4:
                    if (!this.fleetToggeleState) {
                        this.fleetShow = this.fleetTotal;
                        this.fleetToggeleState = true;
                    } else {
                        this.fleetShow = 3;
                        this.fleetToggeleState = false;
                    }
                    break;
                case 5:
                    if (!this.filedToggeleState) {
                        this.filedShow = this.filedTotal;
                        this.filedToggeleState = true;
                    } else {
                        this.filedShow = 3;
                        this.filedToggeleState = false;
                    }
                    break;
            }
        }
    },
    computed: {
@@ -319,12 +451,29 @@
        },
        dateselect() {
            return `${this.first}-${this.last}`;
        },
        coalTotal() {
            return this.coalList.length;
        },
        typeTotal() {
            return this.typeList.length;
        },
        customerTotal() {
            return this.customerList.length;
        },
        forwarderTotal() {
            return this.forwarderList.length;
        },
        fleetTotal() {
            return this.fleetList.length;
        },
        filedTotal() {
            return this.filedList.length;
        }
    },
    watch: {
        dateselect(newV, old) {
            let tempDate = `${this.first}-${this.last}`;
            console.log(newV, '新', old, '旧', tempDate, '一开始');
            if (newV != old && old != '-') {
                this.first = newV.slice(0, 10);
                this.last = newV.slice(11);
@@ -410,6 +559,9 @@
                            margin-left: vww(48);
                        }
                    }
                    .toggle-button {
                        margin-top: vww(12);
                    }
                }
            }
        }

 pages/tabbar-page/index-tabbar/index-tabbar.vue

@@ -115,18 +115,12 @@
            isconnect: false
        };
    },
    beforeDestroy() {
        this.closeSocket();
    },
    onShow() {
        this.init();
        if (!this.isconnect) {
            this.initWebsocket();
        }
        this.userAuthorization();
    },
    onBackPress() {
        this.closeSocket();
    },
    methods: {
        ...mapMutations(['pushMessage', 'changeWeigh', 'changeinfraredStatus']),
@@ -236,20 +230,11 @@
            });
            socket.onClose(() => {
                console.log('webSocketClose');
                this.isconnect = true;
            });
            socket.onError(err => {
                console.log('socket报错', err);
                this.$u.toast('出现错误，请重新进入该页面，重试！！');
            });
        },
        closeSocket() {
            socket.close({
                success(res) {
                    console.log('关闭成功', res);
                },
                fail(err) {
                    console.log('关闭失败', err);
                }
            });
        },
        messageconfirm() {

 static/image/coalBackgroud/coal-background.png

Binary files differ

 static/image/emptydata/emptydata.png