ADD file via upload

Take.vue

@@ -0,0 +1,618 @@
+<script setup>
+defineOptions({
+  name: 'TakeIndex',
+})
+import { computed, ref } from 'vue'
+import { ElButton, ElDrawer, ElMessage } from 'element-plus'
+import { CircleCloseFilled } from '@element-plus/icons-vue'
+import router from '@/router'
+import {
+  getMessageFromService,
+  getSendUserService,
+  userConfirmMessageService,
+  userDeleteMessageService,
+  pickUpExpressService,
+} from '@/api/user.js'
+import { useInfoStore } from '@/stores/info.js'
+
+const infoStore = useInfoStore()
+const visible = ref(false)
+const msgList = ref([])
+
+// 获取别人发给用户的信息
+const getMessageFromOthers = async () => {
+  let result = await getMessageFromService(infoStore.info.id)
+  for (const msg of result.data) {
+    msg.senderName = await getWhoSendMsg(msg.sendUserId) // 获取发件人姓名并保存到消息中
+  }
+  msgList.value = result.data
+}
+
+getMessageFromOthers()
+
+const getWhoSendMsg = async id => {
+  let result = await getSendUserService(id)
+  return result.data
+}
+
+// 用户确认收到消息
+const confirm = async id => {
+  let result = await userConfirmMessageService(id)
+  if (result.code == 200) {
+    ElMessage({
+      message: result.message,
+      type: 'success',
+      grouping: true,
+    })
+    getMessageFromOthers()
+  }
+}
+
+const calculate = computed(() => {
+  return msgList.value.filter(msg => msg.mark === 1).length
+})
+
+// 转换日期格式
+const formatDate = cellValue => {
+  const date = new Date(cellValue)
+  return date.toLocaleString()
+}
+
+// 用户删除消息
+const deleteMsg = async id => {
+  let result = await userDeleteMessageService(id)
+  if (result.code == 200) {
+    ElMessage({
+      message: result.message,
+      type: 'success',
+      grouping: true,
+    })
+    getMessageFromOthers()
+  }
+}
+
+// 一键已读
+const clearDot = async () => {
+  const unreadMessages = msgList.value.filter(msg => msg.mark === 1)
+  if (unreadMessages.length === 0) {
+    ElMessage({
+      message: '没有未读消息!',
+      type: 'warning',
+    })
+    return
+  }
+  // 循环处理每一条未读消息
+  for (const msg of unreadMessages) {
+    // 调用确认消息服务，传入消息 ID
+    let result = await userConfirmMessageService(msg.id)
+    if (result.code !== 200) {
+      // 如果某条消息处理失败，给出提示
+      ElMessage({
+        message: `消息ID ${msg.id} 确认失败: ${result.message}`,
+        type: 'error',
+      })
+    }
+  }
+  ElMessage({
+    message: '消息确认成功!',
+    type: 'success',
+  })
+  // 处理完后，重新获取消息列表
+  getMessageFromOthers()
+}
+
+const goToChat = userName => {
+  router.push({
+    name: 'Chat',
+    params: {
+      userName: userName,
+    },
+  })
+}
+
+// 代取快递模组
+const PickUpExpressDTO = ref({
+  master: '',
+  expressCode: '',
+  claimCode: '',
+})
+
+// 代取快递
+const pickUp = async () => {
+  let result = await pickUpExpressService(PickUpExpressDTO.value)
+  if (result.code == 200) {
+    ElMessage({
+      message: result.message,
+      type: 'success',
+      grouping: true,
+    })
+  } else {
+    ElMessage({
+      message: result.message,
+      type: 'warning',
+      grouping: true,
+    })
+  }
+  clear()
+}
+
+const clear = () => {
+  ;(PickUpExpressDTO.value.master = ''),
+    (PickUpExpressDTO.value.expressCode = ''),
+    (PickUpExpressDTO.value.claimCode = '')
+}
+</script>
+
+<template>
+  <div class="container">
+    <div class="bg">
+      <el-row :gutter="0">
+        <el-col :span="3">
+          <img
+            src="@/assets/gsl/logo1.png"
+            style="width: 100px; height: 100px; margin: 0 25px"
+          />
+        </el-col>
+        <el-col :span="3" @click="router.push('/alLogin')">
+          <p class="div-p">首页</p>
+        </el-col>
+
+        <el-popover placement="bottom" :width="150" trigger="hover">
+          <template #reference>
+            <el-col :span="3">
+              <p class="div-p">快递服务</p>
+            </el-col>
+          </template>
+          <div class="funcs" @click="router.push('/get')">收件</div>
+          <el-divider style="margin-top: 10px; margin-bottom: 10px" />
+          <div class="funcs" @click="router.push('/send')">寄件</div>
+          <el-divider style="margin-top: 10px; margin-bottom: 10px" />
+          <div class="funcs" @click="router.push('/query')">查询快递</div>
+          <el-divider style="margin-top: 10px; margin-bottom: 10px" />
+          <div class="funcs" @click="router.push('/take')">代取快递</div>
+        </el-popover>
+        <el-popover placement="bottom" :width="150" trigger="hover">
+          <template #reference>
+            <el-col :span="3">
+              <p class="div-p">可持续发展</p>
+            </el-col>
+          </template>
+          <div class="funcs">ESG</div>
+          <el-divider style="margin-top: 10px; margin-bottom: 10px" />
+          <div class="funcs">零碳未来</div>
+          <el-divider style="margin-top: 10px; margin-bottom: 10px" />
+          <div class="funcs">社会关怀</div>
+        </el-popover>
+
+        <el-popover placement="bottom" :width="150" trigger="hover">
+          <template #reference>
+            <el-col :span="3">
+              <p class="div-p">关于我们</p>
+            </el-col>
+          </template>
+          <div class="funcs">企业介绍</div>
+          <el-divider style="margin-top: 10px; margin-bottom: 10px" />
+          <div class="funcs">联系方式</div>
+          <el-divider style="margin-top: 10px; margin-bottom: 10px" />
+          <div class="funcs">开发人员</div>
+        </el-popover>
+
+        <div class="userPic">
+          <button class="inbox-btn" @click="visible = true">
+            <svg
+              viewBox="0 0 512 512"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"
+              ></path>
+            </svg>
+            <!-- msg-count是新消息的数量 -->
+            <span class="msg-count">{{ calculate }}</span>
+          </button>
+          <el-drawer v-model="visible" :show-close="false">
+            <template #header="{ close, titleId, titleClass }">
+              <!-- 消息头 -->
+              <h4 :id="titleId" :class="titleClass">消息列表</h4>
+              <!-- 一键已读功能按钮 -->
+              <p class="readAll" @click="clearDot">一键已读</p>
+              <!-- 关闭抽屉功能 -->
+              <el-button type="danger" @click="close">
+                <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
+                Close
+              </el-button>
+              <div></div>
+              <br /><br />
+            </template>
+            <!-- 卡片，数组名叫 msgList-->
+            <el-card
+              style="max-width: 560px; margin-bottom: 10px"
+              v-for="item in msgList"
+              :key="item.id"
+            >
+              <template #header>
+                <div class="card-header">
+                  <!-- 发件人 -->
+                  <el-badge v-if="item.mark == 1" is-dot class="item"></el-badge
+                  ><span @click="goToChat(item.senderName)"
+                    >发件人：{{ item.senderName }}
+                  </span>
+                  <br />
+                  <span>发送时间：{{ formatDate(item.createTime) }}</span>
+                  <!-- 删除功能 -->
+                  <el-icon
+                    color="red"
+                    style="float: right; cursor: pointer"
+                    @click="deleteMsg(item.id)"
+                    ><Close
+                  /></el-icon>
+                </div>
+              </template>
+              <!-- 内容 -->
+              <p class="text item">{{ item.content }}</p>
+              <!-- 确认功能 -->
+              <el-button
+                size="default"
+                type="primary"
+                style="float: right; margin-bottom: 10px"
+                @click="confirm(item.id)"
+                v-if="item.mark == 1"
+                >确认</el-button
+              >
+            </el-card>
+          </el-drawer>
+        </div>
+      </el-row>
+    </div>
+
+    <br />
+    <span>
+      <div class="title">
+        <strong style="font-size: 50px; color: red; letter-spacing: 5px"
+          >代取快递</strong
+        >
+      </div>
+
+      <!-- 代取主体 -->
+      <form class="form" :model="PickUpExpressDTO">
+        <input
+          placeholder="请输入快递主人姓名"
+          class="input2"
+          type="text"
+          v-model="PickUpExpressDTO.master"
+        />
+        <input
+          placeholder="请输入快递码"
+          class="input2"
+          type="text"
+          v-model="PickUpExpressDTO.expressCode"
+        />
+        <input
+          placeholder="请输入取件码"
+          class="input2"
+          type="text"
+          v-model="PickUpExpressDTO.claimCode"
+        />
+        <button @click="pickUp" class="pButton" type="button">代取</button>
+      </form>
+    </span>
+  </div>
+</template>
+
+<style scoped>
+body {
+  background: #f5f7fa;
+}
+.container {
+  width: 125vh;
+  height: 100vh;
+  background-color: white;
+  margin: 0 auto;
+  position: relative;
+}
+a {
+  color: inherit; /* 使链接文本颜色继承父元素的颜色 */
+  text-decoration: none; /* 移除下划线 */
+}
+
+/* 如果你还想改变鼠标悬停时的样式 */
+a:hover {
+  text-decoration: none; /* 悬停时仍然没有下划线 */
+  cursor: auto; /* 改变鼠标指针样式为默认，或根据需要设置其他样式 */
+}
+
+.el-row {
+  margin-bottom: 20px;
+  justify-content: space-between;
+}
+.el-col {
+  border-radius: 4px;
+  margin-right: 50px;
+  width: 100px;
+  height: 100px;
+}
+.userPic {
+  height: 90px;
+  width: 90px;
+  margin-top: 15px;
+}
+.el-col:last-child {
+  margin-right: 0px;
+}
+.el-row:last-child {
+  margin-bottom: 0;
+}
+.inbox-btn {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  border: none;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.082);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background-color: #464646;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+.inbox-btn svg path {
+  fill: white;
+}
+.inbox-btn svg {
+  height: 17px;
+  transition: all 0.3s;
+}
+.msg-count {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  background-color: rgb(255, 255, 255);
+  border-radius: 50%;
+  font-size: 0.7em;
+  color: red;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.inbox-btn:hover {
+  transform: scale(1.1);
+}
+.div-p {
+  font-size: 13px;
+  text-align: center;
+  margin-top: 20%;
+}
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+.el-col:hover {
+  cursor: pointer;
+  border-bottom: 1px solid red;
+  color: red;
+}
+.funcs {
+  text-align: center;
+  cursor: pointer;
+}
+.funcs:hover {
+  color: red;
+}
+.title {
+  width: 1169px;
+  height: 150px;
+  /* background-color: aqua; */
+  text-align: center;
+  padding-top: 50px;
+}
+.queryArea {
+  display: flex;
+  align-items: center; /* 垂直居中对齐 */
+  margin-top: 100px;
+  margin-left: 315px;
+}
+.el-button,
+.el-button.is-round {
+  padding: 20px 20px;
+}
+:root {
+  --el-border-radius-base: 1px 5px 5px 1px;
+}
+.el-input__wrapper {
+  border-radius: 5px 0 0 5px;
+}
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+.demo-collapse {
+  position: absolute;
+  left: 10%;
+}
+.item {
+  margin-top: 10px;
+  margin-right: 10px;
+}
+.goodsInfo {
+  width: 1000px;
+  height: 50px;
+  border-radius: 25px;
+  background-color: #eea8b8;
+  margin-bottom: 20px;
+}
+.goodsInfo > p {
+  margin-top: 15px;
+  margin-left: 16px;
+}
+.goodsInfo:hover {
+  background-color: pink;
+  height: 200px;
+}
+
+.btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  border: none;
+  background-color: transparent;
+  position: relative;
+}
+
+.btn:hover > .icon {
+  transform: scale(1.2);
+  cursor: pointer;
+  transition: 0.2s linear;
+}
+
+.btn:focus > .icon {
+  fill: #fd1853;
+  animation: grosseur 0.2s linear;
+}
+
+@keyframes grosseur {
+  0% {
+    width: 50px;
+    height: 50px;
+    fill: #fd1853;
+  }
+
+  100% {
+    width: 30px;
+    height: 30px;
+    fill: #fd1853;
+  }
+}
+.readAll {
+  font-size: 10px;
+  margin-right: 20px;
+  cursor: pointer;
+}
+.readAll:hover {
+  color: deepskyblue;
+}
+.expandable {
+  width: 1000px;
+  height: 50px;
+  background-color: #eea8b8;
+  border-radius: 25px;
+  margin-bottom: 25px;
+  overflow: hidden;
+  transition: all 1s ease;
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);
+}
+
+.expandable.expanded {
+  height: auto; /* 或者设置具体的像素值 */
+}
+
+.hidden-content {
+  display: none;
+  transition:
+    opacity 0.8s ease,
+    max-height 0.8s ease;
+}
+
+.expandable.expanded .hidden-content {
+  display: block;
+}
+
+/* From Uiverse.io by aboalsim114 */
+.form {
+  margin-left: 25%;
+  width: 600px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 20px;
+  background: linear-gradient(to bottom, #0077be, #3b8df2);
+  border-radius: 10px;
+  overflow: hidden;
+  perspective: 1000px;
+  transform-style: preserve-3d;
+  transform: rotateX(-10deg);
+  transition: all 0.3s ease-in-out;
+  box-shadow:
+    rgba(0, 0, 0, 0.4) 0px 2px 4px,
+    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
+    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+  animation: form-animation 0.5s ease-in-out;
+}
+
+@keyframes form-animation {
+  from {
+    transform: rotateX(-30deg);
+    opacity: 0;
+  }
+
+  to {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+}
+
+.input2 {
+  padding: 10px;
+  border-radius: 5px;
+  background-color: transparent;
+  transition:
+    border-color 0.3s ease-in-out,
+    background-color 0.3s ease-in-out,
+    transform 0.3s ease-in-out,
+    box-shadow 0.3s ease-in-out;
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  color: rgb(255, 255, 255);
+  border: 2px solid #3b8df2;
+  box-shadow:
+    rgba(0, 0, 0, 0.4) 0px 2px 4px,
+    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
+    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+}
+
+.input2::placeholder {
+  color: #fff;
+}
+
+.input2:hover,
+.input2:focus {
+  border-color: #3b8df2;
+  background-color: rgba(255, 255, 255, 0.2);
+  transform: scale(1.05) rotateY(20deg);
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
+  outline: none;
+}
+
+.pButton {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  background-color: #3b8df2;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  transform: rotateX(-10deg);
+  transition: all 0.3s ease-in-out;
+  box-shadow:
+    rgba(0, 0, 0, 0.4) 0px 2px 4px,
+    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
+    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+}
+
+.pButton:hover {
+  background-color: #0077be;
+  font-size: 17px;
+  transform: scale(1.05) rotateY(20deg) rotateX(10deg);
+  box-shadow:
+    rgba(0, 0, 0, 0.4) 0px 2px 4px,
+    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
+    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+}
+</style>