447 lines
11 KiB
Vue
447 lines
11 KiB
Vue
<template>
|
|
<view class="search-box">
|
|
<view class="search">
|
|
<u-search
|
|
placeholder="请输入客户名称"
|
|
v-model="keyword"
|
|
|
|
bgColor="#fff"
|
|
clearable
|
|
:showAction="false"
|
|
placeholderColor="#C1C1C1"
|
|
@search="handleSearch()"
|
|
@clear="handleSearch()"
|
|
></u-search>
|
|
</view>
|
|
<view @click="handleCalendar()">
|
|
<up-icon name="calendar" size="26"></up-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="fullTime" v-if="filterState.startTime">
|
|
{{ filterState.startTime }} - {{ filterState.endTime }}
|
|
</view>
|
|
|
|
<view class="card-box">
|
|
|
|
<page-view
|
|
@loadList="
|
|
(v) => {
|
|
getList(v);
|
|
}
|
|
"
|
|
:noMoreData="pageList.noMoreData"
|
|
:list="pageList.list"
|
|
:height="80"
|
|
:isLoading="pageList.isLoading"
|
|
>
|
|
<block v-for="(item, index) in pageList.list" :key="index">
|
|
<view class="c-layout">
|
|
<view style="min-width: 20px"
|
|
><checkbox
|
|
v-if="ScaleStatus.ToBeShipmentPay === currentTab"
|
|
:color="'#00D2E3'"
|
|
:checked="item.isChecked"
|
|
style="transform: scale(0.7)"
|
|
@click="item.isChecked = !item.isChecked"
|
|
/></view>
|
|
<view class="inner-box">
|
|
<view class="top-flex-box">
|
|
<view>
|
|
<view>
|
|
<text class="number">出货单号：{{ item.orderNumber }}</text>
|
|
</view>
|
|
<view>
|
|
<text class="name"
|
|
>{{ item.userName
|
|
}}<text v-if="item.cardNumber">
|
|
/ {{ item.cardNumber }}</text
|
|
></text
|
|
>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom-flex-box">
|
|
<view>
|
|
<view>
|
|
<text class="desc"
|
|
>过磅总净重：{{ item.netWeight || 0 }}KG</text
|
|
>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<text class="btn">
|
|
<text
|
|
v-if="currentTab === 2"
|
|
@click="handleReview(item.id, 2)"
|
|
>去结算</text
|
|
>
|
|
<text
|
|
v-if="currentTab === 3"
|
|
@click="handleReview(item.id, 3)"
|
|
>去结算</text
|
|
>
|
|
<text
|
|
v-if="currentTab === 4"
|
|
@click="handleReview(item.id, 4)"
|
|
>查看</text
|
|
>
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-gap
|
|
height="10"
|
|
bgColor="#f8f8f8"
|
|
v-if="index < pageList.list.length - 1"
|
|
></u-gap>
|
|
</block>
|
|
</page-view>
|
|
</view>
|
|
<view class="btn-box" v-if="currentTab === 3 && pageList.list.length > 0">
|
|
<u-button
|
|
text="全选/取消"
|
|
color="#fff"
|
|
:customStyle="{ color: '#00DCEE', border: '1px solid #00DCEE' }"
|
|
@click="handleSelect"
|
|
></u-button>
|
|
<u-button
|
|
type="primary"
|
|
:text="`批量支付`"
|
|
@click="handleReviewOrPay()"
|
|
></u-button>
|
|
</view>
|
|
|
|
<block>
|
|
<u-action-sheet
|
|
:actions="contrlModalParams.select.list"
|
|
:title="contrlModalParams.select.title"
|
|
:show="contrlModalParams.select.isShow"
|
|
@select="(v: any) => handleSelect1('select', v)"
|
|
@close="contrlModalParams.select.isShow = false"
|
|
:closeOnClickAction="true"
|
|
></u-action-sheet>
|
|
</block>
|
|
|
|
<!-- 时间弹框 -->
|
|
<TimeDialog
|
|
ref="timeDialog"
|
|
:show="filterState.showTime"
|
|
@handleDialog="(v:boolean) => {filterState.showTime = false}"
|
|
@changeTime="changeTime"
|
|
/>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ShipmentApi } from "@/services/index";
|
|
import { ScaleStatus, ScaleStatusBtnType } from "@/utils/enum";
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import { onShow } from "@dcloudio/uni-app";
|
|
import PageView from "@/components/PageView/index.vue";
|
|
import type { ComType } from "@/types/global";
|
|
import TimeDialog from "@/components/Dialog/TimeDialog.vue";
|
|
// 筛选条件
|
|
const filterState = reactive({
|
|
showTime: false,
|
|
startTime: "",
|
|
endTime: "",
|
|
});
|
|
const handleCalendar = () => {
|
|
filterState.showTime = true;
|
|
};
|
|
const changeTime = (obj: any) => {
|
|
filterState.startTime = obj.startTime;
|
|
filterState.endTime = obj.endTime;
|
|
resetPageList();
|
|
getList();
|
|
};
|
|
|
|
const contrlModalParams = reactive<ComType>({
|
|
select: {
|
|
isShow: false,
|
|
title: "标题",
|
|
list: [
|
|
{
|
|
name: "微信",
|
|
key: 3,
|
|
},
|
|
{
|
|
name: "现金",
|
|
key: 1,
|
|
},
|
|
{
|
|
name: "支付宝",
|
|
key: 4,
|
|
},
|
|
{
|
|
name: "转账",
|
|
key: 2,
|
|
},
|
|
],
|
|
},
|
|
});
|
|
|
|
const payState = reactive({
|
|
paymentMethodName: "",
|
|
paymentMethod: "",
|
|
});
|
|
const handleSelect1 = (key: string, v: any) => {
|
|
contrlModalParams.select.isShow = false;
|
|
payState.paymentMethodName = v.name;
|
|
payState.paymentMethod = v.key;
|
|
updateStatus(ScaleStatus.ShipmentPaid);
|
|
};
|
|
// scaleStatus
|
|
const pageList: PageResult<Shipment> = reactive({
|
|
isLoading: false,
|
|
noMoreData: false,
|
|
total: 0,
|
|
list: [],
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
});
|
|
const keyword = ref("");
|
|
const state = reactive<{
|
|
[attrName: string]: any;
|
|
}>({
|
|
checkMap: {},
|
|
isAll: false,
|
|
});
|
|
|
|
const currentTab = ref(2);
|
|
const handleReview = (id: string, scaleStatus: number) => {
|
|
let type = ScaleStatusBtnType.ShipmentSettlement;
|
|
if (scaleStatus === 2) {
|
|
type = ScaleStatusBtnType.ShipmentSettlement;
|
|
} else if (scaleStatus === 3) {
|
|
type = ScaleStatusBtnType.ShipmentNoPay;
|
|
} else if (scaleStatus === 4) {
|
|
type = ScaleStatusBtnType.ShipmentPay;
|
|
}
|
|
uni.navigateTo({
|
|
url:
|
|
"/pagesShipment/review/index?id=" +
|
|
id +
|
|
`&scaleStatusBtnType=${type}&scaleStatus=${scaleStatus}`, // 要跳转到的页面路径
|
|
});
|
|
};
|
|
|
|
const handleReviewOrPay = () => {
|
|
const list = pageList.list.filter((item) => item.isChecked);
|
|
if (list.length === 0) {
|
|
uni.showToast({ icon: "none", title: "请至少选择一个出货单" });
|
|
return;
|
|
}
|
|
// 批量支付
|
|
contrlModalParams.select.isShow = true;
|
|
contrlModalParams.select.title = "结算方式";
|
|
};
|
|
const updateStatus = (status: number) => {
|
|
const list = pageList.list
|
|
.filter((item) => item.isChecked)
|
|
.map((item) => {
|
|
return {
|
|
...item,
|
|
scaleStatus: status,
|
|
paymentMethodName: payState.paymentMethodName,
|
|
paymentMethod: payState.paymentMethod,
|
|
};
|
|
});
|
|
if (list.length === 0) {
|
|
uni.showToast({ icon: "none", title: "请至少选择一个出货单" });
|
|
return;
|
|
}
|
|
ShipmentApi.updateOrderIn({ orderOutPos: list }).then((res) => {
|
|
if (res.code === 200) {
|
|
resetPageList();
|
|
getList();
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleSelect = () => {
|
|
state.isAll = !state.isAll;
|
|
console.log(state.isAll);
|
|
pageList.list = pageList.list.map((item) => {
|
|
return { ...item, isChecked: state.isAll };
|
|
});
|
|
};
|
|
const resetPageList = () => {
|
|
pageList.noMoreData = false;
|
|
pageList.total = 0;
|
|
pageList.list = [];
|
|
pageList.pageNum = 1;
|
|
pageList.pageSize = 100;
|
|
};
|
|
const handleSearch = () => {
|
|
resetPageList();
|
|
getList();
|
|
};
|
|
const getList = (v?: boolean) => {
|
|
if (v) {
|
|
if (Math.ceil(pageList.total / pageList.pageSize) > pageList.pageNum) {
|
|
pageList.pageNum++;
|
|
} else {
|
|
pageList.noMoreData = true;
|
|
return;
|
|
}
|
|
}
|
|
pageList.isLoading = true;
|
|
ShipmentApi.getOrderPage({
|
|
pageSize: pageList.pageSize,
|
|
pageNumber: pageList.pageNum,
|
|
scaleStatus: ScaleStatus.ToBeShipmentReview,
|
|
userName: keyword.value,
|
|
startTime: filterState.startTime ? `${filterState.startTime} 00:00:00` : "",
|
|
endTime: filterState.startTime ? `${filterState.endTime} 00:00:00` : "",
|
|
}).then((res) => {
|
|
if (res.code === 200) {
|
|
pageList.isLoading = false;
|
|
// (pageList as any).list = (res.data.list as any).map((item: any) => {
|
|
// return { ...item, isChecked: false };
|
|
// });
|
|
pageList.list = pageList.list.concat(
|
|
res.data.list.map((item: any) => {
|
|
return { ...item, isChecked: false };
|
|
})
|
|
);
|
|
pageList.total = (res.data as any).total;
|
|
}
|
|
});
|
|
};
|
|
onShow(() => {
|
|
resetPageList();
|
|
getList();
|
|
});
|
|
onLoad((option) => {
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0rpx 22rpx;
|
|
margin-top: 30rpx;
|
|
view + view {
|
|
margin-left: 22rpx;
|
|
}
|
|
}
|
|
.search {
|
|
box-shadow: 0rpx 3rpx 16rpx 5rpx rgba(0, 0, 0, 0.2);
|
|
border-radius: 28rpx;
|
|
background: rgba(255, 255, 255, 0.86);
|
|
width: 100%;
|
|
margin: 0px auto;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #c1c1c1;
|
|
> view {
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
text {
|
|
margin-left: 15rpx;
|
|
}
|
|
}
|
|
|
|
.fullTime {
|
|
font-size: 26rpx;
|
|
padding: 22rpx 22rpx 0rpx 22rpx;
|
|
color: #606266;
|
|
}
|
|
.card-box {
|
|
.c-tab {
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
line-height: 41rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
border-bottom: 1rpx solid rgba(233, 233, 233, 0.76);
|
|
text {
|
|
padding: 16rpx;
|
|
}
|
|
.active {
|
|
color: $u-primary;
|
|
border-bottom: 5rpx solid $u-primary;
|
|
border-radius: 5rpx;
|
|
}
|
|
}
|
|
.c-layout {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 30rpx 25rpx 30rpx 0rpx;
|
|
}
|
|
.inner-box {
|
|
width: 100%;
|
|
// padding: 40rpx 40rpx;
|
|
.bottom-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;
|
|
}
|
|
}
|
|
}
|
|
|
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
|
|
border-radius: 13rpx;
|
|
margin: 0rpx 25rpx;
|
|
margin-top: 22rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #000000;
|
|
line-height: 41rpx;
|
|
|
|
.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: bold;
|
|
color: #000000;
|
|
line-height: 41rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
.btn-box {
|
|
margin-top: 60rpx;
|
|
display: flex;
|
|
background: #ffffff;
|
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 56, 93, 0.12);
|
|
border-radius: 13rpx 13rpx 0rpx 0rpx;
|
|
padding: 25rpx 50rpx;
|
|
position: absolute;
|
|
bottom: 0rpx;
|
|
width: calc(100vw - 100rpx);
|
|
::v-deep button {
|
|
border-radius: 43rpx;
|
|
}
|
|
::v-deep button + button {
|
|
margin-left: 50rpx;
|
|
}
|
|
}
|
|
</style>
|