parent
74dccc232b
commit
748b0784a0
@ -1,229 +1,188 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-row class="main">
|
<el-row class="main">
|
||||||
|
<!-- 发件人面板 -->
|
||||||
<el-row class="send-container">
|
<el-row class="send-container">
|
||||||
<el-row class="panel send-panel send-panel1">
|
<el-row class="panel send-panel send-panel1">
|
||||||
<el-row class="send-container">
|
<el-row class="send-container">
|
||||||
<el-button class="send-btn">寄</el-button>
|
<el-button class="send-btn">寄</el-button>
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-button class="btn">地址簿</el-button>
|
<el-button >地址簿</el-button>
|
||||||
<el-button class="btn">智能填写</el-button>
|
<el-button >智能填写</el-button>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-form label-width="auto" class="form" :model="senderForm" :rules="rules" ref="senderForm">
|
<el-form label-width="auto" class="form" >
|
||||||
<el-form-item prop="name">
|
<el-form-item label="姓名" >
|
||||||
<template #label>
|
<el-input v-model="form.senderName" placeholder="请填写发件人姓名"></el-input>
|
||||||
姓名
|
|
||||||
</template>
|
|
||||||
<el-input v-model="senderForm.name" placeholder="请填写发件人姓名"></el-input>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="phone">
|
<el-form-item label="联系电话">
|
||||||
<template #label>
|
<el-input placeholder="请填写发件人联系电话"></el-input>
|
||||||
联系电话
|
|
||||||
</template>
|
|
||||||
<el-input v-model="senderForm.phone" placeholder="请填写发件人联系电话"></el-input>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="region">
|
<el-form-item label="省市区" >
|
||||||
<template #label>
|
<el-input v-model="form.senderCity" placeholder="请填写发件人省市区"></el-input>
|
||||||
省市区
|
|
||||||
</template>
|
|
||||||
<el-input v-model="senderForm.region" placeholder="请填写发件人省市区"></el-input>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="address">
|
<el-form-item label="详细地址">
|
||||||
<template #label>
|
<el-input placeholder="请填写发件人详细地址"></el-input>
|
||||||
详细地址
|
|
||||||
</template>
|
|
||||||
<el-input v-model="senderForm.address" placeholder="请填写发件人详细地址"></el-input>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="公司名称">
|
<el-form-item label="公司名称">
|
||||||
<el-input v-model="senderForm.company" placeholder="请填写发件人公司名称"></el-input>
|
<el-input placeholder="请填写发件人公司名称"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 箭头图标 -->
|
||||||
|
<el-image class="arrow" src="/arrow.png"></el-image>
|
||||||
|
|
||||||
|
<!-- 收件人面板 -->
|
||||||
<el-row class="panel send-panel send-panel1">
|
<el-row class="panel send-panel send-panel1">
|
||||||
<el-row class="send-container">
|
<el-row class="send-container">
|
||||||
<el-button class="send-btn receive-btn">收</el-button>
|
<el-button class="send-btn receive-btn">收</el-button>
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-button class="btn">地址簿</el-button>
|
<el-button >地址簿</el-button>
|
||||||
<el-button class="btn">智能填写</el-button>
|
<el-button >智能填写</el-button>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-form label-width="auto" class="form" :model="receiverForm" :rules="rules" ref="receiverForm">
|
<el-form label-width="auto" class="form" >
|
||||||
<el-form-item prop="name">
|
<el-form-item label="姓名">
|
||||||
<template #label>
|
<el-input v-model="form.receiverName" placeholder="请填写收件人姓名"></el-input>
|
||||||
姓名
|
|
||||||
</template>
|
|
||||||
<el-input v-model="receiverForm.name" placeholder="请填写收件人姓名"></el-input>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="phone">
|
<el-form-item label="联系电话" >
|
||||||
<template #label>
|
<el-input placeholder="请填写收件人联系电话"></el-input>
|
||||||
联系电话
|
|
||||||
</template>
|
|
||||||
<el-input v-model="receiverForm.phone" placeholder="请填写收件人联系电话"></el-input>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="region">
|
<el-form-item label="省市区" >
|
||||||
<template #label>
|
<el-input v-model="form.receiverCity" placeholder="请填写收件人省市区"></el-input>
|
||||||
省市区
|
|
||||||
</template>
|
|
||||||
<el-input v-model="receiverForm.region" placeholder="请填写收件人省市区"></el-input>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="address">
|
<el-form-item label="详细地址" >
|
||||||
<template #label>
|
<el-input placeholder="请填写收件人详细地址"></el-input>
|
||||||
详细地址
|
|
||||||
</template>
|
|
||||||
<el-input v-model="receiverForm.address" placeholder="请填写收件人详细地址"></el-input>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="公司名称">
|
<el-form-item label="公司名称">
|
||||||
<el-input v-model="receiverForm.company" placeholder="请填写收件人公司名称"></el-input>
|
<el-input placeholder="请填写收件人公司名称"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 寄件方式 -->
|
||||||
<el-row class="panel send-panel">
|
<el-row class="panel send-panel">
|
||||||
<el-text class="send-label">寄件方式</el-text>
|
<el-text class="send-label">寄件方式</el-text>
|
||||||
<el-row>
|
<el-radio-group v-model="sendType">
|
||||||
<el-radio-group v-model="deliveryMethod">
|
<el-radio :value="0">预约上门取件</el-radio>
|
||||||
<el-radio :label="1">预约上门取件</el-radio>
|
<el-radio :value="1">自行联系快递员</el-radio>
|
||||||
<el-radio :label="0">自行联系快递员</el-radio>
|
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-row>
|
<!-- 下单按钮 -->
|
||||||
|
|
||||||
<el-row class="panel send-panel">
|
<el-row class="panel send-panel">
|
||||||
<el-button class="confirm-btn" @click="submitForm">下单</el-button>
|
<el-button class="confirm-btn" @click="confirmOrder">下单</el-button>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-row>
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
|
||||||
export default {
|
<script setup>
|
||||||
data() {
|
import { reactive,ref } from 'vue';
|
||||||
return {
|
import { ElMessage } from 'element-plus';
|
||||||
senderForm: {
|
import {expressStore} from "@/stores/express.js";
|
||||||
|
const store = expressStore();
|
||||||
|
const sendType = ref(0); // 默认选择自行联系快递员
|
||||||
|
const form = reactive({
|
||||||
|
"express_no": "SF1234567890",
|
||||||
|
"senderName": "",
|
||||||
|
"senderCity": "",
|
||||||
|
"receiverName": "",
|
||||||
|
"receiverCity": "",
|
||||||
|
"s_datetime": " 2024-11-11 11:11:11"
|
||||||
|
})
|
||||||
|
const confirmOrder =() => {
|
||||||
|
store.add(form);
|
||||||
|
ElMessage({
|
||||||
|
message: '下单成功!',
|
||||||
|
type:'success'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 清空表单
|
||||||
|
const resetForm = () => {
|
||||||
|
form.value = {
|
||||||
name: '',
|
name: '',
|
||||||
phone: '',
|
phone: '',
|
||||||
|
address: {
|
||||||
region: '',
|
region: '',
|
||||||
address: '',
|
detail: ''
|
||||||
company: ''
|
|
||||||
},
|
},
|
||||||
receiverForm: {
|
|
||||||
name: '',
|
|
||||||
phone: '',
|
|
||||||
region: '',
|
|
||||||
address: '',
|
|
||||||
company: ''
|
company: ''
|
||||||
},
|
|
||||||
deliveryMethod: 1,
|
|
||||||
rules: {
|
|
||||||
name: [{
|
|
||||||
required: true,
|
|
||||||
message: '姓名不能为空',
|
|
||||||
trigger: 'blur'
|
|
||||||
}],
|
|
||||||
phone: [{
|
|
||||||
required: true,
|
|
||||||
message: '联系电话不能为空',
|
|
||||||
trigger: 'blur'
|
|
||||||
}],
|
|
||||||
region: [{
|
|
||||||
required: true,
|
|
||||||
message: '省市区不能为空',
|
|
||||||
trigger: 'blur'
|
|
||||||
}],
|
|
||||||
address: [{
|
|
||||||
required: true,
|
|
||||||
message: '详细地址不能为空',
|
|
||||||
trigger: 'blur'
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
submitForm() {
|
|
||||||
this.$refs.senderForm.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
this.$refs.receiverForm.validate((receiverValid) => {
|
|
||||||
if (receiverValid) {
|
|
||||||
this.$message.success('表单提交成功');
|
|
||||||
} else {
|
|
||||||
this.$message.error('收件信息填写不完整');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.$message.error('发件信息填写不完整');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
.required {
|
|
||||||
color: red;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.send-btn {
|
<style scoped>
|
||||||
|
.send-btn {
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.receive-btn {
|
.receive-btn {
|
||||||
background-color: red;
|
background-color: red;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.send-container {
|
.send-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.send-panel {
|
.send-panel {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.send-panel1 {
|
.send-panel1 {
|
||||||
width: 40%;
|
width: 40%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.receiver-btn {
|
||||||
|
background-color:black;
|
||||||
|
color: white;
|
||||||
|
border-radius: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.form {
|
.form {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow {
|
.arrow {
|
||||||
max-width: 100%;
|
width: 40px;
|
||||||
vertical-align: middle;
|
|
||||||
height: 10px;
|
height: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.send-label {
|
.send-label {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.confirm-btn {
|
.confirm-btn {
|
||||||
background-color: royalblue;
|
background-color: royalblue;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
Loading…
Reference in new issue