LocalLivingServicesUniapp/pages/store/examine.vue

<template>
    <view>
        <cu-custom bgColor="bg-gradual-blue1" :isBack="true">
            <block slot="content">审核查询</block>
        </cu-custom>
        <view class="eamine-tab flex justify-between">
            <text class="tab-title" v-for="(val, index) in tabData" :key="val" :class="{
                'selected-background': current === index
            }" @tap="toggleSelection(index)">{{ val }}
            </text>
        </view>
        <mescroll-uni ref="mescrollRef" :top="top" @init="mescrollInit" @down="downCallback" @up="upCallback">
            <view class=" borderRadiu" v-for="(item, index) in msgList" :key="index">
                <view class="flex justify-between green-bg " style="padding:14upx 18upx;">
                    <view class="status-title">
                        <text class="green-button">{{
                            item.status == 0 ? '待审核' : item.status == 1 ? '审核通过' :item.status==2?'审核驳回':'' }}</text>
                        <text>基础信息</text>
                    </view>
                    <text>{{ 
                        item.updateTime? item.updateTime:item.createTime }}</text>
                </view>
                <view style="padding:10upx 18upx">
                    <view>提交信息：</view>
                    <view style="margin-top: 9upx;">门店，门店名称，门店地址，门店面积，门店照片，地理...</view>
                </view>
            </view>
        </mescroll-uni>
    </view>
</template>
<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import { USER_INFO } from "@/common/util/constants"
export default {
    mixins: [MescrollMixin], // 使用mixin
    computed: {
        top() {
            return this.CustomBar * 2 + 95
        },
        style() {
            var StatusBar = this.StatusBar;
            var CustomBar = this.CustomBar;
            var style = `height:${CustomBar}px;padding-top:${StatusBar}upx;`;
            return style
        },
    },
    data() {
        return {

            tabData: ['基础信息', '品牌信息', '经营资质', '经营信息'],
            current: 0,
            msgList: [], //列表数据
            upOption: {
                page: {
                    num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                    size: 10 // 每页数据的数量
                },
                noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
                empty: {
                    tip: '~ 暂无数据 ~', // 提示

                },
                loading: '',
                text: '全部',
                isShowNoMore: false,
                textNoMore: '我是有底线的 >_<'
            },
            announcement: [],

        }
    },
    onLoad() {
        if (this.mescroll) {
            this.mescroll.resetUpScroll()
        }
    },
    methods: {
        upCallback(page) {
            let data = {
                category:  this.current !==0?this.current + 1:null,
                merchantId: uni.getStorageSync(USER_INFO).merchantId,
                pageNo: page.num,
                pageSize: page.size,
            }
            let interfaceData = this.current ==0 ? "/merchant/localMerchantService/queryList" : "/merchant/localMerchantService/queryAllList"

            this.$http.post(interfaceData, data).then(res => {
                if (res.data.success) {
                    console.log(res.data.result.records, 888);

                    this.announcement = res.data.result.records
                    this.mescroll.endSuccess(this.announcement.length);

                    for (let item of this.announcement) {
                        this.msgList.push(item)
                    }
                    console.log(this.msgList, 88888);

                }
                if (page.num == 1) {
                    this.msgList = []; //如果是第一页需手动制空列表
                    this.msgList = this.msgList.concat(this.announcement); //追加新数据
                }

            }).catch(() => {
                //联网失败, 结束加载
                this.mescroll.endErr();
            })

        },

        // 切换标签的选中状态
        toggleSelection(index) {
            if (this.current === index) return
            this.current = index
            this.msgList = []// 先置空列表,显示加载进度
            this.mescroll.resetUpScroll() // 再刷新列表数据
        },
    }
}
</script>
<style scoped lang="scss">
page {
    background: #F8F8FA;
}

.eamine-tab {
    position: fixed;
    height: 85upx;
    width: 100%;
    z-index: 9999;
    background: #FFFFFF;
    padding: 18upx 26upx;

    .tab-title {
        font-size: 28upx;
        color: #888888;
    }

    .selected-background {
        font-weight: 700;
        font-size: 29upx;
        color: #333333;
        position: relative;
    }

    .selected-background ::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 23upx;
        width: 55upx;
        height: 10upx;
        background: #449AFF;
        border-radius: 7upx;
    }


}

.tab-top {
    margin-top: 85upx;
    padding: 26upx;
}

.borderRadiu {
    border-radius: 10upx 10upx 10upx 10upx;
    padding-bottom: 10px;
    background-color: #ffffff;
    font-size: 26upx;
    color: #999999;
    margin: 26upx;

    .status-title {
        text:first-child {
            color: #FFFFFF;
            padding: 8upx 14upx;
            border-radius: 4px 4px 4px 4px;
            margin-right: 14upx;
        }
    }

    .green-bg {
        background: linear-gradient(90deg, #FFFFFF 0%, #EDFCF3 100%);
    }

    .green-button {
        background: #54C666;
    }

    .blue-bg {
        background: linear-gradient(90deg, #FFFFFF 0%, #EBEEF6 100%);
    }

    .blue-button {
        background: #6E78A6;
    }

    .red-bg {
        background: linear-gradient(90deg, #FFFFFF 0%, #FFF7F8 100%);
    }

    .red-button {
        background: #F55D65;
    }
}
</style>