441 lines
11 KiB
Vue
441 lines
11 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- 顶部筛选菜单 -->
|
|
<view class="uni-flex ai-center screen-box menu-list">
|
|
<view
|
|
class="menu"
|
|
v-for="(item, index) in menuList"
|
|
:key="index"
|
|
@click="handleClick(item)"
|
|
>
|
|
<view
|
|
class="menu-image round"
|
|
style="height: 75rpx; width: 75rpx; padding: 18rpx"
|
|
:style="
|
|
activeType == item.id
|
|
? 'background:#f0f7fe;'
|
|
: 'background:#f6f7f8;'
|
|
"
|
|
>
|
|
<image
|
|
:src="activeType == item.id ? item.active : item.src"
|
|
mode="aspectFit"
|
|
style="height: 100%"
|
|
>
|
|
</image>
|
|
</view>
|
|
<view
|
|
class="menuName"
|
|
:style="activeType == item.id ? 'color:#5B96E9' : 'color:#808D97'"
|
|
>{{ item.name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<scroll-view
|
|
scroll-y
|
|
class="billList"
|
|
v-if="pageList && pageList.length > 0"
|
|
@scrolltolower="handleScrolltolower"
|
|
>
|
|
<!-- <list-unit
|
|
v-for="(item, index) in pageList"
|
|
:key="index"
|
|
:item="item"
|
|
:i="index"
|
|
@goDetail="goDetail"
|
|
></list-unit> -->
|
|
<view
|
|
class="card"
|
|
v-for="(item, index) in pageList"
|
|
:key="index"
|
|
@click="handleGoDetail(item)"
|
|
>
|
|
<!-- 卡片第一行数据 -->
|
|
<view class="firstTitleBox">
|
|
<!-- 左侧 -->
|
|
<p class="contentName">{{ item.BusinessProcess_Name || "-" }}</p>
|
|
</view>
|
|
<!-- 卡片第一行角标 -->
|
|
<view class="content-index">{{ index + 1 }}</view>
|
|
<!-- 卡片第二行数据 -->
|
|
<view class="secondTitleBox">
|
|
<!-- 服务区名称 -->
|
|
<p class="content-type-text">{{ item.Serverpart_Name || "-" }}</p>
|
|
</view>
|
|
<!-- 卡片第三行数据 -->
|
|
<view
|
|
class="thirdTitleBox"
|
|
:style="{ color: item.BillState === 1 ? '' : 'red' }"
|
|
>
|
|
{{ item.BillState === 1 ? "已提单" : "未提单" }}
|
|
</view>
|
|
<!-- 第四行数据 -->
|
|
<view class="fourthTitleBox">
|
|
<view
|
|
class="leftContent"
|
|
:style="{ color: item.PaymentTerms === 1 ? 'red' : '' }"
|
|
>
|
|
{{
|
|
item.PaymentTerms === 1
|
|
? "收款"
|
|
: item.PaymentTerms === 0
|
|
? "退款"
|
|
: "-"
|
|
}}
|
|
</view>
|
|
<view class="rightContent">
|
|
{{
|
|
item.BusinessProcess_StartDate
|
|
? $moment(item.BusinessProcess_StartDate).format("YYYY/MM/DD")
|
|
: ""
|
|
}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 底部提示 -->
|
|
<view class="load-more" v-if="pageList.length > 0">
|
|
<text>{{
|
|
!pageMsg.isOver ? "正在加载,请稍后..." : "——— 我是有底线的 ———"
|
|
}}</text>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- 无数据时的页面显示 -->
|
|
<view v-else>
|
|
<noFound
|
|
:nodata="pageList && pageList.length > 0 ? false : true"
|
|
:text="'暂无数据'"
|
|
>
|
|
<!-- <text name="other">请选择其它日期进行查询。</text> -->
|
|
</noFound>
|
|
</view>
|
|
|
|
<uni-popup
|
|
:show="showPop"
|
|
@hidePopup="closePop"
|
|
type="bottom"
|
|
@touchmove.prevent
|
|
round="true"
|
|
>
|
|
<view class="pop">
|
|
<p class="title">服务区名称</p>
|
|
<picker
|
|
class="title-clock"
|
|
mode="selector"
|
|
@change="pickerChange"
|
|
:value="pickerIndex"
|
|
range-key="label"
|
|
:range="severpartList"
|
|
>
|
|
<view class="box-center-title">{{
|
|
severpartList[pickerIndex].label
|
|
}}</view>
|
|
</picker>
|
|
<p class="title" style="margin-top: 20px">日期</p>
|
|
<view class="selectTime">
|
|
<picker
|
|
class="time"
|
|
mode="date"
|
|
@change="handlechangeTime($event, 0)"
|
|
>
|
|
<text>{{ "请选择开始时间" }}</text>
|
|
</picker>
|
|
-
|
|
<picker
|
|
class="time"
|
|
style="text-align: right"
|
|
mode="date"
|
|
@change="handlechangeTime($event, 1)"
|
|
>
|
|
<text>{{ "请选择结束时间" }}</text>
|
|
</picker>
|
|
</view>
|
|
<view class="popbtn" @click="reloadList">确定</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
pageMsg: {
|
|
pageSize: 10,
|
|
pageIndex: 1,
|
|
isOver: false,
|
|
}, // 列表查询条件
|
|
searchText: "", // 业务名称搜索
|
|
BillState: "", // 提单状态 1 已提单 0 未提单
|
|
pageList: [], // 数据值
|
|
activeType: 0, // 选择的提单
|
|
menuList: [
|
|
{
|
|
name: "全部",
|
|
src: "https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yifq.png",
|
|
active:
|
|
"https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yifqz.png",
|
|
id: 0,
|
|
},
|
|
{
|
|
name: "已提单",
|
|
src: "https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shenp.png",
|
|
active:
|
|
"https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shenpz.png",
|
|
id: 1,
|
|
},
|
|
{
|
|
name: "未提单",
|
|
src: "https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yichl.png",
|
|
active:
|
|
"https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yichlz.png",
|
|
id: 2,
|
|
},
|
|
],
|
|
isFirst: true, // 是第一次
|
|
};
|
|
},
|
|
onLoad() {
|
|
// 请求列表数据
|
|
this.handleGetList();
|
|
},
|
|
onShow() {
|
|
if (!this.isFirst) {
|
|
this.handleGetList();
|
|
}
|
|
if (this.isFirst) {
|
|
this.isFirst = false;
|
|
}
|
|
},
|
|
methods: {
|
|
// 下拉到底部 触发的事件
|
|
handleScrolltolower() {
|
|
this.pageMsg.pageIndex = this.pageMsg.pageIndex + 1;
|
|
this.handleGetList();
|
|
},
|
|
// 请求列表数据
|
|
async handleGetList() {
|
|
const req = {
|
|
SearchParameter: {
|
|
BillState: this.BillState,
|
|
BusinessProcess_State: 9000,
|
|
Operation_Type: 11,
|
|
PendState: 3,
|
|
},
|
|
keyWord: this.searchText
|
|
? { key: "BusinessProcess_Name", Value: this.searchText }
|
|
: "",
|
|
PageIndex: this.pageMsg.pageIndex,
|
|
PageSize: this.pageMsg.pageSize,
|
|
};
|
|
uni.showLoading({
|
|
title: "加载中...",
|
|
});
|
|
const data = await this.$request.$webPost(
|
|
"EShangApiMain/Finance/GetMonthAccountProinst",
|
|
req
|
|
);
|
|
console.log("list", data);
|
|
let list = data.Result_Data.List;
|
|
let oldList = [];
|
|
if (this.pageList && this.pageList.length > 0) {
|
|
oldList = this.pageList;
|
|
}
|
|
if (list && list.length > 0) {
|
|
list.forEach((item) => {
|
|
item.BusinessProcess_Name = item.BusinessProcess_Name.split("】")[1];
|
|
});
|
|
|
|
if (list.length < 10) {
|
|
this.pageMsg.isOver = true;
|
|
}
|
|
}
|
|
this.pageList = oldList.concat(list);
|
|
uni.hideLoading();
|
|
},
|
|
// 跳转去详情
|
|
handleGoDetail(obj) {
|
|
this.$util.toNextRoute(
|
|
"navigateTo",
|
|
`/pages/billOfLading/detail?id=${obj.BusinessApproval_ID}`
|
|
);
|
|
},
|
|
// 修改顶部的tab
|
|
handleClick(obj) {
|
|
this.activeType = obj.id;
|
|
this.BillState =
|
|
obj.id === 0 ? "" : obj.id === 1 ? 1 : obj.id === 2 ? "0" : "";
|
|
this.pageList = [];
|
|
this.pageMsg = {
|
|
pageSize: 10,
|
|
pageIndex: 1,
|
|
isOver: false,
|
|
};
|
|
this.handleGetList();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.menu-list {
|
|
//顶部菜单样式
|
|
width: 100%;
|
|
background-color: #fff;
|
|
flex-wrap: wrap;
|
|
}
|
|
.menu {
|
|
text-align: center;
|
|
// min-width: 185rpx;
|
|
width: calc(100% / 3);
|
|
padding: 24rpx 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.round {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.menuName {
|
|
color: #120e2b;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.menu-image {
|
|
padding: 12rpx 8rpx;
|
|
height: 80rpx;
|
|
box-sizing: border-box;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.menu-image image {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.screen-box {
|
|
background-color: #fff;
|
|
padding: 0 0rpx;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
.pop {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
text-align: left;
|
|
}
|
|
.pop .title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
.pop .title-clock {
|
|
display: inline-block;
|
|
}
|
|
.pop .selectTime {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.pop .selectTime .time {
|
|
width: 45%;
|
|
}
|
|
.pop .popbtn {
|
|
width: 639rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
background: #5b96e9;
|
|
border-radius: 8rpx;
|
|
margin: 48rpx auto 24rpx auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.billList {
|
|
width: 100%;
|
|
height: calc(100vh - 100px);
|
|
box-sizing: border-box;
|
|
padding: 20rpx 24rpx;
|
|
.card {
|
|
width: 100%;
|
|
box-shadow: 0 0px 6rpx #e2e2e2;
|
|
box-sizing: border-box;
|
|
padding: 24rpx;
|
|
background: #fff;
|
|
position: relative;
|
|
margin-bottom: 24rpx;
|
|
.firstTitleBox {
|
|
width: 100%;
|
|
.contentName {
|
|
width: calc(100% - 48rpx);
|
|
font-size: 28rpx;
|
|
// height: 54rpx;
|
|
margin-left: 36rpx;
|
|
color: #333333;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2; /* 设置显示的行数 */
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
.secondTitleBox {
|
|
.content-type-text {
|
|
color: #686868;
|
|
padding-left: 38rpx;
|
|
font-size: 22rpx;
|
|
line-height: 1.6;
|
|
max-width: 306rpx;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.thirdTitleBox {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 12rpx;
|
|
font-size: 18px;
|
|
line-height: 50px;
|
|
margin: 0 4px;
|
|
border-bottom: 2rpx solid #eee;
|
|
}
|
|
|
|
.fourthTitleBox {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 24rpx;
|
|
.leftContent {
|
|
color: #686868;
|
|
font-size: 24rpx;
|
|
}
|
|
.rightContent {
|
|
color: #686868;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
.content-index {
|
|
width: 42rpx;
|
|
height: 32rpx;
|
|
color: #fff;
|
|
background-color: #fb8b56;
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
left: -4rpx;
|
|
top: 30rpx;
|
|
box-shadow: 4rpx 4rpx 2rpx 0 rgba(238, 112, 27, 0.5);
|
|
}
|
|
}
|
|
}
|
|
</style> |