parent
b2a5c65d8a
commit
4760bf3fd9
@ -1,2 +1,5 @@
|
|||||||
# uml
|
# Vue 3 + Vite
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
|
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
|
||||||
|
|||||||
@ -1,24 +0,0 @@
|
|||||||
# Logs
|
|
||||||
logs
|
|
||||||
*.log
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
pnpm-debug.log*
|
|
||||||
lerna-debug.log*
|
|
||||||
|
|
||||||
node_modules
|
|
||||||
dist
|
|
||||||
dist-ssr
|
|
||||||
*.local
|
|
||||||
|
|
||||||
# Editor directories and files
|
|
||||||
.vscode/*
|
|
||||||
!.vscode/extensions.json
|
|
||||||
.idea
|
|
||||||
.DS_Store
|
|
||||||
*.suo
|
|
||||||
*.ntvs*
|
|
||||||
*.njsproj
|
|
||||||
*.sln
|
|
||||||
*.sw?
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Vite + Vue</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<script type="module" src="/src/main.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
Before Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
@ -1,43 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
msg: String,
|
|
||||||
})
|
|
||||||
|
|
||||||
const count = ref(0)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<h1>{{ msg }}</h1>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<button type="button" @click="count++">count is {{ count }}</button>
|
|
||||||
<p>
|
|
||||||
Edit
|
|
||||||
<code>components/HelloWorld.vue</code> to test HMR
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Check out
|
|
||||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
|
||||||
>create-vue</a
|
|
||||||
>, the official Vue + Vite starter
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Learn more about IDE Support for Vue in the
|
|
||||||
<a
|
|
||||||
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
|
||||||
target="_blank"
|
|
||||||
>Vue Docs Scaling up Guide</a
|
|
||||||
>.
|
|
||||||
</p>
|
|
||||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.read-the-docs {
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,15 +1,26 @@
|
|||||||
import { defineStore } from "pinia";
|
import {
|
||||||
|
defineStore
|
||||||
|
} from "pinia";
|
||||||
|
|
||||||
export const userStore = defineStore('storeId',{
|
export const userStore = defineStore('storeId', {
|
||||||
state:()=>{
|
state: () => {
|
||||||
return{
|
return {
|
||||||
loginState:false
|
loginState: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getters:{},
|
getters: {},
|
||||||
actions:{
|
actions: {
|
||||||
setLoginState(state){
|
setLoginState(state) {
|
||||||
this.loginState=state
|
this.loginState = state
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
persist: {
|
||||||
|
enabled: true, // 开启数据缓存
|
||||||
|
strategies: [{
|
||||||
|
key: 'storeId', // 当前store的id
|
||||||
|
storage: localStorage, // 存储方式
|
||||||
|
paths: ['loginState'] // 指定要持久化的字段
|
||||||
|
}]
|
||||||
}
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import { defineStore } from 'pinia';
|
||||||
|
|
||||||
|
export const useUserStore = defineStore('user', {
|
||||||
|
state: () => ({
|
||||||
|
username: '用户',
|
||||||
|
email: 'user@example.com',
|
||||||
|
gender: '',
|
||||||
|
birthdate: new Date(),
|
||||||
|
phone: '',
|
||||||
|
selectedRegion: [],
|
||||||
|
}),
|
||||||
|
actions: {
|
||||||
|
updateProfile(profile) {
|
||||||
|
this.username = profile.username;
|
||||||
|
this.email = profile.email;
|
||||||
|
this.gender = profile.gender;
|
||||||
|
this.birthdate = profile.birthdate;
|
||||||
|
this.phone = profile.phone;
|
||||||
|
this.selectedRegion = profile.selectedRegion;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
persist: {
|
||||||
|
key: 'user-profile', // 存储的键名
|
||||||
|
storage: localStorage, // 使用 localStorage 持久化
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -1,19 +0,0 @@
|
|||||||
// stores/ageStore.js
|
|
||||||
import { defineStore } from 'pinia'
|
|
||||||
|
|
||||||
export const useAgeStore = defineStore('ageStore', {
|
|
||||||
state: () => ({
|
|
||||||
age: 20 // 设置初始年龄为20
|
|
||||||
}),
|
|
||||||
actions: {
|
|
||||||
incrementAge() {
|
|
||||||
this.age++
|
|
||||||
}
|
|
||||||
},
|
|
||||||
persist: {
|
|
||||||
enabled: true,
|
|
||||||
strategies: [
|
|
||||||
{ storage: localStorage, paths: ['age'] } // 将age字段持久化到localStorage
|
|
||||||
]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@ -1,88 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules" label-width="auto"
|
|
||||||
class="demo-ruleForm">
|
|
||||||
<el-form-item label="账号" prop="account">
|
|
||||||
<el-input v-model.number="ruleForm.account" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="密码" prop="pass">
|
|
||||||
<el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="确认密码" prop="checkPass">
|
|
||||||
<el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="submitForm(ruleFormRef)">
|
|
||||||
Submit
|
|
||||||
</el-button>
|
|
||||||
<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { reactive, ref } from 'vue'
|
|
||||||
import type { FormInstance, FormRules } from 'element-plus'
|
|
||||||
|
|
||||||
const ruleFormRef = ref<FormInstance>()
|
|
||||||
|
|
||||||
const checkAccount = (rule : any, value : any, callback : any) => {
|
|
||||||
if (!value) {
|
|
||||||
return callback(new Error('请输入账号'))
|
|
||||||
}else{
|
|
||||||
let value1=value+""
|
|
||||||
if(value1.length<8){
|
|
||||||
return callback(new Error('账号长度不能小于8'))
|
|
||||||
}
|
|
||||||
callback()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const validatePass = (rule : any, value : any, callback : any) => {
|
|
||||||
if (value === '') {
|
|
||||||
callback(new Error('请输入密码'))
|
|
||||||
} else {
|
|
||||||
if (ruleForm.checkPass !== '') {
|
|
||||||
if (!ruleFormRef.value) return
|
|
||||||
ruleFormRef.value.validateField('checkPass')
|
|
||||||
}
|
|
||||||
callback()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const validatePass2 = (rule : any, value : any, callback : any) => {
|
|
||||||
if (value === '') {
|
|
||||||
callback(new Error('请再次输入密码'))
|
|
||||||
} else if (value !== ruleForm.pass) {
|
|
||||||
callback(new Error("两次密码不一致"))
|
|
||||||
} else {
|
|
||||||
callback()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const ruleForm = reactive({
|
|
||||||
pass: '',
|
|
||||||
checkPass: '',
|
|
||||||
account: '',
|
|
||||||
})
|
|
||||||
|
|
||||||
const rules = reactive<FormRules<typeof ruleForm>>({
|
|
||||||
pass: [{ validator: validatePass, trigger: 'blur' }],
|
|
||||||
checkPass: [{ validator: validatePass2, trigger: 'blur' }],
|
|
||||||
account: [{ validator: checkAccount, trigger: 'blur' }],
|
|
||||||
})
|
|
||||||
|
|
||||||
const submitForm = (formEl : FormInstance | undefined) => {
|
|
||||||
if (!formEl) return
|
|
||||||
formEl.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
console.log('submit!')
|
|
||||||
} else {
|
|
||||||
console.log('error submit!')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const resetForm = (formEl : FormInstance | undefined) => {
|
|
||||||
if (!formEl) return
|
|
||||||
formEl.resetFields()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -0,0 +1,162 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<!-- 页面标题 -->
|
||||||
|
<el-row class="title-row">
|
||||||
|
<el-col :span="24">
|
||||||
|
<h2 class="title">配送状态查询</h2>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 查询条件 -->
|
||||||
|
<el-row :gutter="20" class="query-row">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-input
|
||||||
|
v-model="searchText"
|
||||||
|
placeholder="请输入订单编号或客户姓名"
|
||||||
|
@input="filterOrders"
|
||||||
|
clearable
|
||||||
|
class="custom-input"
|
||||||
|
>
|
||||||
|
<template #prepend>
|
||||||
|
<el-icon><search /></el-icon>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-select
|
||||||
|
v-model="selectedStatus"
|
||||||
|
placeholder="选择订单状态"
|
||||||
|
@change="filterOrders"
|
||||||
|
clearable
|
||||||
|
class="custom-select"
|
||||||
|
>
|
||||||
|
<el-option label="待接收" value="待接收" />
|
||||||
|
<el-option label="待配送" value="待配送" />
|
||||||
|
<el-option label="配送中" value="配送中" />
|
||||||
|
<el-option label="已完成" value="已完成" />
|
||||||
|
</el-select>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 订单列表 -->
|
||||||
|
<el-table :data="filteredOrders" class="custom-table" stripe>
|
||||||
|
<el-table-column prop="orderId" label="订单编号" width="150" />
|
||||||
|
<el-table-column prop="customerName" label="客户姓名" width="150" />
|
||||||
|
<el-table-column prop="pickupAddress" label="取件地址" width="250" />
|
||||||
|
<el-table-column prop="deliveryAddress" label="送达地址" width="250" />
|
||||||
|
<el-table-column prop="status" label="订单状态" width="150" />
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { Search } from "@element-plus/icons-vue";
|
||||||
|
|
||||||
|
// 模拟订单数据
|
||||||
|
const orders = ref([
|
||||||
|
{
|
||||||
|
orderId: "123456",
|
||||||
|
customerName: "张三",
|
||||||
|
pickupAddress: "北京市朝阳区",
|
||||||
|
deliveryAddress: "北京市海淀区",
|
||||||
|
status: "待接收",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
orderId: "123457",
|
||||||
|
customerName: "李四",
|
||||||
|
pickupAddress: "上海市浦东新区",
|
||||||
|
deliveryAddress: "上海市静安区",
|
||||||
|
status: "待配送",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
orderId: "123458",
|
||||||
|
customerName: "王五",
|
||||||
|
pickupAddress: "广州市天河区",
|
||||||
|
deliveryAddress: "广州市越秀区",
|
||||||
|
status: "配送中",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
orderId: "123459",
|
||||||
|
customerName: "赵六",
|
||||||
|
pickupAddress: "深圳市南山区",
|
||||||
|
deliveryAddress: "深圳市福田区",
|
||||||
|
status: "已完成",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 搜索框内容
|
||||||
|
const searchText = ref("");
|
||||||
|
// 选中的状态
|
||||||
|
const selectedStatus = ref(null);
|
||||||
|
// 筛选后的订单
|
||||||
|
const filteredOrders = ref([...orders.value]);
|
||||||
|
|
||||||
|
// 过滤订单的方法
|
||||||
|
const filterOrders = () => {
|
||||||
|
filteredOrders.value = orders.value.filter((order) => {
|
||||||
|
const matchesText =
|
||||||
|
!searchText.value ||
|
||||||
|
order.orderId.includes(searchText.value) ||
|
||||||
|
order.customerName.includes(searchText.value);
|
||||||
|
const matchesStatus =
|
||||||
|
!selectedStatus.value || order.status === selectedStatus.value;
|
||||||
|
|
||||||
|
return matchesText && matchesStatus;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 容器样式 */
|
||||||
|
.container {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标题样式 */
|
||||||
|
.title-row {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 查询行样式 */
|
||||||
|
.query-row {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-input {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-select {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表格样式 */
|
||||||
|
.custom-table {
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-table .el-table__header {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-table .el-table__row:hover {
|
||||||
|
background-color: #f0f9ff;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,78 @@
|
|||||||
|
<template>
|
||||||
|
<el-container>
|
||||||
|
<el-header>
|
||||||
|
<h2 class="title">客户反馈</h2>
|
||||||
|
</el-header>
|
||||||
|
<el-main>
|
||||||
|
<el-row class="feedback-list">
|
||||||
|
<el-col :span="24">
|
||||||
|
<h2>客户反馈列表</h2>
|
||||||
|
<el-table :data="feedbacks" style="width: 100%">
|
||||||
|
<el-table-column label="主题" prop="subject" width="150"></el-table-column>
|
||||||
|
<el-table-column label="反馈内容" prop="content" width="300" :show-overflow-tooltip="true"></el-table-column>
|
||||||
|
<el-table-column label="提交日期" prop="date" width="180"></el-table-column>
|
||||||
|
<el-table-column label="联系方式" prop="contact" width="150"></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const feedbacks = ref([
|
||||||
|
{
|
||||||
|
subject: '物流问题',
|
||||||
|
content: '我的包裹在运输过程中丢失了，请尽快处理。',
|
||||||
|
date: '2024-11-01',
|
||||||
|
contact: '12345678901'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
subject: '服务建议',
|
||||||
|
content: '希望能增加实时物流跟踪功能。',
|
||||||
|
date: '2024-11-05',
|
||||||
|
contact: ''
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 顶部标题样式 */
|
||||||
|
.title {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #2c3e50;
|
||||||
|
text-align: center;
|
||||||
|
padding: 15px 0;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 客户反馈列表容器 */
|
||||||
|
.feedback-list {
|
||||||
|
padding: 20px;
|
||||||
|
background: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 分区标题样式 */
|
||||||
|
.section-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表格样式 */
|
||||||
|
.el-table {
|
||||||
|
margin-top: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表格行的 hover 效果 */
|
||||||
|
.el-table .el-table__row:hover {
|
||||||
|
background-color: #e8f0fe;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
<template>
|
||||||
|
<div class="home-page">
|
||||||
|
<!-- 欢迎横幅 -->
|
||||||
|
<section class="welcome-banner">
|
||||||
|
<h1>欢迎使用旭日快递管理系统</h1>
|
||||||
|
<p>在这里您可以管理快递、用户和系统设置。</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 统计信息卡片 -->
|
||||||
|
<section class="statistics">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-card class="stat-card">
|
||||||
|
<div class="stat-title">用户总数</div>
|
||||||
|
<div class="stat-value">{{ userCount }}</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-card class="stat-card">
|
||||||
|
<div class="stat-title">快递总数</div>
|
||||||
|
<div class="stat-value">{{ expressCount }}</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-card class="stat-card">
|
||||||
|
<div class="stat-title">进行中的订单</div>
|
||||||
|
<div class="stat-value">{{ ongoingOrders }}</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
|
// 模拟统计数据
|
||||||
|
const userCount = ref(1024);
|
||||||
|
const expressCount = ref(5678);
|
||||||
|
const ongoingOrders = ref(321);
|
||||||
|
|
||||||
|
// 跳转到指定页面
|
||||||
|
const router = useRouter();
|
||||||
|
const goToPage = (path) => {
|
||||||
|
router.push(path);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 页面加载时可以更新统计数据
|
||||||
|
onMounted(() => {
|
||||||
|
// 可以在此处调用 API 更新统计数据
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.home-page {
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-banner {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #409EFF;
|
||||||
|
color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-banner h1 {
|
||||||
|
font-size: 24px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-banner p {
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 5px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statistics {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-title {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #606266;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #409EFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-actions {
|
||||||
|
margin-top: 30px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button {
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,192 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<!-- 页面标题 -->
|
||||||
|
<el-row class="title-row">
|
||||||
|
<el-col :span="24">
|
||||||
|
<h2 class="title">订单处理</h2>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 订单列表 -->
|
||||||
|
<el-table :data="orders" class="custom-table" stripe>
|
||||||
|
<el-table-column prop="orderId" label="订单编号" width="150" />
|
||||||
|
<el-table-column prop="customerName" label="客户姓名" width="150" />
|
||||||
|
<el-table-column prop="pickupAddress" label="取件地址" width="250" />
|
||||||
|
<el-table-column prop="deliveryAddress" label="送达地址" width="250" />
|
||||||
|
<el-table-column prop="status" label="订单状态" width="150">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-select v-model="row.status" @change="handleStatusChange(row)" placeholder="请选择状态">
|
||||||
|
<el-option label="待接收" value="待接收" />
|
||||||
|
<el-option label="待配送" value="待配送" />
|
||||||
|
<el-option label="配送中" value="配送中" />
|
||||||
|
<el-option label="已完成" value="已完成" />
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" width="200">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="link" @click="handleEditCustomer(row)">
|
||||||
|
修改顾客信息
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 修改顾客信息对话框 -->
|
||||||
|
<el-dialog v-model="dialogVisible" width="50%" title="修改顾客信息" class="custom-dialog">
|
||||||
|
<el-form :model="orderDetail" label-width="120px">
|
||||||
|
<el-form-item label="订单编号">
|
||||||
|
<el-input v-model="orderDetail.orderId" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客户姓名">
|
||||||
|
<el-input v-model="orderDetail.customerName" placeholder="请输入客户姓名" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="取件地址">
|
||||||
|
<el-input v-model="orderDetail.pickupAddress" placeholder="请输入取件地址" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="送达地址">
|
||||||
|
<el-input v-model="orderDetail.deliveryAddress" placeholder="请输入送达地址" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="saveCustomerInfo">保存</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
// 订单数据
|
||||||
|
const orders = ref([
|
||||||
|
{
|
||||||
|
orderId: "123456",
|
||||||
|
customerName: "张三",
|
||||||
|
pickupAddress: "北京市朝阳区",
|
||||||
|
deliveryAddress: "北京市海淀区",
|
||||||
|
status: "待接收",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
orderId: "123457",
|
||||||
|
customerName: "李四",
|
||||||
|
pickupAddress: "上海市浦东新区",
|
||||||
|
deliveryAddress: "上海市静安区",
|
||||||
|
status: "待配送",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
orderId: "123458",
|
||||||
|
customerName: "王五",
|
||||||
|
pickupAddress: "广州市天河区",
|
||||||
|
deliveryAddress: "广州市越秀区",
|
||||||
|
status: "配送中",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 订单详情
|
||||||
|
const orderDetail = ref({
|
||||||
|
orderId: "",
|
||||||
|
customerName: "",
|
||||||
|
pickupAddress: "",
|
||||||
|
deliveryAddress: "",
|
||||||
|
status: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
// 对话框控制
|
||||||
|
const dialogVisible = ref(false);
|
||||||
|
|
||||||
|
// 点击修改顾客信息
|
||||||
|
const handleEditCustomer = (row) => {
|
||||||
|
orderDetail.value = { ...row }; // 克隆当前行数据到 orderDetail
|
||||||
|
dialogVisible.value = true; // 显示对话框
|
||||||
|
};
|
||||||
|
|
||||||
|
// 保存顾客信息
|
||||||
|
const saveCustomerInfo = () => {
|
||||||
|
const index = orders.value.findIndex((order) => order.orderId === orderDetail.value.orderId);
|
||||||
|
if (index !== -1) {
|
||||||
|
orders.value[index] = { ...orderDetail.value }; // 更新订单数据
|
||||||
|
alert("顾客信息已更新！");
|
||||||
|
dialogVisible.value = false; // 关闭对话框
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理状态变更
|
||||||
|
const handleStatusChange = (order) => {
|
||||||
|
alert(`订单 ${order.orderId} 状态已更改为：${order.status}`);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 页面整体样式 */
|
||||||
|
.container {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标题样式 */
|
||||||
|
.title-row {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表格样式 */
|
||||||
|
.custom-table {
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-table .el-table__header {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-table .el-table__row {
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-table .el-table__row:hover {
|
||||||
|
background-color: #f0f9ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 对话框样式 */
|
||||||
|
.custom-dialog {
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-footer {
|
||||||
|
text-align: right;
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 按钮样式 */
|
||||||
|
.el-button {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button--primary {
|
||||||
|
background-color: #409eff;
|
||||||
|
border-color: #409eff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button--primary:hover {
|
||||||
|
background-color: #66b1ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表单输入框样式 */
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,203 +1,241 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-row class="main">
|
<el-row class="main">
|
||||||
<!-- 寄件人面板 -->
|
<!-- 发件人面板 -->
|
||||||
<el-row class="panel send-panel send-panel1">
|
<el-row class="send-container">
|
||||||
<el-row class="send-container">
|
<el-row class="panel send-panel send-panel1">
|
||||||
<el-button class="send-btn">寄</el-button>
|
<el-row class="send-container">
|
||||||
<el-row>
|
<el-button class="send-btn">寄</el-button>
|
||||||
<el-button class="btn" @click="openAddressBook('sender')">地址簿</el-button>
|
<el-row>
|
||||||
<el-button class="btn" @click="autoFill('sender')">智能填写</el-button>
|
<el-button class="btn" @click="openAddressBook('sender')">地址簿</el-button>
|
||||||
</el-row>
|
<el-button class="btn" @click="autoFill('sender')">智能填写</el-button>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-form ref="formSender" label-width="auto" class="form" :model="sender" :rules="senderRules">
|
</el-row>
|
||||||
<el-form-item label="姓名" prop="name">
|
<el-form ref="formSender" label-width="auto" class="form" :model="sender" :rules="senderRules">
|
||||||
<el-input v-model="sender.name" placeholder="请填写发件人姓名"></el-input>
|
<el-form-item label="姓名" prop="name">
|
||||||
</el-form-item>
|
<el-input v-model="sender.name" placeholder="请填写发件人姓名"></el-input>
|
||||||
<el-form-item label="联系电话" prop="phone">
|
</el-form-item>
|
||||||
<el-input v-model="sender.phone" placeholder="请填写发件人联系电话"></el-input>
|
<el-form-item label="联系电话" prop="phone">
|
||||||
</el-form-item>
|
<el-input v-model="sender.phone" placeholder="请填写发件人联系电话"></el-input>
|
||||||
<el-form-item label="省市区" prop="region">
|
</el-form-item>
|
||||||
<el-input v-model="sender.address.region" placeholder="请填写发件人省市区"></el-input>
|
<el-form-item label="省市区" prop="region">
|
||||||
</el-form-item>
|
<el-input v-model="sender.region" placeholder="请填写发件人省市区"></el-input>
|
||||||
<el-form-item label="详细地址" prop="detail">
|
</el-form-item>
|
||||||
<el-input v-model="sender.address.detail" placeholder="请填写发件人详细地址"></el-input>
|
<el-form-item label="详细地址" prop="detail">
|
||||||
</el-form-item>
|
<el-input v-model="sender.detail" placeholder="请填写发件人详细地址"></el-input>
|
||||||
<el-form-item label="公司名称">
|
</el-form-item>
|
||||||
<el-input v-model="sender.company" placeholder="请填写发件人公司名称"></el-input>
|
<el-form-item label="公司名称">
|
||||||
</el-form-item>
|
<el-input v-model="sender.company" placeholder="请填写发件人公司名称"></el-input>
|
||||||
</el-form>
|
</el-form-item>
|
||||||
</el-row>
|
</el-form>
|
||||||
|
</el-row>
|
||||||
<!-- 箭头图标 -->
|
|
||||||
<el-image class="arrow" src="/arrow.png"></el-image>
|
<!-- 箭头图标 -->
|
||||||
|
<el-image class="arrow" src="/arrow.png"></el-image>
|
||||||
<!-- 收件人面板 -->
|
|
||||||
<el-row class="panel send-panel send-panel1">
|
<!-- 收件人面板 -->
|
||||||
<el-row class="send-container">
|
<el-row class="panel send-panel send-panel1">
|
||||||
<el-button class="send-btn receive-btn">收</el-button>
|
<el-row class="send-container">
|
||||||
<el-row>
|
<el-button class="send-btn receive-btn">收</el-button>
|
||||||
<el-button class="btn" @click="openAddressBook('receiver')">地址簿</el-button>
|
<el-row>
|
||||||
<el-button class="btn" @click="autoFill('receiver')">智能填写</el-button>
|
<el-button class="btn" @click="openAddressBook('receiver')">地址簿</el-button>
|
||||||
</el-row>
|
<el-button class="btn" @click="autoFill('receiver')">智能填写</el-button>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-form ref="formReceiver" label-width="auto" class="form" :model="receiver" :rules="receiverRules">
|
</el-row>
|
||||||
<el-form-item label="姓名" prop="name">
|
<el-form ref="formReceiver" label-width="auto" class="form" :model="receiver" :rules="receiverRules">
|
||||||
<el-input v-model="receiver.name" placeholder="请填写收件人姓名"></el-input>
|
<el-form-item label="姓名" prop="name">
|
||||||
</el-form-item>
|
<el-input v-model="receiver.name" placeholder="请填写收件人姓名"></el-input>
|
||||||
<el-form-item label="联系电话" prop="phone">
|
</el-form-item>
|
||||||
<el-input v-model="receiver.phone" placeholder="请填写收件人联系电话"></el-input>
|
<el-form-item label="联系电话" prop="phone">
|
||||||
</el-form-item>
|
<el-input v-model="receiver.phone" placeholder="请填写收件人联系电话"></el-input>
|
||||||
<el-form-item label="省市区" prop="region">
|
</el-form-item>
|
||||||
<el-input v-model="receiver.address.region" placeholder="请填写收件人省市区"></el-input>
|
<el-form-item label="省市区" prop="region">
|
||||||
</el-form-item>
|
<el-input v-model="receiver.region" placeholder="请填写收件人省市区"></el-input>
|
||||||
<el-form-item label="详细地址" prop="detail">
|
</el-form-item>
|
||||||
<el-input v-model="receiver.address.detail" placeholder="请填写收件人详细地址"></el-input>
|
<el-form-item label="详细地址" prop="detail">
|
||||||
</el-form-item>
|
<el-input v-model="receiver.detail" placeholder="请填写收件人详细地址"></el-input>
|
||||||
<el-form-item label="公司名称">
|
</el-form-item>
|
||||||
<el-input v-model="receiver.company" placeholder="请填写收件人公司名称"></el-input>
|
<el-form-item label="公司名称">
|
||||||
</el-form-item>
|
<el-input v-model="receiver.company" placeholder="请填写收件人公司名称"></el-input>
|
||||||
</el-form>
|
</el-form-item>
|
||||||
</el-row>
|
</el-form>
|
||||||
|
</el-row>
|
||||||
<!-- 寄件方式 -->
|
</el-row>
|
||||||
<el-row class="panel send-panel">
|
|
||||||
<el-text class="send-label">寄件方式</el-text>
|
<!-- 寄件方式 -->
|
||||||
<el-row>
|
<el-row class="panel send-panel">
|
||||||
<el-radio-group v-model="shippingMethod">
|
<el-text class="send-label">寄件方式</el-text>
|
||||||
<el-radio :label="1">预约上门取件</el-radio>
|
<el-row>
|
||||||
<el-radio :label="0">自行联系快递员</el-radio>
|
<el-radio-group v-model="shippingMethod">
|
||||||
</el-radio-group>
|
<el-radio :label="1">预约上门取件</el-radio>
|
||||||
</el-row>
|
<el-radio :label="0">自行联系快递员</el-radio>
|
||||||
</el-row>
|
</el-radio-group>
|
||||||
|
</el-row>
|
||||||
<!-- 下单按钮 -->
|
</el-row>
|
||||||
<el-row class="panel send-panel">
|
|
||||||
<el-button class="confirm-btn" @click="submitOrder">下单</el-button>
|
<!-- 下单按钮 -->
|
||||||
</el-row>
|
<el-row class="panel send-panel">
|
||||||
</el-row>
|
<el-button class="confirm-btn" @click="submitOrder">下单</el-button>
|
||||||
|
</el-row>
|
||||||
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
import { ElMessage } from 'element-plus'; // 引入提示组件
|
||||||
|
|
||||||
|
const formSender = ref(null);
|
||||||
|
const formReceiver = ref(null);
|
||||||
// 定义寄件人和收件人的数据
|
// 定义寄件人和收件人的数据
|
||||||
const sender = ref({
|
const sender = ref({
|
||||||
name: '',
|
name: '',
|
||||||
phone: '',
|
phone: '',
|
||||||
address: {
|
region: '',
|
||||||
region: '',
|
detail: '',
|
||||||
detail: ''
|
company: ''
|
||||||
},
|
|
||||||
company: ''
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const receiver = ref({
|
const receiver = ref({
|
||||||
name: '',
|
name: '',
|
||||||
phone: '',
|
phone: '',
|
||||||
address: {
|
region: '',
|
||||||
region: '',
|
detail: '',
|
||||||
detail: ''
|
company: ''
|
||||||
},
|
|
||||||
company: ''
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const shippingMethod = ref(1); // 默认选择预约上门取件
|
const shippingMethod = ref(1); // 默认选择预约上门取件
|
||||||
|
|
||||||
// 表单验证规则
|
// 表单验证规则
|
||||||
const senderRules = {
|
const senderRules = {
|
||||||
name: [{ required: true, message: '请输入发件人姓名', trigger: 'blur' }],
|
name: [{ required: true, message: '请输入发件人姓名', trigger: 'blur' }],
|
||||||
phone: [{ required: true, message: '请输入发件人联系电话', trigger: 'blur' }],
|
phone: [{ required: true, message: '请输入发件人联系电话', trigger: 'blur' }],
|
||||||
region: [{ required: true, message: '请输入发件人省市区', trigger: 'blur' }],
|
region: [{ required: true, message: '请输入发件人省市区', trigger: 'blur' }],
|
||||||
detail: [{ required: true, message: '请输入发件人详细地址', trigger: 'blur' }]
|
detail: [{ required: true, message: '请输入发件人详细地址', trigger: 'blur' }]
|
||||||
};
|
};
|
||||||
|
|
||||||
const receiverRules = {
|
const receiverRules = {
|
||||||
name: [{ required: true, message: '请输入收件人姓名', trigger: 'blur' }],
|
name: [{ required: true, message: '请输入收件人姓名', trigger: 'blur' }],
|
||||||
phone: [{ required: true, message: '请输入收件人联系电话', trigger: 'blur' }],
|
phone: [{ required: true, message: '请输入收件人联系电话', trigger: 'blur' }],
|
||||||
region: [{ required: true, message: '请输入收件人省市区', trigger: 'blur' }],
|
region: [{ required: true, message: '请输入收件人省市区', trigger: 'blur' }],
|
||||||
detail: [{ required: true, message: '请输入收件人详细地址', trigger: 'blur' }]
|
detail: [{ required: true, message: '请输入收件人详细地址', trigger: 'blur' }]
|
||||||
};
|
};
|
||||||
|
|
||||||
// 地址簿和智能填写的处理方法
|
// 地址簿和智能填写的处理方法
|
||||||
const openAddressBook = (type) => {
|
const openAddressBook = (type) => {
|
||||||
console.log(`${type} 地址簿点击`);
|
console.log(`${type} 地址簿点击`);
|
||||||
};
|
};
|
||||||
|
|
||||||
const autoFill = (type) => {
|
const autoFill = (type) => {
|
||||||
console.log(`${type} 智能填写点击`);
|
console.log(`${type} 智能填写点击`);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 提交订单的处理函数
|
// 提交订单的处理函数
|
||||||
const submitOrder = () => {
|
const submitOrder = () => {
|
||||||
// 获取表单实例
|
formSender.value.validate((senderValid) => {
|
||||||
const formSender = document.querySelector('#formSender');
|
if (!senderValid) {
|
||||||
const formReceiver = document.querySelector('#formReceiver');
|
ElMessage.error('请完整填写寄件人信息！');
|
||||||
|
return;
|
||||||
// 校验发件人和收件人的表单
|
}
|
||||||
formSender.validate((valid) => {
|
|
||||||
if (!valid) return;
|
formReceiver.value.validate((receiverValid) => {
|
||||||
});
|
if (!receiverValid) {
|
||||||
|
ElMessage.error('请完整填写收件人信息！');
|
||||||
formReceiver.validate((valid) => {
|
return;
|
||||||
if (!valid) return;
|
}
|
||||||
|
|
||||||
|
ElMessage.success('下单成功！');
|
||||||
|
resetForm();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
};
|
||||||
|
|
||||||
// 提交订单信息
|
// 清空表单
|
||||||
console.log('订单提交:', sender.value, receiver.value, shippingMethod.value);
|
const resetForm = () => {
|
||||||
|
sender.value = {
|
||||||
|
name: '',
|
||||||
|
phone: '',
|
||||||
|
address: {
|
||||||
|
region: '',
|
||||||
|
detail: ''
|
||||||
|
},
|
||||||
|
company: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
receiver.value = {
|
||||||
|
name: '',
|
||||||
|
phone: '',
|
||||||
|
address: {
|
||||||
|
region: '',
|
||||||
|
detail: ''
|
||||||
|
},
|
||||||
|
company: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
shippingMethod.value = 1;
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.send-btn {
|
.send-btn {
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
.receive-btn {
|
|
||||||
background-color: red;
|
.receive-btn {
|
||||||
color: white;
|
background-color: red;
|
||||||
}
|
color: white;
|
||||||
.btn {
|
}
|
||||||
background-color: white;
|
|
||||||
}
|
.btn {
|
||||||
.send-container {
|
background-color: white;
|
||||||
width: 100%;
|
}
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
.send-container {
|
||||||
align-items: center;
|
width: 100%;
|
||||||
justify-content: space-between;
|
display: flex;
|
||||||
}
|
flex-direction: row;
|
||||||
.panel {
|
align-items: center;
|
||||||
display: flex;
|
justify-content: space-between;
|
||||||
flex-direction: column;
|
}
|
||||||
background-color: white;
|
|
||||||
justify-content: center;
|
.panel {
|
||||||
align-items: flex-start;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
.send-panel {
|
background-color: white;
|
||||||
margin-top: 10px;
|
justify-content: center;
|
||||||
padding: 10px;
|
align-items: flex-start;
|
||||||
width: 100%;
|
}
|
||||||
line-height: 40px;
|
|
||||||
}
|
.send-panel {
|
||||||
.send-panel1 {
|
margin-top: 10px;
|
||||||
width: 40%;
|
padding: 10px;
|
||||||
align-items: center;
|
width: 100%;
|
||||||
}
|
line-height: 40px;
|
||||||
.form {
|
}
|
||||||
width: 80%;
|
|
||||||
margin-top: 10px;
|
.send-panel1 {
|
||||||
}
|
width: 40%;
|
||||||
.arrow {
|
align-items: center;
|
||||||
width: 40px;
|
}
|
||||||
height: 10px;
|
|
||||||
}
|
.form {
|
||||||
.send-label {
|
width: 80%;
|
||||||
font-weight: 600;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
.confirm-btn {
|
|
||||||
background-color: royalblue;
|
.arrow {
|
||||||
color: white;
|
width: 40px;
|
||||||
}
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-label {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn {
|
||||||
|
background-color: royalblue;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,176 @@
|
|||||||
|
<template>
|
||||||
|
<el-row class="top">
|
||||||
|
<el-col :span="6" class="col">用户资料</el-col>
|
||||||
|
<el-col :span="6" class="col-exit">
|
||||||
|
<el-button type="text" @click="logout">注销账号</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row class="body">
|
||||||
|
<el-image class="user-img" src="/user.png"></el-image>
|
||||||
|
<div class="user-info">
|
||||||
|
<e-text class="username">{{ username }}</e-text>
|
||||||
|
<e-text class="email">{{ email }}</e-text>
|
||||||
|
</div>
|
||||||
|
<el-form label-width="auto" style="max-width:600px">
|
||||||
|
<el-form-item label="性别">
|
||||||
|
<el-select placeholder="请选择性别" v-model="gender">
|
||||||
|
<el-option v-for="item in genderOptions" :key="item.value" :label="item.label"
|
||||||
|
:value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="生日">
|
||||||
|
<el-date-picker v-model="birthdate" type="date" placeholder="请选择生日" :size="20" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="地区">
|
||||||
|
<el-cascader v-model="selectedRegion" :options="optionRegion" placeholder="请选择地区"></el-cascader>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="电话">
|
||||||
|
<el-input v-model="phone" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="updateProfile">保存修改</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
ref
|
||||||
|
} from 'vue';
|
||||||
|
import { useUserStore } from '../../store/user';
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const username = userStore.username;
|
||||||
|
const email = userStore.email;
|
||||||
|
const gender = ref(userStore.gender);
|
||||||
|
const birthdate = ref(userStore.birthdate);
|
||||||
|
const phone = ref(userStore.phone);
|
||||||
|
const selectedRegion = ref(userStore.selectedRegion);
|
||||||
|
const genderOptions = [{
|
||||||
|
value: '男',
|
||||||
|
label: '男'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '女',
|
||||||
|
label: '女'
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const optionRegion = ref([{
|
||||||
|
value: 'beijing',
|
||||||
|
label: '北京',
|
||||||
|
children: [{
|
||||||
|
value: 'chaoyang',
|
||||||
|
label: '朝阳区',
|
||||||
|
children: [{
|
||||||
|
value: 'subdistrict1',
|
||||||
|
label: '某街道1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'subdistrict2',
|
||||||
|
label: '某街道2'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'haidian',
|
||||||
|
label: '海淀区',
|
||||||
|
children: [{
|
||||||
|
value: 'subdistrict3',
|
||||||
|
label: '某街道3'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'subdistrict4',
|
||||||
|
label: '某街道4'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'shanghai',
|
||||||
|
label: '上海',
|
||||||
|
children: [{
|
||||||
|
value: 'pudong',
|
||||||
|
label: '浦东新区',
|
||||||
|
children: [{
|
||||||
|
value: 'subdistrict5',
|
||||||
|
label: '某街道5'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'subdistrict6',
|
||||||
|
label: '某街道6'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}, ],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const logout = () => {
|
||||||
|
// 注销逻辑
|
||||||
|
console.log("已注销");
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateProfile = () => {
|
||||||
|
userStore.updateProfile({
|
||||||
|
username: userStore.username,
|
||||||
|
email: userStore.email,
|
||||||
|
gender: gender.value,
|
||||||
|
birthdate: birthdate.value,
|
||||||
|
phone: phone.value,
|
||||||
|
selectedRegion: selectedRegion.value,
|
||||||
|
});
|
||||||
|
console.log('用户资料已更新');
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.top {
|
||||||
|
background-color: white;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col {
|
||||||
|
font-size: 20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-exit {
|
||||||
|
font-size: 12px;
|
||||||
|
padding-right: 20px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
margin-top: 20px;
|
||||||
|
background-color: white;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.username,
|
||||||
|
.email {
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue