Client-Teapay/src/pagesC/settledMerchant/business.vue

<template>
    <div class="myBusiness">
        <uni-easyinput prefixIcon="search" v-model="Query.name" placeholder="店铺名称" @confirm="onsearch" confirmType="search"/>
        <div class="tabs flex_r flex_jb">
            <div v-for="(i,s) in tabs" :key="s"
                :class="{active:Query.status==i.status}"
                @click="ontab(i.status)">{{i.text}}</div>
        </div>
        <div class="list" v-if="list.length">
            <div class="list-item" v-for="(i,s) in list" :key="s">
                <div class="flex_r flex_ac flex_jb">
                    <div class="head_info_row flex_r flex_ac">
                        <image class="logo" :src="i.logo" />
                        <div class="head_name">
                            <div class="name">{{ i.name }}</div>
                            <div class="flex_r flex_ac">
                                <uni-rate :max="5" :value="i.score" :size="12" allow-half />
                                <span class="commentScore">{{i.score}}分</span>
                            </div>
                        </div>
                    </div>
                    <div class="twocode iconfont" @click="goto('/pagesC/invi-img/index',{merchant_id:i.merchant_id,shop_id:i.id,name:i.name})" v-if="i.status == 2">&#xe635;</div>
                </div>
                <div class="p1 flex_r">
                    <div>商户姓名：{{i.contact}}</div>
                    <div>商户电话：{{i.phone}}</div>
                </div>
                <div class="p1 flex_r">
                    <div>今日流水：{{i.day_stream || "0.00"}}</div>
                    <div>总流水：{{i.total_stream || "0.00"}}</div>
                </div>
            </div>
        </div>
        <empty v-else/>
    </div>
</template>
<script>
import empty from "@/pagesC/components/empty/empty"
import { post } from "@/request/api.js";
export default {
    name: "myBusiness",
    props: {},
    components: {empty},
    data() {
        return {
            tabs: [
                { status: 2, text: "已审核" },
                { status: 1, text: "待审核" },
                { status: 3, text: "未通过" },
            ],
            list: [],
            Query: {
                page: 1,
                rows: 20,
                status: 2,
                operate: uni.getStorageSync("localInfo").operate
            },
            pageData: {},
        };
    },
    methods: {
        getList(page) {
            console.log(page);
            if (page) {
                this.list = []
                this.Query.page = 1
            }
            post("v1/merchant/region", this.Query).then(res => {
                if (res.code == 0) {
                    let da = res.data.data
                    delete res.data.data
                    this.pageData = res.data
                    this.list = [...this.list, ...da]
                    this.Query.page++
                    uni.hideLoading()
                }
            })
        },
        ontab(va){
            uni.showLoading({title: '加载中'})
            this.Query.status = va;
            this.getList(1)
        },
        onsearch(){
            uni.showLoading({title: '加载中'})
            this.getList(1)
        }
    },
    onLoad(da) {
        uni.showLoading({title: '加载中'})
        this.getList()
    },
    onShow() {},
    mounted() {},
    onReachBottom() {
        if (this.Query.page < this.pageData.last_page) this.getList();
    },
};
</script>
<style scoped lang='scss'>
.myBusiness {
    padding: 28rpx 32rpx;
}

.tabs {
    padding: 0 30rpx;
    font-size: 30rpx;
    font-weight: 600;
    margin-bottom: 18rpx;
    margin-top: 18rpx;

    .active {
        position: relative;

        &::after {
            content: "";
            width: 88rpx;
            height: 6rpx;
            background-color: #2E57FD;
            border-radius: 5rpx;
            position: absolute;
            left: 2rpx;
            bottom: -8rpx;
        }
    }
}
.list{
    padding: 30rpx 0;
    .list-item{
        padding: 28rpx 30rpx;
        margin-bottom: 50rpx;
        border-radius: 12rpx;
        background-color: #fff;
        box-shadow: 4rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.12);
    }
    .twocode {
        font-size: 60rpx;
    }
    .head_info_row {
        margin-bottom: 20rpx;
        .logo {
            width: 120rpx;
            height: 110rpx;
            border-radius: 12rpx;
            margin-right: 25rpx;
            border: 1px solid #e5e5e5;
        }
    
        .head_name {
            .name {
                font-size: 36rpx;
                font-weight: 600;
                margin-bottom: 12rpx;
            }
    
            .commentScore {
                margin-left: 10rpx;
                font-size: 24rpx;
            }
        }
        
    }
    .p1{
        font-size: 24rpx;
        margin-top: 6rpx;
        div{
            width: 50%;
        }
    }
}
</style>