app-govern/pages/engineering/setting.vue

<template>
    <view :loading="loading">
        <uni-search-bar v-model="keyWord" bgColor="#fff" placeholder="请输入关键词"></uni-search-bar>
        <view class="message">
            <!-- <uni-card
                :title="item.engineerName"
                :extra="item.mac"
                @click="jump(item)"
                v-for="(item, index) in list"
                :key="index"
            >
                <view class="term-list-bottom">
                    <view class="term-list-bottom-item">
                        <view>区域</view>
                        <view>{{ item.provinceName + item.cityName }}</view>
                    </view>
                    <view class="term-list-bottom-item">
                        <view>创建时间</view>
                        <view>{{ item.createTime }}</view>
                    </view>
                </view>
            </uni-card> -->
            <uni-list>
                <uni-list-item @click="jump(item)" v-for="(item, index) in filterList" :key="index">
                    <template v-slot:header>
                        <view class="slot-box">
                            <view class="slot-box-left hide-txt mr20">{{ item.engineerName }}</view>
                            <switch
                                :checked="selectList.indexOf(item.engineerId) > -1"
                                style="transform: scale(0.8)"
                                @change="switchChange(item)"
                            />
                        </view>
                    </template>
                </uni-list-item>
            </uni-list>
            <uni-load-more v-if="list && list.length > 0" status="nomore"></uni-load-more>
            <Cn-empty v-else style="padding-top: 300rpx"></Cn-empty>
        </view>
    </view>
</template>

<script>
import list from '../../common/js/list'
import {queryAllEnginner, csMarketDataAdd, queryEngineering} from '@/common/api/engineering'

export default {
    data() {
        return {
            loading: true,
            userInfo: {},
            list: [],
            selectList: [],
            keyWord: '',
        }
    },
    computed: {
        filterList() {
            return this.list.filter((item) => {
                return item.engineerName.indexOf(this.keyWord) > -1
            })
        },
    },
    methods: {
        switchChange(e) {
            console.log(e)
            let index = this.selectList.indexOf(e.engineerId)
            if (index > -1) {
                this.selectList.splice(index, 1)
            } else {
                this.selectList.push(e.engineerId)
            }

            csMarketDataAdd({
                engineerIds: this.selectList,
            }).then((res) => {
                console.log(res)
            })
        },
        init() {
            this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
            queryAllEnginner().then((res) => {
                this.list = res.data
                console.log(this.list)
                this.selectList = res.data.filter((item) => item.isSelect === '1').map((item) => item.engineerId)
                console.log(this.selectList)
                this.loading = false
            })
        },
        back() {
            uni.navigateBack()
        },
        add() {
            uni.navigateTo({
                url: `/pages/engineering/new`,
            })
        },
        upgrade(code) {
            console.log(code)
            uni.showToast({
                title: '升级成功',
                icon: 'none',
            })
        },
        jump(engineering) {
            uni.navigateTo({
                url: `/pages/engineering/detail?engineering=${encodeURIComponent(JSON.stringify(engineering))}`,
            })
        },
    },
    onBackPress() {
        console.log('onBackPress')
        let engineering = uni.getStorageSync('engineering')
        queryEngineering().then(res => {
            if (res.data.length === 0) {
                uni.removeStorage({
                    key: this.$cacheKey.engineering,
                })
            } else if (engineering && !res.data.some(item => item.id = engineering.id)) {
                uni.removeStorage({
                    key: this.$cacheKey.engineering,
                })
            } else {
                uni.setStorage({
                    key: this.$cacheKey.engineering,
                    data: res.data[0],
                })
            }
        })
    },
    onLoad() {
        this.init()
    },
}
</script>

<style lang="scss">
.message {
    /deep/ .slot-box {
        width: 100%;
        display: flex;
        align-items: center;

        &-left {
            flex: 1;
            margin-right: 20rpx;
        }
    }

    /deep/ .uni-list-item__content {
        padding-right: 0;
    }

    .message-header {
        padding: 200rpx 34rpx 34rpx;
        display: flex;
        align-items: center;
        background: $uni-theme-white;
        margin-bottom: 20rpx;
        box-shadow: 0 4rpx 8rpx #e7e7e74c;

        .message-header-head {
            margin-right: 30rpx;
            height: 128rpx;
            width: 128rpx;
            border-radius: $uni-theme-radius;
            overflow: hidden;
        }

        .message-header-name {
            margin-right: 30rpx;
            flex: 1;
            font-size: 36rpx;
            color: #111;
            font-weight: 700;

            .tag {
                margin-top: 10rpx;
                font-size: 24rpx;
                color: #aaa;
            }
        }
    }

    .message-nav {
        padding: 34rpx;
        display: flex;
        align-items: center;
        background: $uni-theme-white;
        border-bottom: 1rpx solid #e8e8e8;

        &-icon {
            margin-right: 30rpx;
            height: 44rpx;
            width: 44rpx;
            border-radius: $uni-theme-radius;
            overflow: hidden;
        }

        &-label {
            margin-right: 30rpx;
            flex: 1;
            font-size: 28rpx;
            color: #111;
        }
    }
}

.term-list-bottom {
    .term-list-bottom-item {
        font-size: 28rpx;
        margin-bottom: 20rpx;
        display: flex;
        justify-content: space-between;
        // view:first-of-type{
        //     color: #111;
        // }
    }

    .term-list-bottom-item:last-of-type {
        margin-bottom: 0;
    }
}
</style>