MD_worker/pages/workOrder/snatchingOrders.vue

<template>
    <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 style="display: flex;">
                    <view class="tag" :style="{
                        'color': { '待接单': '#3874F6', '待开始': '#3874F6', '待服务': '#F56C6C', '进行中': '#67C23A', '提交': '#171919', '已完工': '#171919' }[item.status] || '#999999',
                        'background': {
                            '待接单': '#E6F0FF',
                            '待开始': '#E6F0FF',
                            '待服务': '#FFECEF',
                            '进行中': '#F0F9EB',
                            '提交': '#F7F7F7',
                            '已完工': '#F7F7F7'     // 与提交共用浅灰背景
                        }[item.status] || '#F5F5F5',
                        marginRight: '20rpx',
                    }">
                        {{ item.status }}
                    </view>
                    <view class="tag" :style="{
                        'background': { '安装': '#E8F8D5', '维修': '#FFE2E5', '清洁': '#E2EBFF', '清洗': '#E2EBFF' }[item.type] || '#F0F0F0',
                        'color': { '安装': '#4B8E00', '维修': '#B00016', '清洁': '#2A5AD9', '清洗': '#2A5AD9' }[item.type] || '#333333'
                    }">
                        {{ item.type }}
                    </view>
                </view>
                <view class="time">
                    {{ item.createdate }}
                </view>
            </view>
            <view class="address">
                产品：{{ item.itemname }}
            </view>
            <view class="address">
                型号：{{ item.model }}
            </view>
            <view class="address">
                备注：{{ item.remarks || '--' }}
            </view>
            <view class="address">
                地址：{{ item.address }}
            </view>
            <view class="user">
                现场联系人：{{ item.scenecontact + ' ' + item.scenecontactphonenumber }}
            </view>
            <view v-if="content.where.status != '已完工'" class="but-box" @click.stop>
                <view class="but-box-item" @click="openModel(item)">
                    <My-button :customStyle="{
                        height: '70rpx',
                    }" frontIcon="icon-jiedan" text="抢单" />
                </view>
            </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,
    "nocache": true,
    isadmin: 1,
    "pageNumber": 1,
    "pageSize": 20,
    "where": {
        ispublic: 1,
        "status": '待接单',
        "condition": ""
    }
});
const list = ref([])

onLoad((options) => {
    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": "2025101710510903",
        "content": {
            "sa_workorderid": takeItem.sa_workorderid,
            "projectlearders": [wx.getStorageSync('userMsg').userid],
            ismanage: 0 // 用于避免多次抢单
        },
    }).then(res => {
        if (res.code == 1) {
            console.log("抢单结果", res)
            handleTakeOrder();
        } else {
            if (res.msg) uni.showToast({
                title: res.msg,
                icon: 'none'
            });
        }
    })

    const handleTakeOrder = () => {
        $Http.basic({
            id: 20230210101103,
            "content": {
                "sa_workorderid": takeItem.sa_workorderid
            }
        }).then(res => {
            console.log("接单结果", res)
            if (res.code == 1) {
                takeOrderShow.value = false;
                uni.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;
    border-radius: 16rpx;

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

        .tag {
            font-family: PingFang SC, PingFang SC;
            font-size: 24rpx;
            padding: 8rpx 20rpx;
            border-radius: 8rpx;
        }

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