jiangbei-mini-h5/src/subPages/pages/reportProblems/detail.vue

<!--
 * @Author: zhanghaifeng
 * @Date: 2025-07-08 13:31:49
 * @LastEditors: zhanghaifeng
 * @LastEditTime: 2025-07-09 09:30:02
 * @Description: 
 * @FilePath: /jiangbei-mini-h5/src/subPages/pages/reportProblems/detail.vue
-->
<script lang="ts" setup>
import { getQuestionReportDetail } from '@/api/questionReqort';
import { QuestionDetailRes } from '@/api/questionReqort/types';
import { onLoad } from '@dcloudio/uni-app';
import { computed, ref } from 'vue';


const questDetail = ref<QuestionDetailRes>()

const statusText = computed(() => {
  const status = questDetail.value?.status
  if (status === 1) return '已解答'
  if (status === 2) return '已上报'
  return '待解答'
})

const personListText = computed(() => {
  const personList = questDetail.value?.personList || ''
  return personList
    .split(/[,，、]+/)
    .map(item => item.trim())
    .filter(Boolean)
    .join('、')
})

const loadDetail = async (id: string) => {
  questDetail.value = undefined
  const { data } = await getQuestionReportDetail(id)
  questDetail.value = data
}

onLoad(async (option) => {
  if (option && option.id) {
    await loadDetail(String(option.id))
  }
})
</script>

<template>
  <view class="p-[20px]">
    <view class="form-item">
      <view class="label">类型：</view>
      <view class="flex value">
        <view class="value">{{ questDetail?.questionType }}</view>
        <van-tag v-if="questDetail?.status === 0" color="red">待解答</van-tag>
        <van-tag v-if="questDetail?.status === 1" color="green">已解答</van-tag>
        <van-tag v-if="questDetail?.status === 2" color="#1989fa">已上报</van-tag>
      </view>
    </view>
    <!-- 问题标题 -->
    <!-- <view class="form-item">
      <view class="label">标题：</view>
      <view class="value">{{ questDetail?.questionTitle }}</view>
    </view> -->
    <!-- 问题内容 -->
    <view class="form-item">
      <view class="label">内容：</view>
      <view class="value">{{ questDetail?.questionContent }}</view>
    </view>
    <!-- 问题所在地 -->
    <view class="form-item">
      <view class="label">所在地：</view>
      <view class="value">{{ questDetail?.addrName }}</view>
    </view>
    <view class="form-item">
      <view class="label">状态：</view>
      <view class="value">{{ statusText }}</view>
    </view>
    <view class="form-item">
      <view class="label">当事人：</view>
      <view class="value" v-if="personListText">{{ personListText }}</view>
      <view class="value text-[#e3e3e3]" v-else>暂无</view>
    </view>
    <view class="form-item">
      <view class="label">联系人：</view>
      <view class="value" v-if="questDetail?.contactPerson">{{ questDetail?.contactPerson }}</view>
      <view class="value text-[#e3e3e3]" v-else>暂无</view>
    </view>
    <view class="form-item">
      <view class="label">联系电话：</view>
      <view class="value" v-if="questDetail?.contactPhone">{{ questDetail?.contactPhone }}</view>
      <view class="value text-[#e3e3e3]" v-else>暂无</view>
    </view>
    <van-divider></van-divider>
    <!-- 问题解答 -->
    <view class="form-item" v-if="questDetail?.status === 1">
      <view class="label">解答：</view>
      <view class="value" v-if="questDetail?.questionAnswer">{{ questDetail?.questionAnswer }}</view>
      <view class="value text-[#e3e3e3]" v-else>暂无</view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.form-item {
  display: flex;
  // align-items: center;
  padding: 10px;
  .label {
    width: 80px;
  }
  .value {
    flex: 1;
    word-break: break-all;
  }
}
</style>