Default User
4 days ago
13 changed files with 2505 additions and 11 deletions
@ -0,0 +1,846 @@ |
|||
// pages/freight-calculator/index.js
|
|||
const API = require('../../utils/api.js'); |
|||
|
|||
Page({ |
|||
data: { |
|||
// 出发地信息
|
|||
origin: { |
|||
province: '', |
|||
city: '', |
|||
district: '', |
|||
detail: '' |
|||
}, |
|||
// 目的地信息
|
|||
destination: { |
|||
province: '', |
|||
city: '', |
|||
district: '', |
|||
detail: '' |
|||
}, |
|||
// 货物信息
|
|||
goodsInfo: { |
|||
weight: '', // 重量（kg）
|
|||
volume: '', // 体积（m³）
|
|||
quantity: 1, // 数量
|
|||
type: 'egg' // 货物类型，默认为鸡蛋
|
|||
}, |
|||
// 物流车辆信息
|
|||
vehicleInfo: { |
|||
type: '', // 车辆类型
|
|||
capacity: '', // 载重能力（吨）
|
|||
number: '', // 车辆编号
|
|||
driver: '', // 司机姓名
|
|||
phone: '' // 联系电话
|
|||
}, |
|||
// 物流人员信息
|
|||
logisticsPersonnel: [ |
|||
{ |
|||
id: 1, |
|||
name: '张三', |
|||
position: '物流经理', |
|||
experience: 5, |
|||
phone: '13800138000' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '李四', |
|||
position: '配送专员', |
|||
experience: 3, |
|||
phone: '13900139000' |
|||
}, |
|||
{ |
|||
id: 3, |
|||
name: '王五', |
|||
position: '调度员', |
|||
experience: 2, |
|||
phone: '13700137000' |
|||
} |
|||
], |
|||
// 车辆类型列表
|
|||
vehicleTypes: ['厢式货车', '冷藏车', '平板车', '高栏车', '自卸车'], |
|||
// 选中的车辆类型索引
|
|||
selectedVehicleTypeIndex: 0, |
|||
// 选中的货源信息
|
|||
selectedGoods: {}, |
|||
// 选中的规格索引
|
|||
selectedSpecIndex: 0, |
|||
// 计算结果
|
|||
calculationResult: null, |
|||
// 地址选择器状态
|
|||
showOriginPicker: false, |
|||
showDestinationPicker: false, |
|||
// 加载状态
|
|||
loading: false, |
|||
// 历史记录
|
|||
historyRecords: [], |
|||
// 地址选择器数据
|
|||
regionList: { |
|||
provinces: [], |
|||
cities: [], |
|||
districts: [] |
|||
}, |
|||
// 地址选择器当前选中
|
|||
pickerValues: { |
|||
origin: [0, 0, 0], |
|||
destination: [0, 0, 0] |
|||
} |
|||
}, |
|||
|
|||
onLoad: function (options) { |
|||
// 页面加载时的初始化逻辑
|
|||
console.log('物流运费估算页面加载，options:', options); |
|||
|
|||
// 加载历史记录
|
|||
this.loadHistoryRecords(); |
|||
|
|||
// 初始化地址选择器数据
|
|||
this.initRegionData(); |
|||
|
|||
// 如果从商品详情页跳转过来，获取商品信息
|
|||
if (options.goodsId) { |
|||
this.loadGoodsInfo(options.goodsId); |
|||
} |
|||
|
|||
// 如果直接传递了货源信息 (goodsInfo)
|
|||
if (options.goodsInfo) { |
|||
try { |
|||
const goodsInfo = JSON.parse(options.goodsInfo); |
|||
this.setData({ |
|||
selectedGoods: goodsInfo, |
|||
'goodsInfo.weight': goodsInfo.grossWeight || '', |
|||
'goodsInfo.quantity': 1 |
|||
}); |
|||
} catch (e) { |
|||
console.error('解析货源信息失败:', e); |
|||
} |
|||
} |
|||
|
|||
// 如果直接传递了货源信息 (goodsData)
|
|||
if (options.goodsData) { |
|||
try { |
|||
// 尝试直接解析
|
|||
let goodsData; |
|||
try { |
|||
goodsData = JSON.parse(options.goodsData); |
|||
} catch (e1) { |
|||
// 如果直接解析失败，尝试解码后再解析
|
|||
try { |
|||
const decodedGoodsData = decodeURIComponent(options.goodsData); |
|||
goodsData = JSON.parse(decodedGoodsData); |
|||
} catch (e2) { |
|||
console.error('解析货源信息失败 (已尝试解码):', e2); |
|||
throw e2; |
|||
} |
|||
} |
|||
|
|||
this.setData({ |
|||
selectedGoods: goodsData, |
|||
'goodsInfo.weight': goodsData.grossWeight || '', |
|||
'goodsInfo.quantity': 1 |
|||
}); |
|||
|
|||
// 设置出发地为商品所在地
|
|||
if (goodsData.region) { |
|||
const regionInfo = this.parseRegion(goodsData.region); |
|||
this.setData({ |
|||
'origin.province': regionInfo.province || '', |
|||
'origin.city': regionInfo.city || '', |
|||
'origin.district': regionInfo.district || '' |
|||
}); |
|||
} |
|||
} catch (e) { |
|||
console.error('解析货源信息失败:', e); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// 初始化地址选择器数据
|
|||
initRegionData: function () { |
|||
// 这里可以从API获取地址数据，或者使用本地数据
|
|||
const provinces = [ |
|||
'北京市', '上海市', '广东省', '江苏省', '浙江省', '山东省', '河南省', '四川省', '湖北省', '福建省', |
|||
'湖南省', '安徽省', '河北省', '辽宁省', '陕西省', '江西省', '云南省', '黑龙江省', '山西省', '广西壮族自治区', |
|||
'内蒙古自治区', '吉林省', '贵州省', '新疆维吾尔自治区', '甘肃省', '重庆市', '宁夏回族自治区', '青海省', '西藏自治区', '海南省' |
|||
]; |
|||
|
|||
this.setData({ |
|||
'regionList.provinces': provinces |
|||
}); |
|||
}, |
|||
|
|||
// 加载商品信息
|
|||
loadGoodsInfo: function (goodsId) { |
|||
// 从本地存储获取商品信息
|
|||
const goods = wx.getStorageSync('goods') || []; |
|||
const goodsItem = goods.find(item => item.id === goodsId || item.productId === goodsId); |
|||
|
|||
if (goodsItem) { |
|||
// 设置选中的货源信息
|
|||
this.setData({ |
|||
selectedGoods: goodsItem |
|||
}); |
|||
|
|||
// 设置出发地为商品所在地
|
|||
if (goodsItem.region) { |
|||
const regionInfo = this.parseRegion(goodsItem.region); |
|||
this.setData({ |
|||
'origin.province': regionInfo.province || '', |
|||
'origin.city': regionInfo.city || '', |
|||
'origin.district': regionInfo.district || '' |
|||
}); |
|||
} |
|||
|
|||
// 设置货物重量（如果有）
|
|||
if (goodsItem.grossWeight) { |
|||
this.setData({ |
|||
'goodsInfo.weight': goodsItem.grossWeight |
|||
}); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// 解析地区信息
|
|||
parseRegion: function (region) { |
|||
if (!region) return {}; |
|||
|
|||
// 简单的地区解析逻辑，实际项目中可能需要更复杂的解析
|
|||
const parts = region.split(' '); |
|||
return { |
|||
province: parts[0] || '', |
|||
city: parts[1] || '', |
|||
district: parts[2] || '' |
|||
}; |
|||
}, |
|||
|
|||
// 加载历史记录
|
|||
loadHistoryRecords: function () { |
|||
const history = wx.getStorageSync('freightCalculatorHistory') || []; |
|||
this.setData({ |
|||
historyRecords: history.slice(0, 10) // 只显示最近10条记录
|
|||
}); |
|||
}, |
|||
|
|||
// 保存历史记录
|
|||
saveHistoryRecord: function (result) { |
|||
const history = wx.getStorageSync('freightCalculatorHistory') || []; |
|||
const record = { |
|||
id: Date.now(), |
|||
origin: this.data.origin, |
|||
destination: this.data.destination, |
|||
goodsInfo: this.data.goodsInfo, |
|||
vehicleInfo: this.data.vehicleInfo, |
|||
transportMode: this.data.transportMode, |
|||
result: result, |
|||
timestamp: new Date().toISOString() |
|||
}; |
|||
|
|||
// 添加到历史记录开头
|
|||
history.unshift(record); |
|||
// 只保留最近20条记录
|
|||
const newHistory = history.slice(0, 20); |
|||
wx.setStorageSync('freightCalculatorHistory', newHistory); |
|||
|
|||
// 更新页面数据
|
|||
this.setData({ |
|||
historyRecords: newHistory.slice(0, 10) |
|||
}); |
|||
}, |
|||
|
|||
// 输入出发地
|
|||
bindOriginInput: function (e) { |
|||
const { key } = e.currentTarget.dataset; |
|||
this.setData({ |
|||
[`origin.${key}`]: e.detail.value |
|||
}); |
|||
}, |
|||
|
|||
// 输入目的地
|
|||
bindDestinationInput: function (e) { |
|||
const { key } = e.currentTarget.dataset; |
|||
this.setData({ |
|||
[`destination.${key}`]: e.detail.value |
|||
}); |
|||
}, |
|||
|
|||
// 输入货物信息
|
|||
bindGoodsInfoInput: function (e) { |
|||
const { key } = e.currentTarget.dataset; |
|||
this.setData({ |
|||
[`goodsInfo.${key}`]: e.detail.value |
|||
}); |
|||
}, |
|||
|
|||
// 选择规格组合
|
|||
bindSpecChange: function (e) { |
|||
const index = e.detail.value; |
|||
this.setData({ |
|||
selectedSpecIndex: index |
|||
}); |
|||
}, |
|||
|
|||
// 选择车辆类型
|
|||
bindVehicleTypeChange: function (e) { |
|||
const index = e.detail.value; |
|||
this.setData({ |
|||
selectedVehicleTypeIndex: index, |
|||
'vehicleInfo.type': this.data.vehicleTypes[index] |
|||
}); |
|||
}, |
|||
|
|||
// 输入车辆信息
|
|||
bindVehicleInfoInput: function (e) { |
|||
const { key } = e.currentTarget.dataset; |
|||
this.setData({ |
|||
[`vehicleInfo.${key}`]: e.detail.value |
|||
}); |
|||
}, |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
// 地址选择器值变化
|
|||
bindRegionChange: function (e) { |
|||
const { type } = e.currentTarget.dataset; |
|||
const values = e.detail.value; |
|||
|
|||
// 更新地址信息
|
|||
if (type === 'origin') { |
|||
this.setData({ |
|||
'origin.province': values[0], |
|||
'origin.city': values[1], |
|||
'origin.district': values[2] |
|||
}); |
|||
} else if (type === 'destination') { |
|||
this.setData({ |
|||
'destination.province': values[0], |
|||
'destination.city': values[1], |
|||
'destination.district': values[2] |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
// 打开出发地选择器
|
|||
openOriginPicker: function () { |
|||
this.setData({ |
|||
showOriginPicker: true |
|||
}); |
|||
}, |
|||
|
|||
// 打开目的地选择器
|
|||
openDestinationPicker: function () { |
|||
this.setData({ |
|||
showDestinationPicker: true |
|||
}); |
|||
}, |
|||
|
|||
// 关闭地址选择器
|
|||
closePicker: function () { |
|||
this.setData({ |
|||
showOriginPicker: false, |
|||
showDestinationPicker: false |
|||
}); |
|||
}, |
|||
|
|||
// 选择地址
|
|||
selectAddress: function (e) { |
|||
const { type, address } = e.detail; |
|||
if (type === 'origin') { |
|||
this.setData({ |
|||
origin: address, |
|||
showOriginPicker: false |
|||
}); |
|||
} else if (type === 'destination') { |
|||
this.setData({ |
|||
destination: address, |
|||
showDestinationPicker: false |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
// 使用当前位置作为出发地
|
|||
useCurrentLocation: function () { |
|||
const that = this; |
|||
wx.getLocation({ |
|||
type: 'wgs84', |
|||
success: function (res) { |
|||
// 显示加载提示
|
|||
wx.showLoading({ |
|||
title: '获取地址中...', |
|||
mask: true |
|||
}); |
|||
|
|||
// 使用微信的地址解析服务获取详细地址
|
|||
wx.request({ |
|||
url: 'https://apis.map.qq.com/ws/geocoder/v1/', |
|||
data: { |
|||
location: `${res.latitude},${res.longitude}`, |
|||
key: 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77' // 这里使用腾讯地图API密钥，实际项目中应该替换为自己的密钥
|
|||
}, |
|||
success: function (response) { |
|||
wx.hideLoading(); |
|||
if (response.data.status === 0) { |
|||
const result = response.data.result; |
|||
that.setData({ |
|||
destination: { |
|||
province: result.address_component.province || '', |
|||
city: result.address_component.city || '', |
|||
district: result.address_component.district || '', |
|||
detail: result.address || '', |
|||
latitude: res.latitude, |
|||
longitude: res.longitude |
|||
} |
|||
}); |
|||
wx.showToast({ |
|||
title: '地址获取成功', |
|||
icon: 'success' |
|||
}); |
|||
} else { |
|||
wx.showToast({ |
|||
title: '地址解析失败，请手动输入', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
fail: function (err) { |
|||
wx.hideLoading(); |
|||
console.error('地址解析失败:', err); |
|||
wx.showToast({ |
|||
title: '地址解析失败，请手动输入', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
fail: function (err) { |
|||
console.error('获取位置失败:', err); |
|||
wx.showToast({ |
|||
title: '获取位置失败，请手动输入', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 手动选择出发地位置
|
|||
chooseOriginLocation: function () { |
|||
const that = this; |
|||
wx.chooseLocation({ |
|||
success(res) { |
|||
console.log('用户选择的出发地位置信息:', res); |
|||
const name = res.name; |
|||
const address = res.address; |
|||
const latitude = res.latitude; |
|||
const longitude = res.longitude; |
|||
|
|||
// 使用腾讯地图API进行逆地理编码，获取详细地址信息
|
|||
wx.request({ |
|||
url: 'https://apis.map.qq.com/ws/geocoder/v1/', |
|||
data: { |
|||
location: `${latitude},${longitude}`, |
|||
key: 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77' |
|||
}, |
|||
success: function (response) { |
|||
if (response.data.status === 0) { |
|||
const result = response.data.result; |
|||
that.setData({ |
|||
origin: { |
|||
province: result.address_component.province || '', |
|||
city: result.address_component.city || '', |
|||
district: result.address_component.district || '', |
|||
detail: `${name} ${address}`, |
|||
latitude: latitude, |
|||
longitude: longitude |
|||
} |
|||
}); |
|||
wx.showToast({ |
|||
title: '出发地选择成功', |
|||
icon: 'success' |
|||
}); |
|||
} else { |
|||
wx.showToast({ |
|||
title: '地址解析失败，请手动输入', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
fail: function (err) { |
|||
console.error('地址解析失败:', err); |
|||
wx.showToast({ |
|||
title: '地址解析失败，请手动输入', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
fail(err) { |
|||
console.error('选择出发地位置失败:', err); |
|||
if (err.errMsg === 'chooseLocation:fail auth deny') { |
|||
wx.showToast({ |
|||
title: '需要位置授权才能选择地点', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}); |
|||
// 引导用户重新授权
|
|||
that.requestLocationAuth(); |
|||
} else { |
|||
wx.showToast({ |
|||
title: '选择位置失败', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 手动选择目的地位置
|
|||
chooseDestinationLocation: function () { |
|||
const that = this; |
|||
wx.chooseLocation({ |
|||
success(res) { |
|||
console.log('用户选择的目的地位置信息:', res); |
|||
const name = res.name; |
|||
const address = res.address; |
|||
const latitude = res.latitude; |
|||
const longitude = res.longitude; |
|||
|
|||
// 使用腾讯地图API进行逆地理编码，获取详细地址信息
|
|||
wx.request({ |
|||
url: 'https://apis.map.qq.com/ws/geocoder/v1/', |
|||
data: { |
|||
location: `${latitude},${longitude}`, |
|||
key: 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77' |
|||
}, |
|||
success: function (response) { |
|||
if (response.data.status === 0) { |
|||
const result = response.data.result; |
|||
that.setData({ |
|||
destination: { |
|||
province: result.address_component.province || '', |
|||
city: result.address_component.city || '', |
|||
district: result.address_component.district || '', |
|||
detail: `${name} ${address}`, |
|||
latitude: latitude, |
|||
longitude: longitude |
|||
} |
|||
}); |
|||
wx.showToast({ |
|||
title: '目的地选择成功', |
|||
icon: 'success' |
|||
}); |
|||
} else { |
|||
wx.showToast({ |
|||
title: '地址解析失败，请手动输入', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
fail: function (err) { |
|||
console.error('地址解析失败:', err); |
|||
wx.showToast({ |
|||
title: '地址解析失败，请手动输入', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
fail(err) { |
|||
console.error('选择目的地位置失败:', err); |
|||
if (err.errMsg === 'chooseLocation:fail auth deny') { |
|||
wx.showToast({ |
|||
title: '需要位置授权才能选择地点', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}); |
|||
// 引导用户重新授权
|
|||
that.requestLocationAuth(); |
|||
} else { |
|||
wx.showToast({ |
|||
title: '选择位置失败', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 请求位置授权
|
|||
requestLocationAuth: function () { |
|||
const that = this; |
|||
|
|||
console.log('开始请求位置授权'); |
|||
|
|||
wx.showLoading({ |
|||
title: '请求授权中...', |
|||
mask: true |
|||
}); |
|||
|
|||
// 检查用户是否已经拒绝过授权
|
|||
wx.getSetting({ |
|||
success(res) { |
|||
wx.hideLoading(); |
|||
if (res.authSetting['scope.userLocation'] === false) { |
|||
// 用户已经拒绝过授权，直接引导到设置页面
|
|||
wx.showModal({ |
|||
title: '需要位置授权', |
|||
content: '请在设置中开启位置授权，以便我们为您提供相关服务', |
|||
showCancel: true, |
|||
cancelText: '取消', |
|||
confirmText: '去授权', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
// 打开设置页面让用户手动开启授权
|
|||
wx.openSetting({ |
|||
success: (settingRes) => { |
|||
console.log('设置页面返回结果:', settingRes); |
|||
if (settingRes.authSetting['scope.userLocation']) { |
|||
// 用户在设置中开启了位置授权
|
|||
wx.showToast({ |
|||
title: '授权成功', |
|||
icon: 'success', |
|||
duration: 1500 |
|||
}); |
|||
} else { |
|||
// 用户在设置中仍未开启位置授权
|
|||
wx.showToast({ |
|||
title: '您已拒绝位置授权', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
fail: (err) => { |
|||
console.error('打开设置失败:', err); |
|||
wx.showToast({ |
|||
title: '打开设置失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
} else { |
|||
// 用户未拒绝过授权，调用 authorize
|
|||
wx.authorize({ |
|||
scope: 'scope.userLocation', |
|||
success() { |
|||
console.log('位置授权成功'); |
|||
wx.showToast({ |
|||
title: '授权成功', |
|||
icon: 'success', |
|||
duration: 1500 |
|||
}); |
|||
}, |
|||
fail(err) { |
|||
console.log('位置授权失败:', err); |
|||
// 授权失败，弹出模态框引导用户重新授权
|
|||
wx.showModal({ |
|||
title: '需要位置授权', |
|||
content: '请在设置中开启位置授权，以便我们为您提供相关服务', |
|||
showCancel: true, |
|||
cancelText: '取消', |
|||
confirmText: '去授权', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
// 打开设置页面让用户手动开启授权
|
|||
wx.openSetting({ |
|||
success: (settingRes) => { |
|||
console.log('设置页面返回结果:', settingRes); |
|||
if (settingRes.authSetting['scope.userLocation']) { |
|||
// 用户在设置中开启了位置授权
|
|||
wx.showToast({ |
|||
title: '授权成功', |
|||
icon: 'success', |
|||
duration: 1500 |
|||
}); |
|||
} else { |
|||
// 用户在设置中仍未开启位置授权
|
|||
wx.showToast({ |
|||
title: '您已拒绝位置授权', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
fail: (err) => { |
|||
console.error('打开设置失败:', err); |
|||
wx.showToast({ |
|||
title: '打开设置失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
fail(err) { |
|||
wx.hideLoading(); |
|||
console.error('获取设置失败:', err); |
|||
wx.showToast({ |
|||
title: '获取设置失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 计算运费
|
|||
calculateFreight: function () { |
|||
// 验证输入
|
|||
if (!this.data.origin.province || !this.data.destination.province) { |
|||
wx.showToast({ |
|||
title: '请填写完整的出发地和目的地', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// 如果没有重量和体积，使用默认值 1
|
|||
if (!this.data.goodsInfo.weight && !this.data.goodsInfo.volume) { |
|||
this.setData({ |
|||
'goodsInfo.weight': 1 |
|||
}); |
|||
} |
|||
|
|||
this.setData({ loading: true }); |
|||
|
|||
// 构建请求参数
|
|||
const params = { |
|||
origin: this.data.origin, |
|||
destination: this.data.destination, |
|||
goodsInfo: this.data.goodsInfo, |
|||
vehicleInfo: this.data.vehicleInfo |
|||
}; |
|||
|
|||
// 调用API计算运费
|
|||
API.calculateFreight(params).then(res => { |
|||
this.setData({ loading: false }); |
|||
if (res.success) { |
|||
this.setData({ calculationResult: res.data }); |
|||
// 保存历史记录
|
|||
this.saveHistoryRecord(res.data); |
|||
} else { |
|||
wx.showToast({ |
|||
title: res.message || '计算失败，请稍后重试', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}).catch(err => { |
|||
this.setData({ loading: false }); |
|||
console.error('计算运费失败:', err); |
|||
wx.showToast({ |
|||
title: '网络错误，请稍后重试', |
|||
icon: 'none' |
|||
}); |
|||
}); |
|||
}, |
|||
|
|||
// 清空输入
|
|||
clearInput: function () { |
|||
this.setData({ |
|||
origin: { |
|||
province: '', |
|||
city: '', |
|||
district: '', |
|||
detail: '' |
|||
}, |
|||
destination: { |
|||
province: '', |
|||
city: '', |
|||
district: '', |
|||
detail: '' |
|||
}, |
|||
goodsInfo: { |
|||
weight: '', |
|||
volume: '', |
|||
quantity: 1 |
|||
}, |
|||
vehicleInfo: { |
|||
type: '', |
|||
capacity: '', |
|||
number: '', |
|||
driver: '', |
|||
phone: '' |
|||
}, |
|||
selectedVehicleTypeIndex: 0, |
|||
|
|||
calculationResult: null |
|||
}); |
|||
}, |
|||
|
|||
// 使用历史记录
|
|||
useHistoryRecord: function (e) { |
|||
const index = e.currentTarget.dataset.index; |
|||
const record = this.data.historyRecords[index]; |
|||
|
|||
this.setData({ |
|||
origin: record.origin, |
|||
destination: record.destination, |
|||
goodsInfo: record.goodsInfo, |
|||
vehicleInfo: record.vehicleInfo || {}, |
|||
transportMode: record.transportMode, |
|||
calculationResult: record.result |
|||
}); |
|||
|
|||
// 恢复车辆类型选择
|
|||
if (record.vehicleInfo && record.vehicleInfo.type) { |
|||
const vehicleTypeIndex = this.data.vehicleTypes.indexOf(record.vehicleInfo.type); |
|||
if (vehicleTypeIndex !== -1) { |
|||
this.setData({ selectedVehicleTypeIndex: vehicleTypeIndex }); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// 删除历史记录
|
|||
deleteHistoryRecord: function (e) { |
|||
const index = e.currentTarget.dataset.index; |
|||
const history = wx.getStorageSync('freightCalculatorHistory') || []; |
|||
history.splice(index, 1); |
|||
wx.setStorageSync('freightCalculatorHistory', history); |
|||
|
|||
this.setData({ |
|||
historyRecords: history.slice(0, 10) |
|||
}); |
|||
}, |
|||
|
|||
// 清空历史记录
|
|||
clearHistory: function () { |
|||
wx.setStorageSync('freightCalculatorHistory', []); |
|||
this.setData({ |
|||
historyRecords: [] |
|||
}); |
|||
}, |
|||
|
|||
// 返回上一页
|
|||
navigateBack: function () { |
|||
wx.navigateBack({ |
|||
delta: 1 |
|||
}); |
|||
}, |
|||
|
|||
// 拨打电话
|
|||
makePhoneCall: function (e) { |
|||
const phone = e.currentTarget.dataset.phone; |
|||
if (phone) { |
|||
wx.makePhoneCall({ |
|||
phoneNumber: phone, |
|||
success: function () { |
|||
console.log('拨打电话成功'); |
|||
}, |
|||
fail: function (err) { |
|||
console.error('拨打电话失败:', err); |
|||
wx.showToast({ |
|||
title: '拨打电话失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
}); |
|||
@ -0,0 +1,5 @@ |
|||
{ |
|||
"navigationBarTitleText": "物流运费估算", |
|||
"navigationBarBackgroundColor": "#ffffff", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
@ -0,0 +1,240 @@ |
|||
<!-- pages/freight-calculator/index.wxml --> |
|||
<view class="container"> |
|||
<view class="main-content"> |
|||
<!-- 出发地信息 --> |
|||
<view class="section"> |
|||
<text class="section-title">出发地</text> |
|||
<view class="address-form"> |
|||
<view class="form-item"> |
|||
<text class="label">省份</text> |
|||
<input class="input" bindinput="bindOriginInput" data-key="province" value="{{origin.province}}" placeholder="请输入省份" /> |
|||
</view> |
|||
<view class="form-item"> |
|||
<text class="label">城市</text> |
|||
<input class="input" bindinput="bindOriginInput" data-key="city" value="{{origin.city}}" placeholder="请输入城市" /> |
|||
</view> |
|||
<view class="form-item"> |
|||
<text class="label">区县</text> |
|||
<input class="input" bindinput="bindOriginInput" data-key="district" value="{{origin.district}}" placeholder="请输入区县" /> |
|||
</view> |
|||
<view class="form-item"> |
|||
<text class="label">详细地址</text> |
|||
<input class="input" bindinput="bindOriginInput" data-key="detail" value="{{origin.detail}}" placeholder="请输入详细地址" /> |
|||
</view> |
|||
<view class="form-item"> |
|||
<text class="label">快速选择</text> |
|||
<picker |
|||
mode="region" |
|||
bindchange="bindRegionChange" |
|||
data-type="origin" |
|||
value="{{[origin.province, origin.city, origin.district]}}" |
|||
> |
|||
<view class="picker"> |
|||
{{origin.province && origin.city && origin.district ? origin.province + origin.city + origin.district : '请选择'}} |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
<button class="location-btn" bindtap="chooseOriginLocation" style="background-color: #1677ff;"> |
|||
<text>手动选择位置</text> |
|||
</button> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 目的地信息 --> |
|||
<view class="section"> |
|||
<text class="section-title">目的地</text> |
|||
<view class="address-form"> |
|||
<view class="form-item"> |
|||
<text class="label">省份</text> |
|||
<input class="input" bindinput="bindDestinationInput" data-key="province" value="{{destination.province}}" placeholder="请输入省份" /> |
|||
</view> |
|||
<view class="form-item"> |
|||
<text class="label">城市</text> |
|||
<input class="input" bindinput="bindDestinationInput" data-key="city" value="{{destination.city}}" placeholder="请输入城市" /> |
|||
</view> |
|||
<view class="form-item"> |
|||
<text class="label">区县</text> |
|||
<input class="input" bindinput="bindDestinationInput" data-key="district" value="{{destination.district}}" placeholder="请输入区县" /> |
|||
</view> |
|||
<view class="form-item"> |
|||
<text class="label">详细地址</text> |
|||
<input class="input" bindinput="bindDestinationInput" data-key="detail" value="{{destination.detail}}" placeholder="请输入详细地址" /> |
|||
</view> |
|||
<view class="form-item"> |
|||
<text class="label">快速选择</text> |
|||
<picker |
|||
mode="region" |
|||
bindchange="bindRegionChange" |
|||
data-type="destination" |
|||
value="{{[destination.province, destination.city, destination.district]}}" |
|||
> |
|||
<view class="picker"> |
|||
{{destination.province && destination.city && destination.district ? destination.province + destination.city + destination.district : '请选择'}} |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
<view style="display: flex; justify-content: space-between; gap: 12rpx;"> |
|||
<button class="location-btn" bindtap="useCurrentLocation"> |
|||
<text>使用当前位置</text> |
|||
</button> |
|||
<button class="location-btn" bindtap="chooseDestinationLocation" style="background-color: #1677ff;"> |
|||
<text>手动选择位置</text> |
|||
</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 物流车辆信息 --> |
|||
<view class="section"> |
|||
<text class="section-title">物流车辆信息</text> |
|||
<view class="vehicle-form"> |
|||
<view class="form-item"> |
|||
<text class="label">车辆类型</text> |
|||
<picker bindchange="bindVehicleTypeChange" range="{{vehicleTypes}}" value="{{selectedVehicleTypeIndex}}"> |
|||
<view class="picker"> |
|||
{{vehicleTypes[selectedVehicleTypeIndex]}} |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
<view class="form-item"> |
|||
<text class="label">载重能力 (吨)</text> |
|||
<input class="input" bindinput="bindVehicleInfoInput" data-key="capacity" value="{{vehicleInfo.capacity}}" placeholder="请输入载重能力" type="number" /> |
|||
</view> |
|||
<view class="form-item"> |
|||
<text class="label">车辆编号</text> |
|||
<input class="input" bindinput="bindVehicleInfoInput" data-key="number" value="{{vehicleInfo.number}}" placeholder="请输入车辆编号" /> |
|||
</view> |
|||
<view class="form-item"> |
|||
<text class="label">司机姓名</text> |
|||
<input class="input" bindinput="bindVehicleInfoInput" data-key="driver" value="{{vehicleInfo.driver}}" placeholder="请输入司机姓名" /> |
|||
</view> |
|||
<view class="form-item"> |
|||
<text class="label">联系电话</text> |
|||
<input class="input" bindinput="bindVehicleInfoInput" data-key="phone" value="{{vehicleInfo.phone}}" placeholder="请输入联系电话" type="number" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 物流人员信息 --> |
|||
<view class="section"> |
|||
<text class="section-title">物流人员信息</text> |
|||
<view class="logistics-intro"> |
|||
<text class="intro-text">我们拥有专业的物流团队，为您提供高效、安全的运输服务。以下是我们的物流专家，他们具有丰富的行业经验和专业知识，能够为您的货物运输提供专业的解决方案。</text> |
|||
</view> |
|||
<view class="logistics-personnel"> |
|||
<view class="personnel-card" wx:for="{{logisticsPersonnel}}" wx:key="item.id"> |
|||
<view class="personnel-header-section"> |
|||
<view class="personnel-avatar"> |
|||
<text class="avatar-text">{{item.name.charAt(0)}}</text> |
|||
</view> |
|||
<view class="personnel-header-info"> |
|||
<view class="personnel-name">{{item.name}}</view> |
|||
<view class="personnel-position">{{item.position}}</view> |
|||
<view class="personnel-tags"> |
|||
<view class="personnel-tag">{{item.experience}}年物流经验</view> |
|||
<view class="personnel-tag">认证物流师</view> |
|||
<view class="personnel-tag">专业配送</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="personnel-description"> |
|||
<view class="description-text"> |
|||
{{item.description || '拥有丰富的物流行业经验，熟悉各种货物的运输要求和流程，能够为客户提供专业的物流解决方案和优质的服务。'}} |
|||
</view> |
|||
</view> |
|||
<view class="personnel-contact-section"> |
|||
<view class="personnel-contact-info"> |
|||
<view class="contact-label">联系电话：</view> |
|||
<view class="contact-value">{{item.phone}}</view> |
|||
</view> |
|||
<button class="contact-btn" bindtap="makePhoneCall" data-phone="{{item.phone}}"> |
|||
<text>立即联系</text> |
|||
</button> |
|||
</view> |
|||
</view> |
|||
<view wx:if="{{logisticsPersonnel.length === 0}}" class="empty-state"> |
|||
<text>暂无物流人员信息</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
<!-- 计算按钮 --> |
|||
<view class="calculate-section"> |
|||
<button class="calculate-btn" bindtap="calculateFreight" loading="{{loading}}"> |
|||
<text>计算运费</text> |
|||
</button> |
|||
<button class="clear-btn" bindtap="clearInput"> |
|||
<text>清空输入</text> |
|||
</button> |
|||
</view> |
|||
|
|||
<!-- 计算结果 --> |
|||
<view class="result-section" wx:if="{{calculationResult}}"> |
|||
<text class="section-title">计算结果</text> |
|||
<view class="result-card"> |
|||
<view class="result-item"> |
|||
<text class="result-label">预估运费</text> |
|||
<text class="result-value freight">{{calculationResult.freight}} 元</text> |
|||
</view> |
|||
<view class="result-item"> |
|||
<text class="result-label">运输距离</text> |
|||
<text class="result-value">{{calculationResult.distance}} km</text> |
|||
</view> |
|||
<view class="result-item"> |
|||
<text class="result-label">预计时效</text> |
|||
<text class="result-value">{{calculationResult.deliveryTime}} 天</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 历史记录 --> |
|||
<view class="section" wx:if="{{historyRecords.length > 0}}"> |
|||
<text class="section-title">历史记录</text> |
|||
<view class="history-list"> |
|||
<view class="history-item" wx:for="{{historyRecords}}" wx:key="item.id"> |
|||
<view class="history-content"> |
|||
<text class="history-origin">{{item.origin.province}}{{item.origin.city}}</text> |
|||
<text class="history-arrow">→</text> |
|||
<text class="history-destination">{{item.destination.province}}{{item.destination.city}}</text> |
|||
<text class="history-freight">¥{{item.result.freight}}</text> |
|||
</view> |
|||
<view class="history-actions"> |
|||
<button class="history-use-btn" bindtap="useHistoryRecord" data-index="{{index}}"> |
|||
<text>使用</text> |
|||
</button> |
|||
<button class="history-delete-btn" bindtap="deleteHistoryRecord" data-index="{{index}}"> |
|||
<text>删除</text> |
|||
</button> |
|||
</view> |
|||
</view> |
|||
<button class="clear-history-btn" bindtap="clearHistory"> |
|||
<text>清空历史记录</text> |
|||
</button> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 空状态 --> |
|||
<view class="section" wx:if="{{historyRecords.length === 0}}"> |
|||
<text class="section-title">历史记录</text> |
|||
<view class="empty-state"> |
|||
<text>暂无历史记录</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 地址选择器 --> |
|||
<view class="picker-overlay" wx:if="{{showOriginPicker || showDestinationPicker}}" bindtap="closePicker"> |
|||
<view class="picker-popup-container" catchtap=""> |
|||
<view class="picker-header"> |
|||
<text class="picker-title">{{showOriginPicker ? '选择出发地' : '选择目的地'}}</text> |
|||
<button class="picker-close" bindtap="closePicker">关闭</button> |
|||
</view> |
|||
<view class="picker-content"> |
|||
<!-- 这里可以集成地址选择器组件 --> |
|||
<text>地址选择器功能待实现</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,877 @@ |
|||
/* pages/freight-calculator/index.wxss */ |
|||
/* 全局样式 */ |
|||
.container { |
|||
padding: 0; |
|||
background-color: #f8f9fa; |
|||
min-height: 100vh; |
|||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; |
|||
width: 100%; |
|||
max-width: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/* 确保所有主要元素都有box-sizing */ |
|||
.main-content, |
|||
.section, |
|||
.form-item, |
|||
.input, |
|||
.location-btn, |
|||
.picker, |
|||
.calculate-section, |
|||
.calculate-btn, |
|||
.clear-btn, |
|||
.result-section, |
|||
.result-card, |
|||
.result-item, |
|||
.history-list, |
|||
.history-item, |
|||
.history-content, |
|||
.history-actions, |
|||
.clear-history-btn, |
|||
.picker-overlay, |
|||
.picker-popup-container, |
|||
.picker-header, |
|||
.picker-content, |
|||
.empty-state, |
|||
.divider { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/* 物流人员信息样式 */ |
|||
.logistics-intro { |
|||
background-color: #f8f9fa; |
|||
border-radius: 12rpx; |
|||
padding: 16rpx; |
|||
margin-bottom: 20rpx; |
|||
border-left: 4rpx solid #1989fa; |
|||
} |
|||
|
|||
.intro-text { |
|||
font-size: 22rpx; |
|||
color: #666; |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
.logistics-personnel { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.personnel-card { |
|||
background-color: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx; |
|||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); |
|||
border: 1rpx solid #e8e8e8; |
|||
width: 100%; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.personnel-card:hover { |
|||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); |
|||
transform: translateY(-2rpx); |
|||
border-color: #1989fa; |
|||
} |
|||
|
|||
.personnel-header-section { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.personnel-avatar { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
border-radius: 50%; |
|||
background: linear-gradient(135deg, #1989fa 0%, #1890ff 100%); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-right: 24rpx; |
|||
flex-shrink: 0; |
|||
box-shadow: 0 4rpx 12rpx rgba(25, 137, 250, 0.3); |
|||
} |
|||
|
|||
.avatar-text { |
|||
font-size: 40rpx; |
|||
font-weight: 700; |
|||
color: #fff; |
|||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.personnel-header-info { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 8rpx; |
|||
} |
|||
|
|||
.personnel-name { |
|||
font-size: 30rpx; |
|||
font-weight: 700; |
|||
color: #333; |
|||
line-height: 1.2; |
|||
margin: 0; |
|||
} |
|||
|
|||
.personnel-position { |
|||
font-size: 22rpx; |
|||
color: #666; |
|||
margin: 0; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.personnel-tags { |
|||
display: flex; |
|||
gap: 12rpx; |
|||
flex-wrap: wrap; |
|||
margin-top: 4rpx; |
|||
} |
|||
|
|||
.personnel-tag { |
|||
font-size: 18rpx; |
|||
color: #1989fa; |
|||
background-color: rgba(25, 137, 250, 0.1); |
|||
padding: 6rpx 14rpx; |
|||
border-radius: 16rpx; |
|||
border: 1rpx solid rgba(25, 137, 250, 0.2); |
|||
} |
|||
|
|||
.personnel-description { |
|||
margin-bottom: 20rpx; |
|||
padding: 16rpx; |
|||
background-color: #f8f9fa; |
|||
border-radius: 12rpx; |
|||
border-left: 4rpx solid #e3f2fd; |
|||
} |
|||
|
|||
.description-text { |
|||
font-size: 22rpx; |
|||
color: #666; |
|||
line-height: 1.5; |
|||
margin: 0; |
|||
} |
|||
|
|||
.personnel-contact-section { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding-top: 20rpx; |
|||
border-top: 1rpx solid #f0f0f0; |
|||
} |
|||
|
|||
.personnel-contact-info { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8rpx; |
|||
} |
|||
|
|||
.contact-label { |
|||
font-size: 22rpx; |
|||
color: #666; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.contact-value { |
|||
font-size: 24rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.contact-btn { |
|||
background: linear-gradient(135deg, #1989fa 0%, #1890ff 100%); |
|||
color: #fff; |
|||
border: none; |
|||
border-radius: 8rpx; |
|||
padding: 14rpx 28rpx; |
|||
font-size: 22rpx; |
|||
font-weight: 600; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
gap: 8rpx; |
|||
box-shadow: 0 4rpx 12rpx rgba(25, 137, 250, 0.3); |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.contact-btn:hover { |
|||
background: linear-gradient(135deg, #1890ff 0%, #177ddc 100%); |
|||
box-shadow: 0 6rpx 16rpx rgba(25, 137, 250, 0.4); |
|||
transform: translateY(-2rpx); |
|||
} |
|||
|
|||
.contact-btn:active { |
|||
transform: translateY(0); |
|||
box-shadow: 0 2rpx 8rpx rgba(25, 137, 250, 0.3); |
|||
} |
|||
|
|||
/* 主内容区域 */ |
|||
.main-content { |
|||
padding: 16rpx; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
} |
|||
|
|||
/* 区块样式 */ |
|||
.section { |
|||
background-color: #fff; |
|||
border-radius: 12rpx; |
|||
padding: 20rpx; |
|||
margin-bottom: 16rpx; |
|||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); |
|||
width: 100%; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 24rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 16rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.section-title::before { |
|||
content: ''; |
|||
width: 6rpx; |
|||
height: 24rpx; |
|||
background-color: #1989fa; |
|||
border-radius: 3rpx; |
|||
margin-right: 10rpx; |
|||
} |
|||
|
|||
/* 表单项目样式 */ |
|||
.form-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
margin-bottom: 16rpx; |
|||
position: relative; |
|||
width: 100%; |
|||
} |
|||
|
|||
.label { |
|||
font-size: 22rpx; |
|||
color: #666; |
|||
margin-bottom: 8rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.input { |
|||
height: 68rpx; |
|||
border: 1rpx solid #e5e5e5; |
|||
border-radius: 8rpx; |
|||
padding: 0 20rpx; |
|||
font-size: 24rpx; |
|||
color: #333; |
|||
box-sizing: border-box; |
|||
line-height: 68rpx; |
|||
width: 100%; |
|||
} |
|||
|
|||
.input:focus { |
|||
border-color: #1989fa; |
|||
outline: none; |
|||
} |
|||
|
|||
/* 只读输入框 */ |
|||
.input.readonly { |
|||
background-color: #f8f9fa; |
|||
border-color: #e9ecef; |
|||
color: #6c757d; |
|||
} |
|||
|
|||
/* 位置按钮 */ |
|||
.location-btn { |
|||
width: 100%; |
|||
height: 68rpx; |
|||
background-color: #f8f9fa; |
|||
border: 1rpx solid #e9ecef; |
|||
border-radius: 8rpx; |
|||
font-size: 22rpx; |
|||
color: #495057; |
|||
margin-top: 8rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
box-sizing: border-box; |
|||
line-height: 68rpx; |
|||
flex: 1; |
|||
} |
|||
|
|||
.location-btn::before { |
|||
content: '📍'; |
|||
margin-right: 8rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
/* 选择器样式 */ |
|||
.picker { |
|||
height: 68rpx; |
|||
border: 1rpx solid #e5e5e5; |
|||
border-radius: 8rpx; |
|||
padding: 0 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
background-color: #fff; |
|||
width: 100%; |
|||
font-size: 24rpx; |
|||
color: #333; |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
line-height: 68rpx; |
|||
} |
|||
|
|||
.picker::after { |
|||
content: '▼'; |
|||
position: absolute; |
|||
right: 20rpx; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
font-size: 16rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
/* 计算按钮区域 */ |
|||
.calculate-section { |
|||
display: flex; |
|||
flex-direction: column; |
|||
margin-top: 24rpx; |
|||
margin-bottom: 24rpx; |
|||
gap: 12rpx; |
|||
width: 100%; |
|||
} |
|||
|
|||
.calculate-btn { |
|||
width: 100%; |
|||
height: 76rpx; |
|||
background-color: #1989fa; |
|||
color: #fff; |
|||
border: none; |
|||
border-radius: 8rpx; |
|||
font-size: 26rpx; |
|||
font-weight: 600; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
box-sizing: border-box; |
|||
line-height: 76rpx; |
|||
} |
|||
|
|||
.clear-btn { |
|||
width: 100%; |
|||
height: 76rpx; |
|||
background-color: #fff; |
|||
color: #666; |
|||
border: 1rpx solid #e5e5e5; |
|||
border-radius: 8rpx; |
|||
font-size: 26rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
box-sizing: border-box; |
|||
line-height: 76rpx; |
|||
} |
|||
|
|||
/* 结果区域 */ |
|||
.result-section { |
|||
background-color: #fff; |
|||
border-radius: 12rpx; |
|||
padding: 20rpx; |
|||
margin-bottom: 16rpx; |
|||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); |
|||
width: 100%; |
|||
} |
|||
|
|||
.result-card { |
|||
background: linear-gradient(135deg, #f0f9ff 0%, #e3f2fd 100%); |
|||
border-radius: 8rpx; |
|||
padding: 20rpx; |
|||
border-left: 4rpx solid #1989fa; |
|||
width: 100%; |
|||
} |
|||
|
|||
.result-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 12rpx; |
|||
padding: 8rpx 0; |
|||
border-bottom: 1rpx solid rgba(0, 0, 0, 0.05); |
|||
width: 100%; |
|||
} |
|||
|
|||
.result-item:last-child { |
|||
margin-bottom: 0; |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.result-label { |
|||
font-size: 22rpx; |
|||
color: #666; |
|||
font-weight: 500; |
|||
flex: 1; |
|||
} |
|||
|
|||
.result-value { |
|||
font-size: 24rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
flex: 1; |
|||
text-align: right; |
|||
} |
|||
|
|||
.result-value.freight { |
|||
color: #ff4d4f; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
/* 历史记录 */ |
|||
.history-list { |
|||
margin-top: 12rpx; |
|||
width: 100%; |
|||
} |
|||
|
|||
.history-item { |
|||
background-color: #f8f9fa; |
|||
border-radius: 8rpx; |
|||
padding: 16rpx; |
|||
margin-bottom: 10rpx; |
|||
border-left: 4rpx solid #e9ecef; |
|||
width: 100%; |
|||
} |
|||
|
|||
.history-content { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 8rpx; |
|||
flex-wrap: wrap; |
|||
width: 100%; |
|||
} |
|||
|
|||
.history-origin { |
|||
font-size: 22rpx; |
|||
color: #333; |
|||
font-weight: 500; |
|||
margin-right: 8rpx; |
|||
flex: 0 0 auto; |
|||
} |
|||
|
|||
.history-arrow { |
|||
font-size: 22rpx; |
|||
color: #999; |
|||
margin: 0 8rpx; |
|||
flex: 0 0 auto; |
|||
} |
|||
|
|||
.history-destination { |
|||
font-size: 22rpx; |
|||
color: #333; |
|||
font-weight: 500; |
|||
margin-right: 16rpx; |
|||
flex: 1; |
|||
min-width: 120rpx; |
|||
} |
|||
|
|||
.history-freight { |
|||
font-size: 24rpx; |
|||
font-weight: 600; |
|||
color: #ff4d4f; |
|||
margin-left: auto; |
|||
flex: 0 0 auto; |
|||
} |
|||
|
|||
.history-actions { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
gap: 12rpx; |
|||
margin-top: 8rpx; |
|||
width: 100%; |
|||
} |
|||
|
|||
.history-use-btn { |
|||
font-size: 20rpx; |
|||
color: #1989fa; |
|||
background: none; |
|||
border: none; |
|||
padding: 0 8rpx; |
|||
} |
|||
|
|||
.history-delete-btn { |
|||
font-size: 20rpx; |
|||
color: #ff4d4f; |
|||
background: none; |
|||
border: none; |
|||
padding: 0 8rpx; |
|||
} |
|||
|
|||
.clear-history-btn { |
|||
width: 100%; |
|||
height: 56rpx; |
|||
background: none; |
|||
border: 1rpx solid #e5e5e5; |
|||
border-radius: 8rpx; |
|||
font-size: 22rpx; |
|||
color: #666; |
|||
margin-top: 12rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/* 选择器弹窗 */ |
|||
.picker-overlay { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background-color: rgba(0, 0, 0, 0.5); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: flex-end; |
|||
z-index: 1000; |
|||
width: 100%; |
|||
} |
|||
|
|||
.picker-popup-container { |
|||
background-color: #fff; |
|||
border-radius: 16rpx 16rpx 0 0; |
|||
width: 100%; |
|||
max-height: 70vh; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.picker-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20rpx; |
|||
border-bottom: 1rpx solid #e5e5e5; |
|||
background-color: #f8f9fa; |
|||
width: 100%; |
|||
} |
|||
|
|||
.picker-title { |
|||
font-size: 26rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
|
|||
.picker-close { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
background: none; |
|||
border: none; |
|||
padding: 16rpx; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 50%; |
|||
position: absolute; |
|||
right: 20rpx; |
|||
} |
|||
|
|||
.picker-content { |
|||
padding: 24rpx; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
width: 100%; |
|||
} |
|||
|
|||
/* 空状态 */ |
|||
.empty-state { |
|||
text-align: center; |
|||
padding: 48rpx 16rpx; |
|||
color: #999; |
|||
font-size: 22rpx; |
|||
width: 100%; |
|||
} |
|||
|
|||
.empty-state::before { |
|||
content: '📦'; |
|||
font-size: 48rpx; |
|||
display: block; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
/* 分隔线 */ |
|||
.divider { |
|||
height: 1rpx; |
|||
background-color: #e5e5e5; |
|||
margin: 16rpx 0; |
|||
width: 100%; |
|||
} |
|||
|
|||
/* 标签样式 */ |
|||
.tag { |
|||
display: inline-block; |
|||
padding: 4rpx 12rpx; |
|||
border-radius: 12rpx; |
|||
font-size: 20rpx; |
|||
font-weight: 500; |
|||
margin-right: 8rpx; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.tag-primary { |
|||
background-color: #e6f7ff; |
|||
color: #1890ff; |
|||
} |
|||
|
|||
.tag-success { |
|||
background-color: #f6ffed; |
|||
color: #52c41a; |
|||
} |
|||
|
|||
.tag-warning { |
|||
background-color: #fff7e6; |
|||
color: #fa8c16; |
|||
} |
|||
|
|||
.tag-danger { |
|||
background-color: #fff1f0; |
|||
color: #ff4d4f; |
|||
} |
|||
|
|||
/* 动画效果 */ |
|||
@keyframes fadeInUp { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateY(16rpx); |
|||
} |
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
@keyframes slideUp { |
|||
from { |
|||
transform: translateY(100%); |
|||
} |
|||
to { |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
@keyframes fadeIn { |
|||
from { |
|||
opacity: 0; |
|||
} |
|||
to { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
/* 响应式调整 */ |
|||
@media (min-width: 375px) { |
|||
.main-content { |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.section { |
|||
padding: 24rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 26rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.form-item { |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.input { |
|||
height: 72rpx; |
|||
font-size: 26rpx; |
|||
padding: 0 24rpx; |
|||
} |
|||
|
|||
.picker { |
|||
height: 72rpx; |
|||
font-size: 26rpx; |
|||
padding: 0 24rpx; |
|||
} |
|||
|
|||
.location-btn { |
|||
height: 72rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.calculate-btn, |
|||
.clear-btn { |
|||
height: 80rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.result-item { |
|||
margin-bottom: 16rpx; |
|||
padding: 12rpx 0; |
|||
} |
|||
|
|||
.result-label { |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.result-value { |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.result-value.freight { |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.history-content { |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.history-origin, |
|||
.history-destination, |
|||
.history-arrow { |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.history-freight { |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.history-use-btn, |
|||
.history-delete-btn { |
|||
font-size: 22rpx; |
|||
} |
|||
|
|||
.clear-history-btn { |
|||
height: 60rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.empty-state { |
|||
padding: 64rpx 24rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.empty-state::before { |
|||
font-size: 64rpx; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.divider { |
|||
margin: 24rpx 0; |
|||
} |
|||
} |
|||
|
|||
/* 大屏幕设备调整 */ |
|||
@media (min-width: 750rpx) { |
|||
.container { |
|||
max-width: 750rpx; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.header { |
|||
max-width: 750rpx; |
|||
margin: 0 auto; |
|||
} |
|||
} |
|||
|
|||
/* 小屏幕设备调整 */ |
|||
@media (max-width: 320px) { |
|||
.main-content { |
|||
padding: 12rpx; |
|||
} |
|||
|
|||
.section { |
|||
padding: 16rpx; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 22rpx; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.input { |
|||
height: 64rpx; |
|||
font-size: 22rpx; |
|||
padding: 0 16rpx; |
|||
} |
|||
|
|||
.picker { |
|||
height: 64rpx; |
|||
font-size: 22rpx; |
|||
padding: 0 16rpx; |
|||
} |
|||
|
|||
.location-btn { |
|||
height: 64rpx; |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
.calculate-btn, |
|||
.clear-btn { |
|||
height: 72rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.result-item { |
|||
margin-bottom: 8rpx; |
|||
padding: 6rpx 0; |
|||
} |
|||
|
|||
.result-label { |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
.result-value { |
|||
font-size: 22rpx; |
|||
} |
|||
|
|||
.result-value.freight { |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.history-content { |
|||
margin-bottom: 6rpx; |
|||
} |
|||
|
|||
.history-origin, |
|||
.history-destination, |
|||
.history-arrow { |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
.history-freight { |
|||
font-size: 22rpx; |
|||
} |
|||
|
|||
.history-use-btn, |
|||
.history-delete-btn { |
|||
font-size: 18rpx; |
|||
} |
|||
|
|||
.clear-history-btn { |
|||
height: 52rpx; |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
.empty-state { |
|||
padding: 32rpx 12rpx; |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
.empty-state::before { |
|||
font-size: 32rpx; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.divider { |
|||
margin: 12rpx 0; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue