You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
280 lines
8.9 KiB
280 lines
8.9 KiB
<template>
|
|
<el-header>
|
|
<Header />
|
|
</el-header>
|
|
<div class="delivery-container">
|
|
<el-row class="send-container">
|
|
<el-row class="panel send-panel send-panel1">
|
|
<el-row class="send-container">
|
|
<el-button class="send-btn">寄</el-button>
|
|
<el-row>
|
|
<el-button @click="openAddressBook">地址簿</el-button>
|
|
<el-button>智能填写</el-button>
|
|
</el-row>
|
|
</el-row>
|
|
<el-form ref="senderFormRef" label-width="auto" class="form" :model="form.sender" :rules="rules.sender">
|
|
<el-form-item label="姓名" prop="senderName">
|
|
<el-input v-model="form.sender.senderName" placeholder="请填写发件人姓名"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="联系电话" prop="senderPhone">
|
|
<el-input v-model="form.sender.senderPhone" placeholder="请填写发件人联系电话"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="省市区" prop="senderProvince">
|
|
<el-cascader
|
|
:options="options"
|
|
v-model="form.sender.senderProvince"
|
|
:props="{ value: 'value', label: 'label', children: 'children' }"
|
|
placeholder="请选择省市区"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="详细地址" prop="senderAddress">
|
|
<el-input v-model="form.sender.senderAddress" placeholder="请填写详细地址"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="公司名称" prop="senderCompany" class="no-asterisk">
|
|
<el-input v-model="form.sender.senderCompany" placeholder="请填写公司名称"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-row>
|
|
<el-image src="src/assets/arrow.png"></el-image>
|
|
<el-row class="panel send-panel send-panel1">
|
|
<el-row class="send-container">
|
|
<el-button class="send-btn receiver-btn">收</el-button>
|
|
<el-row>
|
|
<el-button @click="openAddressBook">地址簿</el-button>
|
|
<el-button>智能填写</el-button>
|
|
</el-row>
|
|
</el-row>
|
|
<el-form ref="receiverFormRef" label-width="auto" class="form" :model="form.receiver" :rules="rules.receiver">
|
|
<el-form-item label="姓名" prop="receiverName">
|
|
<el-input v-model="form.receiver.receiverName" placeholder="请填写收件人姓名"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="联系电话" prop="receiverPhone">
|
|
<el-input v-model="form.receiver.receiverPhone" placeholder="请填写收件人联系电话"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="省市区" prop="receiverProvince">
|
|
<el-cascader
|
|
:options="options"
|
|
v-model="form.receiver.receiverProvince"
|
|
:props="{ value: 'value', label: 'label', children: 'children' }"
|
|
placeholder="请选择省市区"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="详细地址" prop="receiverAddress">
|
|
<el-input v-model="form.receiver.receiverAddress" placeholder="请填写详细地址"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="公司名称" prop="receiverCompany" class="no-asterisk">
|
|
<el-input v-model="form.receiver.receiverCompany" placeholder="请填写公司名称"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-row>
|
|
<el-row class="panel send-panel">
|
|
<el-text class="end-label">寄件方式</el-text>
|
|
<el-radio-group v-model="sendType">
|
|
<el-radio :value="0" size="large">预约上门取件</el-radio>
|
|
<el-radio :value="1" size="large">自行联系快递员</el-radio>
|
|
</el-radio-group>
|
|
</el-row>
|
|
<el-row class="panel send-panel">
|
|
<el-button class="confirm-btn" @click="submitForm">下单</el-button>
|
|
</el-row>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
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 => ({
|
|
value: item.name,
|
|
label: item.name,
|
|
children: item.sub && item.sub.length > 0 ? formatCityData(item.sub) : []
|
|
}));
|
|
};
|
|
|
|
const options = ref(formatCityData(addressList));
|
|
|
|
const sendType = ref(0);
|
|
|
|
// 创建路由实例
|
|
const router = useRouter();
|
|
|
|
const form = ref<DeliveryForm>({
|
|
sender: {
|
|
name: '',
|
|
phone: '',
|
|
province: [],
|
|
address: '',
|
|
company: ''
|
|
},
|
|
receiver: {
|
|
name: '',
|
|
phone: '',
|
|
province: [],
|
|
address: '',
|
|
company: ''
|
|
},
|
|
sendType: 0
|
|
});
|
|
|
|
const rules = ref({
|
|
receiver: {
|
|
receiverName: [
|
|
{ required: true, message: '请输入姓名', trigger: 'blur' }
|
|
],
|
|
receiverPhone: [
|
|
{ required: true, message: '请输入联系电话', trigger: 'blur' }
|
|
],
|
|
receiverProvince: [
|
|
{ required: true, message: '请输入省市区', trigger: 'blur' }
|
|
],
|
|
receiverAddress: [
|
|
{ required: true, message: '请输入详细地址', trigger: 'blur' }
|
|
],
|
|
receiverCompany: [
|
|
{ required: false, message: '请输入公司名称', trigger: 'blur' }
|
|
],
|
|
},
|
|
sender: {
|
|
senderName: [
|
|
{ required: true, message: '请输入姓名', trigger: 'blur' }
|
|
],
|
|
senderPhone: [
|
|
{ required: true, message: '请输入联系电话', trigger: 'blur' }
|
|
],
|
|
senderProvince: [
|
|
{ required: true, message: '请输入省市区', trigger: 'blur' }
|
|
],
|
|
senderAddress: [
|
|
{ required: true, message: '请输入详细地址', trigger: 'blur' }
|
|
],
|
|
senderCompany: [
|
|
{ required: false, message: '请输入公司名称', trigger: 'blur' }
|
|
],
|
|
}
|
|
});
|
|
|
|
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 = 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('下单失败，请稍后重试');
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.delivery-container {
|
|
padding: 20px;
|
|
margin: 20px;
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
|
|
}
|
|
.send-container {
|
|
display: flex;
|
|
width: 70%;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-top: 10px;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
margin-right: auto; /* 添加这一行 */
|
|
}
|
|
/* 卡片容器样式 */
|
|
.panel {
|
|
background-color: #f9f9f9; /* 淡雅的背景颜色 */
|
|
border-radius: 8px; /* 圆角边框 */
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
|
|
padding: 30px;
|
|
margin-top: 30px;
|
|
margin-bottom: 20px;
|
|
width: calc(50% - 20px); /* 设置宽度为容器宽度的一半减去间距 */
|
|
}
|
|
|
|
|
|
/* 调整第二个卡片的样式 */
|
|
.send-panel1 {
|
|
width: calc(50% - 20px); /* 设置宽度为容器宽度的一半减去间距 */
|
|
align-items: center;
|
|
}
|
|
|
|
/* 按钮样式 */
|
|
.send-btn {
|
|
background-color: #333; /* 深灰色背景 */
|
|
color: white;
|
|
border-radius: 50%;
|
|
padding: 10px;
|
|
margin-right: 10px; /* 添加右边距 */
|
|
}
|
|
|
|
.receiver-btn {
|
|
background-color: #d9534f; /* 红色背景 */
|
|
}
|
|
|
|
/* 表单样式 */
|
|
.form {
|
|
margin-top: 10px;
|
|
width: 70%; /* 表单宽度调整为100% */
|
|
}
|
|
|
|
/* 确认按钮样式 */
|
|
.confirm-btn {
|
|
background-color: #428bca; /* 蓝色背景 */
|
|
color: white;
|
|
padding: 10px 20px; /* 添加内边距 */
|
|
border: none; /* 去除边框 */
|
|
border-radius: 5px; /* 圆角边框 */
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
cursor: pointer; /* 鼠标悬停时显示指针 */
|
|
}
|
|
|
|
/* 标签样式 */
|
|
.el-form-item__label {
|
|
color: #333; /* 标签文字颜色 */
|
|
font-weight: 500; /* 字体加粗 */
|
|
}
|
|
.end-label {
|
|
font-weight: 600;
|
|
align-self: flex-start;
|
|
margin-right: 40px;
|
|
margin-top: 10px;
|
|
}
|
|
.el-form-item__label::before {
|
|
content: '*';
|
|
color: red;
|
|
margin-right: 4px;
|
|
}
|
|
.el-form-item.no-asterisk .el-form-item__label::before {
|
|
content: none;
|
|
}
|
|
</style> |