main
luth1ng 7 months ago
parent ad6dd82ef1
commit a0b90986df

@ -1,103 +0,0 @@
import request from '@/utils/request'
// 运单查询相关接口
export const trackingAPI = {
// 查询运单信息
getPackageInfo: (trackingNumber: string) =>
request.get('/api/tracking/${trackingNumber}'),
// 获取已寄出的包裹列表
getSentPackages: () =>
request.get('/api/tracking/sent'),
// 获取已收到的包裹列表
getReceivedPackages: () =>
request.get('/api/tracking/received')
}
// 投诉相关接口
export const complaintAPI = {
// 提交投诉
submitComplaint: (data: {
orderNumber: string,
reason: string,
description: string,
contact: string
}) => request.post('/api/complaints', data)
}
// 寄件相关接口
export const deliveryAPI = {
// 提交寄件信息
submitDelivery: (data: {
sender: {
name: string,
phone: string,
province: string[],
address: string,
company?: string
},
receiver: {
name: string,
phone: string,
province: string[],
address: string,
company?: string
},
sendType: number
}) => request.post('/api/delivery', data),
// 获取地址簿
getAddressBook: () =>
request.get('/api/address-book')
}
// 反馈相关接口
export const feedbackAPI = {
// 提交反馈
submitFeedback: (data: {
title: string,
content: string,
contact?: string
}) => request.post('/api/feedback', data)
}
// 用户资料相关接口
export const profileAPI = {
// 获取用户信息
getUserProfile: () =>
request.get('/api/user/profile'),
// 更新用户信息
updateProfile: (data: {
name: string,
email: string,
phone: string,
gender: string,
birthday: string,
address: string
}) => request.put('/api/user/profile', data),
// 更新头像
updateAvatar: (formData: FormData) =>
request.post('/api/user/avatar', formData),
// 地址管理相关
getAddresses: () =>
request.get('/api/user/addresses'),
addAddress: (data: {
name: string,
address: string,
phone: string
}) => request.post('/api/user/addresses', data),
updateAddress: (id: number, data: {
name: string,
address: string,
phone: string
}) => request.put(`/api/user/addresses/${id}`, data),
deleteAddress: (id: number) =>
request.delete(`/api/user/addresses/${id}`)
}

@ -1,63 +0,0 @@
// 包裹信息接口
export interface Package {
trackingNumber: string
packageName: string
sender: string
senderaddress: string
receiver: string
receiveraddress: string
status: string
latestLocation: string
}
// 投诉表单接口
export interface ComplaintForm {
orderNumber: string
reason: string
description: string
contact: string
}
// 寄件信息接口
export interface DeliveryForm {
sender: {
name: string
phone: string
province: string[]
address: string
company?: string
}
receiver: {
name: string
phone: string
province: string[]
address: string
company?: string
}
sendType: number
}
// 反馈表单接口
export interface FeedbackForm {
title: string
content: string
contact?: string
}
// 用户信息接口
export interface UserProfile {
name: string
email: string
phone: string
gender: string
birthday: string
address: string
}
// 地址信息接口
export interface Address {
id: number
name: string
address: string
phone: string
}

@ -1,53 +0,0 @@
import axios from 'axios'
import { ElMessage } from 'element-plus'
// 创建axios实例
const request = axios.create({
baseURL: process.env.VUE_APP_BASE_API || '',
timeout: 5000
})
// 请求拦截器
request.interceptors.request.use(
config => {
// 可以在这里添加token等认证信息
const token = localStorage.getItem('token')
if (token) {
config.headers['Authorization'] = `Bearer ${token}`
}
return config
},
error => {
console.log(error)
return Promise.reject(error)
}
)
// 响应拦截器
request.interceptors.response.use(
response => {
const res = response.data
// 这里可以根据后端的响应结构进行适当的处理
if (res.code !== 200) {
ElMessage({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(new Error(res.message || 'Error'))
}
return res
},
error => {
console.log('err' + error)
ElMessage({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default request

@ -46,7 +46,7 @@
<el-table v-if="receivedPackages.length" :data="receivedPackages" style="margin-top: 20px;">
<el-table-column label="快递单号" prop="trackingNumber"></el-table-column>
<el-table-column label="包裹名称" prop="packageName"></el-table-column>
<el-table-column label="寄件人<EFBFBD><EFBFBD><EFBFBD>址" prop="senderaddress"></el-table-column>
<el-table-column label="寄件人址" prop="senderaddress"></el-table-column>
<el-table-column label="寄件人" prop="sender"></el-table-column>
<el-table-column label="收件人地址" prop="receiveraddress"></el-table-column>
<el-table-column label="收件人" prop="receiver"></el-table-column>
@ -71,9 +71,7 @@
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { trackingAPI } from '@/api'
import type { Package } from '@/types/api'
import { ElMessage, ElMessageBox, ElInput, ElButton, ElTable, ElTableColumn } from 'element-plus'
//
interface Package {
@ -87,17 +85,81 @@ interface Package {
latestLocation: string;
}
//
const mockData: Package[] = [
{
trackingNumber: '123',
packageName: '书籍',
sender: '张帅齐',
senderaddress: '北京市海淀区',
receiver: '李四',
receiveraddress: '上海市浦东新区',
status: '未签收',
latestLocation: '北京市海淀区',
},
{
trackingNumber: '456',
packageName: '衣物',
sender: '林涛',
senderaddress: '上海市浦东新区',
receiver: '李四',
receiveraddress: '北京市海淀区',
status: '正在运输',
latestLocation: '上海市浦东新区',
},
{
trackingNumber: '789',
packageName: '电子产品',
sender: '陈子润',
senderaddress: '北京市海淀区',
receiver: '李四',
receiveraddress: '北京市海淀区',
status: '已签收',
latestLocation: '北京市海淀区',
},
{
trackingNumber: '011',
packageName: '书籍',
sender: '张帅齐',
senderaddress: '北京市海淀区',
receiver: '李四',
receiveraddress: '北京市海淀区',
status: '已签收',
latestLocation: '北京市海淀区',
},
{
trackingNumber: '012',
packageName: '书籍',
sender: '孙贺贺',
senderaddress: '北京市海淀区',
receiver: '李四',
receiveraddress: '北京市海淀区',
status: '已签收',
latestLocation: '北京市海淀区',
},
{
trackingNumber: '013',
packageName: '书籍',
sender: '梁佳琪',
senderaddress: '北京市海淀区',
receiver: '李四',
receiveraddress: '北京市海淀区',
status: '未签收',
latestLocation: '北京市海淀区',
}
]
const form = ref({
trackingNumber: ''
})
const activeTab = ref('sent')
const sentPackages = ref<Package[]>([])
const receivedPackages = ref<Package[]>([])
const loading = ref(false)
const sentPackages = ref<Package[]>([]) //
const receivedPackages = ref<Package[]>([]) //
const error = ref('')
const loading = ref(false)
//
const validateTrackingNumber = () => {
@ -108,33 +170,31 @@ const validateTrackingNumber = () => {
}
}
// ""
const initSentPackages = async () => {
try {
const response = await trackingAPI.getSentPackages()
sentPackages.value = response.data
} catch (error) {
ElMessage.error('获取寄出包裹列表失败')
//
const handleTabClick = (tab: any) => {
//
sentPackages.value = [];
receivedPackages.value = [];
if (tab.paneName === 'sent') {
sentPackages.value = mockData.filter(item => ['123', '456', '789'].includes(item.trackingNumber));
activeTab.value = 'sent'; // activeTab
} else if (tab.paneName === 'received') {
receivedPackages.value = mockData.filter(item => ['011', '012', '013'].includes(item.trackingNumber));
activeTab.value = 'received'; // activeTab
}
}
//
const handleTabClick = async (tab: any) => {
try {
if (tab.paneName === 'sent') {
const response = await trackingAPI.getSentPackages()
sentPackages.value = response.data
activeTab.value = 'sent'
} else if (tab.paneName === 'received') {
const response = await trackingAPI.getReceivedPackages()
receivedPackages.value = response.data
activeTab.value = 'received'
}
} catch (error) {
ElMessage.error('获取包裹列表失败')
}
//
const initSentPackages = () => {
sentPackages.value = mockData.filter(item => ['123', '456', '789'].includes(item.trackingNumber));
}
//
onMounted(() => {
initSentPackages();
})
//
const searchPackage = async () => {
if (!form.value.trackingNumber) {
@ -152,19 +212,18 @@ const searchPackage = async () => {
loading.value = true
try {
const response = await trackingAPI.getPackageInfo(form.value.trackingNumber)
const result = response.data
const result = mockData.find(item => item.trackingNumber === form.value.trackingNumber)
if (result) {
ElMessage.success('查询成功')
//
if (['123', '456', '789'].includes(result.trackingNumber)) {
activeTab.value = 'sent'
sentPackages.value = [result]
receivedPackages.value = []
sentPackages.value = [result] //
receivedPackages.value = [] //
} else if (['011', '012', '013'].includes(result.trackingNumber)) {
activeTab.value = 'received'
receivedPackages.value = [result]
sentPackages.value = []
receivedPackages.value = [result] //
sentPackages.value = [] //
}
} else {
ElMessageBox.alert('未找到该快递单号的信息,请确认单号是否正确。', '错误', {
@ -172,8 +231,6 @@ const searchPackage = async () => {
type: 'error',
})
}
} catch (error) {
ElMessage.error('查询失败')
} finally {
loading.value = false
}
@ -190,11 +247,6 @@ const getStatusClass = (status: string) => {
return 'status-fail';
}
}
//
onMounted(() => {
initSentPackages();
})
</script>
<style scoped>

@ -57,10 +57,8 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { complaintAPI } from '@/api';
import type { ComplaintForm } from '@/types/api';
const complaintForm = ref<ComplaintForm>({
const complaintForm = ref({
orderNumber: '',
reason: '',
description: '',
@ -90,16 +88,11 @@ const rules = {
const complaintFormRef = ref();
const submitComplaint = async () => {
complaintFormRef.value?.validate(async (valid) => {
const submitComplaint = () => {
complaintFormRef.value?.validate((valid) => {
if (valid) {
try {
await complaintAPI.submitComplaint(complaintForm.value);
ElMessage.success('投诉已提交,我们将尽快处理您的问题!');
resetForm();
} catch (error) {
ElMessage.error('提交失败,请稍后重试');
}
ElMessage.success('投诉已提交,我们将尽快处理您的问题!');
resetForm();
} else {
ElMessage.error('请检查表单内容是否填写完整!');
}

@ -85,9 +85,6 @@
import { ref } from 'vue';
import { useRouter } from 'vue-router'; //
import addressList from '../../assets/addressList.js';
import { ElMessage } from 'element-plus';
import { deliveryAPI } from '@/api';
import type { DeliveryForm } from '@/types/api';
const formatCityData = (arr) => {
return arr.map(item => ({
@ -104,22 +101,26 @@ const sendType = ref(0);
//
const router = useRouter();
const form = ref<DeliveryForm>({
// 簿address.vue
const openAddressBook = () => {
router.push({ name: 'address' }); // address.vue'/address'
};
const form = ref({
sender: {
name: '',
phone: '',
province: [],
address: '',
company: ''
senderName: '',
senderPhone: '',
senderProvince: [],
senderAddress: '',
senderCompany: ''
},
receiver: {
name: '',
phone: '',
province: [],
address: '',
company: ''
},
sendType: 0
receiverName: '',
receiverPhone: '',
receiverProvince: [],
receiverAddress: '',
receiverCompany: ''
}
});
const rules = ref({
@ -162,31 +163,31 @@ const rules = ref({
const senderFormRef = ref(null);
const receiverFormRef = ref(null);
// 簿
const openAddressBook = async () => {
try {
const response = await deliveryAPI.getAddressBook();
// 簿...
router.push({ name: 'address' });
} catch (error) {
ElMessage.error('获取地址簿失败');
const submitForm = () => {
// receiverFormRef.value.validate
if (senderFormRef.value) {
senderFormRef.value.validate((valid) => {
if (valid) {
alert('发件人表单提交成功!');
//
} else {
console.log('发件人表单验证失败!');
return false;
}
});
}
};
//
const submitForm = async () => {
if (senderFormRef.value && receiverFormRef.value) {
const validSender = await senderFormRef.value.validate();
const validReceiver = await receiverFormRef.value.validate();
if (validSender && validReceiver) {
try {
await deliveryAPI.submitDelivery(form.value);
ElMessage.success('下单成功!');
} catch (error) {
ElMessage.error('下单失败,请稍后重试');
// receiverFormRef.value.validate
if (receiverFormRef.value) {
receiverFormRef.value.validate((valid) => {
if (valid) {
alert('收件人表单提交成功!');
//
} else {
console.log('收件人表单验证失败!');
return false;
}
}
});
}
};
</script>

@ -59,10 +59,8 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { feedbackAPI } from '@/api';
import type { FeedbackForm } from '@/types/api';
const feedbackForm = ref<FeedbackForm>({
const feedbackForm = ref({
title: '',
content: '',
contact: '',
@ -81,16 +79,11 @@ const rules = {
const feedbackFormRef = ref();
const submitFeedback = async () => {
feedbackFormRef.value?.validate(async (valid) => {
const submitFeedback = () => {
feedbackFormRef.value?.validate((valid) => {
if (valid) {
try {
await feedbackAPI.submitFeedback(feedbackForm.value);
ElMessage.success('感谢您的建议!我们会认真参考并改进。');
resetForm();
} catch (error) {
ElMessage.error('提交失败,请稍后重试');
}
ElMessage.success('感谢您的建议!我们会认真参考并改进。');
resetForm();
} else {
ElMessage.error('请填写完整的建议内容!');
}

@ -89,97 +89,133 @@
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { profileAPI } from '@/api'
import type { UserProfile, Address } from '@/types/api'
const profileInfo = ref<UserProfile>({
name: '',
email: '',
phone: '',
gender: '',
birthday: '',
address: '',
})
const addresses = ref<Address[]>([])
//
const getUserInfo = async () => {
try {
const response = await profileAPI.getUserProfile()
profileInfo.value = response.data
} catch (error) {
ElMessage.error('获取用户信息失败')
}
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import router from '../../router';
interface Address {
id: number;
name: string;
address: string;
phone: string;
}
//
const changeAvatar = async (event: Event) => {
const file = (event.target as HTMLInputElement).files?.[0]
if (file) {
const formData = new FormData()
formData.append('avatar', file)
try {
await profileAPI.updateAvatar(formData)
ElMessage.success('头像更新成功')
} catch (error) {
ElMessage.error('头像更新失败')
//
const profileInfo = ref({
name: '张三',
email: 'example@mail.com',
phone: '13800000000',
gender: '男',
birthday: '1990-01-01',
address: '北京市朝阳区某某街道',
});
// localStorage
const loadAddresses = () => {
const savedData = localStorage.getItem('addresses');
return savedData ? JSON.parse(savedData) : [];
};
// localStorage
const saveAddresses = () => {
localStorage.setItem('addresses', JSON.stringify(addresses.value));
};
//
const addresses = ref<Address[]>([]);
// URL
const avatarUrl = ref<string>('src/assets/user.png'); //
//
const changeAvatar = () => {
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'image/*';
fileInput.onchange = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
avatarUrl.value = e.target.result; // URL
};
reader.readAsDataURL(file); // DataURL
}
}
}
};
//
const getAddresses = async () => {
try {
const response = await profileAPI.getAddresses()
addresses.value = response.data
} catch (error) {
ElMessage.error('获取地址列表失败')
}
}
fileInput.click(); //
};
//
const backupAddress = ref<Address | null>(null);
//
onMounted(() => {
addresses.value = loadAddresses(); // localStorage
});
//
const backupCurrentAddress = (index: number) => {
backupAddress.value = { ...addresses.value[index] };
};
//
const addAddress = async () => {
const newAddress = { name: '', address: '', phone: '' }
try {
const response = await profileAPI.addAddress(newAddress)
addresses.value.push(response.data)
ElMessage.success('地址添加成功')
} catch (error) {
ElMessage.error('地址添加失败')
}
}
const addAddress = () => {
const newId = addresses.value.length ? Math.max(...addresses.value.map(addr => addr.id)) + 1 : 1;
const newAddress = { id: newId, name: '', address: '', phone: '' };
addresses.value.push(newAddress);
saveAddresses(); // localStorage
};
//
const editAddress = async (index: number) => {
try {
const address = addresses.value[index]
await profileAPI.updateAddress(address.id, address)
ElMessage.success('地址更新成功')
} catch (error) {
ElMessage.error('地址更新失败')
//
const editAddress = (index: number) => {
backupCurrentAddress(index); //
//
const isConfirmed = confirm('确定要保存更改吗?');
if (isConfirmed) {
//
console.log('保存地址:', addresses.value[index]);
alert('保存成功');
saveAddresses(); // localStorage
} else {
//
if (backupAddress.value) {
addresses.value[index] = { ...backupAddress.value };
}
console.log('修改已取消');
window.location.reload();
}
}
};
//
const deleteAddress = async (id: number) => {
try {
await profileAPI.deleteAddress(id)
addresses.value = addresses.value.filter(addr => addr.id !== id)
ElMessage.success('地址删除成功')
} catch (error) {
ElMessage.error('地址删除失败')
const deleteAddress = (id: number) => {
const index = addresses.value.findIndex((item) => item.id === id);
if (index !== -1) {
addresses.value.splice(index, 1);
saveAddresses(); // localStorage
}
}
};
onMounted(() => {
getUserInfo()
getAddresses()
})
const copyAddress = (address) => {
const textToCopy = `收货人: ${address.name}\n地址: ${address.address}\n电话: ${address.phone}`;
const textArea = document.createElement('textarea');
textArea.value = textToCopy;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
// 使Element Plus
ElMessage.success('地址已复制到剪贴板');
};
const logout = () => {
router.push({ name: 'login' });
}
// ... ...
</script>
<style scoped>
.profile-list-container {

@ -86,48 +86,6 @@
HomeFilled,
Download
} from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus'
import { serviceAPI } from '@/api'
//
const checkDeliveryTime = async (from: string, to: string) => {
try {
const response = await serviceAPI.getDeliveryTime(from, to)
// ...
} catch (error) {
ElMessage.error('查询失败')
}
}
//
const checkServicePoints = async (location: string) => {
try {
const response = await serviceAPI.getServicePoints(location)
// ...
} catch (error) {
ElMessage.error('查询失败')
}
}
//
const checkDeliveryStandards = async () => {
try {
const response = await serviceAPI.getDeliveryStandards()
// ...
} catch (error) {
ElMessage.error('查询失败')
}
}
//
const checkServiceRange = async (address: string) => {
try {
const response = await serviceAPI.getServiceRange(address)
// ...
} catch (error) {
ElMessage.error('查询失败')
}
}
</script>
<style scoped>

Loading…
Cancel
Save