From 0e555ff7887e46c5bdd9d8ca237f7ed1e1634c0f Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期三, 24 九月 2025 13:53:55 +0800
Subject: [PATCH] 优化
---
h5/pages/waybill/list.vue | 365 +++++++++++++++++++++++++++++++++-------------------
1 files changed, 231 insertions(+), 134 deletions(-)
diff --git a/h5/pages/waybill/list.vue b/h5/pages/waybill/list.vue
index 625f111..26406b0 100644
--- a/h5/pages/waybill/list.vue
+++ b/h5/pages/waybill/list.vue
@@ -1,46 +1,55 @@
<template>
- <view class="main_app">
- <view class="head_wrap">
+ <view class="main_app">
+ <view class="title_wrap">
+ <view class="name">{{ waybillInfo.realname || waybillInfo.username || waybillInfo.mobile }}锛屾杩庣櫥褰曪綖</view>
+ <view class="btn" @click="loginOut">璐﹀彿瑙ｇ粦</view>
+ </view>
+ <view class="head_wrap" @click="openModal">
<view class="search_box">
<image src="@/static/ic_search@2x.png" class="search" mode=""></image>
- <input type="text" placeholder-class="placeholder9" v-model="param.name" @confirm="handleQuery" />
+ <!-- <input type="text" disabled placeholder-class="placeholder9" v-model="param.contractNumber" @confirm="handleQuery" /> -->
</view>
- <view class="right" @click="openModal">
+ <view class="right">
<image src="@/static/ic_shaixuan@2x.png" mode=""></image>
<text>绛涢��</text>
</view>
- </view>
+ </view>
+ <view @click="diaodu" class="head_title">鍒嗕腑蹇冭皟搴﹁仈绯绘柟寮�</view>
<!-- -->
- <view class="main_list">
- <view class="item" v-for="item,index in list" :key="index">
- <view class="head">
- <view class="code">{{item.contractNumber}}</view>
- <view class="status">{{item.orderStatus}}</view>
- </view>
- <view class="content">
- <view class="line">
- <view class="la">鍙戣揣鍦帮細</view>
- <view class="val">{{item.fromRepertoty || '-'}}</view>
+ <scroll-view scroll-y="true" class="scroll_Y" @scrolltolower="scrolltolower">
+ <view class="main_list">
+ <view class="item" v-for="item,index in list" :key="index">
+ <view class="head"
+ :style="{ backgroundColor: item.orderStatus === 9 ? 'linear-gradient(270deg, #FEFEFF 0%, #FEE1E1 100%)' : 'linear-gradient(270deg, #FEFEFF 0%, #E1F7FE 100%)' }">
+ <view class="code">{{item.contractNumber}}</view>
+ <view :class="item.orderStatus === 9 ? 'error' : 'status'">{{item.orderStatusDesc }}</view>
</view>
- <view class="line">
- <view class="la">鍒拌揣鍦帮細</view>
- <view class="val">{{item.toRepertoty || '-'}}</view>
+ <view class="content">
+ <view class="line">
+ <view class="la">鍙戣揣鍦帮細</view>
+ <view class="val">{{item.fromRepertoty || item.deliveryEnterprise || '-'}}</view>
+ </view>
+ <view class="line">
+ <view class="la">鍒拌揣鍦帮細</view>
+ <view class="val">{{item.toRepertoty || item.receiveEnterprise || '-'}}</view>
+ </view>
+ <view class="line">
+ <view class="la">杞︾墝鍙凤細</view>
+ <view class="val">{{item.plateNumber || item.plateName || '-'}}</view>
+ </view>
</view>
- <view class="line">
- <view class="la">杞︾墝鍙凤細</view>
- <view class="val">{{item.plateNumber || '-'}}</view>
+ <view class="footer">
+ <view class="time">{{item.ncCreateDate}}</view>
+ <view class="detail" @click="handleDetail(item)">鏌ョ湅璇︽儏</view>
</view>
</view>
- <view class="footer">
- <view class="time">{{item.ncCreateDate}}</view>
- <view class="detail" @click="handleDetail(item)">鏌ョ湅璇︽儏</view>
+ <view v-if="list.length === 0" style="text-align: center">
+ <image src="@/static/empty.png" style="width: 320rpx; margin: 120px auto 0" mode="widthFix" />
+ <view class="placeholder9 fs24">鏆傛棤鏁版嵁</view>
</view>
</view>
- <view v-if="list.length === 0" style="text-align: center">
- <image src="@/static/empty.png" style="width: 320rpx; margin: 120px auto 0" mode="widthFix" />
- <view class="placeholder9 fs24">鏆傛棤鏁版嵁</view>
- </view>
- </view>
+ </scroll-view>
+
<!-- -->
<u-popup :show="showModal" round="12" @close="showModal = false">
<view class="modal">
@@ -48,62 +57,65 @@
<view class="line">
<view class="la">鍚堝悓鍙�</view>
<view class="val">
- <input type="text" placeholder-class="placeholder9" v-model="form.contract" />
+ <input type="text" placeholder-class="placeholder9" v-model="form.contractNumber" />
</view>
</view>
<view class="line">
<view class="la">鍒跺崟寮�濮嬫棩鏈�</view>
<view class="val" @click="showStarttime = true">
<text class="mr12"
- :class="{placeholder9: !form.starttime}">{{ form.starttime ? form.starttime : '璇烽�夋嫨' }}</text>
+ :class="{placeholder9: !form.ncCreateDateTimeStart}">{{ form.ncCreateDateTimeStart ? form.ncCreateDateTimeStart : '璇烽�夋嫨' }}</text>
<u-icon name="arrow-right" size="14" color="#999999"></u-icon>
</view>
</view>
<view class="line">
<view class="la">鍒跺崟缁撴潫鏃ユ湡</view>
<view class="val" @click="showEndtime = true">
- <text class="mr12" :class="{placeholder9: !form.endtime}">{{ form.endtime ? form.endtime : '璇烽�夋嫨' }}</text>
+ <text class="mr12"
+ :class="{placeholder9: !form.ncCreateDateTimeEnd}">{{ form.ncCreateDateTimeEnd ? form.ncCreateDateTimeEnd : '璇烽�夋嫨' }}</text>
<u-icon name="arrow-right" size="14" color="#999999"></u-icon>
</view>
</view>
<view class="line">
<view class="la">鍙戣揣鍦�</view>
<view class="val">
- <input type="text" placeholder-class="placeholder9" v-model="form.fromRepertoty" />
+ <input type="text" placeholder-class="placeholder9" v-model="form.deliveryEnterprise" />
</view>
</view>
<view class="line">
<view class="la">鍒拌揣鍦�</view>
<view class="val">
- <input type="text" placeholder-class="placeholder9" v-model="form.toRepertoty" />
+ <input type="text" placeholder-class="placeholder9" v-model="form.receiveEnterprise" />
</view>
</view>
<view class="line">
<view class="la">鐪佷唤</view>
<view class="val" @click="showPri = true">
- <text class="mr12" :class="{placeholder9: !form.provinceName}">{{ form.provinceName ? form.provinceName : '璇烽�夋嫨' }}</text>
+ <text class="mr12"
+ :class="{placeholder9: !form.provinceName}">{{ form.provinceName ? form.provinceName : '璇烽�夋嫨' }}</text>
<u-icon name="arrow-right" size="14" color="#999999"></u-icon>
</view>
</view>
<view class="btns">
- <view class="btn" @click="showModal = false">鍙栨秷</view>
+ <view class="btn" @click="clear">鍙栨秷</view>
<view class="btn sub" @click="modalSub">鎻愪氦</view>
</view>
</view>
</u-popup>
<!-- -->
- <u-datetime-picker :show="showStarttime" v-model="form.starttime" mode="date" @confirm="confirmStart"
+ <u-datetime-picker :show="showStarttime" v-model="defaultDate" mode="date" @confirm="confirmStart"
@cancel="showStarttime = false"></u-datetime-picker>
- <u-datetime-picker :show="showEndtime" v-model="form.endtime" mode="date" @confirm="confirmEnd"
- @cancel="showEndtime = false"></u-datetime-picker>
- <u-picker :show="showPri" :columns="provinceList" @cancel="showPri = false" @confirm="confirmPro"></u-picker>
-
+ <u-datetime-picker :show="showEndtime" v-model="defaultDate2" mode="date" :minDate="defaultDate" @confirm="confirmEnd"
+ @cancel="showEndtime = false"></u-datetime-picker>
+ <u-picker :show="showPri" :columns="provinceList" @cancel="showPri = false" @confirm="confirmPro"></u-picker>
+
</view>
</template>
<script>
import {
- orderListTms
+ orderListTms,
+ logoutPost
} from '@/api'
import dayjs from 'dayjs';
export default {
@@ -113,76 +125,122 @@
list: [],
page: 1,
total: 0,
-
+
+ waybillInfo: uni.getStorageSync('waybillInfo'),
showModal: false,
showStarttime: false,
showEndtime: false,
+ defaultDate: Number(new Date()),
+ defaultDate2: Number(new Date()),
showPri: false,
form: {},
provinceList: [
[
- '瀹夊窘鐪�', '姹熻嫃鐪�', '娴欐睙鐪�', '娌冲寳鐪�', '灞辫タ鐪�', '鍖椾含', '澶╂触', '涓婃捣', '閲嶅簡', '杈藉畞鐪�', '鍚夋灄鐪�', '榛戦緳姹熺渷', '绂忓缓鐪�', '姹熻タ鐪�', '灞变笢鐪�',
- '娌冲崡鐪�', '婀栧寳鐪�', '婀栧崡鐪�', '骞夸笢鐪�', '娴峰崡鐪�', '鍥涘窛鐪�', '璐靛窞鐪�', '浜戝崡鐪�', '闄曡タ鐪�', '鐢樿們鐪�', '闈掓捣鐪�', '鍙版咕鐪�', '鍐呰挋鍙よ嚜娌诲尯', '骞胯タ澹棌鑷不鍖�',
+ '瀹夊窘', '姹熻嫃', '娴欐睙', '娌冲寳', '灞辫タ', '鍖椾含', '澶╂触', '涓婃捣', '閲嶅簡', '杈藉畞', '鍚夋灄', '榛戦緳姹�', '绂忓缓', '姹熻タ', '灞变笢',
+ '娌冲崡', '婀栧寳', '婀栧崡', '骞夸笢', '娴峰崡', '鍥涘窛', '璐靛窞', '浜戝崡', '闄曡タ', '鐢樿們', '闈掓捣', '鍙版咕', '鍐呰挋鍙よ嚜娌诲尯', '骞胯タ澹棌鑷不鍖�',
'瑗胯棌鑷不鍖�', '瀹佸鍥炴棌鑷不鍖�', '鏂扮枂缁村惥灏旇嚜娌诲尯'
]
]
};
},
- onLoad(options) {
- this.$set(this.param, 'phoneNumber', options.phone)
- this.$set(this.form, 'starttime', dayjs().format('YYYY/MM/DD'))
- const nextMonth = dayjs().add(1, 'month');
- this.$set(this.form, 'endtime', nextMonth.format('YYYY/MM/DD'))
+ onLoad(options) {
this.getList()
},
- methods: {
+ methods: {
+ clear() {
+ this.param = {}
+ this.form = {}
+ this.page = 1
+ this.list = []
+ this.showModal = false
+ this.getList()
+ },
+ diaodu() {
+ uni.navigateTo({
+ url: '/pages/staff/signin'
+ })
+ },
+ loginOut() {
+ let app_url = 'https://atwl.ahzyssl.com/zhyq_h5/#/pages/waybill/home'
+ logoutPost({
+ isH5: 1
+ }).then(res => {
+ this.$store.commit('empty')
+ setTimeout(() => {
+ window.location.href = app_url
+ }, 300)
+ })
+ },
modalSub() {
this.handleQuery()
this.showModal = false
},
openModal() {
this.showModal = true
- },
- confirmPro(e) {
- this.$set(this.form, 'provinceName', e.value[0])
- this.showPri = false
+ // this.$set(this.form, 'ncCreateDateTimeStart', dayjs().subtract(1, 'month').format('YYYY-MM-DD'))
+ // const nextMonth = dayjs().add(1, 'month');
+ // this.$set(this.form, 'ncCreateDateTimeEnd', dayjs().format('YYYY-MM-DD'))
+ },
+ confirmPro(e) {
+ this.$set(this.form, 'provinceName', e.value[0])
+ this.showPri = false
},
confirmStart(e) {
this.$nextTick(() => {
- this.$set(this.form, 'starttime', dayjs(e.value).format('YYYY/MM/DD'))
- })
+ this.$set(this.form, 'ncCreateDateTimeStart', dayjs(e.value).format('YYYY-MM-DD'))
+ })
+ this.defaultDate2 = Number(new Date())
+ this.$set(this.form, 'ncCreateDateTimeEnd', '')
this.showStarttime = false
},
confirmEnd(e) {
this.$nextTick(() => {
- this.$set(this.form, 'endtime', dayjs(e.value).format('YYYY/MM/DD'))
+ this.$set(this.form, 'ncCreateDateTimeEnd', dayjs(e.value).format('YYYY-MM-DD'))
})
this.showEndtime = false
},
handleQuery() {
+ this.page = 1
+ this.list = []
this.getList()
},
- handleDetail(item) {
- uni.navigateTo({
- url: '/pages/waybill/waybillDetail?id=' + item.contractNumber
- })
+ handleDetail(item) {
+ uni.navigateTo({
+ url: '/pages/waybill/waybillDetail?id=' + item.contractNumber
+ })
+ },
+ scrolltolower() {
+ const {
+ total,
+ list
+ } = this
+ if (list.length < total) {
+ this.page = this.page + 1
+ this.getList()
+ } else {
+ this.showToast('鏆傛棤鏇村鏁版嵁')
+ }
},
getList() {
const {
param,
- form
- } = this
- if(form.contract){
- form.contractNumber = [form.contract]
- }else{
- form.contractNumber = null
- }
+ form,
+ page
+ } = this
orderListTms({
- ...param,
- ...form
+ parameters: {
+ ...param,
+ ...form
+ },
+ pager: {
+ rows: 16,
+ page
+ }
}).then(res => {
- this.list = res.data || []
- this.total = res.data.total
+ if (res.data && res.data.rows) {
+ this.list = [...this.list, ...res.data.rows]
+ this.total = res.data.totalCount
+ }
})
}
}
@@ -192,8 +250,39 @@
<style lang="scss">
page {
background: #F7F7F7;
+ }
+ .title_wrap {
+ display: flex;
+ justify-content: space-between;
+ // align-items: center;
+ background-color: #fff;
+ width: 750rpx;
+ height: 90rpx;
+ margin: -10rpx -30rpx 0;
+ padding: 24rpx 30rpx 0;
+ .name {
+ font-weight: 600;
+ font-size: 34rpx;
+ color: #222222;
+ }
+
+ .btn {
+ width: 144rpx;
+ height: 56rpx;
+ border-radius: 36rpx;
+ border: 1rpx solid #B2B2B2;
+ font-size: 26rpx;
+ color: #666666;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
}
-
+ .head_title{
+ color: $uni-color-primary;
+ text-decoration-line: underline;
+ margin-top: 20rpx;
+ }
.head_wrap {
display: flex;
align-items: center;
@@ -236,87 +325,95 @@
}
}
- .main_list {
+ .scroll_Y {
background-color: #f7f7f7;
- width: 750rpx;
- margin: 0 -30rpx;
- padding: 24rpx 30rpx;
- height: calc(100vh - 140rpx);
+ height: calc(100vh - 250rpx);
+ margin-top: 10rpx;
+ .main_list {
+ width: 750rpx;
+ margin: 0 -30rpx;
+ padding: 24rpx 30rpx;
- .item {
- border-radius: 8rpx;
- margin-bottom: 20rpx;
- padding: 0 30rpx;
- background-color: #fff;
-
- .head {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 30rpx;
- width: 690rpx;
- height: 84rpx;
- margin: 0 -30rpx;
- background: linear-gradient(270deg, #FEFEFF 0%, #E1F7FE 100%);
-
- .code {
- font-weight: 500;
- font-size: 32rpx;
- color: #222222;
- }
-
- .status {
- color: $uni-color-primary;
- }
- }
-
- .content {
- padding: 20rpx 0rpx;
- border-bottom: 1rpx solid #E5E5E5;
+ .item {
+ border-radius: 8rpx;
margin-bottom: 20rpx;
+ padding: 0 30rpx;
+ background-color: #fff;
- .line {
+ .head {
display: flex;
- margin-bottom: 16rpx;
- font-size: 26rpx;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 30rpx;
+ width: 690rpx;
+ height: 84rpx;
+ margin: 0 -30rpx;
+ // background: linear-gradient(270deg, #FEFEFF 0%, #E1F7FE 100%);
- .la {
- color: #666666;
+ .code {
+ font-weight: 500;
+ font-size: 32rpx;
+ color: #222222;
}
- .val {}
-
- &:nth-last-child(1) {
- margin-bottom: 0;
+ .status {
+ color: $uni-color-primary;
+ }
+
+ .error {
+ color: #EE3821;
}
}
- }
- .footer {
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-size: 26rpx;
- color: #999999;
- padding-bottom: 20rpx;
+ .content {
+ padding: 20rpx 0rpx;
+ border-bottom: 1rpx solid #E5E5E5;
+ margin-bottom: 20rpx;
- .detail {
- width: 168rpx;
- height: 60rpx;
- background: #FFFFFF;
- border-radius: 30rpx;
- border: 1rpx solid $uni-color-primary;
- color: $uni-color-primary;
+ .line {
+ display: flex;
+ margin-bottom: 16rpx;
+ font-size: 26rpx;
+
+ .la {
+ color: #666666;
+ }
+
+ .val {}
+
+ &:nth-last-child(1) {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ .footer {
display: flex;
+ justify-content: space-between;
align-items: center;
- justify-content: center;
font-size: 26rpx;
+ color: #999999;
+ padding-bottom: 20rpx;
+ .detail {
+ width: 168rpx;
+ height: 60rpx;
+ background: #FFFFFF;
+ border-radius: 30rpx;
+ border: 1rpx solid $uni-color-primary;
+ color: $uni-color-primary;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 26rpx;
+
+ }
}
}
}
}
+
.modal {
.modal_title {
height: 112rpx;
--
Gitblit v1.9.3