纸板小程序：订单/送货单：列表与详情功能
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,238 @@
|
||||
.page-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background: #ebebeb;
|
||||
// background: linear-gradient( 135deg, #ca7d79 0%, #c5140a 30%, #c5140a 50%, #ca7d79 100%);
|
||||
}
|
||||
.sreach_module {
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx;
|
||||
background-color: #ffffff;
|
||||
// border-radius: 15rpx;
|
||||
// border-bottom: 1px solid #c5140a;
|
||||
// padding: ;
|
||||
.sreach_input_warp {
|
||||
width: 100%;
|
||||
.input_view {
|
||||
width: 100%;
|
||||
.t-input {
|
||||
border: 1px solid #ffffff;
|
||||
transition: all .5s;
|
||||
}
|
||||
}
|
||||
.custon_status {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 60rpx;
|
||||
overflow: hidden;
|
||||
.custom_view {
|
||||
color: #c5140a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 20rpx;
|
||||
// font-weight: bold;
|
||||
.custom_name {
|
||||
margin-left: 10rpx;
|
||||
.t-dropdown-menu__title {
|
||||
color: #c5140a !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.status_view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.status_name {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
// font-weight: bold;
|
||||
// color: #c5140a;
|
||||
}
|
||||
}
|
||||
.date {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.date_item {
|
||||
display: flex;
|
||||
width: 48%;
|
||||
.date_label {
|
||||
min-width: 30%;
|
||||
font-size: 26rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.date_input {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .custom_view {
|
||||
// width: 19%;
|
||||
// }
|
||||
// .status_view {
|
||||
// width: 19%;
|
||||
// }
|
||||
}
|
||||
}
|
||||
.show_btn {
|
||||
width: 120rpx;
|
||||
font-size: 22rpx;
|
||||
color: #ffffff;
|
||||
background-color: #c5140a;
|
||||
border-radius: 15rpx;
|
||||
margin: 15rpx 0 0 20rpx;
|
||||
height: 46rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all .5s;
|
||||
}
|
||||
.show_btn_hide {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
margin: 0 0 0 20rpx;
|
||||
overflow: hidden;
|
||||
transition: all .5s;
|
||||
}
|
||||
.count {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
margin-top: 15rpx;
|
||||
border-radius: 15rpx;
|
||||
background-color: #ffffff;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
text-align: center;
|
||||
// padding: 10rpx 0;
|
||||
height: 204rpx;
|
||||
position: relative;
|
||||
transition: all .5s;
|
||||
.hide_btn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
font-size: 22rpx;
|
||||
padding: 8rpx 6rpx;
|
||||
color: #ffffff;
|
||||
background-color: #c5140a;
|
||||
border-radius: 0 15rpx 0 15rpx;
|
||||
}
|
||||
.stock,.poduce {
|
||||
width: 50%;
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.value {
|
||||
font-size: 28rpx;
|
||||
color: #c5140a;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
.value {
|
||||
height: 38.4rpx;
|
||||
}
|
||||
}
|
||||
.hide_count_view {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
margin: 0 0 0 20rpx;
|
||||
overflow: hidden;
|
||||
transition: all .5s;
|
||||
}
|
||||
.content_warp {
|
||||
height: 100%;
|
||||
// margin-top: 10rpx;
|
||||
.data_list {
|
||||
width: 100%;
|
||||
// height: calc(100vh - 665rpx);
|
||||
margin-top: 15rpx;
|
||||
transition: all .5s;
|
||||
// background-color: #c5140a;
|
||||
.data_item {
|
||||
width: 95%;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 15rpx;
|
||||
border-radius: 15rpx;
|
||||
background-color: #ffffff;
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
position: relative;
|
||||
.item_code {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
.status {
|
||||
font-size: 26rpx;
|
||||
padding: 10rpx 25rpx;
|
||||
border-radius: 0 15rpx 0 15rpx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
// color: #c5130a20;
|
||||
}
|
||||
}
|
||||
.item_material {
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
.item_details {
|
||||
text {
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
}
|
||||
.time {
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.input_view .t-icon-base {
|
||||
color: #9da4b0;
|
||||
transition: all .5s;
|
||||
}
|
||||
.t-input__wrap {
|
||||
position: relative;
|
||||
right: 2%;
|
||||
}
|
||||
.input_focus {
|
||||
border: 1px solid #c5140a !important;
|
||||
transition: all .5s !important;
|
||||
.t-icon-base {
|
||||
color: #c5140a !important;
|
||||
transition: all .5s;
|
||||
}
|
||||
}
|
||||
.t-dropdown-menu__item--active {
|
||||
color: #c5140a !important;
|
||||
}
|
||||
.t-radio__icon--checked {
|
||||
color: #c5140a !important;
|
||||
}
|
||||
.t-dropdown-menu::after {
|
||||
background: #ffffff !important;
|
||||
}
|
||||
.not_data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 150rpx;
|
||||
.text {
|
||||
color: #c5140a;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
.custom_name_drop {
|
||||
.t-icon-base {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
// utils/app.ts.ts
|
||||
import { getMonthDay } from '../../utils/util'
|
||||
import { getCardBoardOrderDeliveryList } from '../../api/index'
|
||||
import { getAppInstance } from '../../utils/app';
|
||||
const app = getAppInstance();
|
||||
|
||||
// const userInfo = wx.getStorageSync('userInfo');
|
||||
// const devicecode = wx.getStorageSync('devicecode');
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
date_field: '',
|
||||
s_date: '',
|
||||
e_date: '',
|
||||
search_input_focus: false,
|
||||
customerId: 0,
|
||||
searchTxt: '',
|
||||
sDateVisible: false,
|
||||
startDate: '',
|
||||
list: [],
|
||||
showCount: true,
|
||||
totalData: {},
|
||||
customerList: [],
|
||||
pageNumber: 1, // 当前页码
|
||||
pageSize: 20, // 每页数量
|
||||
hasMore: true, // 是否还有更多数据
|
||||
loading: false, // 是否正在加载（防止重复请求）
|
||||
isCust: false //是否为客户账号，限制仅可查看本身的订单
|
||||
},
|
||||
hideCount() {
|
||||
this.setData({
|
||||
showCount: false
|
||||
})
|
||||
},
|
||||
showCount() {
|
||||
this.setData({
|
||||
showCount: true
|
||||
})
|
||||
},
|
||||
// 触底事件
|
||||
onScrollToLower() {
|
||||
// 防止重复加载 & 无更多数据
|
||||
if (this.data.loading || !this.data.hasMore) return
|
||||
|
||||
this.setData({ loading: true,pageNumber: this.data.pageNumber + 1 })
|
||||
wx.nextTick(() => {
|
||||
this.getOrderList(true);
|
||||
})
|
||||
},
|
||||
// 跳转订单详情
|
||||
toOrderDetail(e) {
|
||||
const id = e.currentTarget.dataset.id;
|
||||
wx.navigateTo({
|
||||
url: `/pages/cardBoardOrderDeliveryDetail/cardBoardOrderDeliveryDetail?id=${id}`
|
||||
})
|
||||
},
|
||||
// 日期相关
|
||||
showPicker(e) {
|
||||
const field = e.currentTarget.dataset.field;
|
||||
this.setData({ sDateVisible: true, date_field: field });
|
||||
},
|
||||
onCancel() {
|
||||
this.setData({ sDateVisible: false });
|
||||
},
|
||||
// 选择日期
|
||||
onConfirm(e) {
|
||||
const { value } = e.detail;
|
||||
this.setData({ [this.data.date_field]: value,sDateVisible: false });
|
||||
this.getOrderList(false);
|
||||
},
|
||||
// 关键词搜索
|
||||
handleSearchTxtChange(e) {
|
||||
const { value } = e.detail;
|
||||
this.setData({ searchTxt: value });
|
||||
},
|
||||
// 切换客户
|
||||
onCustChange(e) {
|
||||
this.setData({
|
||||
customerId: e.detail.value,
|
||||
});
|
||||
this.getOrderList(false);
|
||||
},
|
||||
// 搜索输入框焦点事件
|
||||
inputFocus() {
|
||||
this.setData({
|
||||
search_input_focus: true
|
||||
})
|
||||
},
|
||||
inputBlur() {
|
||||
this.setData({
|
||||
search_input_focus: false
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {
|
||||
const days = getMonthDay();
|
||||
const userInfo = wx.getStorageSync('userInfo');
|
||||
this.setData({
|
||||
s_date: days[0],
|
||||
e_date: days[1],
|
||||
customerId: userInfo.custid?userInfo.custid:0,
|
||||
customerList: app.globalData.customerList,
|
||||
date_field: 's_date',
|
||||
isCust: userInfo.custid?true:false,
|
||||
})
|
||||
this.getOrderList(false);
|
||||
|
||||
},
|
||||
|
||||
async getOrderList(isLoadMore: Boolean) {
|
||||
try {
|
||||
wx.showLoading({ title: '加载中' });
|
||||
const { searchTxt, pageNumber, pageSize, s_date, e_date, customerId }= this.data;
|
||||
const filterStr = {};
|
||||
if (s_date || e_date) {
|
||||
filterStr.createtime = [(s_date?'#>=#' + s_date:''),(e_date?'#<=#' + e_date:'')]
|
||||
}
|
||||
if (customerId) {
|
||||
filterStr.custid = '#IN#' + customerId;
|
||||
}
|
||||
const params = {
|
||||
pageNumber,
|
||||
pageSize,
|
||||
searchTxt,
|
||||
screenStr: JSON.stringify(filterStr)
|
||||
};
|
||||
const res = await getCardBoardOrderDeliveryList(params).catch( () => {});
|
||||
if (res.statusCode === 200) {
|
||||
const dataList = res.data.list.map( item => {
|
||||
item.createtime = item.createtime.replace('T', ' ');
|
||||
if (item.custcode) {
|
||||
const obj = app.globalData.customerList.find( item2 => item2.code == item.custcode);
|
||||
item.customName = obj?obj.name:'';
|
||||
}
|
||||
if (item.listDetail) {
|
||||
item.totalSquaNum = item.listDetail.reduce((total,obj) => total + ((obj.wide * obj.long / 10000) * obj.num),0)?.toFixed(2);
|
||||
}
|
||||
if (item.delitime) {
|
||||
item.delitime = item.delitime.split('T').join(' ');
|
||||
}
|
||||
|
||||
return item;
|
||||
})
|
||||
let totalData = res.data.totalData;
|
||||
for (const key in totalData) {
|
||||
const val = totalData[key];
|
||||
// 是数字 且 不是整数（有小数点）
|
||||
if (typeof val === 'number' && !Number.isInteger(val)) {
|
||||
totalData[key] = val.toFixed(2); // 字符串类型，如 "3.14"
|
||||
}
|
||||
}
|
||||
this.setData({
|
||||
hasMore: this.data.list.length + this.data.pageSize >= res.data.searchListResourceParamaters.total?false:true,
|
||||
loading: false,
|
||||
list: isLoadMore == true?[...this.data.list,...dataList]: dataList,
|
||||
totalData: res.data.totalData || {}
|
||||
});
|
||||
} else {
|
||||
wx.showToast({ title: '数据加载失败', icon: 'none' });
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
wx.showToast({ title: '系统错误', icon: 'none' });
|
||||
} finally {
|
||||
wx.hideLoading();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,141 @@
|
||||
<!--index.wxml-->
|
||||
<navigation-bar title="纸板送货单" back="{{false}}" color="white" background="#c5140a"></navigation-bar>
|
||||
<view class="page-container">
|
||||
<view class="sreach_module">
|
||||
<view class="sreach_input_warp">
|
||||
<!-- <view class="input_view">
|
||||
<t-input
|
||||
class="{{search_input_focus?'input_focus':''}}"
|
||||
0 value="{{searchTxt}}"
|
||||
placeholder-style="color: #9da4b0"
|
||||
placeholder="纸质/切长/备注"
|
||||
bind:change="handleSearchTxtChange"
|
||||
cursor-spacing="30"
|
||||
prefixIcon="search"
|
||||
bind:focus="inputFocus"
|
||||
bind:blur="inputBlur"
|
||||
style="border-radius: 200rpx;height: 25rpx;background-color: #f9fafb;padding-right: 20rpx;border: 1px solid #ffffff;"
|
||||
>
|
||||
<t-button bind:tap="getOrderList" slot="extra" theme="danger" size="extra-small" style="background-color: #c5140a; border-radius: 200px;width: 120rpx;"> 搜索 </t-button>
|
||||
</t-input>
|
||||
</view> -->
|
||||
<view class="custon_status">
|
||||
<view class="custom_view">
|
||||
<t-icon name="user-business-filled" size="40rpx" style="color: #c5140a; position: relative; left: 10rpx;"></t-icon>
|
||||
<view class="custom_name">
|
||||
<t-dropdown-menu class="{{isCust?'custom_name_drop':''}}">
|
||||
<t-dropdown-item
|
||||
options="{{customerList}}"
|
||||
placement="right"
|
||||
disabled="{{isCust}}"
|
||||
value="{{customerId}}"
|
||||
bindchange="onCustChange"
|
||||
/>
|
||||
</t-dropdown-menu>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="status_view">
|
||||
<t-dropdown-menu>
|
||||
<t-dropdown-item options="{{statusOptions}}" placement="right" value="{{status}}" bindchange="onChange" />
|
||||
</t-dropdown-menu>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="date">
|
||||
<view class="date_s date_item">
|
||||
<view class="date_label">起始日期</view>
|
||||
<view class="date_input">
|
||||
<t-input
|
||||
value="{{s_date}}"
|
||||
data-field="s_date"
|
||||
placeholder-style="color: #b7b7b7;font-size: 26rpx;"
|
||||
placeholder="请选择日期"
|
||||
cursor-spacing="30"
|
||||
readonly="{{true}}"
|
||||
bind:tap="showPicker"
|
||||
style="border-radius: 20rpx;height: 20rpx;background-color: #f9fafb;padding: 20rpx 30rpx;"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="date_e date_item">
|
||||
<view class="date_label">终止日期</view>
|
||||
<view class="date_input">
|
||||
<t-input
|
||||
value="{{e_date}}"
|
||||
data-field="e_date"
|
||||
placeholder-style="color: #b7b7b7;font-size: 26rpx;"
|
||||
placeholder="请选择日期"
|
||||
cursor-spacing="30"
|
||||
readonly="{{true}}"
|
||||
bind:tap="showPicker"
|
||||
style="border-radius: 20rpx;height: 20rpx;background-color: #f9fafb;padding: 20rpx 30rpx;"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="show_btn {{showCount?'show_btn_hide':''}}" bind:tap="showCount">显示统计</view>
|
||||
<view class="count {{showCount?'':'hide_count_view'}}">
|
||||
<view style="display: flex;justify-content: space-between;padding-top: 10rpx;">
|
||||
<view class="stock">
|
||||
<view class="title">总数量</view>
|
||||
<view class="value">{{totalData.TotalNum}}</view>
|
||||
</view>
|
||||
<view class="stock">
|
||||
<view class="title">总价格</view>
|
||||
<view class="value">{{totalData.TotalMoney}}</view>
|
||||
</view>
|
||||
<view class="stock">
|
||||
<view class="title">总单数</view>
|
||||
<view class="value">{{totalData.TotalOrderNum}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;justify-content: center; margin-top: 20rpx;">
|
||||
<view class="poduce">
|
||||
<view class="title">总面积</view>
|
||||
<view class="value">{{totalData.TotalSquaNum}}㎡</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="hide_btn" bind:tap="hideCount">隐藏</view>
|
||||
</view>
|
||||
<view class="content_warp">
|
||||
<scroll-view class="data_list" style="height: {{showCount?'calc(100vh - 580rpx);':'calc(100vh - 420rpx);'}}"
|
||||
scroll-y="{{list.length != 0}}" bindscrolltolower="onScrollToLower" lower-threshold="100">
|
||||
<view class="data_item" wx:for="{{list}}" wx:key="id" data-id="{{item.id}}" bind:tap="toOrderDetail">
|
||||
<view class="item_code">
|
||||
<view class="code">
|
||||
{{'订单编号：'+item.code}}
|
||||
</view>
|
||||
<view class="cutomer">
|
||||
{{item.customName}}
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;justify-content: space-between;align-items: center;margin: 20rpx 0;">
|
||||
<view class="item_material" style="min-width: 25%;max-width: 25%">{{'总数量：' + item.totalnum}}</view>
|
||||
<view class="item_spec" style="min-width: 35%;max-width: 35%">{{'总平方数：' + item.totalSquaNum}}</view>
|
||||
<view class="item_line" style="min-width: 35%;max-width: 35%">{{'总金额：' }}<text style="color: #c5140a;">{{item.totalmoney}}</text></view>
|
||||
</view>
|
||||
<view class="remark">{{'备注：' + item.remark}}</view>
|
||||
<view class="time">{{item.delitime}}</view>
|
||||
</view>
|
||||
<view class="not_data" wx:if="{{list.length == 0}}" >
|
||||
<image src="../../assets/images/not_data.png" mode="widthFix" style="width: 400rpx"/>
|
||||
<view class="text">暂无送货单数据</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="piker">
|
||||
<t-date-time-picker
|
||||
visible="{{sDateVisible}}"
|
||||
title=""
|
||||
value="{{date_field == 's_date'?s_date:e_date}}"
|
||||
mode="date"
|
||||
format="YYYY-MM-DD"
|
||||
bindconfirm="onConfirm"
|
||||
bindcancel="onCancel"
|
||||
confirm-btn="确认"
|
||||
cancel-btn="取消"
|
||||
start="{{'1900-01-01'}}"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user