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

<script lang="ts" setup>
import { addQuestionReportData, pageQuestionReportData } from '@/api/questionReqort'
import { AddQuestionReportDataReq, QuestionListRes } from '@/api/questionReqort/types'
import { ref } from 'vue'
import GridAddress from '@/components/address/gridAddress/index.vue'
import { showNotify } from 'vant';

const active = ref(0)

const formData = ref<AddQuestionReportDataReq & { location?: string }>({})
const range = ref([])
const rules = ref({
  type: [{ required: true, message: '请选择问题类型' }],
  title: [{ required: true, message: '请输入问题标题' }],
  content: [{ required: true, message: '请输入问题内容' }],
  location: [{ required: true, message: '请输入问题所在地' }],
})

/** 上报问题 */
const addressList = ref([])
const handleAddressFinish = (value) => {
  formData.value.addrName = value.selectedOptions[value.tabIndex].areaName
  addressList.value = value
}
const submit = async () => {
  if (!addressList.value || addressList.value.length === 0) {
    showNotify('请选择问题所在地')
    return
  }
  const { data } = await addQuestionReportData({
    ...formData.value,
    streetCode: addressList.value.selectedOptions[1] ? addressList.value.selectedOptions[1].areaCode : '',
    streetName: addressList.value.selectedOptions[1] ? addressList.value.selectedOptions[1].areaName : '',
    communityCode: addressList.value.selectedOptions[2] ? addressList.value.selectedOptions[2].areaCode : '',
    communityName: addressList.value.selectedOptions[2] ? addressList.value.selectedOptions[2].areaName : '',
    grid: addressList.value.selectedOptions[3] ? addressList.value.selectedOptions[3].areaCode : '',
    gridName: addressList.value.selectedOptions[3] ? addressList.value.selectedOptions[3].areaName : '',
  })
  if (data) {
    uni.showToast({
      title: '上报成功',
      icon: 'success',
      duration: 1000,
    })
    formData.value = {}
  }
}

/**
 * 已上报问题
 */
const list = ref<QuestionListRes[]>([])
const pageInfo = ref({
  pageNumber: 1,
  pageSize: 10,
})
const questList = async () => {
  const { data } = await pageQuestionReportData({
    pageNumber: pageInfo.value.pageNumber,
    pageSize: pageInfo.value.pageSize,
  })
  list.value = list.value.concat(data.records)
  pageInfo.value.pageNumber++
  finished.value = data.records.length < pageInfo.value.pageSize
  loading.value = false
  if (data.records.length === 0 || !data.records) {
    finished.value = true
  }
}
const loading = ref(false)
const finished = ref(false)

/** 跳转问题详情 */
const handleGoDetail = (item: QuestionListRes) => {
  uni.navigateTo({
    url: `/subPages/pages/reportProblems/detail?id=${item.uuid}`,
  })
}

const areaShow = ref(false)
const hanleSelectArea = () => {
  areaShow.value = true
}
</script>

<template>
  <van-tabs v-model:active="active" type="card" class="top-tabs">
    <van-tab title="上报问题">
      <view class="tab-container">
        <uni-forms :modelValue="formData" :rules="rules" label-align="right" label-width="80">
          <uni-forms-item label="问题类型" required name="questionType">
            <uni-data-select v-model="formData.questionType" :localdata="range"></uni-data-select>
          </uni-forms-item>
          <!-- 问题标题 -->
          <uni-forms-item label="问题标题" required name="questionTitle">
            <uni-easyinput v-model="formData.questionTitle" placeholder="请输入问题标题"></uni-easyinput>
          </uni-forms-item>
          <!-- 问题内容 -->
          <uni-forms-item label="问题内容" required name="questionContent">
            <uni-easyinput v-model="formData.questionContent" type="textarea" placeholder="请输入问题内容"></uni-easyinput>
          </uni-forms-item>
          <!-- 问题所在地 -->
          <uni-forms-item label="问题所在地" required name="addrName">
            <uni-easyinput v-model="formData.addrName" placeholder="请输入问题所在地" @focus="hanleSelectArea"></uni-easyinput>
            <GridAddress v-model="areaShow" @finish="handleAddressFinish"></GridAddress>
          </uni-forms-item>
        </uni-forms>
        <van-button class="w-full mb-3" type="primary" @click="submit">提交</van-button>
      </view>
    </van-tab>
    <van-tab title="已上报问题">
      <view class="tab-container">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="questList">
          <view v-for="item in list" :key="item.uuid" class="list-item-style">
            <view class="top">
              <view class="title">{{ item.questionTitle }}</view>
              <van-button plain hairline size="mini" type="primary" @click="handleGoDetail(item)">查看详情</van-button>
            </view>
            <view>定位：{{ item.addrName }}</view>
            <view class="flex gap-3">
              <view class="type">问题类型</view>
              <van-tag color="#CFFECE" text-color="black">{{ item.questionType }}</van-tag>
            </view>
          </view>
        </van-list>
      </view>
    </van-tab>
  </van-tabs>
</template>

<style lang="scss" scoped>
.top-tabs {
  :deep(.van-tabs__nav) {
    margin: 0;
  }
}
.tab-container {
  padding: 20px;
  padding-bottom: 30px;
  min-height: calc(100vh - var(--van-tabs-card-height));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  > uni-view:first-child {
    flex: 1;
  }
}
.list-item-style {
  padding: 20px;
  margin-bottom: 10px;
  background-color: white;
  > view {
    margin-bottom: 10px;
  }
  .top {
    display: flex;
    align-items: center;
    .title {
      font-size: 20px;
      font-weight: bold;
      flex: 1;
    }
    .type {
      margin-right: 10px;
    }
  }
}
</style>