上传代码

CampusExpressDelivery/src/view/errand/errandInfo.vue

@@ -0,0 +1,180 @@
+<template>
+  <a-card :loading="loading">
+    <div >
+      <a-descriptions size="default" bordered class="txt">
+        <a-descriptions-item label="头像">
+          <template v-slot>
+            <a-avatar :src="errandInfo.errandAvatarUrl" style="width: 100px;height: 100px;"/>
+          </template>
+        </a-descriptions-item>
+        <a-descriptions-item label="用户名称">{{ errandInfo?.errandName }}</a-descriptions-item>
+        <a-descriptions-item label="用户性别">
+          <div v-if="errandInfo.gender === 1">
+            <a-tag color="blue">男</a-tag>
+          </div>
+          <div v-else-if="errandInfo.gender === 0">
+            <a-tag color="pink">女</a-tag>
+          </div>
+        </a-descriptions-item>
+        <a-descriptions-item label="联系方式">{{ errandInfo?.errandPhone }}</a-descriptions-item>
+        <a-descriptions-item label="配送范围">{{ errandInfo?.distributionScope }}</a-descriptions-item>
+        <a-descriptions-item label="银行卡号">{{ errandInfo?.bankCard }}</a-descriptions-item>
+        <a-descriptions-item label="身份证正面">
+          <template v-slot>
+            <a-image :src="errandInfo.frontIdCard" style="width: 158.5px; height: 100px;"/>
+          </template>
+        </a-descriptions-item>
+        <a-descriptions-item label="身份证反面">
+          <template v-slot>
+            <a-image :src="errandInfo.backIdCard" style="width: 158.5px; height: 100px"/>
+          </template>
+        </a-descriptions-item>
+        <a-descriptions-item label="当前状态">
+          <div v-if="errandInfo.state === 0">
+            <a-tag color="orange">未审核</a-tag>
+          </div>
+          <div v-else-if="errandInfo.state === 1">
+            <a-tag color="green">快送员正常</a-tag>
+          </div>
+          <div v-else-if="errandInfo.state === 2">
+            <a-tag color="red">快送员驳回</a-tag>
+          </div>
+        </a-descriptions-item>
+
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'businessAvatar'">
+            <a-avatar :src="record.businessAvatar"/>
+          </template>
+          <template v-else-if="column.key === 'license'">
+            <a-image :src="record.license" style="width: 100px;height: 100px;"></a-image>
+          </template>
+          <template v-else-if="column.key === 'frontIdCard'">
+            <a-image :src="record.frontIdCard" style="width: 100px;height: 100px;"></a-image>
+          </template>
+          <template v-else-if="column.key === 'backIdCard'">
+            <a-image :src="record.backIdCard" style="width: 100px;height: 100px;"></a-image>
+          </template>
+          <template v-if="column.key === 'state'">
+            <div v-if="record.state === 0">
+              <a-tag color="orange">未审核</a-tag>
+            </div>
+            <div v-else-if="record.state === 1">
+              <a-tag color="green">已通过</a-tag>
+            </div>
+            <div v-else-if="record.state === 2">
+              <a-tag color="red">未通过</a-tag>
+            </div>
+          </template>
+        </template>
+      </a-descriptions>
+    </div>
+    <a-space>
+      <div class="button-box">
+        <a-button
+            class="button-s"
+            size="small"
+            type="default"
+            style="color: blue"
+            @click="backPage">返回
+        </a-button>
+        <a-button
+            class="button-s"
+            size="small" v-if="state === 0"
+            type="primary"
+            style="color: white; margin-left: 15px"
+            danger
+            @click="update(2)">未通过
+        </a-button>
+        <a-button
+            class="button-s"
+            size="small" v-if="state === 0"
+            type="primary"
+            style="color: white; margin-left: 15px"
+            @click="update(1)">通过
+        </a-button>
+      </div>
+    </a-space>
+  </a-card>
+</template>
+
+<script setup lang="ts">
+import {useRoute} from "vue-router";
+import {onMounted, ref} from "vue";
+import myAxios from "../../api/myAxios";
+import {backPage} from "../../utils/TableConfig";
+import {message} from "ant-design-vue";
+import router from "../../router";
+
+const state = ref(0)
+const route = useRoute();
+const loading = ref(false);
+const errandInfo: any = ref({});
+const errandId = ref<string | null>(null);
+
+
+if (typeof route.query.id === 'string') {
+  errandId.value = route.query.id;
+}
+
+console.log(errandId.value);
+
+onMounted(() => {
+  if(errandId.value !== null) {
+    getErrandVO(errandId.value);
+  }
+});
+
+const getErrandVO = async (id: string) => {
+  loading.value = true;
+  try {
+    // 修改参数传递方式为query params
+    const res: any = await myAxios.post('/errand/get/id', null, {
+      params: {
+        errandId1: id  // 直接使用参数id
+      }
+    });
+
+    console.log(res)
+    if (res.code === 0 && res.data) {
+      errandInfo.value = res.data || {};
+      state.value = res.data.state ?? 0;
+    }else if(res.code===40000){
+      message.error(res.description);
+      router.go(-1)
+    }else {
+      message.error(`获取数据失败：${res.message}`);
+    }
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    message.error('请求过程中出现错误，请稍后再试');
+  } finally {
+    loading.value = false;
+  }
+}
+
+const update = async (newState: number) => {
+  try {
+    // 构建请求体，仅包含'id'和'state'
+    const requestBody = {
+      id: errandId.value || '',
+      state: newState,
+    };
+
+    const res: any = await myAxios.post("/errand/update", requestBody, {
+      headers: {
+        'Content-Type': 'application/json', // 修改为JSON格式，如果你的后端接受JSON的话
+      }
+    });
+
+    if (res.code === 0) {
+      message.success("已审核");
+      state.value = newState;  // 更新本地状态
+    } else {
+      message.error(`审核失败：${res.message}`);
+    }
+  } catch (error) {
+    console.error("更新状态失败:", error);
+    message.error('请求过程中出现错误');
+  }
+}
+</script>