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>
|
||||
@ -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>
|
||||
@ -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