475 lines
12 KiB
Vue
475 lines
12 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">
|
||
<!-- <view class="c-tab">
|
||
<text
|
||
v-for="(item, index) in tabList"
|
||
:key="index"
|
||
:class="{ active: currentTab === item.key }"
|
||
@click="handleTab(item)"
|
||
>
|
||
{{ item.name }}
|
||
</text>
|
||
</view> -->
|
||
|
||
<page-view
|
||
@loadList="
|
||
(v) => {
|
||
getList(v);
|
||
}
|
||
"
|
||
:noMoreData="pageList.noMoreData"
|
||
:list="pageList.list"
|
||
:height="ScaleStatus.Paid === currentTab ? 160 : 240"
|
||
: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.ToBeReview === currentTab ||
|
||
ScaleStatus.ToBePay === currentTab
|
||
"
|
||
value="cb"
|
||
: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.receiptNumber }}</text>
|
||
</view>
|
||
<view v-if="item.userName">
|
||
<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 class="flex-box">
|
||
<!-- 若是等待审核显示预估总价 其他显示实际付款 -->
|
||
<text v-if="currentTab === 2"
|
||
>预估总价：{{ item.totalPrice || 0 }}元</text
|
||
>
|
||
<text v-else
|
||
>实际付款：{{ item.balanceTotalPrice || 0 }}元</text
|
||
>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<text class="btn">
|
||
<text
|
||
v-if="currentTab === 2"
|
||
@click="handleReview(item.id as number, 2, '去审核')"
|
||
>去审核</text
|
||
>
|
||
<text
|
||
v-if="currentTab === 3"
|
||
@click="handleReview(item.id as number, 3, '去付款')"
|
||
>去付款</text
|
||
>
|
||
<text
|
||
v-if="currentTab === 4"
|
||
@click="handleReview(item.id as number, 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 === 2 || 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="`${currentTab === 2 ? '批量审核' : '批量支付'}`"
|
||
@click="handleReviewOrPay(currentTab)"
|
||
></u-button>
|
||
</view>
|
||
|
||
<!-- 支付方式 -->
|
||
<block>
|
||
<u-action-sheet
|
||
:actions="contrlModalParams['paySelect'].list"
|
||
:title="contrlModalParams['paySelect'].title"
|
||
:show="contrlModalParams['paySelect'].isShow"
|
||
@select="(v: any) => handleSelect1('paySelect', v)"
|
||
@close="contrlModalParams['paySelect'].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 { ReceiveApi } from "@/services/index";
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import PageView from "@/components/PageView/index.vue";
|
||
import { ScaleStatus } from "@/utils/enum";
|
||
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<{ [attrName: string]: any }>({
|
||
paySelect: {
|
||
isShow: false,
|
||
title: "请选择支付方式",
|
||
// 1:现金支付，2：银行卡支付，3：线上支付（微信）4：支付宝
|
||
list: [
|
||
{
|
||
name: "微信",
|
||
key: 3,
|
||
},
|
||
{
|
||
name: "现金",
|
||
key: 1,
|
||
},
|
||
{
|
||
name: "支付宝",
|
||
key: 4,
|
||
},
|
||
{
|
||
name: "转账",
|
||
key: 2,
|
||
},
|
||
],
|
||
},
|
||
});
|
||
// scaleStatus
|
||
const pageList: PageResult<Order> = reactive({
|
||
isLoading: false,
|
||
noMoreData: false,
|
||
total: 0,
|
||
list: [],
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
});
|
||
const keyword = ref("");
|
||
const state = reactive<{
|
||
[attrName: string]: any;
|
||
}>({
|
||
isAll: false,
|
||
});
|
||
const tabList = reactive([
|
||
{
|
||
name: "等待审核",
|
||
key: 2,
|
||
},
|
||
{
|
||
name: "已审未付",
|
||
key: 3,
|
||
},
|
||
{
|
||
name: "已审已付",
|
||
key: 4,
|
||
},
|
||
]);
|
||
|
||
const resetPageList = () => {
|
||
pageList.noMoreData = false;
|
||
pageList.total = 0;
|
||
pageList.list = [];
|
||
pageList.pageNum = 1;
|
||
pageList.pageSize = 100;
|
||
};
|
||
const currentTab = ref(2);
|
||
const handleTab = (item: any) => {
|
||
state.isAll = false;
|
||
currentTab.value = item.key;
|
||
resetPageList();
|
||
getList();
|
||
};
|
||
|
||
const handleSearch = () => {
|
||
resetPageList();
|
||
getList();
|
||
};
|
||
const handleReview = (id: number, scaleStatus: number, title: string) => {
|
||
uni.navigateTo({
|
||
url:
|
||
"/pagesReceive/review/index?id=" +
|
||
id +
|
||
`&scaleStatus=` +
|
||
scaleStatus +
|
||
`&title=${title}`, // 要跳转到的页面路径
|
||
});
|
||
};
|
||
const handleReviewOrPay = (status: number) => {
|
||
// 批量审核
|
||
if (ScaleStatus.ToBeReview === status) {
|
||
updateStatus(ScaleStatus.ToBePay, -1);
|
||
} else if (ScaleStatus.ToBePay === status) {
|
||
// 批量支付
|
||
contrlModalParams.paySelect.isShow = true;
|
||
}
|
||
};
|
||
const updateStatus = (status: number, key: number) => {
|
||
const list = pageList.list
|
||
.filter((item) => item.isChecked)
|
||
.map((item) => {
|
||
return { ...item, scaleStatus: status };
|
||
});
|
||
if (list.length === 0) {
|
||
uni.showToast({ icon: "none", title: "请至少选择一个收货单" });
|
||
return;
|
||
}
|
||
|
||
let paramsList: any = list;
|
||
if (ScaleStatus.Paid === status) {
|
||
paramsList = list.map((item) => {
|
||
return { ...item, paymentMethod: key };
|
||
});
|
||
}
|
||
ReceiveApi.updateOrderIn({ orderInPos: paramsList }).then((res) => {
|
||
if (res.code === 200) {
|
||
resetPageList();
|
||
getList();
|
||
}
|
||
});
|
||
};
|
||
const handleSelect = () => {
|
||
state.isAll = !state.isAll;
|
||
pageList.list = pageList.list.map((item) => {
|
||
return { ...item, isChecked: state.isAll };
|
||
});
|
||
};
|
||
const handleSelect1 = (key: string, v: any) => {
|
||
contrlModalParams[key].isShow = false;
|
||
// 修改订单状态
|
||
updateStatus(ScaleStatus.Paid, v.key);
|
||
};
|
||
|
||
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;
|
||
ReceiveApi.getOrderPage({
|
||
pageSize: pageList.pageSize,
|
||
pageNumber: pageList.pageNum,
|
||
scaleStatus: currentTab.value,
|
||
userName: keyword.value,
|
||
startTime: filterState.startTime ? `${filterState.startTime}` : '',
|
||
endTime: filterState.startTime ? `${filterState.endTime}` : '',
|
||
}).then((res: any) => {
|
||
if (res.code === 200) {
|
||
pageList.isLoading = false;
|
||
pageList.list = pageList.list.concat(
|
||
res.data.list.map((item: any) => {
|
||
return { ...item, isChecked: false };
|
||
})
|
||
);
|
||
pageList.total = (res.data as any).total;
|
||
}
|
||
});
|
||
};
|
||
onMounted(() => {
|
||
getList();
|
||
});
|
||
onLoad((option) => {
|
||
const statusList = ['待定价', '待过皮', '待审核', '待付款','已付款']
|
||
currentTab.value = parseInt((option as any).scaleStatus);
|
||
uni.setNavigationBarTitle({
|
||
title: statusList[currentTab.value],
|
||
});
|
||
});
|
||
</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);
|
||
margin: 0px auto;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #c1c1c1;
|
||
flex: 1;
|
||
> 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: fixed;
|
||
bottom: 0rpx;
|
||
width: calc(100vw - 100rpx);
|
||
::v-deep button {
|
||
border-radius: 43rpx;
|
||
}
|
||
::v-deep button + button {
|
||
margin-left: 50rpx;
|
||
}
|
||
}
|
||
</style>
|