boss_app/components/roomService/roomService.vue

<template>
<view class="pages">
    <Header @change="headerChange">
        <template #search>
            <u-subsection :list="list" mode="subsection" :current="current" @change="topChange"></u-subsection>
        </template>
    </Header>
    <div class="content">
        <div>
            <u-collapse>
                <u-collapse-item>
                    <div class="title" slot="title">
                        <div>
                            待服务
                        </div>
                    </div>
                    <div class="content-detail" v-for="(item, index) in dataList.filter(item=> item.status==1)" :class="{'active':item.id==activeId}" :key="index" @click="changeActive(item)">
                        <div>
                            <b>{{index+1}}</b>
                            <b style="margin-left:10px;margin-right:10px;">{{item.roomNo}}</b>
                            <b>呼叫时间：{{item.createDate}}</b>
                        </div>
                        <!-- <div style="margin-left:30px;display:flex;justify-content:space-between;font-size: 12px;">
                            <div>房型：{{'高级商务大床房'}}/1间</div>
                            <div>预离时间：{{item.validDate}}</div>
                        </div> -->
                        <div style="margin-left:30px;display:flex;justify-content:space-between;font-size: 12px;">
                            服务事项：{{item.contentBody}}
                        </div>
                    </div>
                </u-collapse-item>
                <u-collapse-item>
                    <div class="title" slot="title">
                        <div>
                            已服务
                        </div>
                    </div>
                    <div class="content-detail" v-for="(item, index) in dataList.filter(item=> item.relay==2)" :class="{'active':item.id==activeId}" :key="index" @click="changeActive(item)">
                        <div>
                            <b>{{index+1}}</b>
                            <b style="margin-left:10px;margin-right:10px;">{{item.roomNo}}</b>
                            <b>呼叫时间：{{item.createDate}}</b>
                        </div>
                        <!-- <div style="margin-left:30px;display:flex;justify-content:space-between;font-size: 12px;">
                            <div>房型：{{'高级商务大床房'}}/1间</div>
                            <div>预离时间：{{item.validDate}}</div>
                        </div> -->
                        <div style="margin-left:30px;display:flex;justify-content:space-between;font-size: 12px;">
                            服务事项：{{item.contentBody}}
                        </div>
                    </div>
                </u-collapse-item>
            </u-collapse>
        </div>
    </div>

    <div class="btn">
        <u-subsection :list="btnList" mode="subsection" :current="btnCurrent" @change="btnChange"></u-subsection>
    </div>
    <u-toast ref="uToast"></u-toast>
</view>
</template>

<script>
import Header from '../header.vue'
import {
    getRoomServiceList,
    cancelRoomService
} from '../../utils/roomService'
import { mapState } from 'vuex'
export default {
    components: {
        Header
    },
    data() {
        return {
            list: ['客房服务', '查房'],
            btnList: ['取消服务', '添加账单', '完成服务'],
            btnCurrent: 0,
            current: 0,
            dataList: [],
            activeId: '',
            activeItem: null,
        }
    },
	computed:{
		...mapState(['hotelId'])
	},
    mounted() {
        // this.getData()
    },
    methods: {
        headerChange(e) {
            console.log(e)
            this.getData(e)
        },
        topChange(e) {
            console.log(e)
            this.current = e
        },
        getData(hotelId) {
            if (this.current == 0) {
                getRoomServiceList({
                    hotelId: hotelId
                }).then(res => {
                    console.log(res);
                    if (res.code == 200 && res.result.records.length > 0) {
                        this.dataList = res.result.records
                    }else{
						this.dataList = []
					}
                })
            }
        },
        changeActive(data) {
            console.log(data.id);
            this.activeId = data.id
            this.activeItem = JSON.parse(JSON.stringify(data))
        },
        btnChange(e) {
            console.log(e)
            this.btnCurrent = e
            if (e == 0 && this.activeItem) {
                this.activeItem.status = 3
                cancelRoomService(this.activeItem).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$refs.uToast.show({
                            message: '取消成功',
                            type: 'success',
                            duration: 2000
                        })
						this.getData(this.hotelId)
                    }
                })
            }
			if (e == 2 && this.activeItem) {
                this.activeItem.status = 2
                cancelRoomService(this.activeItem).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$refs.uToast.show({
                            message: '设置成功',
                            type: 'success',
                            duration: 2000
                        })
						this.getData(this.hotelId)
                    }
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.pages {
    height: 100vh;
    width: 100vw;
    background-color: #f5f5f5;
}

.content {
    margin-top: 10px;
    padding: 10px 5px;
    background-color: #fff;

    .title {
        display: flex;
        justify-content: space-between;
        color: #409EFF;
        font-size: 18px;
    }
}

.content-detail {
    >div {
        // display: flex;
        // align-items: center;
        margin-top: 10px;
    }
}

.active {
    background: rgb(228, 240, 253);

    >b {
        font-size: 16px !important;
    }
}
</style>