xiaokuaisong-Web/CampusExpressDelivery/src/view/errand/errandInfo.vue

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