water_affairs/select/points.vue

<template>
    <view class="container">
        <cu-custom id="custom"
            bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png"
            :isBack="true">
            <block slot="backText">返回</block>
            <block slot="content">
                {{ title }}
            </block>
        </cu-custom>
        <My_listbox ref="List" @getlist="getList" :empty="empty">
            <view :class="[isActive(item[idKey])]" v-for="item in list" :key="item[idKey]" @click="onSelect(item)">
                {{ item[showKey] }}
            </view>
            <view style="height:22vw;" />
        </My_listbox>
        <view class="but-box">
            <view style="width: 75vw;">
                <u-button :disabled="!value.length" type="primary" text="确定选择" color="rgba(42,106,242,.8)"
                    loadingText="执行中..." :loading="loading" @click="submit" />
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "points",
    computed: {
        isActive() {
            return function (id) {
                return this.value.some(v => v == id) ? "active item" : "item"
            };
        }
    },
    data() {
        return {
            list: [],
            ...this.$Http.route.data.param,
            empty: true,
            title: '',
            idKey: "",
            showKey: "",
            loading: false,
            value: [],
            showList: [],
        }
    },
    onLoad(options) {
        let data = this.$Http.route.data;
        this.title = '选择' + data.label
        this.param = data.param;
        this.idKey = data.idKey;
        this.showKey = data.showKey;
        this.value = data.value.value;
        this.showList = data.value.showList;
        this.getList(true)
    },
    methods: {
        getList(init = false) {
            if (this.loading) return;
            let param = this.param;
            if (init) {
                param.content.pageNumber = 1;
                param.content.pageSize = param.content.pageSize || 20;
                param.content.pageTotal = 1;
            };
            if (param.content.pageNumber > param.content.pageTotal) return;
            this.loading = true;
            return this.$Http.basic(param).then(res => {
                this.loading = false;
                this.$refs.List.setHeight();
                console.log("选择列表", res)
                if (this.cutoff(res.msg)) return;
                this.$refs.List.RefreshToComplete();
                this.empty = res.total == 0;
                this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
                param.content.pageNumber = res.pageNumber + 1;
                param.content.pageTotal = res.pageTotal;
            })
        },
        onSelect(item) {
            let id = item[this.idKey];
            if (this.value.some(v => v == id)) {
                this.value = this.value.filter(v => v != id)
                this.showList = this.showList.filter(v => v[this.showKey] != item[this.showKey])
            } else {
                this.value.push(id);
                this.showList.push(item[this.showKey])
            }
        },
        submit() {
            this.$Http.handleAdd({
                value: this.value,
                showList: this.showList,
            })
        }
    },
    onUnload() {
    }
}
</script>

<style lang="scss" scoped>
.item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    width: 355px;
    margin: 10px auto;
    border-radius: 4px;
}

.active {
    background: #0054E1;
    color: #fff;
}


.but-box {
    position: absolute;
    width: 100vw;
    bottom: 30px;
    display: flex;
    justify-content: center;

    /deep/ .u-button__text,
    /deep/.u-button__loading-text {
        font-size: 14px !important;
    }

    /deep/.u-loading-icon__spinner {
        width: 17.25px !important;
        height: 17.25px !important;
    }
}
</style>