From 9fbe6af81c664dd61f28fbb038f998c4383cfeb0 Mon Sep 17 00:00:00 2001
From: xiao-ming77 <1486704365@qq.com>
Date: Thu, 21 Nov 2024 22:50:46 +0800
Subject: [PATCH] 111

---
 frontend/src/View/express/ExpressForm.vue | 393 ++++++++++---------
 frontend/src/View/express/ExpressList.vue | 449 +++++++++++-----------
 2 files changed, 452 insertions(+), 390 deletions(-)

diff --git a/frontend/src/View/express/ExpressForm.vue b/frontend/src/View/express/ExpressForm.vue
index d415628..556398f 100644
--- a/frontend/src/View/express/ExpressForm.vue
+++ b/frontend/src/View/express/ExpressForm.vue
@@ -1,186 +1,229 @@
 <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-row>
-        </el-row>
-        <el-form label-width="auto" class="form" ref="sendFormRef">
-          <el-form-item>
-            <template #label>
-              <span style="color: red;">*</span> 姓名
-            </template>
-            <el-input placeholder="请填写真实姓名" v-model="express.sename"></el-input>
-          </el-form-item>
-          <el-form-item>
-            <template #label>
-              <span style="color: red;">*</span> 联系电话
-            </template>
-            <el-input placeholder="请填写手机号码或者固话号码" v-model="express.sephone"></el-input>
-          </el-form-item>
-<!--          <el-form-item>-->
-<!--            <template #label>-->
-<!--              <span style="color: red;">*</span> 省市区-->
-<!--            </template>-->
-<!--            <el-input placeholder="请选择省市区" v-model="express.region"></el-input>-->
-<!--          </el-form-item>-->
-          <el-form-item>
-            <template #label>
-              <span style="color: red;">*</span> 详细地址
-            </template>
-            <el-input placeholder="请填写详细地址" v-model="express.seaddress"></el-input>
-          </el-form-item>
-<!--          <el-form-item label="公司名称">-->
-<!--            <el-input placeholder="请填写公司名称" v-model="express.company"></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="receive-btn">收</el-button>
-          <el-row>
-            <el-button class="btn">地址薄</el-button>
-            <el-button class="btn">智能填写</el-button>
-          </el-row>
-        </el-row>
-        <el-form label-width="auto" class="form" ref="receiveFormRef">
-          <el-form-item>
-            <template #label>
-              <span style="color: red;">*</span> 姓名
-            </template>
-            <el-input placeholder="请填写真实姓名" v-model="express.rename"></el-input>
-          </el-form-item>
-          <el-form-item>
-            <template #label>
-              <span style="color: red;">*</span> 联系电话
-            </template>
-            <el-input placeholder="请填写手机号码或者固话号码" v-model="express.rephone"></el-input>
-          </el-form-item>
-<!--          <el-form-item>-->
-<!--            <template #label>-->
-<!--              <span style="color: red;">*</span> 省市区-->
-<!--            </template>-->
-<!--            <el-input placeholder="请选择省市区" v-model="express.region"></el-input>-->
-<!--          </el-form-item>-->
-          <el-form-item>
-            <template #label>
-              <span style="color: red;">*</span> 详细地址
-            </template>
-            <el-input placeholder="请填写详细地址" v-model="express.readdress"></el-input>
-          </el-form-item>
-<!--          <el-form-item label="公司名称">-->
-<!--            <el-input placeholder="请填写公司名称" v-model="express.company"></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>
-          <el-radio value="1">预约上门取件</el-radio>
-          <el-radio value="0">自行联系快递员取件</el-radio>
-        </el-radio-group>
-      </el-row>
-    </el-row>
-    <el-row class="panel send-panel">
-      <el-button @click="submitForm" class="confirm-btn">下单</el-button>
-    </el-row>
-  </el-row>
+	<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-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-item>
+					<el-form-item prop="phone">
+						<template #label>
+							联系电话
+						</template>
+						<el-input v-model="senderForm.phone" 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>
+					<el-form-item prop="address">
+						<template #label>
+							详细地址
+						</template>
+						<el-input v-model="senderForm.address" placeholder="请填写发件人详细地址"></el-input>
+					</el-form-item>
+					<el-form-item label="公司名称">
+						<el-input v-model="senderForm.company" placeholder="请填写发件人公司名称"></el-input>
+					</el-form-item>
+				</el-form>
+			</el-row>
+			<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-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-item>
+					<el-form-item prop="phone">
+						<template #label>
+							联系电话
+						</template>
+						<el-input v-model="receiverForm.phone" 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>
+					<el-form-item prop="address">
+						<template #label>
+							详细地址
+						</template>
+						<el-input v-model="receiverForm.address" placeholder="请填写收件人详细地址"></el-input>
+					</el-form-item>
+					<el-form-item label="公司名称">
+						<el-input v-model="receiverForm.company" 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>
+			</el-row>
+		</el-row>
+
+		<el-row class="panel send-panel">
+			<el-button class="confirm-btn" @click="submitForm">下单</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'
+					}]
+				}
+			};
+		},
+		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 setup>
-import { ref } from 'vue';
+<style>
+	.required {
+		color: red;
+		margin-right: 5px;
+	}
 
-const sendFormRef = ref(null); // 用于操作寄件表单
-const receiveFormRef = ref(null); // 用于操作收件表单
+	.send-btn {
+		border-radius: 100%;
+		padding: 10px;
+		background-color: black;
+		color: white;
+	}
 
-const express = ref({
-  sename: '',
-  sephone: '',
-  seaddress: '',
-  rename: '',
-  rephone: '',
-  readdress: '',
-  phone: '',
-  // region: '',
-  // company: ''
-});
-// 提交表单的逻辑
-const submitForm = async () => {
-  try {
-    await sendFormRef.value.validate(); // 验证寄件表单
-    await receiveFormRef.value.validate(); // 验证收件表单
+	.receive-btn {
+		background-color: red;
+		color: white;
+	}
 
-    // 如果验证通过，可以进行下一步操作，比如提交数据
-    console.log('寄件表单数据:', sendFormData.value);
-    console.log('收件表单数据:', receiveFormData.value);
-    // 在这里添加表单提交的相关逻辑
-  } catch (error) {
-    console.log('表单验证失败:', error);
-  }
-};
-</script>
+	.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;
+	}
 
-<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;
-   align-items: flex-start;
-   justify-content: center;
- }
- .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 {
-   width: 40px;
-   height: 10px;
- }
- .send-label {
-   font-weight: 600;
- }
- .confirm-btn {
-   background-color: royalblue;
-   color: white;
- }
+	.send-label {
+		font-weight: 600;
+	}
 
+	.confirm-btn {
+		background-color: royalblue;
+		color: white;
+	}
 </style>
\ No newline at end of file
diff --git a/frontend/src/View/express/ExpressList.vue b/frontend/src/View/express/ExpressList.vue
index f212e8f..6861b48 100644
--- a/frontend/src/View/express/ExpressList.vue
+++ b/frontend/src/View/express/ExpressList.vue
@@ -1,218 +1,237 @@
-<script setup>
-import { Delete, Edit, Plus } from '@element-plus/icons-vue'
-import { ref } from 'vue'
-import {
-  expressListService,
-  expressAddService,
-  expressUpdateService,
-  expressDeleteService
-} from '@/api/express';
-import { ElMessage, ElMessageBox } from "element-plus";
-
-// 快递列表数据模型
-const expressList = ref([]);
-const visibleDrawer = ref(false);
-const drawerTitle = ref('');
-const expressModel = ref({
-  expressid: '',
-  sename: '',
-  sephone: '',
-  seaddress: '',
-  rename: '',
-  rephone: '',
-  readdress: '',
-  issigned: '',
-  signtime: '',
-});
-
-// 分页条数据模型
-const pageNum = ref(1); // 当前页
-const total = ref(20); // 总条数
-const pageSize = ref(3); // 每页条数
-
-const onSizeChange = (size) => {
-  pageSize.value = size;
-  fetchExpressList();
-};
-
-const onCurrentChange = (num) => {
-  pageNum.value = num;
-  fetchExpressList();
-};
-
-const fetchExpressList = async () => {
-  const params = {
-    pageNum: pageNum.value,
-    pageSize: pageSize.value,
-    // 以下参数需要与ExpressMapper接口中的list方法参数一致
-    id: null, // 假设您希望根据用户ID查询，如果没有这个需求可以删除
-    sename: '',
-    sephone: '',
-    seaddress: '',
-    rename: '',
-    rephone: '',
-    readdress: '',
-    issigned: '',
-    signtime: '',
-  };
-  try {
-    const result = await expressListService(params);
-    expressList.value = result.data.items;
-    total.value = result.data.total;
-  } catch (error) {
-    console.error('获取快递列表失败:', error);
-    ElMessage.error('获取快递列表失败');
-  }
-};
-
-fetchExpressList();
-
-const showAddDialog = (title) => {
-  clearData();
-  drawerTitle.value = title;
-  visibleDrawer.value = true;
-};
-
-const clearData = () => {
-  expressModel.value = {
-    expressid: '',
-    sename: '',
-    sephone: '',
-    seaddress: '',
-    rename: '',
-    rephone: '',
-    readdress: '',
-    issigned: '',
-    signtime: '',
-  };
-};
-
-const addExpress = async () => {
-  await expressAddService(expressModel.value);
-  ElMessage.success('添加成功');
-  visibleDrawer.value = false;
-  await fetchExpressList();
-};
-
-const showEditDialog = (row, title) => {
-  visibleDrawer.value = true;
-  drawerTitle.value = title;
-  expressModel.value = { ...row };
-};
-
-const updateExpress = async () => {
-  await expressUpdateService(expressModel.value);
-  ElMessage.success("更新成功");
-  visibleDrawer.value = false;
-  await fetchExpressList();
-};
-
-const deleteExpress = (row) => {
-  ElMessageBox.confirm(
-      '你确认要删除该快递信息吗？',
-      '温馨提示',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }
-  ).then(async () => {
-    await expressDeleteService(row.id);
-    ElMessage.success("删除成功");
-    await fetchExpressList();
-  });
-};
-</script>
-
 <template>
-  <el-card class="page-container">
-    <template #header>
-      <div class="header">
-        <span>快递管理</span>
-        <div class="extra">
-          <el-button type="primary" @click="showAddDialog('添加快递')">添加快递</el-button>
-        </div>
-      </div>
-    </template>
-
-    <el-table :data="expressList" style="width: 100%">
-      <el-table-column label="订单号" prop="expressid"></el-table-column>
-      <el-table-column label="发件人" prop="sename"></el-table-column>
-      <el-table-column label="发件人电话" prop="sephone"></el-table-column>
-      <el-table-column label="发件人地址" prop="seaddress"></el-table-column>
-      <el-table-column label="收件人" prop="rename"></el-table-column>
-      <el-table-column label="收件人电话" prop="rephone"></el-table-column>
-      <el-table-column label="收件人地址" prop="readdress"></el-table-column>
-      <el-table-column label="签收时间" prop="signtime"></el-table-column>
-      <el-table-column label="状态" prop="issigned"></el-table-column>
-      <el-table-column label="操作" width="100">
-        <template #default="{ row }">
-          <el-button :icon="Edit" circle plain type="primary" @click="showEditDialog(row,'编辑快递')"></el-button>
-          <el-button :icon="Delete" circle plain type="danger" @click="deleteExpress(row)"></el-button>
-        </template>
-      </el-table-column>
-      <template #empty>
-        <el-empty description="没有数据" />
-      </template>
-    </el-table>
-
-    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
-                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
-                   @size-change="onSizeChange"
-                   @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>
-  </el-card>
-
-  <!-- 抽屉 -->
-  <el-drawer v-model="visibleDrawer" :title="drawerTitle" direction="rtl" size="50%">
-    <el-form :model="expressModel" label-width="100px">
-      <el-form-item label="订单号">
-        <el-input v-model="expressModel.expressid" placeholder="请输入订单号"></el-input>
-      </el-form-item>
-      <el-form-item label="发件人">
-        <el-input v-model="expressModel.sename" placeholder="请输入发件人"></el-input>
-      </el-form-item>
-      <el-form-item label="发件人电话">
-        <el-input v-model="expressModel.sephone" placeholder="请输入发件人电话"></el-input>
-      </el-form-item>
-      <el-form-item label="发件人地址">
-        <el-input v-model="expressModel.seaddress" placeholder="请输入发件人地址"></el-input>
-      </el-form-item>
-      <el-form-item label="收件人">
-        <el-input v-model="expressModel.rename" placeholder="请输入收件人"></el-input>
-      </el-form-item>
-      <el-form-item label="收件人电话">
-        <el-input v-model="expressModel.rephone" placeholder="请输入收件人电话"></el-input>
-      </el-form-item>
-      <el-form-item label="收件人地址">
-        <el-input v-model="expressModel.readdress" placeholder="请输入收件人地址"></el-input>
-      </el-form-item>
-      <el-form-item label="签收时间">
-        <el-date-picker v-model="expressModel.signtime" type="date" placeholder="请选择签收时间"></el-date-picker>
-      </el-form-item>
-      <el-form-item label="状态">
-        <el-select v-model="expressModel.issigned" placeholder="请选择状态">
-          <el-option label="未签收" value="0"></el-option>
-          <el-option label="已签收" value="1"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="expressModel.id ? updateExpress() : addExpress()">
-          {{ expressModel.id ? '更新' : '添加' }}
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </el-drawer>
+	<el-row class="page">
+		<el-row class="block-view" v-for="(item,index) in expressList">
+			<el-row class="top">
+				<el-row>运单号：{{item.express_no}}</el-row>
+				<el-row class="top-time">签收时间: {{item.s_datetime}}</el-row>
+			</el-row>
+			<el-row class="express-view">
+				<el-row class="express-no-view">
+					<el-text class="city">{{item.senderCity}}</el-text>
+					<el-text class="user">{{item.senderName}}</el-text>
+				</el-row>
+				<el-row class="express-no-view">
+					<el-image class="arrow" src="/arrow.png"></el-image>
+					<el-text class="sign">已签收</el-text>
+				</el-row>
+				<el-row class="express-no-view">
+					<el-text class="city">{{item.receiveCity}}</el-text>
+					<el-text class="user">{{item.receiveName}}</el-text>
+				</el-row>
+				<el-row class="express-icon-view">
+					<el-icon @click="deleteByIndex(index)">
+						<Delete />
+					</el-icon>
+					<el-icon @click="modify(item,index)">
+						<Edit />
+					</el-icon>
+				</el-row>
+				<el-row class="line-view"></el-row>
+			</el-row>
+		</el-row>
+
+		<el-dialog v-model="dialogVisible" title="提示" width="500">
+			<span>确定删除此快递信息吗？</span>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="dialogVisible = false">取消</el-button>
+					<el-button type="primary" @click="deleteByIndexConfirm()">
+						确定
+					</el-button>
+				</div>
+			</template>
+		</el-dialog>
+
+		<el-dialog v-model="dialogFormVisible" title="编辑快递表单" width="500">
+			<el-form :model="form">
+				<el-form-item label="寄件城市" :label-width="formLabelWidth">
+					<el-input v-model="form.senderCity" autocomplete="off" />
+				</el-form-item>
+				<el-form-item label="寄件人" :label-width="formLabelWidth">
+					<el-input v-model="form.senderName" autocomplete="off" />
+				</el-form-item>
+				<el-form-item label="收件城市" :label-width="formLabelWidth">
+					<el-input v-model="form.receiveCity" autocomplete="off" />
+				</el-form-item>
+				<el-form-item label="收件人" :label-width="formLabelWidth">
+					<el-input v-model="form.receiveName" autocomplete="off" />
+				</el-form-item>
+			</el-form>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="dialogFormVisible = false">取消</el-button>
+					<el-button type="primary" @click="modifyConfirm()">
+						确定
+					</el-button>
+				</div>
+			</template>
+		</el-dialog>
+
+	</el-row>
 </template>
 
-<style lang="scss" scoped>
-.page-container {
-  min-height: 100%;
-  box-sizing: border-box;
-
-  .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-}
-</style>
+<script setup>
+	import {
+		Delete,
+		Edit
+	} from '@element-plus/icons-vue'
+	import {
+		reactive,
+		ref
+	} from 'vue';
+	import {
+		ElMessageBox
+	} from 'element-plus';
+
+	const expressList = reactive([{
+			"express_no": "SF123456789",
+			"senderCity": "深圳市",
+			"senderName": "叶先生1",
+			"receiveCity": "福州市",
+			"receiveName": "林先生",
+			"s_datetime": "2024-11-11 11:31:00"
+		},
+		{
+			"express_no": "SF123456789",
+			"senderCity": "深圳市",
+			"senderName": "叶先生2",
+			"receiveCity": "福州市",
+			"receiveName": "林先生",
+			"s_datetime": "2024-11-11 11:31:00"
+		},
+		{
+			"express_no": "SF123456789",
+			"senderCity": "深圳市",
+			"senderName": "叶先生3",
+			"receiveCity": "福州市",
+			"receiveName": "林先生",
+			"s_datetime": "2024-11-11 11:31:00"
+		},
+		{
+			"express_no": "SF123456789",
+			"senderCity": "深圳市",
+			"senderName": "叶先生4",
+			"receiveCity": "福州市",
+			"receiveName": "林先生",
+			"s_datetime": "2024-11-11 11:31:00"
+		}
+	])
+
+	const dialogVisible = ref(false)
+	let formIndex = -1
+	const deleteByIndex = index => {
+		dialogVisible.value = true
+		formIndex = index
+	}
+	const deleteByIndexConfirm = () => {
+		dialogVisible.value = false
+		expressList.splice(formIndex, 1)
+	}
+	
+	const dialogFormVisible = ref(false)
+	const formLabelWidth = '140px'
+	const form = reactive({
+		"express_no": "",
+		"senderCity": "",
+		"senderName": "",
+		"receiveCity": "",
+		"receiveName": "",
+		"s_datetime": ""
+	})
+	
+	const modify = (item,index)=>{
+		dialogFormVisible.value = true
+		form.senderCity = item.senderCity
+		form.senderName = item.senderName
+		form.receiveCity = item.receiveCity
+		form.receiveName = item.receiveName
+		formIndex = index
+	}
+	
+	const modifyConfirm = ()=>{
+		dialogFormVisible.value = false
+		const item = expressList[formIndex]
+		item.senderCity = form.senderCity
+		item.senderName = form.senderName
+		item.receiveCity = form.receiveCity
+		item.receiveName = form.receiveName
+	}
+	
+	
+</script>
+
+<style>
+	.page {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		background-color: white;
+		line-height: 20px;
+	}
+
+	.block-view {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.top {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		padding: 20px;
+		color: gray;
+	}
+
+	.top-time {
+		margin-left: 180px;
+	}
+
+	.express-view {
+		display: flex;
+		width: 100%;
+		justify-content: space-around;
+	}
+
+	.express-no-view {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.city {
+		font-size: large;
+		font-weight: 500;
+	}
+
+	.user {
+		margin-top: 10px;
+		font-size: small;
+		color: gray;
+	}
+
+	.arrow {
+		width: 40px;
+		height: 10px;
+	}
+
+	.sign {
+		font-size: small;
+		margin-top: 10px;
+		color: red;
+		font-weight: 100;
+	}
+
+	.express-icon-view {
+		width: 10%;
+		display: flex;
+		justify-content: space-around;
+	}
+
+	.line-view {
+		height: 0.5px;
+		width: 95%;
+		background-color: lightgray;
+		margin-top: 20px;
+		margin-bottom: 20px;
+	}
+</style>
\ No newline at end of file