yihuo/pages/weal_room_audit/index.vue

<template>
    <page title="审核" ref="pageRef" nav-color="#fff">
        <view class="pageWrapper">
            <tabbar
                custom-class="marginX14 marginT10"
                :data="tabs"
                labelKey="title"
                @change="clickTab"
            />
            <view class="listWrapper">
                <view
                    v-for="(item, index) in tableData"
                    :key="index"
                    class="cell flex-align"
                    style="margin-bottom: 10px"
                >
                    <image :src="item.avatar" class="avatar" />
                    <view class="font4 marginL12 flex1">{{ item.nickname }}</view>
                    <view v-if="item.auditStatus === 0" class="flex-align-end">
                        <view class="btn danger flex-align-center" @click="reject(item)">拒绝</view>
                        <view class="btn success flex-align-center marginL15" @click="pass(item)">
                            通过
                        </view>
                    </view>
                    <view v-else class="flex-align-end font3">
                        <text v-if="item.auditStatus === 1" style="color: red">拒绝</text>
                        <text v-if="item.auditStatus === 2" style="color: #6ABF45">通过</text>
                    </view>
                </view>
                <empty v-if="!tableData || tableData.length === 0" :top="200" />
            </view>
        </view>
    </page>
</template>
<script>
    import tabbar from '@/components/tabbar'
    import pageMixin from '@/mixin/page'
    import empty from '@/components/empty'
    const Tabs = [
        { title: '待审核', value: 0 },
        { title: '审核通过', value: 2 },
        { title: '审核不通过', value: 1 }
    ]

    export default {
        mixins: [pageMixin],
        components: { tabbar, empty },
        data() {
            return {
                tabs: Tabs,
                tab: Tabs[0]
            }
        },
        onLoad(options) {
            this.roomId = options.id
        },
        mounted() {
            this.refresh(true)
        },
        onPullDownRefresh() {
            this.refresh()
        },
        onReachBottom() {
            this.loadMore()
        },
        methods: {
            clickTab(index) {
                this.tab = this.tabs[index]
                this.refresh(true)
            },
            async loadData(loading) {
                const res = await this.$service.weal.roomAuditRecord(
                    this.pageNum,
                    this.pageSize,
                    this.roomId,
                    this.tab.value,
                    loading
                )
                return res
            },
            async pass(item) {
                const res = await this.$service.weal.roomAuditPass(item.id)
                if (res) {
                    item.auditStatus = 2
                }
            },
            async reject(item) {
                const res = await this.$service.weal.roomAuditUnPass(item.id)
                if (res) {
                    item.auditStatus = 1
                }
            }
        }
    }
</script>
<style></style>
<style lang="scss" scoped>
    .pageWrapper {
        background-color: #fff;
    }
    .bg {
        position: fixed;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
    }
    .listWrapper {
        background-color: #fff;
        min-height: 100vh;
        padding: 20rpx;
    }
    .cell {
        position: relative;
        height: 48px;
        background: #f8f8f8;
        border-radius: 4px;
        padding-left: 15px;
        padding-right: 15px;

        .avatar {
            width: 60rpx;
            height: 60rpx;
            border-radius: 30rpx;
        }
        .btn {
            width: 80rpx;
            height: 46rpx;
            border-radius: 8rpx;
            color: #fff;
            font-size: 24rpx;
            &.danger {
                background: #dd524d;
            }
            &.success {
                background: #6ac144;
            }
        }
    }
</style>