Compare commits
3 Commits
9fbe6af81c
...
748b0784a0
| Author | SHA1 | Date |
|---|---|---|
 cxy
|
748b0784a0 | 4 days ago |
|
cxy
|
74dccc232b | 4 days ago |
|
cxy
|
c3036268dd | 4 days ago |
|
After Width: | Height: | Size: 106 KiB |
|
After Width: | Height: | Size: 106 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 101 KiB |
|
After Width: | Height: | Size: 97 KiB |
|
After Width: | Height: | Size: 121 KiB |
|
After Width: | Height: | Size: 107 KiB |
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 106 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 104 KiB |
|
After Width: | Height: | Size: 118 KiB |
@ -1,229 +1,188 @@
|
||||
<template>
|
||||
<el-row class="main">
|
||||
<!-- 发件人面板 -->
|
||||
<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 class="btn">地址簿</el-button>
|
||||
<el-button class="btn">智能填写</el-button>
|
||||
<el-button >地址簿</el-button>
|
||||
<el-button >智能填写</el-button>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-form label-width="auto" class="form" :model="senderForm" :rules="rules" ref="senderForm">
|
||||
<el-form-item prop="name">
|
||||
<template #label>
|
||||
姓名
|
||||
</template>
|
||||
<el-input v-model="senderForm.name" placeholder="请填写发件人姓名"></el-input>
|
||||
<el-form label-width="auto" class="form" >
|
||||
<el-form-item label="姓名" >
|
||||
<el-input v-model="form.senderName" placeholder="请填写发件人姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="phone">
|
||||
<template #label>
|
||||
联系电话
|
||||
</template>
|
||||
<el-input v-model="senderForm.phone" placeholder="请填写发件人联系电话"></el-input>
|
||||
<el-form-item label="联系电话">
|
||||
<el-input placeholder="请填写发件人联系电话"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="region">
|
||||
<template #label>
|
||||
省市区
|
||||
</template>
|
||||
<el-input v-model="senderForm.region" placeholder="请填写发件人省市区"></el-input>
|
||||
<el-form-item label="省市区" >
|
||||
<el-input v-model="form.senderCity" placeholder="请填写发件人省市区"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="address">
|
||||
<template #label>
|
||||
详细地址
|
||||
</template>
|
||||
<el-input v-model="senderForm.address" placeholder="请填写发件人详细地址"></el-input>
|
||||
<el-form-item label="详细地址">
|
||||
<el-input placeholder="请填写发件人详细地址"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="公司名称">
|
||||
<el-input v-model="senderForm.company" placeholder="请填写发件人公司名称"></el-input>
|
||||
<el-input placeholder="请填写发件人公司名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<!-- 箭头图标 -->
|
||||
<el-image class="arrow" src="/arrow.png"></el-image>
|
||||
|
||||
<!-- 收件人面板 -->
|
||||
<el-row class="panel send-panel send-panel1">
|
||||
<el-row class="send-container">
|
||||
<el-button class="send-btn receive-btn">收</el-button>
|
||||
<el-row>
|
||||
<el-button class="btn">地址簿</el-button>
|
||||
<el-button class="btn">智能填写</el-button>
|
||||
<el-button >地址簿</el-button>
|
||||
<el-button >智能填写</el-button>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-form label-width="auto" class="form" :model="receiverForm" :rules="rules" ref="receiverForm">
|
||||
<el-form-item prop="name">
|
||||
<template #label>
|
||||
姓名
|
||||
</template>
|
||||
<el-input v-model="receiverForm.name" placeholder="请填写收件人姓名"></el-input>
|
||||
<el-form label-width="auto" class="form" >
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.receiverName" placeholder="请填写收件人姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="phone">
|
||||
<template #label>
|
||||
联系电话
|
||||
</template>
|
||||
<el-input v-model="receiverForm.phone" placeholder="请填写收件人联系电话"></el-input>
|
||||
<el-form-item label="联系电话" >
|
||||
<el-input placeholder="请填写收件人联系电话"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="region">
|
||||
<template #label>
|
||||
省市区
|
||||
</template>
|
||||
<el-input v-model="receiverForm.region" placeholder="请填写收件人省市区"></el-input>
|
||||
<el-form-item label="省市区" >
|
||||
<el-input v-model="form.receiverCity" placeholder="请填写收件人省市区"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="address">
|
||||
<template #label>
|
||||
详细地址
|
||||
</template>
|
||||
<el-input v-model="receiverForm.address" placeholder="请填写收件人详细地址"></el-input>
|
||||
<el-form-item label="详细地址" >
|
||||
<el-input placeholder="请填写收件人详细地址"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="公司名称">
|
||||
<el-input v-model="receiverForm.company" placeholder="请填写收件人公司名称"></el-input>
|
||||
<el-input placeholder="请填写收件人公司名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-row>
|
||||
|
||||
<!-- 寄件方式 -->
|
||||
<el-row class="panel send-panel">
|
||||
<el-text class="send-label">寄件方式</el-text>
|
||||
<el-row>
|
||||
<el-radio-group v-model="deliveryMethod">
|
||||
<el-radio :label="1">预约上门取件</el-radio>
|
||||
<el-radio :label="0">自行联系快递员</el-radio>
|
||||
<el-radio-group v-model="sendType">
|
||||
<el-radio :value="0">预约上门取件</el-radio>
|
||||
<el-radio :value="1">自行联系快递员</el-radio>
|
||||
</el-radio-group>
|
||||
</el-row>
|
||||
</el-row>
|
||||
|
||||
<!-- 下单按钮 -->
|
||||
<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>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
senderForm: {
|
||||
name: '',
|
||||
phone: '',
|
||||
region: '',
|
||||
address: '',
|
||||
company: ''
|
||||
},
|
||||
receiverForm: {
|
||||
name: '',
|
||||
phone: '',
|
||||
region: '',
|
||||
address: '',
|
||||
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'
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
<script setup>
|
||||
import { reactive,ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
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: '',
|
||||
phone: '',
|
||||
address: {
|
||||
region: '',
|
||||
detail: ''
|
||||
},
|
||||
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('发件信息填写不完整');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
company: ''
|
||||
};
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.required {
|
||||
color: red;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
border-radius: 100%;
|
||||
padding: 10px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.receive-btn {
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.send-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.send-panel {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.send-panel1 {
|
||||
width: 40%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 80%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.send-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background-color: royalblue;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.send-btn {
|
||||
border-radius: 100%;
|
||||
padding: 10px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.receive-btn {
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.send-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.send-panel {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.send-panel1 {
|
||||
width: 40%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.receiver-btn {
|
||||
background-color:black;
|
||||
color: white;
|
||||
border-radius: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 80%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 40px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.send-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background-color: royalblue;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,98 +0,0 @@
|
||||
<script setup>
|
||||
import {Plus, Upload} from '@element-plus/icons-vue'
|
||||
import {ref} from 'vue'
|
||||
import {useUserInfoStore} from "@/stores/userInfo.js";
|
||||
import {useTokenStore} from "@/stores/token";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {userAvatarUpdateService} from "@/api/user";
|
||||
|
||||
const uploadRef = ref()
|
||||
|
||||
const userInfoStore = useUserInfoStore();
|
||||
|
||||
//用户头像地址
|
||||
const imgUrl = ref(userInfoStore.userInfo.userPic)
|
||||
|
||||
const tokenStore = useTokenStore();
|
||||
const uploadSuccess = (result) => {
|
||||
imgUrl.value = result.data;
|
||||
ElMessage.success("图片上传成功")
|
||||
}
|
||||
|
||||
const updateAvatar = async () => {
|
||||
await userAvatarUpdateService(imgUrl.value)
|
||||
ElMessage.success("修改成功")
|
||||
|
||||
userInfoStore.setUserInfo({
|
||||
...userInfoStore.userInfo,
|
||||
userPic: imgUrl.value
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card class="page-container">
|
||||
<template #header>
|
||||
<div class="header">
|
||||
<span>更换头像</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
class="avatar-uploader"
|
||||
:show-file-list="false"
|
||||
:auto-upload="true"
|
||||
action="/api/upload"
|
||||
name="file"
|
||||
:headers="{'Authorization':tokenStore.token}"
|
||||
:on-success="uploadSuccess"
|
||||
>
|
||||
<el-image v-if="imgUrl" :src="imgUrl" class="avatar"/>
|
||||
<el-image v-else src="avatar" width="278"/>
|
||||
</el-upload>
|
||||
<br/>
|
||||
<el-button type="primary" :icon="Plus" size="large" @click="uploadRef.$el.querySelector('input').click()">
|
||||
选择图片
|
||||
</el-button>
|
||||
<el-button type="success" :icon="Upload" size="large" @click="updateAvatar">
|
||||
上传头像
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.avatar-uploader {
|
||||
:deep {
|
||||
.avatar {
|
||||
width: 278px;
|
||||
height: 278px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.el-upload {
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: var(--el-transition-duration-fast);
|
||||
}
|
||||
|
||||
.el-upload:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-icon.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 278px;
|
||||
height: 278px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,80 +0,0 @@
|
||||
<template>
|
||||
<div class="send-package">
|
||||
<el-form ref="sendForm" :model="sendForm" label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="寄件人姓名">
|
||||
<el-input v-model="sendForm.senderName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="寄件人电话">
|
||||
<el-input v-model="sendForm.senderPhone"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="寄件人地址">
|
||||
<el-input type="textarea" v-model="sendForm.senderAddress"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="收件人姓名">
|
||||
<el-input v-model="sendForm.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="收件人电话">
|
||||
<el-input v-model="sendForm.phone"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="收件人地址">
|
||||
<el-input type="textarea" v-model="sendForm.address"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="物品描述">
|
||||
<el-input type="textarea" v-model="sendForm.description"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm">提交</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { ElForm, ElFormItem, ElInput, ElButton, ElMessage, ElRow, ElCol } from 'element-plus';
|
||||
|
||||
const sendForm = ref({
|
||||
name: '',
|
||||
phone: '',
|
||||
address: '',
|
||||
senderName: '',
|
||||
senderPhone: '',
|
||||
senderAddress: '',
|
||||
description: ''
|
||||
});
|
||||
|
||||
const submitForm = () => {
|
||||
// 在这里添加提交表单的逻辑
|
||||
ElMessage.success('快递信息已提交');
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
// 重置表单
|
||||
sendForm.value = {
|
||||
name: '',
|
||||
phone: '',
|
||||
address: '',
|
||||
senderName: '',
|
||||
senderPhone: '',
|
||||
senderAddress: '',
|
||||
description: ''
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.send-package {
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
@ -1,48 +0,0 @@
|
||||
import {
|
||||
createRouter,
|
||||
createWebHashHistory
|
||||
} from "vue-router"
|
||||
|
||||
import {storeToRefs} from "pinia"
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
redirect: 'Home'
|
||||
},
|
||||
{
|
||||
path: '/home',
|
||||
name: 'Home',
|
||||
component: () => import('./View/Home.vue')
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: () => import('./View/Login.vue'),
|
||||
},
|
||||
{
|
||||
path: '/user',
|
||||
name: 'User',
|
||||
component: () => import('./View/user/Index.vue'),
|
||||
redirect: "myInfo",
|
||||
children: [
|
||||
{
|
||||
path: '/myInfo',
|
||||
component: () => import('./View/user/MyInfo.vue')
|
||||
},
|
||||
{
|
||||
path: '/expressList',
|
||||
component: () => import('./View/express/ExpressList.vue')
|
||||
},
|
||||
{
|
||||
path: '/expressForm',
|
||||
component: () => import('./View/express/ExpressForm.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
export default router
|
||||
@ -0,0 +1,29 @@
|
||||
import {defineStore} from 'pinia'
|
||||
|
||||
export const expressStore = defineStore('express', {
|
||||
state: () => {
|
||||
return {
|
||||
expressList: [],
|
||||
}
|
||||
},
|
||||
getters: {},
|
||||
actions: {
|
||||
add(item) {
|
||||
this.expressList.push(item)
|
||||
},
|
||||
modify(item, index) {
|
||||
this.expressList[index] = item
|
||||
},
|
||||
remove(index) {
|
||||
this.expressList.splice(index, 1)
|
||||
}
|
||||
},
|
||||
persist: {
|
||||
enabled: true,
|
||||
strategies: [{
|
||||
key: 'express',
|
||||
storage: localStorage,
|
||||
path: ['express']
|
||||
}],
|
||||
}
|
||||
})
|
||||
Loading…
Reference in new issue