Skip to content

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

集运首页

parent e92440fc
Hide whitespace changes
Inline Side-by-side
Showing with 1129 additions and 251 deletions
src/api/ecw/warehouse.js
View file @ 432b0abf
import request from '@/utils/request'
import lang from '@/common/lang'
export function getWarehouse(query) {
return request.get('/app-api/ecw/warehouse/get', query);
}
export function getWarehouseList(query) {
return request.get('/app-api/ecw/warehouse/list', query);
}
......
src/api/order/cons.js
View file @ 432b0abf
......@@ -15,3 +15,7 @@ export function updateCons(param){
export function getCons(param){
return request.get('/app-api/order/cons/get',param);
}
export function getConsPage(param){
return request.get('/app-api/order/cons/page',param);
}
src/pages.json
View file @ 432b0abf
......@@ -361,6 +361,12 @@
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/cons/address",
"style": {
"navigationStyle": "custom"
}
}
],
"globalStyle": {
......
src/pages/cons/address.vue 0 → 100644
View file @ 432b0abf
<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="warehouse-card">
<view class="warehouse-btn-group">
<button @click="switchWarehouse(index)" :class="{'active': warehouseActiveIndex === index}"
class="warehouse-btn" v-for="(item,index) in warehouseList">{{ item.titleZh }}
</button>
</view>
</view>
<!-- 基础信息 -->
<view class="base-card">
<view class="info-item">
<text class="member-notice">*会员号是您的唯一标识，必须填写在收件地址后</text>
</view>
<view class="info-item">
<text class="item-label" style="margin-top: 7upx;">会员号：</text>
<text class="item-value"><span class="member-no">{{ userInfo.customerNumber }}{{ transportCode }}</span>
</text>
<text class="copy-text" @click="copyToClipboard(userInfo.customerNumber + transportCode)">复制</text>
</view>
<view class="info-item">
<text class="item-label">运输偏好：</text>
<radio-group style="display: flex;" @change="handleTransportType">
<label class="from-item-radio" v-for="(item, index) in transportType" :key="item.value">
<view>
<radio :value="item.value" :checked="parseInt(current) === parseInt(item.value)"/>
</view>
<view>{{ item.label }}</view>
</label>
</radio-group>
</view>
<view class="info-item">
<text class="item-label" style="padding-top: 20upx;">提货点：</text>
<uni-data-picker :placeholder="$lang.lang.cons.pickupPointNotice"
:popup-title="$lang.lang.cons.pickupPointNotice" :localdata="countryTree"
v-model="pickupPoint"></uni-data-picker>
</view>
<view class="info-item">
<text class="item-label" style="margin-top: 7upx;">收件人：</text>
<text class="item-value">{{ warehouse.head }}<span style="margin-left: 20upx;" class="member-no">{{
userInfo.customerNumber
}}{{ transportCode }}</span></text>
<text class="copy-text" @click="copyToClipboard(warehouse.head + userInfo.customerNumber + transportCode)">
复制
</text>
</view>
<view class="info-item">
<text class="item-label">电话：</text>
<text class="item-value">{{ warehouse.tell }}</text>
<text class="copy-text" @click="copyToClipboard(warehouse.tell)">复制</text>
</view>
<view class="info-item">
<text class="item-label">地址：</text>
<!-- 这里的地址只能是国内地址，不用做国际化 -->
<text class="item-value" style="width: 60%">{{ warehouse.addressZh }}<span
style="color: red">{{ userInfo.customerNumber }}{{ transportCode }}</span></text>
<text class="copy-text" style="margin-top: 50upx;"
@click="copyToClipboard(warehouse.addressZh + userInfo.customerNumber + transportCode)">复制
</text>
</view>
</view>
<!-- 操作按钮 -->
<view class="option-card">
<view class="footer-nav">
<text style="background-color: #F59123" class="footer-btn" @tap="copyAll" @click="copyAll" text="">
一键复制
</text>
<text style="background-color: var(--c427)" @tap="navigateTo('address')" class="footer-btn"
text="">{{ $lang.lang.cons.warehouseInNotice }}
</text>
<text style="background-color: red" class="footer-btn" @tap="navigateTo('prohibited')"
text="">{{ $lang.lang.cons.banGoods }}
</text>
</view>
</view>
</view>
</view>
</template>
<script>
import {getWarehouseList, getCountryTree, getWarehouse} from "@/api/ecw/warehouse";
import lang from "@/common/lang";
export default {
data() {
return {
warehouseList: null,
// 运输方式
transportType: null,
// 用户信息
userInfo: {},
// 运输方式选中值
current: 0,
// 运输方式编码
transportCode: '',
// 当前选中的仓库
warehouse: {},
countryTree: [],
// 提货点
pickupPoint: '',
warehouseActiveIndex: 0,
}
},
onLoad() {
// 初始化页面数据
this.initData();
},
methods: {
async initData() {
try {
// 从缓存中获取客户信息
this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
// 并行请求接口数据
await Promise.all([
// 获取仓库信息
this.getWarehouseList(),
// 获取运输方式
this.getTransportType(),
// 获取提货点树状结构
this.getCountryTree(),
// 根据客户提货点获取提货点仓库信息
this.getEndWarehouse(),
]);
// 处理数据
// 设置运输方式编码
this.updateTransportCode()
// 设置第一个仓库信息为默认仓库
if (this.warehouseList.length > 0) {
this.warehouse = this.warehouseList[0];
}
// 设置运输方式选中值
this.current = this.userInfo.preferenceTransportType;
} catch (error) {
console.error('初始化数据失败:', error);
}
},
/**
* 获取目的仓库信息
*/
async getEndWarehouse() {
// 如果没有值则无需请求
if (!this.userInfo.consPickupPoint > 0) return;
getWarehouse({id: this.userInfo.consPickupPoint}).then(res => {
// 组装提货点所需数据
this.pickupPoint = res.data.guojia + '-' + res.data.shi + '-' + res.data.id
});
},
/**
* 仓库选项卡切换事件
*/
switchWarehouse(index) {
// 更改选中样式
this.warehouseActiveIndex = index
// 变更仓库信息
this.warehouse = this.warehouseList[index]
},
handleBack() {
uni.navigateBack({delta: 1}) // 返回上一页
},
async getWarehouseList() {
await getWarehouseList({tradeType: 2}).then(res => {
this.warehouseList = res.data;
});
},
async getTransportType() {
await this.$request.getConfig("transport_type").then(res => {
this.transportType = res.data.list;
});
},
/**
* 单项选择器切换事件
*/
handleTransportType(e) {
// 根据不同运输方式显示运输方式编码
this.userInfo.preferenceTransportType = e.detail.value
// 更新运输方式编码
this.updateTransportCode()
},
/**
* 复制功能
*/
async copyToClipboard(text) {
uni.setClipboardData({
data: text,
success: () => {
uni.showToast({
title: this.$lang.lang.notices.copySuccess,
icon: "none",
})
}
})
},
async copyAll() {
// 构建复制内容
const content = [
`${this.warehouse.head}${this.userInfo.customerNumber}${this.transportCode}`,
`${this.warehouse.tell}`,
`${this.warehouse.addressZh} ${this.userInfo.customerNumber}${this.transportCode}`
].join(',');
await this.copyToClipboard(content)
},
/**
* 更新运输方式编号
*/
updateTransportCode() {
if (!this.userInfo?.customerNumber) return;
let suffix = '';
switch (parseInt(this.userInfo.preferenceTransportType)) {
case 1:
suffix = 'S';
break;
case 3:
suffix = 'A';
break;
}
this.transportCode = suffix;
},
/**
* 获取国家树状结构数据
*/
async getCountryTree() {
await getCountryTree({tradeType: 1}).then(res => {
this.countryTree = res.data
.filter(country => country.guojia) // 过滤无效国家
.sort((a, b) => (a.guojiaSort ?? 0) - (b.guojiaSort ?? 0))
.map(country => ({
text: country[lang.guojiaName].replace(/\([^)]*\)/g, '') || country.guojiaName.replace(/\([^)]*\)/g, ''),
value: String(country.guojia),
children: (country.children || [])
.filter(city => city.shi) // 过滤无效城市
.sort((a, b) => (a.shiSort ?? 0) - (b.shiSort ?? 0))
.map(city => ({
text: city[lang.shiName].replace(/（[^）]*）/g, '') || city.shiName.replace(/（[^）]*）/g, ''),
value: String(city.shi), // 注意：示例中的"shi"应该实际用城市ID
children: (city.children || [])
.filter(warehouse => warehouse.warehouseId) // 过滤无效仓库
.sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0))
.map(warehouse => ({
text: warehouse[lang.warehouseTitle] || warehouse.warehouseTitleZh,
value: String(country.guojia) + '-' + String(city.shi) + '-' + String(warehouse.warehouseId)
}))
}))
}));
})
},
},
}
</script>
<style>
@import url(../../static/css/cons_address.css);
</style>
src/pages/cons/components/signInPicture.vue
View file @ 432b0abf
......@@ -4,8 +4,11 @@
<view class="image_list" >
<uni-grid :column="3" :showBorder="false" :highlight="true">
<!-- 动态图片示例 -->
<uni-grid-item style="width: 170upx;height: 150upx;" v-for="(item, index) in 6" :index="index" :key="index">
<uni-icons type="image" :size="65" color="#777"/>
<uni-grid-item style="width: 170upx;height: 150upx;margin-bottom: 20upx;" v-for="(item, index) in list" :index="index" :key="index">
<!-- <uni-icons type="image" :size="65" color="#777"/>-->
<!-- <u-album :urls="item.mediaUrl" keyName="src2"></u-album>-->
<image style="width: 65px; height: 65px;" mode="" :src="item.mediaUrl"
></image>
</uni-grid-item>
</uni-grid>
</view>
......@@ -39,8 +42,9 @@
this.$refs.popupImage.close()
},
open(type){
open(type,consMedia){
this.$refs.popupImage.open(type)
this.list = consMedia;
}
},
}
......
src/pages/cons/create.vue
View file @ 432b0abf
......@@ -78,26 +78,26 @@
<view class="form-tab-content">
<!-- 如果为编辑操作且商品信息为空且包裹状态已签收则提示 -->
<view v-if="form.id && form.consItemVOList.length === 0" class="not-goods-notice">
<view v-if="form.id && form.consItem.length === 0 && form.signed === 1" class="not-goods-notice">
<span style="color: #ff5b5a;">{{ $lang.lang.cons.notGoodsNotice }}</span>
<view class="contact-btn">{{ $lang.lang.cons.goConcat }}</view>
</view>
<!-- 商品内容 -->
<view class="form-item">
<view class="goods-table" v-if="form.consItemVOList.length > 0">
<view class="goods-table" v-if="form.consItem.length > 0">
<view class="table-header">
<text class="header-cell">{{ $lang.lang.cons.number }}</text>
<text class="header-cell">{{ $lang.lang.cons.goodsName }}</text>
<text class="header-cell">{{ $lang.lang.cons.num }}</text>
<text class="header-cell">{{ $lang.lang.cons.option }}</text>
</view>
<view class="table-row" v-for="(item, index) in form.consItemVOList" :key="index">
<view class="table-row" v-for="(item, index) in form.consItem" :key="index">
<text class="cell">{{ index + 1 }}</text>
<view class="cell" style="width: 100%">
<cuihai-combox class="goods-choose" :label="$lang.lang.notices.please"
:emptyTips="$lang.lang.create.noSelect" :placeholder="$lang.lang.notices.please"
:candidates="productData.label"
:value="item.prodName"
:value="item.product.titleZh"
@getValue="(e) => getValue(e, index)"></cuihai-combox>
</view>
<view class="cell">
......@@ -168,7 +168,7 @@
<!-- 编辑显示的按钮 -->
<view v-else style="display: flex;padding: 0 80upx 0 80upx;margin-bottom: 20upx;">
<button class="submit-btn" type="primary" @tap="handleSubmit">编辑</button>
<button class="cancel-btn" type="warning" @tap="handleCancel">取消</button>
<button class="cancel-btn" type="warning" @tap="navigateTo('../cons/index')">取消</button>
</view>
</view>
</view>
......@@ -198,7 +198,7 @@ export default {
remarks: '',
// 始发仓库id
wareId: null,
consItemVOList: [],
consItem: [],
sumQuantity: this.totalQuantity,
}
......@@ -244,7 +244,7 @@ export default {
computed: {
totalQuantity() {
this.form.sumQuantity = this.form.consItemVOList.reduce((sum, item) => sum + (Number(item.quantity) || 0), 0);
this.form.sumQuantity = this.form.consItem.reduce((sum, item) => sum + (Number(item.quantity) || 0), 0);
return this.form.sumQuantity;
}
},
......@@ -287,9 +287,9 @@ export default {
success: (res) => {
if (res.confirm) {
// 用户点击确定，执行返回
uni.navigateBack({
delta: 1 // 返回层数，1表示返回上一页
});
uni.navigateTo({
url: '../cons/index'
})
}
}
});
......@@ -377,24 +377,25 @@ export default {
* 添加一行
*/
addItem() {
this.form.consItemVOList.push({
this.form.consItem.push({
prodId: null,
quantity: ''
quantity: '',
product: '',
});
},
getValue(e, index) {
if (this.form.consItemVOList[index]) {
if (this.form.consItem[index]) {
// 根据商品名称获取商品信息
this.productData.data.forEach((item) => {
if (item[this.$lang.title] === e) {
// 保存商品信息
this.form.consItemVOList[index].prodId = item['id'];
this.form.consItemVOList[index].prodAttrIds = item['attrId'];
this.form.consItemVOList[index].prodTitleEn = item['titleEn'];
this.form.consItemVOList[index].prodTitleZh = item['titleZh'];
this.form.consItemVOList[index].prodTitleFr = item['titleFr'];
this.form.consItemVOList[index].prodType = item['typeId'];
this.form.consItem[index].prodId = item['id'];
this.form.consItem[index].prodAttrIds = item['attrId'];
this.form.consItem[index].prodTitleEn = item['titleEn'];
this.form.consItem[index].prodTitleZh = item['titleZh'];
this.form.consItem[index].prodTitleFr = item['titleFr'];
this.form.consItem[index].prodType = item['typeId'];
}
});
}
......@@ -404,7 +405,7 @@ export default {
* 删除一行
*/
deleteItem(index) {
this.form.consItemVOList.splice(index, 1)
this.form.consItem.splice(index, 1)
},
/**
......@@ -440,7 +441,7 @@ export default {
// 校验商品选择后数量是否填写
validateGoodsList() {
return this.form.consItemVOList.every(item => {
return this.form.consItem.every(item => {
// 如果选择了商品（product 非空）
if (item.prodId !== null) {
// 则数量必须为有效数字且 > 0
......@@ -562,17 +563,9 @@ export default {
}
},
/**
* 取消按钮操作
*/
handleCancel(){
uni.navigateBack({ delta: 1 }); // 返回上一页
},
navigateTo(page) {
uni.navigateTo({
url: '../cons/create'
url: page
})
}
......
src/pages/cons/index.vue
View file @ 432b0abf
......@@ -5,211 +5,497 @@
<view class="header-toper-title">
<image src="../../static/img/back.png" mode="" @click="goBack"></image>
<text>{{ $lang.lang.cons.myConsPackage }}</text>
<image src="../../static/img/add_white.png" @click="goCreate"></image>
<image src="../../static/img/add_white.png" @click="navigateTo('/pages/cons/create')"></image>
</view>
</view>
<!-- 操作按钮 -->
<view class="opt-btn-group">
<u-button type="warning" class="opt-btn" :text="$lang.lang.cons.address"></u-button>
<u-button type="error" class="opt-btn" :text="$lang.lang.cons.turnOnWaitConfirm"></u-button>
<u-button type="primary" class="opt-btn" :text="$lang.lang.cons.consOrder"></u-button>
</view>
<!-- 内容主体 -->
<view class="container">
<!-- 搜索框 -->
<view class="order-tabs">
<view class="order-tabs-v2">
<view class="order-tabs-v2s">
<image class="search" src="../../static/img/search.png" mode=""></image>
<input type="text" autocomplete="off" :placeholder="$lang.lang.cons.searchNotice"
placeholder-style="color: #666666;white-space: normal;">
<view class="" @click="changeIndex(selectIndex)">{{ $lang.lang.order.search }}</view>
<!--点击打开额外搜索框-->
<image @click="filterToggle('top')" class="filter" src="../../static/img/filter-filling.png" mode=""></image>
<!-- 操作按钮 -->
<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"
:text="$lang.lang.cons.turnOnWaitConfirm"></u-button>
<u-button type="primary" @tap="navigateTo('address')" class="opt-btn"
:text="$lang.lang.cons.consOrder"></u-button>
</view>
</view>
</view>
<!-- 额外搜索框 -->
<view>
<uni-popup ref="popupFilter" background-color="#fff">
<view class="container">
<!-- 标题 -->
<view class="header">
<text class="title">包裹自定义搜索</text>
</view>
<!-- 付款状态 -->
<view class="section">
<text class="section-title">包付款状态</text>
<radio-group class="status-group">
<label class="status-item" v-for="item in list" :key="item">
<radio :value="item" color="#007AFF"/>
<text>{{ item }}</text>
</label>
</radio-group>
</view>
<!-- 添加时间 -->
<view class="section">
<text class="section-title">添加时间</text>
<radio-group class="time-group">
<label class="time-item" v-for="time in timeOptions" :key="time">
<radio :value="time" color="#007AFF"/>
<text>{{ time }}</text>
</label>
</radio-group>
<!-- 搜索框 -->
<view class="item-label">
<view class="order-tabs-v2">
<view class="order-tabs-v2s">
<image class="search" src="../../static/img/search.png" mode=""></image>
<input type="text" autocomplete="off" :placeholder="$lang.lang.cons.searchNotice" 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 class="order-tabs-filter">
<image @click="filterToggle('top')" class="filter" src="../../static/img/filter-filling.png"
mode=""></image>
</view>
</view>
</view>
</view>
<!-- 日期选择 -->
<view class="section date-section">
<view class="date-item">
<text>开始时间</text>
<picker mode="date" class="date-picker">
<text>{{ startDate || '请选择' }}</text>
</picker>
<!-- 额外搜索框 -->
<view>
<uni-popup ref="popupFilter" background-color="#fff">
<view class="popup-container">
<!-- 标题 -->
<view class="header">
<text class="title">包裹自定义搜索</text>
</view>
<!-- 包裹状态 -->
<view class="section">
<view class="section-title">包裹状态</view>
<view class="section-cons-status">
<uni-data-checkbox @change="handleCheckStatus" mode="tag" multiple v-model="queryParams.statusList"
:localdata="consStatusList"></uni-data-checkbox>
</view>
</view>
<text class="separator">-</text>
<view class="date-item">
<text>结束时间</text>
<picker mode="date" class="date-picker">
<text>{{ endDate || '请选择' }}</text>
</picker>
<!-- 添加时间 -->
<view class="section">
<text class="section-title">添加时间</text>
<uni-data-checkbox mode="tag" v-model="queryParams.pastMonthsDate" :localdata="timeOptions"
@change="setDate"></uni-data-checkbox>
</view>
<!-- 日期选择 -->
<view class="section date-section">
<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 class="section">
<text class="section-title">快递单号</text>
<input class="input" v-model="queryParams.expressNo" placeholder="请输入快递单号"/>
</view>
<!-- 商品名称 -->
<view class="section">
<text class="section-title">商品名称</text>
<input class="input" v-model="queryParams.productName" placeholder="请输入商品中英文名称"/>
</view>
<!-- 转运订单号 -->
<view class="section">
<text class="section-title">转运订单号</text>
<input class="input" v-model="queryParams.orderNo" placeholder="请输入转运订单号"/>
</view>
<!-- 操作按钮 -->
<view class="button-group">
<button class="btn reset-btn" @tap="handleReset">重置</button>
<button class="btn search-btn" @tap="handleSearch">搜索</button>
</view>
</view>
</uni-popup>
</view>
<!-- 输入框组 -->
<view class="input-group">
<input class="input" placeholder="快递单号"/>
<input class="input" placeholder="请输入商品中英文名称搜索"/>
<input class="input" placeholder="转运订单号"/>
</view>
<!-- 状态栏 -->
<view class="item-label cons-package-status">
<u-subsection mode="subsection" @change="sectionChange" :current="curNow" :list="consStatusSubsectionList"></u-subsection>
</view>
<!-- 操作按钮 -->
<view class="button-group">
<button class="btn reset-btn" @tap="handleReset">重置</button>
<button class="btn search-btn" @tap="handleSearch">搜索</button>
</view>
<!-- 列表内容栏 -->
<view class="item-label" v-for="item in data">
<view class="cons-list">
<!-- 第一行 -->
<u-row class="cons-list-row">
<u-col span="9">
<span>
{{ item.expressNo }}
<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')"
style="width: 35upx;height: 35upx;margin-left: 10upx"></image>
</span>
</u-col>
<u-col span="2" offset="1.5">
<div>
<!-- 编辑按钮 -->
<image src="../../static/img/edit.png" style="width: 40upx;height: 40upx;"
@tap="navigateTo('/pages/cons/create?id=' + item.id)"></image>
<image src="../../static/img/delete_pail.png" style="width: 40upx;height: 40upx;"></image>
</div>
</u-col>
</u-row>
<!-- 第二行 -->
<u-row class="cons-list-row" v-if="item.signedTime">
<u-col span="12">
<text>签收时间：{{ $request.getDate(item.signedTime) }}</text>
</u-col>
</u-row>
<!-- 第三行 -->
<!-- 已转运才显示订单信息 -->
<u-row justify="space-between" class="cons-list-row" v-if="item.orderId">
<u-col span="12">
<span>
{{ item.order.orderNo }}
<span style="font-weight: bold;color: red;width: 50px;margin-left: 20upx;">
{{ parseInt(item.transportId) === 1 ? 'sea' : 'air' }}
</span>
<image src="../../static/img/copy.png" @click="copyToClipboard(item.order.orderNo)"
style="width: 35upx;height: 35upx;margin-left: 10upx"></image>
</span>
</u-col>
</u-row>
<!-- 第四行 -->
<u-row class="cons-list-row">
<u-col span="12">
<span>商品：<span v-if="item.consItem.length > 0">{{ handleConsProduct(item.consItem) }}</span>
<!-- 验货状态为已处理才显示 -->
<span style="font-weight: bold;color: red;width: 50px;margin-left: 20upx;"
v-if="item.inspectStatus === 2">验</span></span>
</u-col>
</u-row>
<!-- 第五行 -->
<!-- 验货已处理或者有货值才显示 -->
<u-row class="cons-list-row" v-if="item.inspectStatus === 2 || item.worth > 0">
<u-col span="6" v-if="item.inspectStatus === 2">
<text>合计：<span>{{ handleInspectionData(item.consItem) }}</span></text>
</u-col>
<u-col span="6" v-if="item.worth > 0">
<text>货值：<span>{{ item.worth }}元</span></text>
</u-col>
</u-row>
<!-- 第六行 -->
<u-row class="cons-list-row">
<u-col span="4">
<text>货运方式：<span v-if="transportType[item.transportId]">{{
transportType[item.transportId].label
}}</span></text>
</u-col>
<!-- 获取订单价格待确认状态，还没加上这个状态，先隐藏 -->
<!-- <u-col span="4" offset="2">-->
<!-- <text style="font-weight: bold;color: red;">请确认费用</text>-->
<!-- </u-col>-->
<!-- <u-col span="2" >-->
<!-- <u-button type="primary" size="mini" style="width: 20upx;" text="处理"></u-button>-->
<!-- </u-col>-->
</u-row>
<!-- 第七行 -->
<u-row class="cons-list-row">
<u-col span="3">
<text>备注：<span>{{ item.remarks }}</span></text>
</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"
text="签收图片"></u-button>
</u-col>
<u-col span="4">
<!-- 当商品为空或货值为0或没有输运方式就显示 -->
<text style="font-weight: bold;color: red;"
v-if="item.consItem.length <= 0 || item.worth <= 0 || item.transportId < 0">请补充信息，以便安排发货
</text>
</u-col>
<u-col span="2">
<u-button type="primary" size="mini" style="width: 20upx" text="复制"></u-button>
</u-col>
</u-row>
</view>
</uni-popup>
</view>
<!-- 状态栏 -->
<view class="cons-package-status">
<u-subsection mode="subsection" @change="sectionChange" :current="curNow" :list="list"></u-subsection>
</view>
</view>
<!-- 列表内容栏 -->
<view class="cons-list">
<view>
<!-- 第一行 -->
<u-row class="cons-list-row">
<u-col span="9">
<text>签收时间：2025-3-4</text>
</u-col>
<u-col span="2" offset="1.5">
<div>
<image src="../../static/img/edit.png" style="width: 40upx;height: 40upx;"></image>
<image src="../../static/img/delete_pail.png" style="width: 40upx;height: 40upx;"></image>
</div>
</u-col>
</u-row>
<!-- 第二行 -->
<u-row class="cons-list-row">
<u-col span="12">
<span>
sf1232323333333333333333445
<span style="font-weight: bold;color: red;width: 50px;margin-left: 20upx;">已签收</span>
<image src="../../static/img/copy.png" @click="copyToClipboard('sf1232323333333333333333445')"
style="width: 35upx;height: 35upx;margin-left: 10upx"></image>
</span>
</u-col>
</u-row>
<!-- 第三行 -->
<u-row justify="space-between" class="cons-list-row">
<u-col span="12">
<span>
NG255598L
<span style="font-weight: bold;color: red;width: 50px;margin-left: 20upx;">sea</span>
<image src="../../static/img/copy.png" @click="copyToClipboard('NG25559228L')"
style="width: 35upx;height: 35upx;margin-left: 10upx"></image>
</span>
</u-col>
</u-row>
<!-- 第四行 -->
<u-row class="cons-list-row">
<u-col span="12">
<span>商品：衣服*1，裤子*2，帽子*3<span
style="font-weight: bold;color: red;width: 50px;margin-left: 20upx;">验</span></span>
</u-col>
</u-row>
<!-- 第五行 -->
<u-row class="cons-list-row">
<u-col span="6">
<text>货运方式：<span>海运拼柜</span></text>
</u-col>
<u-col span="6">
<text>货值：<span>3000元</span></text>
</u-col>
</u-row>
<!-- 第六行 -->
<u-row class="cons-list-row">
<u-col span="3" offset="6">
<text style="font-weight: bold;color: red;">请确认费用</text>
</u-col>
<u-col span="2" offset="1">
<u-button type="primary" size="mini" style="width: 20upx;" text="处理"></u-button>
</u-col>
</u-row>
<u-row class="cons-list-row">
<u-col span="3">
<text>备注：<span>贵重物品</span></text>
</u-col>
<u-col span="3">
<u-button type="primary" size="mini" @click="imageToggle('dialog')" style="width: 60upx" text="签收图片"></u-button>
</u-col>
<u-col span="4">
<text style="font-weight: bold;color: red;">请补充信息，以便安排发货</text>
</u-col>
<u-col span="2">
<u-button type="primary" size="mini" style="width: 20upx" text="复制"></u-button>
</u-col>
</u-row>
<!-- 加载状态提示 -->
<view class="loading-text" v-if="data.length > 0">
<uni-load-more
:status="loadingStatus"
:content-text="contentText"
></uni-load-more>
</view>
</view>
<!-- 签收图片 -->
<sign-in-picture ref="popupImage" />
<!-- 搜索结果为空 -->
<u-empty mode="search" v-else></u-empty>
<!-- 签收图片 -->
<sign-in-picture ref="popupImage"/>
</view>
</view>
</template>
<script>
import SignInPicture from "@/pages/cons/components/signInPicture.vue";
import {getConsPage} from "@/api/order/cons";
export default {
components: {SignInPicture},
data() {
const initQueryParams = {
page: 1,
rows: 5,
// 根据集运状态搜索
status: 1,
// 根据多个集运状态搜索
statusList:[],
// 近期月份值
pastMonthsDate: '',
// 开始日期
beginCreateTime: '',
// 结束日期
endCreateTime: '',
expressNo: '',
productName: '',
orderNo: '',
keyword: '',
}
return {
list: ['待签收', '已签收', '已转运', '已退仓', '全部'],
// 或者如下，也可以配置keyName参数修改对象键名
// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
curNow: 0,
// 额外搜索框
filterShow: false
// 查询参数
queryParams: {...initQueryParams},
initQueryParams,
// 列表数据
data: [],
total: 0,
config: [],
// 包裹状态键值对结构
consStatus: [],
transportType: [],
// 包裹状态分段器列表
consStatusSubsectionList: [],
// 包裹状态列表
consStatusList: [],
// 近期月份选择内容
timeOptions: [
{
text: '近一个月',
value: 1,
},
{
text: '近三个月',
value: 3,
},
{
text: '近六个月',
value: 6,
},
],
// 数据加载状态
loadingStatus: 'more',
// 数据加载状态提示文字
contentText: {
contentdown: '上拉加载更多',
contentrefresh: '加载中',
contentnomore: '没有更多数据了'
},
// 进入页面默认选择已签收状态的数据
curNow: 1,
}
},
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: {
goCreate(){
uni.navigateTo({
url: '/pages/cons/create'
})
async initData() {
try {
// 并行请求接口数据
await Promise.all([
this.getData(),
this.getTransportType(),
this.getConsStatus()
]);
// 数据处理
this.processConfigData('consStatus')
this.processConfigData('transportType')
} catch (error) {
console.error('初始化数据失败:', error);
}
},
/**
* 获取列表数据
*/
async getData() {
// 防止重复请求
if (this.loadingStatus === 'loading') return;
this.loadingStatus = 'loading';
try {
// 设置查询条件
let params = {...this.combinedQueryParams};
// 请求数据
await getConsPage(params).then(res => {
if (this.page === 1) {
this.data = res.data.list || [];
} else {
// 分页则叠加数据
this.data = [...this.data, ...res.data.list];
}
this.total = res.data.total;
})
// 判断是否还有更多数据
if (this.data.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.queryParams.total = 0;
this.data = [];
this.getData();
},
async getTransportType() {
await this.$request.getConfig("transport_type").then(res => {
this.config['transportType'] = res.data.list;
});
},
async getConsStatus() {
await this.$request.getConfig("cons_status").then(res => {
this.config['consStatus'] = res.data.list;
res.data.list.forEach(item => {
// 组装包裹状态分段器内容
this.consStatusSubsectionList.push({
name: item.label
})
this.consStatusList.push({
text: item.label,
value: item.value,
})
});
this.consStatusSubsectionList.push({
name: '全部'
})
});
},
/**
* 把字典值转为键值对形式
*/
processConfigData(target) {
const configMap = {};
this.config[target].forEach(item => {
configMap[item.value] = {
label: item.label || "",
labelEn: item.labelEn || "",
labelFr: item.labelFr || ""
};
});
this[target] = configMap;
},
/**
* 组装填单数据字符串
*/
handleConsProduct(consItem) {
const items = consItem ?? [];
// 保存填单商品名称和数量
const productStrings = [];
items.forEach(item => {
const title = item.product?.titleZh || '';
const quantity = item.quantity || 0;
productStrings.push(`${title}*${quantity}`);
});
return productStrings.join(' ');
},
/**
* 设置搜索日期
*/
setDate(e) {
const startDate = new Date();
// 根据用户选择的计算几个月前的日期
startDate.setMonth(startDate.getMonth() - e.detail.value);
// 处理日期格式（确保补零）
const formatDate = (date) => {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
};
// 设置开始日期和结束日期
this.queryParams.beginCreateTime = formatDate(startDate);
this.queryParams.endCreateTime = formatDate(new Date());
},
/**
* 计算汇总验货数据
*/
handleInspectionData(item) {
let inspection = {};
inspection = item.reduce((acc, item) => {
acc.inspectionNum += item.inspectionNum || 0;
acc.inspectionVolume += item.inspectionVolume || 0;
acc.inspectionWeight += item.inspectionWeight || 0;
return acc;
}, {
inspectionNum: 0,
inspectionVolume: 0,
inspectionWeight: 0,
});
return inspection.inspectionNum + '箱 ' + inspection.inspectionVolume + 'm³ ' + inspection.inspectionWeight + 'kg'
},
/**
* 重置搜索条件按钮
*/
handleReset() {
this.queryParams = {...this.initQueryParams};
this.curNow = 1;
this.getData();
},
selectStartDate(e) {
this.queryParams.beginCreateTime = e.detail.value
// 如果手动选择了日期则清空近期时间按钮
this.queryParams.pastMonthsDate = '';
},
selectEndDate(e) {
this.queryParams.endCreateTime = e.detail.value
// 如果手动选择了日期则清空近期时间按钮
this.queryParams.pastMonthsDate = '';
},
/**
......@@ -221,6 +507,10 @@ export default {
});
},
/**
* 额外搜索框
* @param type
*/
filterToggle(type) {
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
this.$refs.popupFilter.open(type)
......@@ -229,9 +519,9 @@ export default {
/**
* 打开签收图片
*/
imageToggle(type){
imageToggle(type, consMedia) {
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
this.$refs['popupImage'].open(type)
this.$refs['popupImage'].open(type, consMedia)
},
/**
......@@ -249,8 +539,32 @@ export default {
})
},
filterClose() {
this.show = false
/**
* 页面跳转
*/
navigateTo(page) {
uni.navigateTo({
// url: '../cons/create'
url: page
})
},
handleCheckStatus(e){
// 此处逻辑：如果在checkbox框中只选择一个状态去查询则使用分段器的状态值去查询且选中分段器
// 如果选择两个以上则用statusList字段查询且分段器选中全部
// 如果取消选择要
if (e.detail.data.length === 1){
// 如果只选择了一个状态搜索则不使用statusList列表查询，直接使用status字段查询
this.queryParams.status = e.detail.value[0]
this.curNow = e.detail.value[0]
}else if (e.detail.data.length > 1){
this.queryParams.status = null;
// 如果多个条件搜索则选择全部
this.curNow = this.consStatusSubsectionList.length - 1;
}else{
// this.queryParams.status = null;
// this.curNow = this.consStatusSubsectionList.length - 1;
}
},
/**
......@@ -259,12 +573,22 @@ export default {
*/
sectionChange(index) {
this.curNow = index;
// 设置状态
this.queryParams.status = index;
// 由于组件的index值只能从0开始，所以当获取出来的状态列表数量大于index的时候表示手动添加的值
// 如果状态值不是从0开始的连续值，这段代码需要重新修改
if (index > this.config['consStatus'].length - 1){
// 状态为全部是手动添加的值，设置搜索状态为null表示查询所有数据
this.queryParams.status = null;
}
// 触发搜索请求数据
this.handleSearch();
}
}
}
</script>
<style>
<style scoped>
@import url(../../static/css/cons.css);
</style>
......
src/static/css/cons.css
View file @ 432b0abf
.opt-btn-group{
width: 90%;
margin: 130upx auto;
display: flex;
.container{
margin-top: 100upx;
padding: 20rpx;
}
.item-label{
background: var(--c0);
border-radius: 12upx;
height: 10rpx;
padding: 66upx 0;
margin-bottom: 20upx;
}
/*顶部按钮样式*/
.opt-btn-group{
display: flex;
}
.opt-btn{
margin: -35upx 25upx;
flex: 1;
border-radius: 10upx;
margin: 20upx;
}
/*顶部按钮样式-end*/
.order-tabs{
width: 90%;
margin: -100upx auto 40upx;
display: flex;
}
.order-tabs .order-tabs-v2{
.order-tabs-v2{
display: flex;
width: 100%;
background-color: var(--c0);
border-radius: 12upx;
margin-left: 20upx;
}
.order-tabs .order-tabs-v2 .order-tabs-v2s{
.order-tabs-v2s{
display: flex;
align-items: center;
position: relative;
height: 120upx;
flex: 1;
padding-top: 10upx;
height: 100upx;
}
/*搜索图标*/
.order-tabs-v2 .search{
width: 40upx;
height: 40upx;
margin: 0upx 20upx;
}
.order-tabs-v2 .filter{
width: 60upx;
height: 60upx;
margin: auto 10upx;
padding-left: 20%;
margin: 30upx 20upx;
}
.order-tabs-v2 input{
width: 57%;
.order-tabs-v2s input{
width: 52%;
font-size: var(--f24);
padding: 8px;
padding: 20upx;
margin-top: 15upx;
line-height: 1.5;
}
.order-tabs-v2 .order-tabs-v2s view{
.order-tabs-search text{
position: absolute;
right: 80upx;
color: var(--c427);
border: 1px solid var(--c427);
padding: 8upx 36upx;
border-radius: 30upx;
margin-top: 15upx;
}
.order-tabs-filter{
margin-left: 140upx;
margin-top: 15upx;
}
.filter{
width: 60upx;
height: 60upx;
}
.cons-package-status{
width: 86%;
display: flex;
align-items: center;
margin: -10upx auto;
background-color: #fff;
border-radius: 12upx;
padding: 2%;
border-radius: 10upx;
padding: 20upx;
}
.control-item{
......@@ -76,21 +80,16 @@
}
.cons-list{
width: 90%;
margin: 40upx auto;
background-color: #fff;
margin: 20upx;
border-radius: 12upx;
padding: 5px;
font-size: var(--f24);
/*height: 100px;*/
}
.cons-list-row {
margin-bottom: 2px
}
/* 签收图片样式 */
.image_list{
font-size: 26upx;
......@@ -127,3 +126,111 @@
border-radius: 12upx;
}
/* 签收图片样式-end */
/* 额外搜索框样式 */
.popup-container {
padding: 20rpx 30rpx;
font-size: var(--f24);
}
.header {
margin-bottom: 20rpx;
/* 标题居中 */
text-align: center;
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
.section {
margin-bottom: 20rpx;
}
/*修改多选框组件的样式*/
.section-cons-status ::v-deep .uni-data-checklist .checklist-group .checklist-box.is--tag{
/*根据页面宽度向两边拉伸*/
/*flex: 1 !important;*/
padding: 10upx 10upx !important;
margin-right: 10upx;
font-size: var(--f26);
}
.section-title {
/*display: block;*/
color: var(--c-1);
font-size: var(--f28);
font-weight: 700;
}
.date-section {
display: flex;
flex-direction: row;
align-items: center;
}
.date-item {
flex: 1;
display: flex;
flex-direction: column;
}
.date-picker {
border: 1rpx solid #eee;
padding: 15rpx;
border-radius: 8rpx;
margin-top: 10rpx;
}
.separator {
margin: 0 20rpx;
}
.section .input {
font-weight: 500;
font-size: var(--f24);
border: 1px solid var(--cdf);
padding: 12upx 10upx;
border-radius: 12upx;
margin-top: 10upx;
}
.section .input::placeholder {
color: red !important;
font-size: var(--f24) !important;
}
.button-group {
display: flex;
justify-content: space-between;
margin-top: 40rpx;
}
.btn {
flex: 0.48;
height: 80rpx;
line-height: 80rpx;
border-radius: 10rpx;
font-size: var(--f32) ;
margin-right: 20upx;
}
.reset-btn {
background-color: #f8f8f8;
color: #666;
}
.search-btn {
background-color: #007AFF;
color: white;
}
/* 额外搜索框样式-end */
.loading-text{
margin-top: -20upx !important;
}
src/static/css/cons_address.css 0 → 100644
View file @ 432b0abf
/* 主体内容 */
.container {
margin-top: 100upx;
padding: 20rpx;
}
/* 仓库卡片 */
.warehouse-card {
background: #fff;
border-radius: 12rpx;
padding: 30rpx;
margin-bottom: 20upx;
/*box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);*/
}
/*仓库按钮组*/
.warehouse-btn-group{
padding-left: 30upx;
display: flex;
}
/*仓库按钮*/
.warehouse-btn{
background-color: #cccccc; /* 默认灰色 */
color: #ffffff;
font-size: var(--f30);
/*使按钮靠左对齐*/
margin-left: inherit;
/*margin: 10upx;*/
padding: 10upx;
width: 45%;
text-align: center;
border-radius: 10upx;
}
.warehouse-btn.active {
background-color: #007AFF; /* 选中蓝色 */
/* 如果需要渐变效果可以加transition */
transition: background-color 0.3s ease;
}
/*基础信息卡片*/
.base-card{
padding: 30rpx;
margin-bottom: 20rpx;
background: #fff;
border-radius: 12rpx;
/*padding-top: 20upx;*/
/*padding: 30rpx;*/
}
/*会员提示语*/
.member-notice{
color: red;
font-size: var(--f28);
}
.info-item{
display: flex;
margin-bottom: 30rpx;
/*margin-bottom: 20rpx;*/
font-size: var(--f32);
/*font-size: 28rpx;*/
}
/*会员编号样式*/
.member-no{
margin-bottom: 20upx;
font-weight: 700;
color: red;
font-size: var(--f40);
}
.item-label {
margin-left: 10upx;
margin-right: 5upx;
width: 160rpx;
color: #666;
/*让文字两端对齐*/
text-align-last: justify;
}
.item-value {
/*flex: 1;*/
color: #333;
}
.copy-text{
padding-top: 5upx;
margin-left: 20upx;
font-size: var(--f28);
color: var(--c427);
}
.from-item-radio{
display: flex;
align-items: center;
margin-bottom: 10upx;
margin-right: 15upx;
position: relative;
}
/*基础信息卡片*/
.option-card{
padding: 30rpx;
margin-bottom: 20rpx;
background: #fff;
border-radius: 12rpx;
}
.footer-nav{
display: flex;
width: 100%;
}
.footer-btn{
/*根据页面宽度向两边拉伸，不会因为内容过长换行*/
flex: 1;
margin: 10upx;
padding: 25upx;
border-radius: 10upx;
text-align: center;
color: #fff;
}
src/static/css/cons_create.css
View file @ 432b0abf
......@@ -151,6 +151,26 @@
padding: 20rpx;
border-bottom: 1rpx solid #eee;
}
/*商品选择input框的样式*/
.table-row ::v-deep .uni-input-input{
font-size: var(--f26);
}
/*商品选择X按钮的大小*/
.table-row ::v-deep .uni-icon-clear, .uni-icon-search{
font-size: var(--f28) !important;
}
/*下拉商品文字的样式*/
.table-row ::v-deep .uni-combox__selector-item{
font-size: var(--f26) !important;
line-height : 40upx !important;
margin: 20upx 0;
}
/*下拉商品框的样式*/
.table-row ::v-deep .uni-combox__selector{
width: 150%!important;
}
.header-cell {
flex: 1;
......
src/static/lang/zh/cons.js
View file @ 432b0abf
......@@ -4,7 +4,7 @@ export default {
"myConsPackage": "我的集运包裹",
"address": "专属地址",
"turnOnWaitConfirm": "转运待确认",
"consOrder": "集运地址",
"consOrder": "集运订单",
"searchNotice": "支持包裹快递单号/提单/订单号查询/商品名称",
"closePopup": "关闭弹窗",
"create": "包裹预报",
......
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