Browse Source

更新物流计算器页面:添加头像、优化标签样式、更新物流人员信息

main
TraeAI 1 day ago
parent
commit
263854cb0e
  1. 69
      pages/freight-calculator/index.js
  2. 10
      pages/freight-calculator/index.wxml
  3. 55
      pages/freight-calculator/index.wxss

69
pages/freight-calculator/index.js

@ -28,24 +28,19 @@ Page({
logisticsPersonnel: [ logisticsPersonnel: [
{ {
id: 1, id: 1,
name: '张', name: '张顺玟',
position: '物流经理', position: '物流经理',
experience: 5, experience: 5,
phone: '13800138000' phone: '15528115321',
description: '拥有5年专业物流管理经验,擅长整车运输和零担拼车方案设计,对鸡蛋的运输要求有深入了解,能够为客户提供高效、安全的物流解决方案。'
}, },
{ {
id: 2, id: 2,
name: '李四', name: '刘敏',
position: '物流经理', position: '物流经理',
experience: 3, experience: 5,
phone: '13900139000' phone: '19123901316',
}, description: '5年物流行业经验,专注于配送路线优化,熟悉各种车型的载重和体积限制,能够根据货物特性制定最适合的运输方案,确保货物安全准时送达。'
{
id: 3,
name: '王五',
position: '物流经理',
experience: 2,
phone: '13700137000'
} }
], ],
// 选中的货源信息 // 选中的货源信息
@ -865,9 +860,18 @@ Page({
// 计算运费 // 计算运费
calculateFreight: function () { calculateFreight: function () {
// 验证输入 // 验证输入
if (!this.data.origin.province || !this.data.destination.province) { if (!this.data.origin.province || !this.data.origin.city || !this.data.destination.province || !this.data.destination.city) {
wx.showToast({
title: '请完整填写出发地和目的地信息',
icon: 'none'
});
return;
}
// 检查详细地址
if (!this.data.origin.detail || !this.data.destination.detail) {
wx.showToast({ wx.showToast({
title: '请填写完整的出发地和目的地', title: '请填写详细地址',
icon: 'none' icon: 'none'
}); });
return; return;
@ -1018,7 +1022,7 @@ Page({
convertAddressToCoordinates: function (origin, destination) { convertAddressToCoordinates: function (origin, destination) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
// 转换出发地地址 // 转换出发地地址
const convertOrigin = new Promise((resolveOrigin) => { const convertOrigin = new Promise((resolveOrigin, rejectOrigin) => {
// 如果出发地已经有经纬度,直接返回 // 如果出发地已经有经纬度,直接返回
if (origin.latitude && origin.longitude) { if (origin.latitude && origin.longitude) {
resolveOrigin(origin); resolveOrigin(origin);
@ -1028,7 +1032,7 @@ Page({
// 构建出发地完整地址 // 构建出发地完整地址
const originAddress = `${origin.province}${origin.city}${origin.district}${origin.detail}`; const originAddress = `${origin.province}${origin.city}${origin.district}${origin.detail}`;
if (!originAddress) { if (!originAddress) {
resolveOrigin(origin); rejectOrigin(new Error('出发地地址不能为空,请输入地址或使用手动选择位置'));
return; return;
} }
@ -1049,18 +1053,18 @@ Page({
}); });
} else { } else {
console.error('出发地地址转换失败:', res.data); console.error('出发地地址转换失败:', res.data);
resolveOrigin(origin); rejectOrigin(new Error('出发地地址无效,请检查输入或使用手动选择位置'));
} }
}, },
fail: function (err) { fail: function (err) {
console.error('出发地地址转换失败:', err); console.error('出发地地址转换失败:', err);
resolveOrigin(origin); rejectOrigin(new Error('出发地地址转换失败,请稍后重试'));
} }
}); });
}); });
// 转换目的地地址 // 转换目的地地址
const convertDestination = new Promise((resolveDestination) => { const convertDestination = new Promise((resolveDestination, rejectDestination) => {
// 如果目的地已经有经纬度,直接返回 // 如果目的地已经有经纬度,直接返回
if (destination.latitude && destination.longitude) { if (destination.latitude && destination.longitude) {
resolveDestination(destination); resolveDestination(destination);
@ -1070,7 +1074,7 @@ Page({
// 构建目的地完整地址 // 构建目的地完整地址
const destinationAddress = `${destination.province}${destination.city}${destination.district}${destination.detail}`; const destinationAddress = `${destination.province}${destination.city}${destination.district}${destination.detail}`;
if (!destinationAddress) { if (!destinationAddress) {
resolveDestination(destination); rejectDestination(new Error('目的地地址不能为空,请输入地址或使用手动选择位置'));
return; return;
} }
@ -1091,18 +1095,27 @@ Page({
}); });
} else { } else {
console.error('目的地地址转换失败:', res.data); console.error('目的地地址转换失败:', res.data);
resolveDestination(destination); rejectDestination(new Error('目的地地址无效,请检查输入或使用手动选择位置'));
} }
}, },
fail: function (err) { fail: function (err) {
console.error('目的地地址转换失败:', err); console.error('目的地地址转换失败:', err);
resolveDestination(destination); rejectDestination(new Error('目的地地址转换失败,请稍后重试'));
} }
}); });
}); });
// 等待两个地址转换完成 // 等待两个地址转换完成
Promise.all([convertOrigin, convertDestination]).then(([originWithCoords, destinationWithCoords]) => { Promise.all([convertOrigin, convertDestination]).then(([originWithCoords, destinationWithCoords]) => {
// 验证两个地址都有经纬度
if (!originWithCoords.latitude || !originWithCoords.longitude) {
reject(new Error('出发地地址无效,请检查输入'));
return;
}
if (!destinationWithCoords.latitude || !destinationWithCoords.longitude) {
reject(new Error('目的地地址无效,请检查输入'));
return;
}
resolve({ originWithCoords, destinationWithCoords }); resolve({ originWithCoords, destinationWithCoords });
}).catch(err => { }).catch(err => {
reject(err); reject(err);
@ -1207,8 +1220,14 @@ Page({
} }
// 检查是否有出发地和目的地信息 // 检查是否有出发地和目的地信息
if (!this.data.origin.province || !this.data.destination.province) { if (!this.data.origin.province || !this.data.origin.city || !this.data.destination.province || !this.data.destination.city) {
wx.showToast({ title: '请选择出发地和目的地', icon: 'none' }); wx.showToast({ title: '请完整填写出发地和目的地信息', icon: 'none' });
return;
}
// 检查详细地址
if (!this.data.origin.detail || !this.data.destination.detail) {
wx.showToast({ title: '请填写详细地址', icon: 'none' });
return; return;
} }
@ -1300,7 +1319,7 @@ Page({
this.setData({ loading: false }); this.setData({ loading: false });
console.error('地址转换失败:', err); console.error('地址转换失败:', err);
wx.showToast({ wx.showToast({
title: '地址转换失败,请稍后重试', title: err.message || '地址转换失败,请检查输入',
icon: 'none' icon: 'none'
}); });
}); });

10
pages/freight-calculator/index.wxml

@ -165,6 +165,12 @@
<text class="result-value" style="color: {{isCompliant ? '#07C160' : '#F56C6C'}}">{{complianceStatus}}</text> <text class="result-value" style="color: {{isCompliant ? '#07C160' : '#F56C6C'}}">{{complianceStatus}}</text>
</view> </view>
</view> </view>
<!-- 运费提示信息 -->
<view class="result-note" wx:if="{{showResult}}">
<text class="note-text">注:预估运费可能与实际费用存在误差,仅供参考。如需准确报价,建议联系下方专业物流老师获取详细方案。</text>
</view>
<view class="detail-section" wx:if="{{showResult && detailText}}"> <view class="detail-section" wx:if="{{showResult && detailText}}">
<view style="display: flex; justify-content: space-between; align-items: center;"> <view style="display: flex; justify-content: space-between; align-items: center;">
<text class="section-title">费用明细</text> <text class="section-title">费用明细</text>
@ -220,7 +226,9 @@
<view class="personnel-card" wx:for="{{logisticsPersonnel}}" wx:key="item.id"> <view class="personnel-card" wx:for="{{logisticsPersonnel}}" wx:key="item.id">
<view class="personnel-header-section"> <view class="personnel-header-section">
<view class="personnel-avatar"> <view class="personnel-avatar">
<text class="avatar-text">{{item.name.charAt(0)}}</text> <image wx:if="{{index === 0}}" src="https://my-supplier-photos.oss-cn-chengdu.aliyuncs.com/products/%E7%BB%BF%E5%A3%B3/image/855d000d7555af77bb2d46a86deb16d2.jpeg" class="avatar-image"></image>
<image wx:elif="{{index === 1}}" src="https://my-supplier-photos.oss-cn-chengdu.aliyuncs.com/products/%E7%BB%BF%E5%A3%B3/image/855d000d7555af77bb2d46a86deb16d2.jpeg" class="avatar-image"></image>
<text wx:else class="avatar-text">{{item.name.charAt(0)}}</text>
</view> </view>
<view class="personnel-header-info"> <view class="personnel-header-info">
<view class="personnel-name">{{item.name}}</view> <view class="personnel-name">{{item.name}}</view>

55
pages/freight-calculator/index.wxss

@ -103,6 +103,13 @@
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
} }
.avatar-image {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.personnel-header-info { .personnel-header-info {
flex: 1; flex: 1;
display: flex; display: flex;
@ -134,11 +141,20 @@
.personnel-tag { .personnel-tag {
font-size: 18rpx; font-size: 18rpx;
color: #1989fa; color: #1890ff;
background-color: rgba(25, 137, 250, 0.1); background: linear-gradient(135deg, rgba(25, 137, 250, 0.15), rgba(24, 144, 255, 0.05));
padding: 6rpx 14rpx; padding: 8rpx 16rpx;
border-radius: 16rpx; border-radius: 20rpx;
border: 1rpx solid rgba(25, 137, 250, 0.2); border: 1rpx solid rgba(25, 137, 250, 0.3);
box-shadow: 0 2rpx 6rpx rgba(25, 137, 250, 0.15);
font-weight: 500;
transition: all 0.3s ease;
}
.personnel-tag:hover {
background: linear-gradient(135deg, rgba(25, 137, 250, 0.2), rgba(24, 144, 255, 0.1));
box-shadow: 0 3rpx 8rpx rgba(25, 137, 250, 0.2);
transform: translateY(-1rpx);
} }
.personnel-description { .personnel-description {
@ -186,16 +202,17 @@
background: linear-gradient(135deg, #1989fa 0%, #1890ff 100%); background: linear-gradient(135deg, #1989fa 0%, #1890ff 100%);
color: #fff; color: #fff;
border: none; border: none;
border-radius: 8rpx; border-radius: 6rpx;
padding: 14rpx 28rpx; padding: 10rpx 16rpx;
font-size: 22rpx; font-size: 20rpx;
font-weight: 600; font-weight: 600;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8rpx; gap: 6rpx;
box-shadow: 0 4rpx 12rpx rgba(25, 137, 250, 0.3); box-shadow: 0 2rpx 8rpx rgba(25, 137, 250, 0.3);
transition: all 0.3s ease; transition: all 0.3s ease;
white-space: nowrap;
} }
.contact-btn:hover { .contact-btn:hover {
@ -447,6 +464,24 @@
font-size: 28rpx; font-size: 28rpx;
} }
/* 结果提示信息 */
.result-note {
margin-top: 16rpx;
padding: 16rpx;
background-color: #fff7e6;
border-radius: 8rpx;
border-left: 4rpx solid #fa8c16;
width: 100%;
box-sizing: border-box;
}
.note-text {
font-size: 20rpx;
color: #fa8c16;
line-height: 1.5;
font-weight: 500;
}
/* 历史记录 */ /* 历史记录 */
.history-list { .history-list {
margin-top: 12rpx; margin-top: 12rpx;

Loading…
Cancel
Save