UNION_NSI/target/classes/views/mobile/activity/site/mine.html

<!--#
layout("/mobile/platform.html"){
#-->

<style>
    #app {
        background: #ececec;
    }

    .table-list {
        margin-top: 64px;
    }

    .table-item {
        margin: 16px;
        background: #fff;
        border-radius: 10px;
        padding: 16px;
        font-size: 14px;
        color: #5b5a5a;
        position: relative;
    }

    .table-item .header-title {
        font-size: 18px;
        font-weight: bold;
        width: calc(100% - 100px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .table-item .header-title-extra {
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .cell {
        display: flex;
        padding: 2px;
        flex-wrap: nowrap;
    }

    .cell .title {

    }

    .cell .content {

    }

    .extra {
        padding: 10px 0 0 0;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

</style>

<div id="app" v-cloak>
    <div>
        <van-nav-bar title="职工之家我的场地预约" left-arrow placeholder fixed
                     @click-left="history.back()"></van-nav-bar>

        <div class="search-fixed">
            <van-search
                    v-model="pageForm.searchKeyword"
                    shape="round"
                    maxlength="10"
                    @search="doSearch"
                    placeholder="请输入场地名称进行查询"
            >
            </van-search>
        </div>

        <div class="table-list">
            <van-list v-model="loading"
                      :finished="finished"
                      :finished-text="tableData.length>0?'没有更多了':''"
                      @load="pageData">
                <div v-for="item in tableData" :key="item.id" class="table-item">
                    <div>
                        <div class="header-title">
                            {{item.reserve_cause}}
                        </div>
                        <van-tag class="header-title-extra" :type="tagType(item.reserve_state)">
                            {{item.state_name}}
                        </van-tag>

                        <div class="cell">
                            <div class="title">预约场地：</div>
                            <div class="content">{{item.site_name}}</div>
                        </div>
                        <div class="cell">
                            <div class="title">开始时间：</div>
                            <div class="content">{{item.reserve_start_time}}</div>
                        </div>
                        <div class="cell">
                            <div class="title">结束时间：</div>
                            <div class="content">{{item.reserve_end_time}}</div>
                        </div>
                        <div class="cell">
                            <div class="title">预约人姓名：</div>
                            <div class="content">{{item.reserve_person_username}}</div>
                        </div>
                        <div class="cell">
                            <div class="title">预约人工号：</div>
                            <div class="content">{{item.reserve_person_loginname}}</div>
                        </div>
                        <div class="cell">
                            <div class="title">预约人部门：</div>
                            <div class="content">{{item.reserve_person_unitname}}</div>
                        </div>
                        <div class="cell">
                            <div class="title">预约人工会：</div>
                            <div class="content">{{item.reserve_person_unionname}}</div>
                        </div>
                        <div class="extra">
                            <van-button size="small" type="info" @click="openView(item.id)">查看详情</van-button>
                            <van-button size="small" type="danger" @click="revoke(item)" v-if="item.reserve_state===6098">撤销预约</van-button>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
    </div>
</div>

<script>
    var vue = new Vue({
        el: '#app',
        mixins: [mobileMixins],
        data() {
            return {
                tableData: [],
                pageDataUrl:'/platform/activity/site/reserve/pageData'
            }
        },
        computed: {
            tagType() {
                return (reserveState) => {
                    if (reserveState === 6138) {
                        return 'success';
                    } else if ([6108, 6128].includes(reserveState)) {
                        return 'danger';
                    }
                    return 'primary';
                };
            },
        },
        methods: {
            async revoke(item) {
                const {id, site_name, reserve_start_time, reserve_end_time} = item
                this.$dialog.confirm({
                    title: '提示',
                    message: '您确定要撤销' + site_name + '\n' + reserve_start_time + "\n至\n" + reserve_end_time + '\n的预约吗？',
                }).then(async () => {
                    const loading = this.$toast.loading({
                        message: '提交中...',
                        forbidClick: true,
                    });

                    const {
                        code,
                        msg
                    } = await $.post('/platform/activity/site/apply/revoke', {id})
                    loading.clear()
                    if (code === 0) {
                        this.doSearch()
                        this.$toast.success(msg)
                    } else {
                        this.$toast.fail(msg)
                    }
                }).catch(() => {
                })
            },
            openView(id) {
                window.location.href = loc() + '/detail?id=' + id
            }

        },
        created() {
            // this.pageData()
        }
    })
</script>

<!--#
}
#-->