<template> <view class="card-box" v-for="(item, index) in pageList.list" :key="index"> <view class="top-flex-box"> <view> <view> <text class="address">{{ item.deviceName || "-" }}</text> </view> <view> <text class="number">出货单号:{{ item.orderNumber }}</text> </view> <view> <text class="name">{{ item.cardId }}</text> </view> </view> <view> <text class="btn" @click="handleScenePhoto(item.imagesId as number)" >现场照片</text > </view> </view> <view> <text class="desc">过磅时间:{{ item.grossTime || "-" }}</text> </view> <view class="flex-box"> <text>皮重:{{ item.tare }}kg</text> </view> <view class="btn-box"> <u-button text="点击作废" color="#E8E8E8" :customStyle="{ color: '#999' }" @click="handleModal(true, item.id as any)" ></u-button> <u-button type="primary" text="点击编辑" @click="pricingDetail(item.id as any)" ></u-button> </view> </view> <SmallModal :title="'确认作废吗?'" :content="'确认作废后,该订单不能恢复!'" :okText="'确认作废'" :isMain="true" :show="isShowCancelModal" @handleModal="(v:boolean) => {handleModal(v, deleteId)}" @handleOk="handleOk()" /> </template> <script setup lang="ts"> import { ShipmentApi } from "@/services/index"; import SmallModal from "@/components/Modal/smallModal.vue"; const pageList: PageResult<Order> = reactive({ noMoreData: false, total: 0, list: [], pageNum: 1, pageSize: 10, }); const resetPageList = () => { pageList.noMoreData = false; pageList.total = 0; pageList.list = []; pageList.pageNum = 1; pageList.pageSize = 100; }; const isShowCancelModal = ref(false); const deleteId = ref(0); const handleModal = (v: boolean, id: number) => { isShowCancelModal.value = v; deleteId.value = id; }; const handleScenePhoto = (imagesId: number) => { uni.navigateTo({ url: "/pagesScenePhoto/index?orderType=2&id=" + imagesId, // 要跳转到的页面路径 }); }; const pricingDetail = (id: string) => { // 待过皮的时候 编辑前先查询当前状态 若是待过皮,则可继续编辑 否则提示该数据已处理 刷新当前页面 ShipmentApi.getDetailById({ id: id }).then((res: any) => { if (res.code === 200) { if (res.data.scaleStatus > 1) { uni.showToast({ title: "当前订单已处理" }); resetPageList(); getList(); } else { uni.navigateTo({ url: "/pagesShipment/form/shipmentForm?id=" + id, // 要跳转到的页面路径 }); } } }); }; const getList = (v?: boolean) => { if (v) { if (Math.ceil(pageList.total / pageList.pageSize) > pageList.pageNum) { pageList.pageNum++; } else { pageList.noMoreData = true; return; } } let params: any = { pageSize: pageList.pageSize, pageNumber: pageList.pageNum, scaleStatus: 1, }; pageList.isLoading = true; ShipmentApi.getOrderPage(params).then((res: any) => { if (res.code === 200) { pageList.isLoading = false; (pageList as any).list = pageList.list.concat(res.data.list); pageList.total = (res.data as any).total; } }); }; const handleOk = () => { ShipmentApi.deleteOrder({ ids: [deleteId.value] }).then((res) => { if (res.code === 200) { resetPageList(); getList(); } }); }; onMounted(() => { getList(); }); </script> <style lang="scss" scoped> .card-box { padding: 38rpx 50rpx; box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12); border-radius: 13rpx; margin: 0rpx 25rpx; margin-top: 35rpx; font-family: Source Han Sans CN; font-weight: 400; font-size: 26rpx; color: #000000; line-height: 41rpx; .top-flex-box { display: flex; justify-content: space-between; align-items: center; .btn { border-radius: 24rpx; border: 1px solid #00dcee; padding: 10rpx 30rpx; font-weight: 500; font-size: 24rpx; color: #00dcee; line-height: 41rpx; cursor: pointer; } } .address { margin-right: 30rpx; } .desc { font-size: 24rpx; color: #999999; margin-top: 30rpx; display: inline-block; } .name { font-size: 26rpx; color: #000000; font-weight: bold; } .flex-box { font-weight: 400; font-size: 26rpx; color: #000000; line-height: 41rpx; display: flex; align-items: center; justify-content: space-between; } .btn-box { margin-top: 60rpx; display: flex; ::v-deep button { border-radius: 43rpx; } ::v-deep button + button { margin-left: 50rpx; } } } </style>