md-h5/pages/serviceSeeking/index.vue

<template>
    <My-shade />
    <view v-if="!['待接单', '已完成'].includes(content.where.status)" style="background-color: #fff;">
        <up-tabs lineColor="#3874F6" :scrollable="false" :list="[{
            name: '安装'
        }, {
            name: '维修'
        }, {
            name: '清洗'
        }]" @click="tabClick" />
    </view>
    <My_listbox ref="listBox" :empty="!list.length" @getlist="getList">
        <view style="height: 18rpx;" />
        <view class="item" v-for="item in list" :key="item.sa_serviceorderid" hover-class="navigator-hover">
            <navigator :url="'/pages/serviceSeeking/detail?id=' + item.sa_serviceorderid" hover-class="none">
                <view class="head">
                    <view class="tag"
                        :style="{ 'background': { '已完结': '#333', '拒绝受理': '#333' }[item.status] || '#3874F6' }">
                        {{ item.status }}
                    </view>
                    <view class="time">
                        {{ item.createdate }}
                    </view>
                </view>
                <view class="address">
                    {{ item.address }}
                </view>
                <view class="user">
                    {{ item.serviceenterprisename + ' ' + item.servicephonenumber }}
                </view>
            </navigator>

            <view class="but-box" @click="stopPropagation">
                <view class="but-box-item" v-if="item.servicephonenumber">
                    <My-button :customStyle="{
                        'background-color': '#FFFFFF',
                        'color': '#3874F6',
                        height: '70rpx',
                    }" frontIcon="icon-bodadianhua1" text="电话" :phonenumber="item.servicephonenumber" />
                </view>

                <navigator :url="'/pages/serviceSeeking/detail?id=' + item.sa_serviceorderid" class="but-box-item">
                    <My-button :customStyle="{
                        height: '70rpx',
                    }" frontIcon="icon-jiedan" text="查询" />
                </navigator>
            </view>
        </view>
    </My_listbox>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
const { $Http } = getCurrentInstance().proxy;
import { onLoad, onShow } from '@dcloudio/uni-app';

const listBox = ref(null);
const content = reactive({
    loading: false,
    isadmin: 0,
    "pageNumber": 1,
    "pageSize": 20,
    "where": {
        "servicetype": '安装',
    }
});
const list = ref([])

function tabClick(e) {
    content.where.servicetype = e.value || e.name;
    getList(true);
}

onLoad(() => {
    getList();
});

onShow(() => {
    if (content.pageNumber != 1) $Http.updateList(content, getList)
})

function getList(init = false) {
    if (content.loading) return;
    if (init) content.pageNumber = 1;
    content.loading = true;
    console.log("uni.getStorageSync('WuserRecord')", uni.getStorageSync('WuserRecord'))
    try {
        let sa_customersid = uni.getStorageSync('WuserRecord').sa_customersid;
        if (!sa_customersid || sa_customersid < 0) {
            content.where.sa_customersid = uni.getStorageSync('WuserRecord').sa_customersid;
        } else {
            content.where.customerphonenumber = uni.getStorageSync('phonenumber') || ''
        }
    } catch (error) {
        content.where.customerphonenumber = uni.getStorageSync('phonenumber') || ''
    }
    $Http.basic({
        "id": "20230206091703",
        content
    }).then(res => {
        console.log("获取列表", res)
        content.loading = false;
        listBox.value.refreshToComplete();
        listBox.value.setHeight();
        if (res.code == 1) {
            list.value = reactive(res.firstPage ? res.data : list.value.concat(res.data));
            content.pageTotal = res.pageTotal;
            content.pageNumber = res.pageNumber;
        } else {
            if (res.msg) uni.showToast({
                title: res.msg,
                icon: 'none'
            });
        }
    })
}

function stopPropagation(event) {
    event.stopPropagation();
}
</script>

<style lang="scss" scoped>
.item {
    width: 690rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(150, 157, 165, 0.16);
    margin: 0 auto 20rpx;
    padding: 20rpx 40rpx;
    box-sizing: border-box;

    .head {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .tag {
            font-family: PingFang SC, PingFang SC;
            font-size: 24rpx;
            color: #FFFFFF;
            padding: 8rpx 20rpx;
        }

        .time {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-size: 24rpx;
            color: #999999;
        }
    }

    .address {
        line-height: 38rpx;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-size: 28rpx;
        color: #333333;
        margin-top: 20rpx;
    }

    .user {
        line-height: 32rpx;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-size: 24rpx;
        color: #999999;
        margin-top: 20rpx;
    }

    .but-box {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 20rpx;

        .but-box-item {
            width: 40%;
        }
    }
}
</style>