Skip to content

J
jiedao-app-customer-new-master
Commit cb4c1a29 authored by knight's avatar knight
Browse files
Options

客户端-集运订单页面

parent 432b0abf
Hide whitespace changes
Inline Side-by-side
Showing with 648 additions and 27 deletions
src/api/my/order.js 0 → 100644
View file @ cb4c1a29
import request from '@/utils/request'
export function getOrderConsPage(param) {
return request.get('/app-api/my/order/cons/page', param);
}
src/pages.json
View file @ cb4c1a29
......@@ -367,6 +367,12 @@
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/cons_order/index",
"style": {
"navigationStyle": "custom"
}
}
],
"globalStyle": {
......
src/pages/cons/create.vue
View file @ cb4c1a29
......@@ -510,8 +510,6 @@ export default {
},
submitForm() {
console.log({...this.form})
if (this.form.id > 0){
// 更新包裹
updateCons({...this.form}).then(res =>{
......@@ -541,8 +539,9 @@ export default {
if (!res.confirm) {
// 用户点击取消则返回首页
uni.navigateTo({
url: '../index/index'
url: '../cons/index'
})
return;
}
// 用户点击确定，停留在当前页面并清空数据
uni.navigateTo({
......
src/pages/cons/index.vue
View file @ cb4c1a29
......@@ -3,7 +3,7 @@
<!-- 标题栏 -->
<view class="header-toper">
<view class="header-toper-title">
<image src="../../static/img/back.png" mode="" @click="goBack"></image>
<image src="../../static/img/back.png" mode="" @click="navigateTo('../index/index')"></image>
<text>{{ $lang.lang.cons.myConsPackage }}</text>
<image src="../../static/img/add_white.png" @click="navigateTo('/pages/cons/create')"></image>
</view>
......@@ -11,15 +11,14 @@
<!-- 内容主体 -->
<view class="container">
<!-- 操作按钮 -->
<view class="item-label">
<view class="opt-btn-group">
<u-button type="warning" @tap="navigateTo('../cons/address')" class="opt-btn"
:text="$lang.lang.cons.address"></u-button>
<u-button type="error" @tap="navigateTo('address')" class="opt-btn"
<u-button type="error" @tap="navigateTo('../cons_order/index')" class="opt-btn"
:text="$lang.lang.cons.turnOnWaitConfirm"></u-button>
<u-button type="primary" @tap="navigateTo('address')" class="opt-btn"
<u-button type="primary" @tap="navigateTo('../cons_order/index')" class="opt-btn"
:text="$lang.lang.cons.consOrder"></u-button>
</view>
</view>
......@@ -109,7 +108,7 @@
</view>
<!-- 列表内容栏 -->
<view class="item-label" v-for="item in data">
<view class="item-label" v-for="item in data" @tap="navigateTo('../cons/detail?id=' + item.id)">
<view class="cons-list">
<!-- 第一行 -->
<u-row class="cons-list-row">
......@@ -119,7 +118,7 @@
<span style="font-weight: bold;color: red;width: 50px;margin-left: 20upx;" v-if="consStatus[item.status]">
{{consStatus[item.status].label }}
</span>
<image src="../../static/img/copy.png" @click="copyToClipboard('sf1232323333333333333333445')"
<image src="../../static/img/copy.png" @click.stop="copyToClipboard(item.expressNo)"
style="width: 35upx;height: 35upx;margin-left: 10upx"></image>
</span>
</u-col>
......@@ -127,7 +126,7 @@
<div>
<!-- 编辑按钮 -->
<image src="../../static/img/edit.png" style="width: 40upx;height: 40upx;"
@tap="navigateTo('/pages/cons/create?id=' + item.id)"></image>
@tap.stop="navigateTo('/pages/cons/create?id=' + item.id)"></image>
<image src="../../static/img/delete_pail.png" style="width: 40upx;height: 40upx;"></image>
</div>
</u-col>
......@@ -193,7 +192,7 @@
</u-col>
<u-col span="3">
<u-button v-if="item.consMedia.length > 0" type="primary" size="mini"
@click="imageToggle('dialog',item.consMedia)" style="width: 60upx"
@click.stop="imageToggle('dialog',item.consMedia)" style="width: 60upx"
text="签收图片"></u-button>
</u-col>
<u-col span="4">
......@@ -260,13 +259,14 @@ export default {
// 列表数据
data: [],
total: 0,
// 字典配置值
config: [],
// 包裹状态键值对结构
consStatus: [],
transportType: [],
// 包裹状态分段器列表
consStatusSubsectionList: [],
// 包裹状态列表
// 包裹状态多选框列表
consStatusList: [],
// 近期月份选择内容
timeOptions: [
......@@ -291,12 +291,17 @@ export default {
contentrefresh: '加载中',
contentnomore: '没有更多数据了'
},
// 进入页面默认选择已签收状态的数据
// 分段器选择值，进入页面默认选择已签收状态的数据
curNow: 1,
}
},
onLoad() {
onLoad(option) {
if (option.orderNo !== undefined){
// 如果从其它页面带入搜索条件则不限定状态的搜索条件
this.queryParams.orderNo = option.orderNo
this.queryParams.status = null;
}
// 初始化页面数据
this.initData();
},
......@@ -336,7 +341,10 @@ export default {
// 数据处理
this.processConfigData('consStatus')
this.processConfigData('transportType')
if (this.queryParams.orderNo !== ''){
// 初始化完数据后如果有订单编号搜索条件则选中全部
this.curNow = this.consStatusSubsectionList.length - 1;
}
} catch (error) {
console.error('初始化数据失败:', error);
}
......@@ -375,9 +383,12 @@ export default {
}
},
/**
* 搜索按钮
*/
handleSearch() {
this.queryParams.page = 1;
this.queryParams.total = 0;
this.total = 0;
this.data = [];
this.getData();
},
......@@ -396,11 +407,13 @@ export default {
this.consStatusSubsectionList.push({
name: item.label
})
// 组装包裹状态多选框内容
this.consStatusList.push({
text: item.label,
value: item.value,
})
});
// 在分段器最后添加一个全部选项
this.consStatusSubsectionList.push({
name: '全部'
})
......@@ -423,7 +436,7 @@ export default {
},
/**
* 组装填单数据字符串
* 把填单数据转为字符串
*/
handleConsProduct(consItem) {
const items = consItem ?? [];
......@@ -438,7 +451,7 @@ export default {
},
/**
* 设置搜索日期
* 根据选择近期日期设置搜索日期
*/
setDate(e) {
const startDate = new Date();
......@@ -461,7 +474,6 @@ export default {
*/
handleInspectionData(item) {
let inspection = {};
inspection = item.reduce((acc, item) => {
acc.inspectionNum += item.inspectionNum || 0;
acc.inspectionVolume += item.inspectionVolume || 0;
......@@ -472,7 +484,6 @@ export default {
inspectionVolume: 0,
inspectionWeight: 0,
});
return inspection.inspectionNum + '箱 ' + inspection.inspectionVolume + 'm³ ' + inspection.inspectionWeight + 'kg'
},
......@@ -486,12 +497,17 @@ export default {
this.getData();
},
/**
* 开始时间赋值
*/
selectStartDate(e) {
this.queryParams.beginCreateTime = e.detail.value
// 如果手动选择了日期则清空近期时间按钮
this.queryParams.pastMonthsDate = '';
},
/**
* 结束时间赋值
*/
selectEndDate(e) {
this.queryParams.endCreateTime = e.detail.value
// 如果手动选择了日期则清空近期时间按钮
......@@ -549,10 +565,12 @@ export default {
})
},
/**
* 包裹状态多选框自定义逻辑
*/
handleCheckStatus(e){
// 此处逻辑：如果在checkbox框中只选择一个状态去查询则使用分段器的状态值去查询且选中分段器
// 此处逻辑：如果在checkbox框中只选择一个状态去查询则使用分段器的状态值去查询且选中分段器对应的值
// 如果选择两个以上则用statusList字段查询且分段器选中全部
// 如果取消选择要
if (e.detail.data.length === 1){
// 如果只选择了一个状态搜索则不使用statusList列表查询，直接使用status字段查询
this.queryParams.status = e.detail.value[0]
......@@ -569,19 +587,18 @@ export default {
/**
* 分段器的选择事件
* @param index
*/
sectionChange(index) {
this.curNow = index;
// 设置状态
this.queryParams.status = index;
// 由于组件的index值只能从0开始，所以当获取出来的状态列表数量大于index的时候表示手动添加的值
// 如果状态值不是从0开始的连续值，这段代码需要重新修改
// 如果包裹状态值不是从0开始的连续值，这段代码需要重新修改
if (index > this.config['consStatus'].length - 1){
// 状态为全部是手动添加的值，设置搜索状态为null表示查询所有数据
this.queryParams.status = null;
}
// 触发搜索请求数据
// 触发查询请求数据
this.handleSearch();
}
}
......
src/pages/cons_order/index.vue 0 → 100644
View file @ cb4c1a29
<template>
<view>
<view class="header-toper">
<view class="start-bar"></view>
<view class="header-toper-title">
<image src="../../static/img/back.png" mode="" @click="handleBack"></image>
<text>我的集运订单</text>
</view>
</view>
<view class="container">
<!-- 搜索框 -->
<view class="item-label">
<view class="order-tabs-v2">
<view class="order-tabs-v2s">
<image class="search-ico" src="../../static/img/search.png" mode=""></image>
<input type="text" autocomplete="off" :placeholder="$lang.lang.cons.searchNotice2"
v-model="queryParams.keyword"
placeholder-style="color: #666666;white-space: normal;word-break:break-all">
<view class="order-tabs-search">
<text class="" @click="handleSearch">{{ $lang.lang.order.search }}</text>
</view>
</view>
</view>
</view>
<!-- 转运时间搜索框 -->
<view class="item-label">
<view class="date-section">
<text class="section-title">转运时间：</text>
<view class="date-item">
<picker mode="date" :value="queryParams.beginCreateTime" class="date-picker" @change="selectStartDate">
<text>{{ queryParams.beginCreateTime || '开始时间' }}</text>
</picker>
</view>
<text class="separator">-</text>
<view class="date-item">
<picker mode="date" :value="queryParams.endCreateTime" class="date-picker" @change="selectEndDate">
<text>{{ queryParams.endCreateTime || '结束时间' }}</text>
</picker>
</view>
</view>
</view>
<!-- 订单状态搜索框 -->
<view class="item-label">
<view class="date-section">
<text class="section-title">订单状态：</text>
<view class="status-item">
<picker class="status-picker" @change="bindPickerChange" :value="index" :range="orderStatusList">
<view>{{ orderStatusList[index] }}</view>
</picker>
<image class="rgt" src="../../static/img/rgt.png"></image>
</view>
</view>
</view>
<!-- 订单列表内容 -->
<view class="order-list">
<!-- 订单项 -->
<view class="order-list-item" v-for="item in list" @tap="navigateTo('../orderInfo/orderInfo?id=' + item.orderId)">
<view class="order-list-item-top">
<image class="fa" src="../../static/img/fa.png" mode=""></image>
<view class="order-item-order-no">
<view class="fa-v">
<view class="order-no">
<!-- 订单号 -->
<text>订单号：{{ item.orderNo }}
<text class="order-no-copy-btn" @tap.stop="copyToClipboard(item.orderNo)">复制</text>
</text>
<!-- 订单状态 -->
<text v-if="config['orderStatus'].length > 0">{{ handleOrderStatusText(item.status) }}</text>
</view>
<!-- 提单号 -->
<view v-if="item.tidanNo">
<text>{{ item.tidanNo }}</text>
</view>
</view>
</view>
</view>
<view class="order-list-item-info">
<view style="display: flex;flex: 1;">
<!-- 唛头 -->
<view class="order-item-marks">唛头：{{ item.marks }}</view>
<!-- 包裹数量汇总 -->
<view class="sums">
<text>包裹数量 :</text>
<text>{{ item.cons.length }}个</text>
<text class="look-sum-button" @tap.stop="navigateTo('../cons/index?orderNo='+item.orderNo)">查看包裹</text>
</view>
</view>
<view style="display: flex;width: 97%">
<!-- 日期 -->
<view class="times">
<image src="../../static/img/time.png" mode=""></image>
<text>{{ $request.getDate(item.createTime) }}</text>
</view>
<view class="order-btn" v-if="item.transferPriceConfirmationStatus === 1">
<view @click="">处理</view>
</view>
</view>
</view>
<!-- <view class="order-btn-list"></view>-->
</view>
<!-- 加载状态提示 -->
<view class="loading-text" v-if="list.length > 0">
<uni-load-more
:status="loadingStatus"
:content-text="contentText"
></uni-load-more>
</view>
<!-- 搜索结果为空 -->
<u-empty mode="search" v-else></u-empty>
</view>
</view>
</view>
</template>
<script>
import {getOrderConsPage} from "@/api/my/order";
export default {
data() {
const initQueryParams = {
page: 1,
rows: 5,
keyword: '',
beginCreateTime: '',
endCreateTime: '',
statusList: [],
}
return {
// 查询参数
queryParams: {...initQueryParams},
initQueryParams,
// 订单数据
list: [],
total: 0,
orderStatusList: [],
index: 0,
// 字典配置值
config: {
orderStatus : [],
},
// 数据加载状态
loadingStatus: 'more',
// 数据加载状态提示文字
contentText: {
contentdown: '上拉加载更多',
contentrefresh: '加载中',
contentnomore: '没有更多数据了'
},
}
},
onLoad() {
// 初始化页面数据
this.initData();
},
computed: {
/**
* 处理参数
*/
combinedQueryParams() {
let queryParams = {...this.queryParams}
if (this.queryParams.beginCreateTime) {
queryParams['beginCreateTime'] = this.queryParams.beginCreateTime + ' 00:00:00'
}
if (this.queryParams.endCreateTime) {
queryParams['endCreateTime'] = this.queryParams.endCreateTime + ' 23:59:59'
}
return queryParams
},
},
// 监听页面滚动到底部
onReachBottom() {
if (this.loadingStatus !== 'noMore') {
this.getData();
}
},
methods: {
async initData() {
try {
await Promise.all([
this.getOrderStatus(),
this.getData(),
]);
} catch (error) {
console.error('初始化数据失败:', error);
}
},
async getData() {
// 防止重复请求
if (this.loadingStatus === 'loading') return;
this.loadingStatus = 'loading';
try {
// 设置查询条件
let params = {...this.combinedQueryParams};
// 请求数据
await getOrderConsPage(params).then(res => {
if (this.page === 1) {
this.list = res.data.list || [];
} else {
// 分页则叠加数据
this.list = [...this.list, ...res.data.list];
}
this.total = res.data.total;
})
// 判断是否还有更多数据
if (this.list.length >= this.total) {
this.loadingStatus = 'noMore';
} else {
this.queryParams.page++;
this.loadingStatus = 'more';
}
}catch (error) {
console.error('加载失败:', error);
this.loadingStatus = 'more';
}
},
/**
* 搜索按钮
*/
handleSearch() {
this.queryParams.page = 1;
this.total = 0;
this.list = [];
this.getData();
},
bindPickerChange: function (e) {
let orderStatus = '';
this.config['orderStatus'].forEach((item,index) => {
if (index === e.detail.value - 1){
// 把字符串转成数组并发起搜索请求
orderStatus = item.value;
}
});
if (orderStatus !== ''){
this.queryParams.statusList = orderStatus.split(',');
this.handleSearch();
}else{
this.queryParams = {...this.initQueryParams};
this.curNow = 1;
this.getData();
}
this.index = e.detail.value
},
/**
* 获取订单状态字典值
*/
async getOrderStatus() {
await this.$request.getConfig("app_order_status").then(res => {
// 在第一个添加"全部"的选项
this.orderStatusList.push('全部')
res.data.list.forEach(item => {
// 组装订单状态值，该组件只能是一维数组
this.orderStatusList.push(item.label)
});
this.config['orderStatus'] = res.data.list;
});
},
/**
* 复制功能
*/
async copyToClipboard(text) {
uni.setClipboardData({
data: text,
success: () => {
uni.showToast({
title: this.$lang.lang.notices.copySuccess,
icon: "none",
})
}
})
},
/**
* 页面跳转
*/
navigateTo(page) {
uni.navigateTo({
url: page
})
},
/**
* 返回按钮
*/
handleBack() {
uni.navigateTo({url: '../cons/index'});
},
/**
* 开始时间赋值
*/
selectStartDate(e) {
this.queryParams.beginCreateTime = e.detail.value
},
/**
* 结束时间赋值
*/
selectEndDate(e) {
this.queryParams.endCreateTime = e.detail.value
},
/**
* 返回状态的文本值
*/
handleOrderStatusText(status){
let statusText = '';
// 遍历订单状态数组
this.config['orderStatus'].forEach(item =>{
// 把状态字符串转成数组
const statusArr = item.value.split(',');
const statusNumArr = statusArr.map(item => Number(item));
// 判断订单状态是否存在数组中
if (statusNumArr.includes(parseInt(status))){
statusText = item.label;
}
});
return statusText;
},
}
}
</script>
<style scoped>
@import url(../../static/css/cons_order.css);
</style>
src/static/css/cons_order.css 0 → 100644
View file @ cb4c1a29
.container{
margin-top: 100upx;
padding: 20rpx;
}
/* 通用-区块内容包裹框 */
.item-label{
background: var(--c0);
border-radius: 12upx;
margin-bottom: 20upx;
}
/* 搜索框 */
.order-tabs-v2{
display: flex;
width: 100%;
margin-left: 20upx;
}
.order-tabs-v2s{
display: flex;
flex: 1;
padding-top: 10upx;
height: 100upx;
}
/*搜索图标*/
.search-ico{
width: 40upx;
height: 40upx;
margin: 30upx 20upx;
}
.order-tabs-v2s input{
width: 52%;
font-size: var(--f24);
padding: 20upx;
margin-top: 15upx;
line-height: 1.5;
}
.order-tabs-search{
margin-left: 60upx;
}
.order-tabs-search text{
position: absolute;
color: var(--c427);
border: 1px solid var(--c427);
padding: 8upx 36upx;
border-radius: 30upx;
margin-top: 15upx;
text-align: center;
}
/* 搜索框-end */
.date-section {
width: 86%;
display: flex;
align-items: center;
margin: 0 auto;
background-color: #fff;
border-radius: 6px;
padding: 2%;
margin-bottom: 12upx;
}
.section-title{
color: var(--c-1);
font-size: var(--f28);
font-weight: 700;
}
.date-item{
flex: 1;
display: flex;
flex-direction: column;
margin-left: 12px;
/*padding: 20upx;*/
}
.separator{
margin: 0 0rpx 0 30rpx;
}
.date-picker{
border: 1rpx solid #eee;
padding: 10rpx;
border-radius: 8rpx;
/*margin-top: 10rpx;*/
}
.date-section .input {
font-weight: 500;
font-size: var(--f24);
border: 1px solid var(--cdf);
padding: 12upx 10upx;
border-radius: 12upx;
margin-top: 10upx;
}
.date-section .input::placeholder {
color: red !important;
font-size: var(--f24) !important;
}
.status-picker{
border: 1px solid var(--cdf);
padding:12upx 8px;
font-size: 26upx;
border-radius: 4px;
font-weight: normal;
margin-left: 12px;
}
.status-item{
position: relative;
width:50%;
}
.rgt{
width: 32upx;
height: 36upx;
margin-left: 10upx;
margin-top: 4upx;
}
.status-item .rgt{
top: 16upx;
position: absolute;
right: 6px;
margin: 0;
}
/* 订单列表 */
.order-list{
margin: 0 auto;
}
.order-list-item{
background: url(@/static/img/list.png) no-repeat;
background-size: 100% 100%;
padding: 30upx;
border-radius: 12upx;
position: relative;
margin-bottom: 20upx;
}
.order-list-item-top{
display: flex;
align-items: center;
}
.order-list-item-top .fa{
width: 64upx;
height: 64upx;
margin-right: 16upx;
}
.order-item-order-no{
width: 84%;
}
.fa-v{
}
.fa-v .order-no{
padding: 0upx 0 10upx;
border-bottom: 1px solid var(--cdf);
display: flex;
justify-content: space-between;
}
.fa-v .order-no text{
font-size: 28rpx;
}
.order-no-copy-btn{
margin-left: 10upx;
color: #2A6cd9
}
.order-list-info{
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
}
.order-item-marks{
padding: 20upx 10upx 12upx 10upx;
font-size: var(--f32);
color: var(--c3);
font-weight: 700;
width: 50%;
}
.order-list-item-info .times{
padding: 0;
width: 50%;
font-size: var(--f26);
color: var(--c9);
margin-top:12upx;
}
.order-list-item-info .times image{
width: 42upx;
height: 42upx;
margin-right: 10upx;
}
.sums{
flex: 1;
display: flex;
margin-top: 20upx;
}
.sums text:first-child{
margin-right: 8upx;
}
.look-sum-button{
margin-left: 10upx;
color: var(--c036)
}
.order-btn-list{
width: 46%;
display: flex;
flex-wrap: wrap;
margin-top: 30upx;
}
.order-btn{
display: flex;
align-items: center;
font-size: 24upx;
flex-wrap: wrap;
justify-content: flex-end;
width: 100%;
/*padding-bottom: 50upx;*/
}
.order-btn view{
color: var(--c427);
border: 1px solid var(--c427);
padding: 8upx 28upx;
border-radius: 20upx;
}
/* 订单列表-end */
src/static/lang/zh/cons.js
View file @ cb4c1a29
......@@ -5,7 +5,8 @@ export default {
"address": "专属地址",
"turnOnWaitConfirm": "转运待确认",
"consOrder": "集运订单",
"searchNotice": "支持包裹快递单号/提单/订单号查询/商品名称",
"searchNotice": "支持包裹快递单号/提单/订单号/商品名称查询",
"searchNotice2": "支持包裹快递单号/提单/订单号/商品名称/唛头查询",
"closePopup": "关闭弹窗",
"create": "包裹预报",
"backNotice": "是否退出添加包裹页面?",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment