MD_worker/pages/workOrder/index.vue

<template>
    <view v-if="!['待接单', '已完成'].includes(content.where.status)" style="background-color: #fff;">
        <up-tabs lineColor="#3874F6" :scrollable="false" :list="[{
            name: '待开始'
        }, {
            name: '进行中'
        }, {
            name: '已提交',
            value: '提交'
        }]" @click="tabClick" />
    </view>
    <My_listbox ref="listBox" :empty="!list.length" @getlist="getList">
        <view style="height: 18rpx;" />
        <navigator class="item" v-for="item in list" :key="item.sa_workorderid"
            :url="'/pages/workOrder/detail?id=' + item.sa_workorderid" hover-class="navigator-hover">
            <view class="head">
                <view class="tag"
                    :style="{ 'background': { '安装': '#70B603', '维修': '#D9001B', '清洁': '#3874F6', '清洗': '#3874F6' }[item.type] || '#999999' }">
                    {{ item.type }}
                </view>
                <view class="time">
                    {{ item.createdate }}
                </view>
            </view>
            <view class="address">
                {{ item.address }}
            </view>
            <view class="user">
                {{ item.customername + ' ' + item.customerphonenumber }}
            </view>
            <view v-if="content.where.status != '已完结'" class="but-box" @click.stop>
                <view class="but-box-item">
                    <My-button :customStyle="{
                        'background-color': '#FFFFFF',
                        'color': '#3874F6',
                        height: '70rpx',
                    }" frontIcon="icon-bodadianhua1" text="电话" :phonenumber="item.customerphonenumber" />
                </view>
                <view v-if="content.where.status == '待接单'" class="but-box-item" @click="openModel(item)">
                    <My-button :customStyle="{
                        height: '70rpx',
                    }" frontIcon="icon-dianhua" text="接单" />
                </view>
                <navigator v-else :url="'/pages/workOrder/detail?id=' + item.sa_workorderid" class="but-box-item">
                    <My-button :customStyle="{
                        height: '70rpx',
                    }" frontIcon="icon-dianhua" text="报工" />
                </navigator>
            </view>
        </navigator>
    </My_listbox>

    <up-modal negativeTop="100" :show="takeOrderShow" title="是否确认接单？" showCancelButton @confirm="takeOrders"
        @cancel="takeOrderShow = false" ref="uModal" :asyncClose="true"></up-modal>
</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": {
        "status": '',
        "condition": ""
    }
});
const list = ref([])

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

onLoad((options) => {
    switch (options.type) {
        case '待接单':
            uni.setNavigationBarTitle({
                title: '待接工单'
            });
            content.where.status = options.type;
            break;
        case '进行中':
            uni.setNavigationBarTitle({
                title: '进行中工单'
            });
            content.where.status = '待开始';
            break;
        case '已完结':
            uni.setNavigationBarTitle({
                title: '已完结工单'
            });
            content.where.status = '已完成';
            break;
    }
    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;
    $Http.basic({
        "id": "20230208140203",
        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'
            });
        }
    })
}

let takeOrderShow = ref(false);
let takeItem = null;

function openModel(item) {
    takeItem = item;
    takeOrderShow.value = true;
}

function takeOrders() {
    $Http.basic({
        id: 20230210101103,
        "content": {
            "sa_workorderid": takeItem.sa_workorderid
        }
    }).then(res => {
        console.log("接单结果", res)
        if (res.code == 1) {
            takeOrderShow.value = false;
            wx.navigateTo({
                url: '/pages/workOrder/detail?id=' + takeItem.sa_workorderid,
                success: (result) => {
                    uni.showToast({
                        title: '接单成功',
                        icon: 'none'
                    });
                },
            })
            $Http.updateList(content, getList)
        } else {
            if (res.msg) uni.showToast({
                title: res.msg,
                icon: 'none'
            });
        }
    })
}

</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>