Commit 432b0abf authored by knight's avatar knight

集运首页

parent e92440fc
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);
}
......
......@@ -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);
}
......@@ -361,6 +361,12 @@
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/cons/address",
"style": {
"navigationStyle": "custom"
}
}
],
"globalStyle": {
......
<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>
......@@ -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;
}
},
}
......
......@@ -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
})
}
......
This diff is collapsed.
.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;
}
/* 主体内容 */
.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;
}
......@@ -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;
......
......@@ -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